add breadcrumbs to post

Author: khendrikse

components/Breadcrumbs/breadcrumbs.module.scss

@@ -0,0 +1,16 @@
+.breadcrumbs {
+  span + span {
+    &:before {
+      content: '>';
+      font-size: 12px;
+      padding: 8px;
+    }
+  }
+
+  span {
+    text-transform: capitalize;
+    font-size: 14px;
+  }
+
+  margin-bottom: 8px;
+}

components/Breadcrumbs/index.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Link from 'next/link';
+import styles from './breadcrumbs.module.scss';
+
+const Breadcrumbs = ({ crumbs }) => {
+  const lastCrumb = crumbs.pop();
+
+  return (
+    <div className={styles.breadcrumbs}>
+      <span>
+        <Link href='/'>Home</Link>
+      </span>
+      {crumbs.map(crumb => (
+        <span>
+          <Link href={crumb.href}>{crumb.name}</Link>
+        </span>
+      ))}
+      <span>{lastCrumb.name}</span>
+    </div>
+  );
+};
+
+Breadcrumbs.propTypes = {
+  crumbs: PropTypes.arrayOf(
+    PropTypes.shape({ href: PropTypes.string, name: PropTypes.string })
+  )
+};
+
+export default Breadcrumbs;

pages/post/[postname].js

@@ -7,6 +7,7 @@ import Layout from 'components/Layout';
 import headerColor from 'helpers/post-header';
 import styles from 'styles/post.module.scss';
 import ProgressiveImage from 'components/ProgressiveImage';
+import Breadcrumbs from 'components/Breadcrumbs';
 
 export default function BlogPost({
   siteTitle,
@@ -34,7 +35,13 @@ export default function BlogPost({
         )}
         <div className='container'>
           <div className={styles.post__header__title}>
-            <h1>{frontmatter.title}</h1>
+            <Breadcrumbs
+              crumbs={[
+                { name: 'blog', href: '/blog' },
+                { name: frontmatter.title }
+              ]}
+            />
+            <h2>{frontmatter.title}</h2>
             <div className={styles.post__date_label}>{date}</div>
           </div>
         </div>

styles/post.module.scss

@@ -28,8 +28,9 @@
       position: relative;
       top: -34px;
 
-      h1 {
+      h2 {
         margin-top: 0;
+        font-size: 2em;
       }
     }
   }