feat(docs): Add dynamic navigation (based on mdx content) (#1149)

.changeset/tidy-mails-sneeze.md

@@ -0,0 +1,5 @@
+---
+"docs": patch
+---
+
+feat(docs): Add dynamic navigation (based on mdx content)

docs/gatsby-config.js

@@ -3,8 +3,10 @@ module.exports = {
   siteMetadata: {
     title: 'Docs for Marigold Design System',
     siteUrl: 'https://marigold-ui.github.io/marigold/',
+    navigation: ['foundation', 'components', 'themes'],
   },
   plugins: [
+    'gatsby-plugin-image',
     'gatsby-plugin-sharp',
     'gatsby-transformer-sharp',
     'gatsby-plugin-react-helmet',

docs/package.json

@@ -15,6 +15,7 @@
     "babel-preset-gatsby": "1.8.0",
     "gatsby": "3.8.0",
     "gatsby-plugin-emotion": "6.8.0",
+    "gatsby-plugin-image": "^1.7.1",
     "gatsby-plugin-manifest": "3.8.0",
     "gatsby-plugin-mdx": "2.8.0",
     "gatsby-plugin-react-helmet": "4.8.0",

docs/src/components/Layout.tsx

@@ -1,33 +1,34 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
-import { Column, Columns } from '@marigold/components';
+import { Column, Columns, Stack } from '@marigold/components';
 
-import { MarigoldThemeSwitch } from './ThemeSwitch';
-import { marigoldThemes, ThemeSelect } from './ThemeSelect';
+import { Link } from './Link';
+import { Logo } from './Logo';
 import { Navigation } from './Navigation';
+import { ThemeSelect } from './ThemeSelect';
 
 export const Layout: React.FC = ({ children }) => {
   return (
     <>
       <Helmet>
         <link rel="preconnect" href="https://fonts.gstatic.com" />
         <link
-          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap"
+          href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap"
           rel="stylesheet"
         />
-
         <title>Marigold Design System</title>
       </Helmet>
-      <Columns space={4}>
+      <Columns space={8}>
         <Column width={2}>
-          <Navigation />
-        </Column>
-        <Column width={10}>
-          <MarigoldThemeSwitch themes={marigoldThemes} initial="b2bTheme">
+          <Stack space={16}>
+            <Link to="/">
+              <Logo />
+            </Link>
             <ThemeSelect />
-            {children}
-          </MarigoldThemeSwitch>
+            <Navigation />
+          </Stack>
         </Column>
+        <Column width={10}>{children}</Column>
       </Columns>
     </>
   );

docs/src/components/Link.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link as GatsbyLink, GatsbyLinkProps } from 'gatsby';
+import { Link as MarigoldLink } from '@marigold/components';
+
+export const Link: React.FC<GatsbyLinkProps<unknown>> = ({
+  children,
+  ...props
+}) => (
+  <MarigoldLink {...props} as={GatsbyLink}>
+    {children}
+  </MarigoldLink>
+);

docs/src/components/Logo/Logo.tsx

@@ -0,0 +1,6 @@
+import React from 'react';
+import { StaticImage } from 'gatsby-plugin-image';
+
+export const Logo: React.FC = () => (
+  <StaticImage src="./logo.png" alt="Marigold Logo" />
+);

docs/src/components/Logo/index.ts

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

docs/src/components/Navigation/Navigation.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Box } from '@marigold/components';
+
+import { Link } from '../Link';
+import { NavigationItem, NavigationTree, useNavigation } from './useNavigation';
+
+type NavigationSectionProps = {
+  name: string;
+  children: NavigationTree;
+};
+
+// Helper
+// ---------------
+const dirToText = (dir: string) =>
+  dir
+    .split('/')[0]
+    .split('-')
+    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(' ');
+
+// Components
+// ---------------
+const NavigationItemComponent = ({ title, slug }: NavigationItem) => (
+  <Box variant="navigation.item">
+    <Link to={slug.startsWith('/') ? slug : `/${slug}`}>{title}</Link>
+  </Box>
+);
+
+const NavigationSection = ({ name, children }: NavigationSectionProps) => {
+  return (
+    <div>
+      {Boolean(name.length) && (
+        <Box as="h2" variant="navigation.header">
+          {dirToText(name)}
+        </Box>
+      )}
+      <Box as="ul" variant="navigation.list">
+        {children.map(child =>
+          'title' in child ? (
+            <NavigationItemComponent key={child.slug} {...child} />
+          ) : (
+            <NavigationSection key={child.name} {...child} />
+          )
+        )}
+      </Box>
+    </div>
+  );
+};
+
+export const Navigation: React.FC = () => {
+  const tree = useNavigation();
+  console.log(tree);
+
+  return (
+    <Box
+      as="nav"
+      variant="navigation.wrapper"
+      aria-labelledby="primary-navigation"
+    >
+      <NavigationSection name="" children={tree} />
+    </Box>
+  );
+};

docs/src/components/Navigation/index.ts

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