feat: Refactor Gatsby link out of components

Author: alexwilson

components/legacy-components/src/article-card/article-card.js

@@ -1,44 +1,45 @@
-import { Link } from "gatsby"
+import { Link } from "@reach/router"
 import { format as formatDate } from 'date-fns'
 import React from "react"
 import ResponsiveImage from '../responsive-image'
 
-export default function articleCard({article, withBody = true, withImage = true, withDate = true}) {
+export default function articleCard({ article, linkImplementation = Link, withBody = true, withImage = true, withDate = true }) {
 
   const date = new Date(article.date)
+  const LinkImplementation = linkImplementation
 
   return (
     <div className="alex-card">
 
       <div className="alex-card__content--container">
 
         <div className="alex-card__title">
-          <h3><Link to={ article.slug }>{ article.title }</Link></h3>
+          <h3><LinkImplementation to={article.slug}>{article.title}</LinkImplementation></h3>
         </div>
 
         {(withBody !== false) ?
           <div className="alex-card__abstract">
-          <p>
-            { article.content.excerpt }
-          </p>
-        </div>
-        :null}
+            <p>
+              {article.content.excerpt}
+            </p>
+          </div>
+          : null}
 
         {(withDate !== false) ?
           <div className="alex-card__timetamp">
             <span className="dateline">
-              <time dateTime={date.toISOString()}>{ formatDate(date, "d MMM yyyy") }</time>
+              <time dateTime={date.toISOString()}>{formatDate(date, "d MMM yyyy")}</time>
             </span>
           </div>
-        :null}
+          : null}
 
       </div>
 
       {(withImage !== false && article.image && article.image.thumbnail) ?
         <div className="alex-card__image">
-          <ResponsiveImage src={ article.image.thumbnail } width={ 400 } />
+          <ResponsiveImage src={article.image.thumbnail} width={400} />
         </div>
-      :null}
+        : null}
 
     </div>
   )

components/legacy-components/src/article-card/index.js

@@ -1,4 +1,4 @@
 import "./article-card.scss";
 import ArticleCard from "./article-card"
-export {ArticleCard}
+export { ArticleCard }
 export default ArticleCard

components/legacy-components/src/header/header.js

@@ -176,11 +176,13 @@ class Header extends Component {
 Header.propTypes = {
   siteTitle: PropTypes.string,
   image: PropTypes.string,
+  location: PropTypes.object
 }
 
 Header.defaultProps = {
   siteTitle: `Alex Wilson`,
   image: null,
+  location: { pathname: "/" }
 }
 
 export default Header

services/personal-website/src/components/article-card.js

@@ -0,0 +1,5 @@
+import React from 'react';
+import { ArticleCard } from '@alexwilson/legacy-components/src/article-card';
+import { Link } from 'gatsby';
+
+export default (props) => <ArticleCard linkImplementation={Link} {...props} />

services/personal-website/src/components/related-articles.js

@@ -1,8 +1,8 @@
 import React from 'react'
 import { useStaticQuery, graphql } from "gatsby"
-import ArticleCard from "@alexwilson/legacy-components/src/article-card"
+import ArticleCard from "./article-card"
 
-export default ({article: currentArticle}) => {
+export default ({ article: currentArticle }) => {
   const data = useStaticQuery(graphql`
     query RelatedArticles {
       posts: allContent(
@@ -38,7 +38,7 @@ export default ({article: currentArticle}) => {
       if (article.contentId === currentArticle.contentId) continue;
       if (relatedArticles.size >= maxArticles) break;
 
-      const isWeeknote = (article.topics.filter(({topic}) => topic == "weeknotes").length > 0)
+      const isWeeknote = (article.topics.filter(({ topic }) => topic == "weeknotes").length > 0)
 
       // Hack to reduce relevance of weeknotes.
       if (granularity >= 1 && isWeeknote) {
@@ -65,7 +65,7 @@ export default ({article: currentArticle}) => {
     <>
       {Array.from(relatedArticles.values()).map(
         (article) => <ArticleCard key={article.contentId} article={article} withBody={false} withDate={false}
-      />)}
+        />)}
     </>
   )
 }

services/personal-website/src/pages/index.js

@@ -1,36 +1,36 @@
 import React from "react"
 import { graphql } from 'gatsby'
 
-import ArticleCard from "@alexwilson/legacy-components/src/article-card"
+import ArticleCard from "../components/article-card"
 import Layout from "../components/layout"
 import SEO from "../components/seo"
 
 const IndexPage = ({ data, location }) => (
   <Layout location={location}>
-    <SEO title="Home" keywords={[`gatsby`, `application`, `react`]} />
+    <SEO title="Home" />
     <div className="alex-home">
-        <section className="alex-home__section">
-        </section>
-        <section className="alex-home__section">
-            <h2><a className="heading" href="/blog/">Latest Writing</a></h2>
-            <div className="alex-home__tilestack">
-            {data.allButWeeknotes.nodes.map((node) =>
-              <div key={node.contentId} className="alex-home__tilestack-item">
-                <ArticleCard article={node} withImage={false} withDate={false} />
-              </div>
-            )}
+      <section className="alex-home__section">
+      </section>
+      <section className="alex-home__section">
+        <h2><a className="heading" href="/blog/">Latest Writing</a></h2>
+        <div className="alex-home__tilestack">
+          {data.allButWeeknotes.nodes.map((node) =>
+            <div key={node.contentId} className="alex-home__tilestack-item">
+              <ArticleCard article={node} withImage={false} withDate={false} />
             </div>
-        </section>
-        <section className="alex-home__section">
-            <h2><a className="heading" href="/topic/weeknotes">Latest Notes</a></h2>
-            <div className="alex-home__tilestack">
-            {data.onlyWeeknotes.nodes.map((node) =>
-              <div key={node.contentId} className="alex-home__tilestack-item">
-                <ArticleCard article={node} withImage={false} withDate={false} />
-              </div>
-            )}
+          )}
+        </div>
+      </section>
+      <section className="alex-home__section">
+        <h2><a className="heading" href="/topic/weeknotes">Latest Notes</a></h2>
+        <div className="alex-home__tilestack">
+          {data.onlyWeeknotes.nodes.map((node) =>
+            <div key={node.contentId} className="alex-home__tilestack-item">
+              <ArticleCard article={node} withImage={false} withDate={false} />
             </div>
-        </section>
+          )}
+        </div>
+      </section>
     </div>
   </Layout>
 )
@@ -71,6 +71,11 @@ export const query = graphql`
         }
       }
     }
+    site {
+      siteMetadata {
+        siteUrl
+      }
+    }
   }
 
 `