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

@@ -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>
+  );
+};

src/components/docs/index.ts

@@ -0,0 +1 @@
+export * from './Breadcrumbs'

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>
     </>
   );