From 649918abe5e954ab0c24f49d2f28679b65e2a1c7 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 16 Nov 2022 21:37:01 -0700
Subject: [PATCH 1/6] inline code styles

---
 src/components/MDXComponents.tsx        | 15 +++++-----
 src/components/UI/docs/Code.tsx         | 37 +++++++++++++++++++++++++
 src/components/UI/docs/index.tsx        |  1 +
 src/utils/getProgrammingLanguageName.ts |  2 +-
 4 files changed, 47 insertions(+), 8 deletions(-)
 create mode 100644 src/components/UI/docs/Code.tsx
 create mode 100644 src/components/UI/docs/index.tsx

diff --git a/src/components/MDXComponents.tsx b/src/components/MDXComponents.tsx
index 27b2e65aa8..a3f898d2bc 100644
--- a/src/components/MDXComponents.tsx
+++ b/src/components/MDXComponents.tsx
@@ -1,7 +1,8 @@
 import { Heading, Link, Stack, Text } from '@chakra-ui/react';
 import NextLink from 'next/link';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
-import { nightOwl } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import { Code } from './UI/docs'
 
 import bash from 'react-syntax-highlighter/dist/cjs/languages/prism/bash';
 import go from 'react-syntax-highlighter/dist/cjs/languages/prism/go';
@@ -26,8 +27,6 @@ SyntaxHighlighter.registerLanguage('sh', sh);
 SyntaxHighlighter.registerLanguage('solidity', solidity);
 SyntaxHighlighter.registerLanguage('swift', swift);
 
-import { getProgrammingLanguageName } from '../utils';
-
 const MDXComponents = {
   // paragraphs
   p: ({ children }: any) => {
@@ -87,10 +86,12 @@ const MDXComponents = {
         <pre>{children}</pre>
       </Stack>
     );
-  }
+  },
   // code
-  // code: (code: any) => {
-  //   const language = getProgrammingLanguageName(code);
+  code: (code: any) => {
+    return (
+      <Code code={code} />
+    )
 
   //   return !!code.inline ? (
   //     <Text
@@ -110,7 +111,7 @@ const MDXComponents = {
   //       {code.children[0]}
   //     </Stack>
   //   );
-  // }
+  }
 };
 
 export default MDXComponents;
diff --git a/src/components/UI/docs/Code.tsx b/src/components/UI/docs/Code.tsx
new file mode 100644
index 0000000000..3ff8e8972a
--- /dev/null
+++ b/src/components/UI/docs/Code.tsx
@@ -0,0 +1,37 @@
+// Libraries
+import { Code as ChakraCode } from '@chakra-ui/react';
+import { FC } from 'react';
+ 
+// Utils
+import { getProgrammingLanguageName } from '../../../utils';
+
+
+interface Props {
+  code: any;
+}
+
+export const Code: FC<Props> = ({ code }) => {
+  const language = getProgrammingLanguageName(code);
+
+  return (
+    !!code.inline ?
+      (
+        <ChakraCode
+          background='gray.200'
+          fontFamily='"JetBrains Mono", monospace'
+          fontWeight={400}
+          fontSize='md'
+          lineHeight={4}
+          letterSpacing='1%'
+          pb={2}
+          mb={-2}
+        >
+          {code.children[0]}
+        </ChakraCode>
+      )
+    : 
+      (
+        <p>test</p>
+      )
+  );
+};
diff --git a/src/components/UI/docs/index.tsx b/src/components/UI/docs/index.tsx
new file mode 100644
index 0000000000..823cfaea66
--- /dev/null
+++ b/src/components/UI/docs/index.tsx
@@ -0,0 +1 @@
+export * from './Code';
\ No newline at end of file
diff --git a/src/utils/getProgrammingLanguageName.ts b/src/utils/getProgrammingLanguageName.ts
index 40f454f300..95e040c8bd 100644
--- a/src/utils/getProgrammingLanguageName.ts
+++ b/src/utils/getProgrammingLanguageName.ts
@@ -1,7 +1,7 @@
 // WIP
 export const getProgrammingLanguageName = (code: any) => {
   // const hasLanguageNameProperty = Object.keys(code.node.properties).length > 0;
-  console.log({ code });
+  // console.log({ code });
 
   // return hasLanguageNameProperty ? code.node.properties.className[0].split('-')[1] : 'bash';
 };

From 73454b0028c59db62fd35314125d8f2ca61c321d Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 16 Nov 2022 22:36:25 -0700
Subject: [PATCH 2/6] style code blocks

---
 src/components/UI/docs/Code.tsx         | 29 ++++++++++++++++---------
 src/utils/getProgrammingLanguageName.ts |  7 ------
 2 files changed, 19 insertions(+), 17 deletions(-)
 delete mode 100644 src/utils/getProgrammingLanguageName.ts

diff --git a/src/components/UI/docs/Code.tsx b/src/components/UI/docs/Code.tsx
index 3ff8e8972a..ad6e46dfac 100644
--- a/src/components/UI/docs/Code.tsx
+++ b/src/components/UI/docs/Code.tsx
@@ -1,22 +1,17 @@
 // Libraries
-import { Code as ChakraCode } from '@chakra-ui/react';
+import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
 import { FC } from 'react';
- 
-// Utils
-import { getProgrammingLanguageName } from '../../../utils';
-
 
 interface Props {
   code: any;
 }
 
 export const Code: FC<Props> = ({ code }) => {
-  const language = getProgrammingLanguageName(code);
-
   return (
     !!code.inline ?
       (
-        <ChakraCode
+        <Text
+          as='span'
           background='gray.200'
           fontFamily='"JetBrains Mono", monospace'
           fontWeight={400}
@@ -27,11 +22,25 @@ export const Code: FC<Props> = ({ code }) => {
           mb={-2}
         >
           {code.children[0]}
-        </ChakraCode>
+        </Text>
       )
     : 
       (
-        <p>test</p>
+        <Stack>
+          <ChakraCode
+            overflow="scroll"
+            p={6}
+            background='gray.800'
+            color='green.50'
+            fontFamily='"JetBrains Mono", monospace'
+            fontWeight={400}
+            fontSize='md'
+            lineHeight='21.12px'
+            letterSpacing='1%'
+          >
+            {code.children[0]}
+          </ChakraCode>
+        </Stack>
       )
   );
 };
diff --git a/src/utils/getProgrammingLanguageName.ts b/src/utils/getProgrammingLanguageName.ts
deleted file mode 100644
index 95e040c8bd..0000000000
--- a/src/utils/getProgrammingLanguageName.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// WIP
-export const getProgrammingLanguageName = (code: any) => {
-  // const hasLanguageNameProperty = Object.keys(code.node.properties).length > 0;
-  // console.log({ code });
-
-  // return hasLanguageNameProperty ? code.node.properties.className[0].split('-')[1] : 'bash';
-};

From 41932f6527cec9e1fd6fda45d2d4f39f55bb0b3d Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Wed, 16 Nov 2022 22:46:47 -0700
Subject: [PATCH 3/6] remove unused file

---
 src/utils/index.ts | 1 -
 1 file changed, 1 deletion(-)
 delete mode 100644 src/utils/index.ts

diff --git a/src/utils/index.ts b/src/utils/index.ts
deleted file mode 100644
index e3d2a70842..0000000000
--- a/src/utils/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './getProgrammingLanguageName';

From e0de40b8dc24badb42549716177d7d3d07009c47 Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Thu, 17 Nov 2022 12:32:59 -0700
Subject: [PATCH 4/6] add design system theme colors

---
 src/components/UI/docs/Code.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/UI/docs/Code.tsx b/src/components/UI/docs/Code.tsx
index ad6e46dfac..181dba1eeb 100644
--- a/src/components/UI/docs/Code.tsx
+++ b/src/components/UI/docs/Code.tsx
@@ -12,7 +12,7 @@ export const Code: FC<Props> = ({ code }) => {
       (
         <Text
           as='span'
-          background='gray.200'
+          background='code-bg'
           fontFamily='"JetBrains Mono", monospace'
           fontWeight={400}
           fontSize='md'
@@ -28,9 +28,9 @@ export const Code: FC<Props> = ({ code }) => {
       (
         <Stack>
           <ChakraCode
-            overflow="scroll"
+            overflow='hidden'
             p={6}
-            background='gray.800'
+            background='code-bg-contrast'
             color='green.50'
             fontFamily='"JetBrains Mono", monospace'
             fontWeight={400}

From 6205ba69d874e6224b4277d41965c7ad0afdbd9c Mon Sep 17 00:00:00 2001
From: Corwin Smith <cssmittys@gmail.com>
Date: Mon, 21 Nov 2022 21:06:08 -0700
Subject: [PATCH 5/6] move text styles out of Code.tsx into textStyles

---
 src/components/UI/docs/Code.tsx     | 16 ++++------------
 src/theme/foundations/textStyles.ts | 14 ++++++++++++++
 src/theme/index.ts                  |  3 ++-
 3 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/src/components/UI/docs/Code.tsx b/src/components/UI/docs/Code.tsx
index 181dba1eeb..7be53c6ac6 100644
--- a/src/components/UI/docs/Code.tsx
+++ b/src/components/UI/docs/Code.tsx
@@ -13,11 +13,7 @@ export const Code: FC<Props> = ({ code }) => {
         <Text
           as='span'
           background='code-bg'
-          fontFamily='"JetBrains Mono", monospace'
-          fontWeight={400}
-          fontSize='md'
-          lineHeight={4}
-          letterSpacing='1%'
+          textStyle='inline-code-snippet'
           pb={2}
           mb={-2}
         >
@@ -28,15 +24,11 @@ export const Code: FC<Props> = ({ code }) => {
       (
         <Stack>
           <ChakraCode
-            overflow='hidden'
+            overflow='auto'
             p={6}
             background='code-bg-contrast'
-            color='green.50'
-            fontFamily='"JetBrains Mono", monospace'
-            fontWeight={400}
-            fontSize='md'
-            lineHeight='21.12px'
-            letterSpacing='1%'
+            textStyle='code-block'
+            color='code-text'
           >
             {code.children[0]}
           </ChakraCode>
diff --git a/src/theme/foundations/textStyles.ts b/src/theme/foundations/textStyles.ts
index b259d4ae0a..720ef0f97f 100644
--- a/src/theme/foundations/textStyles.ts
+++ b/src/theme/foundations/textStyles.ts
@@ -90,6 +90,20 @@ export const textStyles = {
     textAlign: 'center',
     fontSize: 'sm'
   },
+  'inline-code-snippet': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 400,
+    fontSize: 'md',
+    lineHeight: 4,
+    letterSpacing: '1%'
+  },
+  'code-block': {
+    fontFamily: '"JetBrains Mono", monospace',
+    fontWeight: 400,
+    fontSize: 'md',
+    lineHeight: '21.12px',
+    letterSpacing: '1%'
+  },
   // TODO: refactor w/ semantic tokens for light/dark mode
   'link-light': {},
   // TODO: refactor w/ semantic tokens for light/dark mode
diff --git a/src/theme/index.ts b/src/theme/index.ts
index ff6c89914e..126e85e865 100644
--- a/src/theme/index.ts
+++ b/src/theme/index.ts
@@ -29,7 +29,8 @@ const overrides = {
       body: { _light: 'gray.800', _dark: 'yellow.50' },
       'code-bg': { _light: 'gray.200', _dark: 'gray.700' },
       'code-bg-contrast': { _light: 'gray.800', _dark: 'gray.900' },
-      bg: { _light: 'yellow.50', _dark: 'gray.800' }
+      'code-text': { _light: 'green.50', _dark: 'green.50' },
+      bg: { _light: 'yellow.50', _dark: 'gray.800' },
     }
   }
 };

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