add bcrumbs everywhere

khendrikse · khendrikse · commit 9192682b6e52 · 2022-01-20T20:05:08.000+01:00
diff --git a/components/Layout/index.js b/components/Layout/index.js
@@ -1,37 +1,19 @@
 import PropTypes from 'prop-types';
 import Head from 'next/head';
+import generateBreadcrumbs from 'helpers/generate-breadcrumbs';
 import Navbar from '../Navbar';
 import Footer from '../Footer';
 
-const generateBreadcrumbs = crumbs => {
-  const BASE_URL = 'https://khendrikse.github.io/';
-
-  const json = {
-    '@context': 'https://schema.org/',
-    '@type': 'BreadcrumbList',
-    itemListElement: crumbs.map(({ name, item }, index) => ({
-      '@type': 'ListItem',
-      position: index + 1,
-      name,
-      item: `${BASE_URL}${item}`
-    }))
-  };
-
-  return JSON.stringify(json);
-};
-
-export default function Layout({ children, pageTitle, breadcrumbs }) {
+export default function Layout({ children, pageTitle, breadcrumbs = [] }) {
   return (
     <>
       <Head>
         <meta name='viewport' content='width=device-width, initial-scale=1' />
         <meta name='description' content='Online space, blog and portfolio' />
         <title>{pageTitle}</title>
-        {breadcrumbs && (
-          <script type='application/ld+json'>
-            {generateBreadcrumbs(breadcrumbs)}
-          </script>
-        )}
+        <script type='application/ld+json'>
+          {generateBreadcrumbs(breadcrumbs)}
+        </script>
       </Head>
       <div className='wrapper'>
         <section className='layout'>
diff --git a/helpers/generate-breadcrumbs.js b/helpers/generate-breadcrumbs.js
@@ -0,0 +1,19 @@
+const generateBreadcrumbs = crumbs => {
+  const BASE_URL = 'https://khendrikse.github.io/';
+  const crumbsList = [{ name: 'home', item: '' }, ...crumbs];
+
+  const json = {
+    '@context': 'https://schema.org/',
+    '@type': 'BreadcrumbList',
+    itemListElement: crumbsList.map(({ name, item }, index) => ({
+      '@type': 'ListItem',
+      position: index + 1,
+      name,
+      item: `${BASE_URL}${item}`
+    }))
+  };
+
+  return JSON.stringify(json);
+};
+
+export default generateBreadcrumbs;
diff --git a/pages/about.js b/pages/about.js
@@ -4,7 +4,7 @@ import ProgressiveImage from 'components/ProgressiveImage';
 import styles from 'styles/about.module.scss';
 
 const About = ({ title }) => (
-  <Layout pageTitle={title}>
+  <Layout pageTitle={title} breadcrumbs={[{ name: 'about', item: 'about/' }]}>
     <div className='container'>
       <h2 className='page__title'>About</h2>
       <div className={styles.about}>
diff --git a/pages/blog.js b/pages/blog.js
@@ -4,7 +4,7 @@ import Layout from 'components/Layout';
 import PostList from 'components/PostList';
 
 const Index = ({ posts, title }) => (
-  <Layout pageTitle={title}>
+  <Layout pageTitle={title} breadcrumbs={[{ name: 'blog', item: 'blog/' }]}>
     <div className='container'>
       <h2 className='section__title'>Blog</h2>
       <PostList posts={posts} />
diff --git a/pages/index.js b/pages/index.js
@@ -6,7 +6,7 @@ import styles from 'styles/home.module.scss';
 import createFeeds from '../scripts/feed';
 
 const Index = ({ posts, title }) => (
-  <Layout pageTitle={title} breadcrumbs={[{ name: 'home', item: '' }]}>
+  <Layout pageTitle={title}>
     <div className='container'>
       <div className={styles.home__intro}>
         I am a Front-End Developer from The Netherlands with a background in
diff --git a/pages/post/[postname].js b/pages/post/[postname].js
@@ -13,13 +13,20 @@ export default function BlogPost({
   siteTitle,
   frontmatter,
   markdownBody,
-  date
+  date,
+  slug
 }) {
   // eslint-disable-next-line react/jsx-no-useless-fragment
   if (!frontmatter) return <></>;
 
   return (
-    <Layout pageTitle={`${siteTitle} | ${frontmatter.title}`}>
+    <Layout
+      pageTitle={`${siteTitle} | ${frontmatter.title}`}
+      breadcrumbs={[
+        { name: 'blog', item: 'blog/' },
+        { name: frontmatter.title, item: `post/${slug}` }
+      ]}
+    >
       <article className={styles.post}>
         {frontmatter.cover_image ? (
           <ProgressiveImage
@@ -79,7 +86,8 @@ BlogPost.propTypes = {
   siteTitle: PropTypes.string,
   frontmatter: PropTypes.object,
   markdownBody: PropTypes.string,
-  date: PropTypes.array
+  date: PropTypes.array,
+  slug: PropTypes.string
 };
 
 export async function getStaticProps({ ...ctx }) {
@@ -94,7 +102,8 @@ export async function getStaticProps({ ...ctx }) {
       siteTitle: config.title,
       frontmatter: data.data,
       markdownBody: data.content,
-      date
+      date,
+      slug: postname
     }
   };
 }
diff --git a/pages/projects.js b/pages/projects.js
@@ -5,7 +5,7 @@ import styles from 'styles/projects.module.scss';
 import Project from 'components/Project';
 
 const Projects = ({ title, projects = [] }) => (
-  <Layout pageTitle={title}>
+  <Layout pageTitle={title} breadcrumbs={[{ name: 'projects', item: 'projects/' }]}>
     <div className='container'>
       <h2 className='section__title'>Projects</h2>
       <div className={styles.projects__card__grid}>
