breadcrumb update

Author: pandeyprashant123-coder

gatsby-config.js

@@ -40,5 +40,19 @@ module.exports = {
         icon: `src/res/favicon.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: `gatsby-plugin-breadcrumb`,
+      options: {
+        // defaultCrumb: optional To create a default crumb
+        // see Click Tracking default crumb example below
+        defaultCrumb: {
+          location: {
+            pathname: "/",
+          },
+          crumbLabel: "Home",
+          crumbSeparator: " /",
+        },
+      }
+    },
   ],
 }

package-lock.json

@@ -6,6 +6,7 @@
   "author": "William McGonagle <[email protected]>",
   "dependencies": {
     "gatsby": "^4.25.1",
+    "gatsby-plugin-breadcrumb": "^12.3.1",
     "gatsby-plugin-image": "^2.25.0",
     "gatsby-plugin-manifest": "^4.25.0",
     "gatsby-plugin-react-svg": "^3.3.0",

package.json

@@ -9,12 +9,14 @@ import * as React from "react"
 
 import Header from "./header"
 import Footer from "./footer"
+import {Breadcrumb} from 'gatsby-plugin-breadcrumb'
 
-const Layout = ({ children }) => {
+const Layout = ({ children,location='',crumbLabel }) => {
 
   return (
     <>
       <Header />
+      <Breadcrumb location={location} crumbLabel={crumbLabel} />
       <main>{children}</main>
       <Footer />
     </>

src/components/layout.js

@@ -1,18 +1,22 @@
 import * as React from "react"
-import { GatsbyImage } from "gatsby-plugin-image";
+import { GatsbyImage } from "gatsby-plugin-image"
 import { Link } from "gatsby"
-function Person({ first, last, photo, biography }) {
 
-    let slug = `${first}-${last}`.toLowerCase();
-    let description = biography.split(' ').slice(0, 40).join(' ');
+function Person({ first, last, photo, biography, location = "", crumbLabel }) {
+  let slug = `${first}-${last}`.toLowerCase()
+  let description = biography.split(" ").slice(0, 40).join(" ")
 
-    return <Link className="block w-full h-full" to={`/team/${slug}`}>
-        <div className="rounded shadow p-4 h-full">
-          <img src={photo} class="rounded-full w-1/2 mb-4" />
-            <h3 className="text-lg font-bold">{first} {last}</h3>
-            <p className="text-md">{description || ""}</p>
-        </div>
+  return (<>
+    <Link className="block w-full h-full" to={`/team/${slug}`}>
+      <div className="rounded shadow p-4 h-full">
+        <img src={photo} class="rounded-full w-1/2 mb-4" />
+        <h3 className="text-lg font-bold">
+          {first} {last}
+        </h3>
+        <p className="text-md">{description || ""}</p>
+      </div>
     </Link>
-
+  </>
+  )
 }
 export default Person

src/components/person.js

@@ -5,12 +5,12 @@ import Seo from "../components/seo"
 
 import Markdown from "../components/markdown"
 
-function AccessibilityPage() {
+function AccessibilityPage({location}) {
 
     const fileData = require('!!raw-loader!../../data/accessibility.txt')
 
     return (
-        <Layout>
+        <Layout location={location} crumbLabel="Accessibility">
             <section>
                 <div
                 class="mx-auto max-w-screen-xl px-4 py-48 lg:flex  lg:items-center"

src/pages/accessibility.js

@@ -3,12 +3,12 @@ import * as React from "react"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-function ContactPage() {
+function ContactPage({location}) {
 
     const social = require('../../data/general.json').social
 
     return (
-        <Layout>
+        <Layout location={location} crumbLabel="Contact">
             <section>
                 <div
                 class="mx-auto max-w-screen-xl px-4 py-48 lg:flex  lg:items-center"

src/pages/contact.js

@@ -3,11 +3,11 @@ import * as React from "react"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-function PressPage() {
+function PressPage({location}) {
     const documents = require('../../data/general.json').documents
 
   return (
-    <Layout>
+    <Layout location={location} crumbLabel="Documents">
         <section>
             <div
             class="mx-auto max-w-screen-xl px-4 py-48 lg:flex  lg:items-center"

src/pages/documents.js

@@ -3,12 +3,12 @@ import * as React from "react"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-function PartnerPage() {
+function PartnerPage({location}) {
   let generalData = require('../../data/general.json')
     const faq = generalData.faq;
 
   return (
-    <Layout>
+    <Layout location={location} crumbLabel="FAQs">
       <section>
         <div
           class="mx-auto max-w-screen-xl px-4 py-48 lg:flex  lg:items-center"

src/pages/faq.js

@@ -3,7 +3,7 @@ import { Link } from "gatsby"
 import Layout from "../components/layout"
 import Seo from "../components/seo"
 
-function ImpactPage() {
+function ImpactPage({location}) {
   let generalData = require('../../data/general.json')
   let impactNumber = generalData.impact.adults + generalData.impact.children;
 
@@ -16,7 +16,7 @@ function ImpactPage() {
 
 
   return (
-    <Layout>
+    <Layout location={location} crumbLabel="Impact">
       <section>
         <div
           class="mx-auto max-w-screen-xl px-4 py-48 lg:flex  lg:items-center"