Update added breadcrumb

gatsby-config.js

@@ -109,9 +109,6 @@ module.exports = {
                 footnoteDefinition: 'container container--small',
                 paragraph: 'container container--small',
               },
-              tag: {
-                h2: 'color--red',
-              },
               remark: {
                 images: 'container',
                 prismjs: 'container container--small',
@@ -121,6 +118,7 @@ module.exports = {
         ],
       },
     },
+    `gatsby-plugin-remove-trailing-slashes`,
     'gatsby-plugin-catch-links',
     'gatsby-plugin-sitemap',
     {

gatsby/node/createPages.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const { bgYellow } = require('kleur')
+const { removeTrailingSlash } = require('../utils')
 
 module.exports = async ({ graphql, actions }) => {
   const { createPage } = actions
@@ -42,12 +43,13 @@ module.exports = async ({ graphql, actions }) => {
     }
 
     const templateName = capitalizeString(node.fields.source)
+    const slug = removeTrailingSlash(node.fields.slug)
 
     return createPage({
-      path: node.fields.slug,
+      path: slug,
       component: path.resolve(`./src/templates/${templateName}Single.jsx`),
       context: {
-        slug: node.fields.slug,
+        slug,
       },
     })
   })

gatsby/utils.js

@@ -49,3 +49,10 @@ module.exports.getSiteMetadata = () => {
     },
   }
 }
+
+/**
+ * Remove trainling slash from URI.
+ */
+module.exports.removeTrailingSlash = path => {
+  return path === `/` ? path : path.replace(/\/$/, '')
+}

metadata.js

@@ -13,23 +13,23 @@ module.exports = {
   ],
   menuLinks: [
     {
-      name: 'home',
+      name: 'Root',
       link: '/',
     },
     {
-      name: 'about',
+      name: 'About',
       link: '/about',
     },
     {
-      name: 'development',
-      link: '/development',
+      name: 'Projects',
+      link: '/projects',
     },
     {
-      name: 'photography',
+      name: 'Photography',
       link: '/photography',
     },
     {
-      name: 'writings',
+      name: 'Writings',
       link: '/writings',
     },
   ],

package.json

@@ -79,6 +79,7 @@
     "del-cli": "^3.0.0",
     "eslint": "^6.5.1",
     "eslint-config-react-app": "^5.0.2",
+    "gatsby-plugin-remove-trailing-slashes": "^2.1.9",
     "lighthouse": "^5.4.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^1.18.2",

src/components/Breadcrumb.jsx

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react'
+import { useStaticQuery, graphql, Link } from 'gatsby'
+import { GlobalContext } from '../context'
+
+const Breadcrumb = ({ location: { pathname } }) => {
+  const {
+    site: { siteMetadata },
+  } = useStaticQuery(query)
+  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 menuIndex = fragments.indexOf(name.toLowerCase())
+    if (menuIndex > -1) {
+      const menu = menuLinks[menuIndex]
+      console.log(menu)
+      return menu
+    }
+    return false
+  })
+
+  console.log(path)
+  console.log(path.length)
+
+  return state.title ? (
+    <div id="back">
+      <span>/ </span>
+      {path.map(({ name, link }, index) => (
+        <>
+          <Link to={link}>{name}</Link>
+          {index < path.length ? <span> / </span> : ''}
+        </>
+      ))}
+      <span>{state.title}</span>
+    </div>
+  ) : null
+}
+
+const query = graphql`
+  {
+    site {
+      siteMetadata {
+        menuLinks {
+          name
+          link
+        }
+      }
+    }
+  }
+`
+
+export default Breadcrumb

src/components/logo.jsx

@@ -4,15 +4,7 @@ import { useStaticQuery, graphql } from 'gatsby'
 import logo from '../images/logo-white.svg'
 
 const Logo = () => {
-  const data = useStaticQuery(graphql`
-    query SiteMetaQuery {
-      site {
-        siteMetadata {
-          title
-        }
-      }
-    }
-  `)
+  const data = useStaticQuery(query)
 
   return (
     <div id="logo">
@@ -23,4 +15,14 @@ const Logo = () => {
   )
 }
 
+const query = graphql`
+  query SiteMetaQuery {
+    site {
+      siteMetadata {
+        title
+      }
+    }
+  }
+`
+
 export default Logo

src/context.jsx

@@ -1,37 +1,16 @@
-import React from 'react'
+import React, { useState } from 'react'
 
-const defaultContextValue = {
-  data: {
-    menuOpen: false,
-  },
-  set: () => {},
+const DEFAULT_STATE = {
+  title: null,
 }
 
-const { Provider, Consumer } = React.createContext(defaultContextValue)
+const GlobalContext = React.createContext([DEFAULT_STATE, () => {}])
+const { Consumer, Provider } = GlobalContext
 
-class ContextProviderComponent extends React.Component {
-  constructor(props) {
-    super(props)
+const GlobalProvider = props => {
+  const [state, setState] = useState(DEFAULT_STATE)
 
-    this.setData = this.setData.bind(this)
-    this.state = {
-      ...defaultContextValue,
-      set: this.setData,
-    }
-  }
-
-  setData(newData) {
-    this.setState(state => ({
-      data: {
-        ...state.data,
-        ...newData,
-      },
-    }))
-  }
-
-  render() {
-    return <Provider value={this.state}>{this.props.children}</Provider>
-  }
+  return <Provider value={[state, setState]}>{props.children}</Provider>
 }
 
-export { Consumer as ContextConsumer, ContextProviderComponent }
+export { Consumer as GlobalConsumer, GlobalProvider, GlobalContext }

src/layouts/header.jsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import Logo from '../components/Logo'
 import Navigation from '../components/Navigation'
+import Breadcrumb from '../components/Breadcrumb'
 
 class Header extends React.Component {
   constructor(props) {
@@ -31,8 +32,9 @@ class Header extends React.Component {
   render() {
     return (
       <header id="header" className={this.state.sticky ? 'sticky' : ''}>
-        <Logo></Logo>
-        <Navigation></Navigation>
+        <Logo />
+        <Breadcrumb location={this.props.location} />
+        <Navigation />
       </header>
     )
   }

src/layouts/index.jsx

@@ -1,16 +1,16 @@
 import React from 'react'
-import { ContextProviderComponent } from '../context'
+import { GlobalProvider } from '../context'
 import { HelmetProvider } from 'react-helmet-async'
 
 import Header from './Header'
 
-const Layout = ({ children }) => (
-  <ContextProviderComponent>
+const App = ({ children, location }) => (
+  <GlobalProvider>
     <HelmetProvider>
-      <Header></Header>
+      <Header location={location}></Header>
       <main>{children}</main>
     </HelmetProvider>
-  </ContextProviderComponent>
+  </GlobalProvider>
 )
 
-export default Layout
+export default App

src/pages/404.jsx

@@ -1,19 +1,14 @@
 import React from 'react'
 import { Helmet } from 'react-helmet-async'
-import { ContextConsumer } from '../context'
 import SEO from '../components/SEO'
 
 const Page = () => (
-  <ContextConsumer>
-    {({ data, set }) => (
-      <>
-        <SEO title="ERROR" />
-        <Helmet bodyAttributes={{ page: 'error' }} />
+  <>
+    <SEO title="ERROR" />
+    <Helmet bodyAttributes={{ page: 'error' }} />
 
-        <h1>ERROR</h1>
-      </>
-    )}
-  </ContextConsumer>
+    <h1>ERROR</h1>
+  </>
 )
 
 export default Page