Merge branch 'master' into markdown-styling

src/components/MDXComponents.tsx

@@ -3,6 +3,8 @@ import NextLink from 'next/link';
 import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { nightOwl, prism } 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';
 import graphql from 'react-syntax-highlighter/dist/cjs/languages/prism/graphql';

src/components/UI/docs/Code.tsx

@@ -0,0 +1,38 @@
+// Libraries
+import { Code as ChakraCode, Stack, Text } from '@chakra-ui/react';
+import { FC } from 'react';
+
+interface Props {
+  code: any;
+}
+
+export const Code: FC<Props> = ({ code }) => {
+  return (
+    !!code.inline ?
+      (
+        <Text
+          as='span'
+          background='code-bg'
+          textStyle='inline-code-snippet'
+          pb={2}
+          mb={-2}
+        >
+          {code.children[0]}
+        </Text>
+      )
+    : 
+      (
+        <Stack>
+          <ChakraCode
+            overflow='auto'
+            p={6}
+            background='code-bg-contrast'
+            textStyle='code-block'
+            color='code-text'
+          >
+            {code.children[0]}
+          </ChakraCode>
+        </Stack>
+      )
+  );
+};

src/components/UI/docs/index.tsx

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

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

@@ -1,15 +1,20 @@
 import fs from 'fs';
 import matter from 'gray-matter';
 import yaml from 'js-yaml';
-import ReactMarkdown from 'react-markdown';
 import { Stack, Heading } from '@chakra-ui/react';
-import MDXComponents from '../components/';
-import { ParsedUrlQuery } from 'querystring';
-import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
-import { textStyles } from '../theme/foundations';
 import ChakraUIRenderer from 'chakra-ui-markdown-renderer';
+import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
+import { ParsedUrlQuery } from 'querystring';
+import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
+import { useRouter } from 'next/router';
+
+import MDXComponents from '../components/';
+import { Breadcrumbs } from '../components/docs'
 import { PageMetadata } from '../components/UI';
+import { textStyles } from '../theme/foundations';
+
+
 
 const MATTER_OPTIONS = {
   engines: {
@@ -72,6 +77,8 @@ interface Props {
 }
 
 const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
+  const router = useRouter()
+
   return (
     <>
       <PageMetadata
@@ -81,7 +88,7 @@ const DocPage: NextPage<Props> = ({ frontmatter, content }) => {
 
       <main>
         <Stack mb={16}>
-          {/* TODO: <BREADCRUMBS/> */}
+          <Breadcrumbs router={router} />
           <Heading as='h1' mt='4 !important' mb={0} {...textStyles.header1}>
             {frontmatter.title}
           </Heading>

src/theme/foundations/textStyles.ts

@@ -134,6 +134,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

src/theme/index.ts

@@ -30,7 +30,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' },
     }
   }
 };

src/utils/index.ts

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