feat: rebuild the breadcrumb component

package.json

@@ -85,6 +85,7 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet-async": "^1.0.4",
+    "titleize": "^2.1.0",
     "unique-string": "^2.0.0",
     "vanilla-click-outside": "^2.0.0"
   },

src/components/Breadcrumb.jsx

@@ -1,19 +1,35 @@
 import React, { useContext } from 'react'
-import { Breadcrumb as BreadcrumbPlugin } from 'gatsby-plugin-breadcrumb'
+import titleize from 'titleize'
 
 import { HistoryContext } from '../provider/history'
+import { Link } from 'gatsby'
 
 const Breadcrumb = () => {
   const { location, crumbLabel, crumbs } = useContext(HistoryContext)
 
+  if (!crumbs || !location) {
+    return <div id="breadcrumb"></div>
+  }
+
+  // skip first; `arr.shift()` does not work here
+  const [, ...items] = crumbs
+
   return (
     <div id="breadcrumb">
-      <BreadcrumbPlugin
-        crumbs={crumbs}
-        crumbSeparator="/"
-        crumbLabel={crumbLabel}
-        disableLinks={['/', location]}
-      />
+      {items.map(({ pathname, crumbLabel: label }, index) => [
+        <span key={`${index}-sep`} className="breadcrumb__separator">
+          /
+        </span>,
+        location === pathname ? (
+          <span key={index} className="breadcrumb__item">
+            {titleize(crumbLabel || label)}
+          </span>
+        ) : (
+          <Link key={index} className="breadcrumb__item breadcrumb__link" to={pathname}>
+            {titleize(label)}
+          </Link>
+        ),
+      ])}
     </div>
   )
 }

src/pages/index.jsx

@@ -16,7 +16,6 @@ class Page extends React.Component {
 
     this.props.history.update({
       location: breadcrumb.location,
-      crumbLabel: this.state.pageName,
       crumbs: breadcrumb.crumbs,
     })
   }

src/styles/layouts/_breadcrumb.scss

@@ -1,36 +1,21 @@
 #breadcrumb {
   overflow: hidden;
+  text-overflow: ellipsis; // does not work here...
+  white-space: nowrap;
 
-  // TODO: remove div: https://github.com/sbardian/gatsby-plugin-breadcrumb/issues/56
-  > div {
-    overflow: hidden;
-    text-overflow: ellipsis; // does not work here...
-    white-space: nowrap;
-  }
+  .breadcrumb__link {
+    transition: opacity var(--transition-fast);
+    opacity: 0.8;
 
-  .breadcrumb:first-of-type .breadcrumb__link__disabled,
-  .breadcrumb__title {
-    display: none;
+    &:hover {
+      opacity: 1;
+    }
   }
 
-  .breadcrumb {
-    display: inline;
+  .breadcrumb__item,
+  .breadcrumb__separator {
+    margin-right: var(--spacing-xs);
     font-size: var(--text-sm);
     letter-spacing: 1px;
-
-    .breadcrumb__link {
-      margin-right: var(--spacing-xs);
-      transition: opacity var(--transition-fast);
-      opacity: 0.8;
-
-      &:hover {
-        opacity: 1;
-      }
-    }
-
-    .breadcrumb__separator {
-      margin-right: var(--spacing-xs);
-      opacity: 0.8;
-    }
   }
 }

src/templates/PageSingle.jsx

@@ -17,7 +17,7 @@ class Page extends React.Component {
 
     this.props.history.update({
       location: breadcrumb.location,
-      crumbLabel: this.state.pageName,
+      crumbLabel: this.props.pageContext.frontmatter.title,
       crumbs: breadcrumb.crumbs,
     })
   }