add bcrumbs json

khendrikse · khendrikse · commit 49b47edd2a71 · 2022-01-20T19:20:42.000+01:00
diff --git a/components/Breadcrumbs/index.js b/components/Breadcrumbs/index.js
@@ -11,8 +11,8 @@ const Breadcrumbs = ({ crumbs }) => {
       <span>
         <Link href='/'>Home</Link>
       </span>
-      {crumbs.map(crumb => (
-        <span>
+      {crumbs.map((crumb, i) => (
+        <span key={`${crumb.name}-${i}`}>
           <Link href={crumb.href}>{crumb.name}</Link>
         </span>
       ))}
diff --git a/components/Layout/index.js b/components/Layout/index.js
@@ -3,13 +3,35 @@ import Head from 'next/head';
 import Navbar from '../Navbar';
 import Footer from '../Footer';
 
-export default function Layout({ children, pageTitle }) {
+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 }) {
   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>
+        )}
       </Head>
       <div className='wrapper'>
         <section className='layout'>
@@ -24,5 +46,8 @@ export default function Layout({ children, pageTitle }) {
 
 Layout.propTypes = {
   children: PropTypes.element,
-  pageTitle: PropTypes.string
+  pageTitle: PropTypes.string,
+  breadcrumbs: PropTypes.arrayOf(
+    PropTypes.shape({ name: PropTypes.string, item: PropTypes.string })
+  )
 };
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}>
+  <Layout pageTitle={title} breadcrumbs={[{ name: 'home', item: '' }]}>
     <div className='container'>
       <div className={styles.home__intro}>
         I am a Front-End Developer from The Netherlands with a background in
