From 790cf04347e6c5bd8552a283d240603f3409f698 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 23 Nov 2022 15:14:19 +0100
Subject: [PATCH] Add breadcrumbs to docs (#37)

* Add breadcrumbs to docs

* change BreadcrumbLink to NextLink

* Update src/components/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>

* Update src/components/docs/Breadcrumbs.tsx

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>

Co-authored-by: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
---
 src/components/docs/Breadcrumbs.tsx | 28 ++++++++++++++++++++++++++++
 src/components/docs/index.ts        |  1 +
 src/pages/[...slug].tsx             | 16 +++++++++++++---
 3 files changed, 42 insertions(+), 3 deletions(-)
 create mode 100644 src/components/docs/Breadcrumbs.tsx
 create mode 100644 src/components/docs/index.ts

diff --git a/src/components/docs/Breadcrumbs.tsx b/src/components/docs/Breadcrumbs.tsx
new file mode 100644
index 0000000000..74c323322f
--- /dev/null
+++ b/src/components/docs/Breadcrumbs.tsx
@@ -0,0 +1,28 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink } from '@chakra-ui/react';
+import NextLink from 'next/link';
+import { FC } from 'react';
+
+interface Props {
+  router: any;
+}
+
+export const Breadcrumbs: FC<Props> = ({ router }) => {
+  let pathSplit = router.asPath.split('/');
+  pathSplit = pathSplit.splice(1, pathSplit.length);
+
+  return (
+    <Breadcrumb mb={10}>
+      {pathSplit.map((path: string, idx: number) => {
+        return (
+          <BreadcrumbItem key={path}>
+            <NextLink href={`/${pathSplit.slice(0, idx + 1).join('/')}`} passHref>
+              <BreadcrumbLink color={idx + 1 === pathSplit.length ? 'body' : 'primary'}>
+                {path}
+              </BreadcrumbLink>
+            </NextLink>
+          </BreadcrumbItem>
+        );
+      })}
+    </Breadcrumb>
+  );
+};
diff --git a/src/components/docs/index.ts b/src/components/docs/index.ts
new file mode 100644
index 0000000000..381317adf2
--- /dev/null
+++ b/src/components/docs/index.ts
@@ -0,0 +1 @@
+export * from './Breadcrumbs'
\ No newline at end of file
diff --git a/src/pages/[...slug].tsx b/src/pages/[...slug].tsx
index ee7b7b16b7..13193f973f 100644
--- a/src/pages/[...slug].tsx
+++ b/src/pages/[...slug].tsx
@@ -2,12 +2,16 @@ import fs from 'fs';
 import matter from 'gray-matter';
 import yaml from 'js-yaml';
 import ReactMarkdown from 'react-markdown';
-import { Heading } from '@chakra-ui/react';
+import { Heading, Stack } from '@chakra-ui/react';
 import MDXComponents from '../components/';
 import { ParsedUrlQuery } from 'querystring';
 import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import { useRouter } from 'next/router';
+import { Breadcrumbs } from '../components/docs'
+
 import { PageMetadata } from '../components/UI';
 
+
 const MATTER_OPTIONS = {
   engines: {
     yaml: (s: any) => yaml.load(s, { schema: yaml.JSON_SCHEMA }) as object
@@ -69,6 +73,8 @@ interface Props {
 }
 
 const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
+  const router = useRouter()
+
   return (
     <>
       <PageMetadata
@@ -77,9 +83,13 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
       />
 
       <main>
-        <Heading as='h1'>{frontmatter.title}</Heading>
+        <Stack py={8} px={4}>
+          <Breadcrumbs router={router} />
+
+          <Heading as='h1'>{frontmatter.title}</Heading>
 
-        <ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
+          <ReactMarkdown components={MDXComponents}>{content}</ReactMarkdown>
+        </Stack>
       </main>
     </>
   );