Fix multi render issue on breadcrumb

Finished breadcrumb (still not perfect but works)
Cleanup

.gitignore

@@ -1,5 +1,6 @@
 /_old
 /tmp
+.env.*
 
 # Logs
 logs

ISSUES.md

@@ -0,0 +1,8 @@
+# Open issues that affect this project
+
+- [PostCss plugin is not executed when using Scss](#postcss-plugin-is-not-executed-when-using-scss)
+
+## PostCss plugin is not executed when using Scss
+
+- https://github.com/gatsbyjs/gatsby/issues/17887
+- https://github.com/larsenwork/postcss-easing-gradients/issues/11

TODO.md

@@ -39,8 +39,12 @@
 - [ ] move from bash script to [Nim][2]
 - [ ] check markdown for ["Vary sentence length"][3]
 - [ ] check markdown for [Readability][4]
+- [ ] generate [rich snippets][5]
+- [ ] use [Scheme customizations][6] to map post meta e.g. for authors
 
 [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/
 [2]: https://nim-lang.org/docs/tut1.html
 [3]: https://github.com/wooorm/write-music
 [4]: https://wooorm.com/readability/
+[5]: https://www.gatsbyjs.org/docs/seo/
+[6]: https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields

gatsby-config.js

@@ -4,17 +4,36 @@
  * @see https://www.gatsbyjs.org/docs/gatsby-config/
  */
 
+require('dotenv').config({
+  path: `.env.${process.env.NODE_ENV}`,
+})
+
 const path = require('path')
 const { yellow } = require('kleur')
-const { getPkgVersion, getSiteMetadata } = require('./gatsby/utils')
+const { getPkgVersion, siteMetadata } = require('./gatsby/utils')
 const { activeEnv } = require('./gatsby/environment')
 
 console.log(`Using environment: ${yellow(activeEnv)}\n`)
 
 module.exports = {
-  siteMetadata: getSiteMetadata(),
+  siteMetadata,
   plugins: [
-    'gatsby-plugin-layout',
+    {
+      resolve: 'gatsby-plugin-module-resolver',
+      options: {
+        root: './src',
+        aliases: {
+          '@app': './',
+          '@components': './components',
+          '@layouts': './layouts',
+          '@scripts': './scripts',
+          '@utils': './utils',
+          '@hooks': './hooks',
+          '@images': './images',
+        },
+      },
+    },
+    `gatsby-plugin-layout`,
     `gatsby-plugin-react-helmet`,
     {
       resolve: `gatsby-plugin-canonical-urls`,
@@ -25,12 +44,7 @@ module.exports = {
     },
     `gatsby-plugin-sass`,
     `gatsby-plugin-postcss`,
-    {
-      resolve: 'gatsby-plugin-purgecss',
-      options: {
-        // ignore: ['src/styles'],
-      },
-    },
+    'gatsby-plugin-purgecss',
     'gatsby-transformer-json',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',

gatsby/utils.js

@@ -1,5 +1,4 @@
 const pkg = require('../package.json')
-const { parsed } = require('dotenv').config()
 const metadata = require('../metadata')
 
 /**
@@ -41,13 +40,11 @@ module.exports.getPkgVersion = (dots = true) => {
 /**
  * Assign env data to metadata.
  */
-module.exports.getSiteMetadata = () => {
-  return {
-    ...metadata,
-    ...{
-      siteUrl: parsed.SITE_URL,
-    },
-  }
+module.exports.siteMetadata = {
+  ...metadata,
+  ...{
+    siteUrl: process.env.SITE_URL,
+  },
 }
 
 /**

metadata.js

@@ -20,6 +20,13 @@ module.exports = {
       name: 'About',
       link: '/about',
     },
+    {
+      name: 'Setup',
+      external: true,
+      // link: '/about/setup', use Notion API later?
+      link:
+        'https://www.notion.so/marvins/Setup-9ad349afe68942ae807dc31c9afccd7d',
+    },
     {
       name: 'Projects',
       link: '/projects',

package.json

@@ -40,14 +40,14 @@
   "dependencies": {
     "@ibm/plex": "^2.0.0",
     "dayjs": "^1.8.16",
-    "dotenv": "^8.1.0",
     "gatsby": "^2.15.28",
     "gatsby-image": "^2.2.23",
     "gatsby-plugin-canonical-urls": "^2.1.10",
     "gatsby-plugin-catch-links": "^2.1.12",
     "gatsby-plugin-humans-txt": "^1.1.4",
     "gatsby-plugin-layout": "^1.1.10",
     "gatsby-plugin-manifest": "^2.2.20",
+    "gatsby-plugin-module-resolver": "^1.0.3",
     "gatsby-plugin-postcss": "^2.1.10",
     "gatsby-plugin-purgecss": "^4.0.1",
     "gatsby-plugin-react-helmet": "^3.1.10",

src/components/Breadcrumb.jsx

@@ -1,71 +1,47 @@
 import React, { useContext } from 'react'
-import { useStaticQuery, graphql, Link } from 'gatsby'
-import { GlobalContext } from '../context'
+import { Link } from 'gatsby'
+import { GlobalContext } from '@app/context'
+import { useSiteMetadata } from '@hooks/use-site-metadata'
 
 const Breadcrumb = ({ location: { pathname } }) => {
-  const {
-    site: { siteMetadata },
-  } = useStaticQuery(query)
+  const siteMetadata = useSiteMetadata()
   const [state] = useContext(GlobalContext)
 
   const fragments = pathname.split('/')
   fragments.shift()
   fragments.pop()
 
   const menuLinks = siteMetadata.menuLinks
-  // const menuLinks = [
-  //   {
-  //     name: 'Projects',
-  //     link: '/projects',
-  //   },
-  //   {
-  //     name: 'Demo',
-  //     link: '/projects/demo',
-  //   },
-  // ]
 
-  console.log(state)
-  console.log(menuLinks)
-  console.log(fragments)
-
-  const path = menuLinks.filter(({ name, link }) => {
+  const path = menuLinks.filter(({ name, external }) => {
+    if (external) return false // ignore
     const menuIndex = fragments.indexOf(name.toLowerCase())
     if (menuIndex > -1) {
-      const menu = menuLinks[menuIndex]
-      console.log(menu)
-      return menu
+      return menuLinks[menuIndex]
     }
     return false
   })
 
-  console.log(path)
-  console.log(path.length)
-
   return state.title ? (
-    <div id="back">
-      <span>/ </span>
+    <div id="breadcrumb">
+      <span className="breadcrumb__divider" key="BCB">
+        /{' '}
+      </span>
       {path.map(({ name, link }, index) => (
-        <>
-          <Link to={link}>{name}</Link>
-          {index < path.length ? <span> / </span> : ''}
-        </>
+        <span key={`BCI${index}`}>
+          <Link to={link} className="breadcrumb__link">
+            {name}
+          </Link>
+          <span className="breadcrumb__divider">
+            {index < path.length ? ' / ' : null}
+          </span>
+        </span>
       ))}
-      <span>{state.title}</span>
+      <span className="breadcrumb__active" key="BCA">
+        {state.title}
+      </span>
     </div>
   ) : null
 }
 
-const query = graphql`
-  {
-    site {
-      siteMetadata {
-        menuLinks {
-          name
-          link
-        }
-      }
-    }
-  }
-`
-
 export default Breadcrumb

src/components/Time.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import dayjs from 'dayjs'
 
-import { isDev } from '../environment'
+import { isDev } from '@app/environment'
 import DataType from './DataType'
 
 const Time = ({ date, format = 'L' }) => {

src/components/logo.jsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { useStaticQuery, graphql } from 'gatsby'
 
-import logo from '../images/logo-white.svg'
+import logo from '@images/logo-white.svg'
 
 const Logo = () => {
   const data = useStaticQuery(query)

src/components/status.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import { capitalizeString } from '../utils/transform'
+import { capitalizeString } from '@utils/transform'
 
 const Status = ({ state }) => {
   const stateTransformed = capitalizeString(state)

src/hooks/use-site-metadata.js

@@ -0,0 +1,25 @@
+import { useStaticQuery, graphql } from 'gatsby'
+
+export const useSiteMetadata = () => {
+  const { site } = useStaticQuery(
+    graphql`
+      query SiteMetaData {
+        site {
+          siteMetadata {
+            title
+            author
+            description
+            siteUrl
+            keywords
+            menuLinks {
+              name
+              link
+            }
+          }
+        }
+      }
+    `
+  )
+
+  return site.siteMetadata
+}

src/html.js

@@ -0,0 +1,39 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+export default function HTML(props) {
+  return (
+    <html lang="en" {...props.htmlAttributes}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta httpEquiv="x-ua-compatible" content="ie=edge" />
+        <meta
+          name="viewport"
+          content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"
+        />
+        {props.headComponents}
+      </head>
+      <body {...props.bodyAttributes}>
+        {props.preBodyComponents}
+        <noscript key="noscript" id="gatsby-noscript">
+          This app works best with JavaScript enabled.
+        </noscript>
+        <div
+          key={`body`}
+          id="___gatsby"
+          dangerouslySetInnerHTML={{ __html: props.body }}
+        />
+        {props.postBodyComponents}
+      </body>
+    </html>
+  )
+}
+
+HTML.propTypes = {
+  htmlAttributes: PropTypes.object,
+  headComponents: PropTypes.array,
+  bodyAttributes: PropTypes.object,
+  preBodyComponents: PropTypes.array,
+  body: PropTypes.string,
+  postBodyComponents: PropTypes.array,
+}

src/layouts/Article.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import { scrollTo } from '../utils/animate'
-import { prefersReducedMotion } from '../utils/accessibility'
-import Lightbox from '../scripts/lightbox'
+import { scrollTo } from '@utils/animate'
+import { prefersReducedMotion } from '@utils/accessibility'
+import Lightbox from '@scripts/lightbox'
 
 class Article extends React.Component {
   scrollElements = []

src/layouts/header.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
-import Logo from '../components/Logo'
-import Navigation from '../components/Navigation'
-import Breadcrumb from '../components/Breadcrumb'
+import Logo from '@components/Logo'
+import Navigation from '@components/Navigation'
+import Breadcrumb from '@components/Breadcrumb'
 
 class Header extends React.Component {
   constructor(props) {
@@ -23,6 +23,10 @@ class Header extends React.Component {
     window.removeEventListener('scroll', this.handleScroll)
   }
 
+  shouldComponentUpdate(_, nextState) {
+    return !(this.state.sticky === nextState.sticky)
+  }
+
   handleScroll(event) {
     this.setState({
       sticky: window.pageYOffset > 0,