use next-mdx-remote to render mdx from cms

lightingbeetle · Mar 7, 2021 · 91f19df · 91f19df
1 parent 9f27db0
commit 91f19df
Show file tree

Hide file tree

Showing 17 changed files with 222 additions and 142 deletions.
diff --git a/.changeset/pretty-shrimps-yawn.md b/.changeset/pretty-shrimps-yawn.md
@@ -0,0 +1,7 @@
+---
+"components": minor
+"design-system": minor
+"@lighting-beetle/next-lighter-config": minor
+---
+
+Render MDX docs with next-mdx-remote to be able to SSG design system pages
diff --git a/packages/components/src/components/Button/Button.docs.mdx b/packages/components/src/components/Button/Button.docs.mdx
@@ -2,11 +2,6 @@
 title: Button
 ---
 
-import { Preview, Props } from '@lighting-beetle/lighter-styleguide';
-
-import Button  from './Button';
-import { Icon } from '../../';
-
 # Button
 
 Buttons are control elements used for navigating and operating a page and form submission.
@@ -142,7 +137,7 @@ Button with just icon without text should be square.
 
 ## Props
 
-<Props component={Button} />
+<Props component={button} />
 
 ## Accessibility
 

diff --git a/packages/components/src/components/Icon/Icon.docs.mdx b/packages/components/src/components/Icon/Icon.docs.mdx
@@ -2,10 +2,6 @@
 title: Icon
 ---
 
-import { Props, Preview } from '@lighting-beetle/lighter-styleguide';
-
-import Icon from './Icon';
-
 # Icon
 
 <Icon name="home" />
@@ -40,7 +36,7 @@ import Icon from './Icon';
 
 ## Props
 
-<Props component={Icon} />
+<Props component={icon} />
 
 ## Customize path to sprite
 

diff --git a/packages/components/src/components/Select/Select.docs.mdx b/packages/components/src/components/Select/Select.docs.mdx
@@ -2,21 +2,11 @@
 title: Select
 ---
 
-import { Preview, Props } from '@lighting-beetle/lighter-styleguide';
-
-import Select from './Select';
-
-export const items = [
-  { label: 'Item 1', value: 'item 1' },
-  { label: 'Item 2', value: 'item 2' },
-  { label: 'Item 3', value: 'item 3' },
-];
-
 # Select
 
 The select component allows users to choose one option from a list. It is used in forms for users to submit data.
 
-<Select items={items} />
+<Select items={selectItems} />
 
 ## Select versus Dropdown
 
@@ -30,30 +20,30 @@ While the select and dropdown components look similar, they have different funct
 ### Basic
 
 <Preview>
-  <Select items={items} />
+  <Select items={selectItems} />
 </Preview>
 
 ### With label
 
 <Preview>
-  <Select label="Items" items={items} />
+  <Select label="Items" items={selectItems} />
 </Preview>
 
 ### Custom placeholder
 
 <Preview>
-  <Select placeholder="What will you choose?" items={items} />
+  <Select placeholder="What will you choose?" items={selectItems} />
 </Preview>
 
 ### Preselected value
 
 <Preview>
-  <Select value="item 3" items={items} />
+  <Select value="item 3" items={selectItems} />
 </Preview>
 
 ## Props
 
-<Props component={Select} />
+<Props component={select} />
 
 ## Accessibility
 

diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
@@ -3,8 +3,31 @@ import "./styles/globals.scss";
 import Button from "./components/Button";
 import Icon from "./components/Icon";
 import Select from "./components/Select";
-import { color, colorHex, colors } from "./tokens";
+
+// TODO: Tokens should have own entry
+import {
+  color,
+  colorHex,
+  colors,
+  breakpoints,
+  spaces,
+  fonts,
+  shadows,
+  TokensTable
+} from "./tokens";
 
 import "./styles/utilities.scss";
 
-export { Select, Icon, color, colorHex, colors, Button };
+export {
+  Select,
+  Icon,
+  Button,
+  color,
+  colorHex,
+  colors,
+  breakpoints,
+  spaces,
+  fonts,
+  shadows,
+  TokensTable
+};
diff --git a/packages/design-system/next.config.js b/packages/design-system/next.config.js
@@ -1,30 +1,30 @@
-const nextLighterConfig = require('@lighting-beetle/next-lighter-config');
-const { extend } = require('next-compose-plugins');
-const { resolve } = require('path');
-const transpileModules = require('next-transpile-modules');
+const nextLighterConfig = require("@lighting-beetle/next-lighter-config");
+const { extend } = require("next-compose-plugins");
+const { resolve } = require("path");
+const transpileModules = require("next-transpile-modules");
 
 const resolveComponents = (nextConfig = {}) => {
   return Object.assign({}, nextConfig, {
     webpack(config, options) {
-      config.resolve.alias['components'] = resolve(
+      config.resolve.alias["components"] = resolve(
         __dirname,
-        '..',
-        'components',
-        'src'
+        "..",
+        "components",
+        "src"
       );
 
-      if (typeof nextConfig.webpack === 'function') {
+      if (typeof nextConfig.webpack === "function") {
         return nextConfig.webpack(config, options);
       }
 
       return config;
-    },
+    }
   });
 };
 
 // FIX
 // - this should work without .withPlugins([]), but that's probably bug in 'next-compose-plugins'
 module.exports = extend(nextLighterConfig()).withPlugins([
-  transpileModules(['components']),
-  resolveComponents,
+  transpileModules(["components"]),
+  resolveComponents
 ]);
diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -13,6 +13,7 @@
     "@lighting-beetle/lighter-styleguide": "5.0.0-beta.1",
     "@lighting-beetle/next-lighter-config": "0.1.0",
     "@mdx-js/loader": "^1.6.22",
+    "@mdx-js/runtime": "^1.6.22",
     "components": "0.1.0",
     "glob": "~7.1.6",
     "gray-matter": "~4.0.2",
@@ -22,6 +23,7 @@
     "netlify-cms-widget-mdx": "~0.4.4",
     "next": "~10.0.8",
     "next-compose-plugins": "~2.2.0",
+    "next-mdx-remote": "^2.1.3",
     "next-transpile-modules": "~6.1.0"
   },
   "browserslist": ">1%, not ie 11, not op_mini all"

diff --git a/packages/design-system/src/components/DesignSystemPage/DesignSystemPage.tsx b/packages/design-system/src/components/DesignSystemPage/DesignSystemPage.tsx
@@ -1,31 +1,20 @@
-import React from 'react';
-import dynamic from 'next/dynamic';
-import { Styleguide } from '@lighting-beetle/lighter-styleguide';
+import React from "react";
+import { Styleguide } from "@lighting-beetle/lighter-styleguide";
 
 type DesignSystemPageProps = {
   fileName?: string;
   children?: React.ReactNode;
   // routes: StyleguideProps['routes'];
   routes: object[];
   title?: string;
+  content?: any;
 };
 
 const DesignSystemPage = ({
-  fileName,
   children,
   routes,
-  title = 'Default title',
+  title = "Default title"
 }: DesignSystemPageProps) => {
-  const MDXContent = fileName
-    ? dynamic(
-        () =>
-          import(
-            /* webpackInclude: /\.mdx$/ */
-            `../../../../components/src/${fileName.slice(0, -4)}.mdx`
-          )
-      )
-    : null;
-
   return (
     <Styleguide
       //@ts-ignore
@@ -34,7 +23,7 @@ const DesignSystemPage = ({
       logoSrc="/logo.svg"
       adminHref="/admin"
     >
-      {children || <MDXContent />}
+      {children}
     </Styleguide>
   );
 };

diff --git a/packages/design-system/src/pages/admin.tsx b/packages/design-system/src/pages/admin.tsx
@@ -1,12 +1,8 @@
 import dynamic from "next/dynamic";
-import * as Components from "components";
-import * as Styleguide from "@lighting-beetle/lighter-styleguide";
+import { StyleSheetManager } from "@lighting-beetle/lighter-styleguide";
 import { useEffect, useState } from "react";
-
-const componentImports = Object.keys(Components).reduce((acc, key) => {
-  acc[`./${key}`] = { ImportDefault: Components[key] };
-  return acc;
-}, {});
+import getMDXComponents from "../utils/getMDXComponents";
+import getMDXScope from "../utils/getMDXScope";
 
 function StyleComponentsInjector({ children }) {
   const [iframeRef, setIframeRef] = useState(null);
@@ -19,9 +15,7 @@ function StyleComponentsInjector({ children }) {
 
   return (
     iframeRef && (
-      <Styleguide.StyleSheetManager target={iframeRef}>
-        {children}
-      </Styleguide.StyleSheetManager>
+      <StyleSheetManager target={iframeRef}>{children}</StyleSheetManager>
     )
   );
 }
@@ -32,7 +26,7 @@ const Admin = dynamic(
   () =>
     Promise.all([
       import("netlify-cms-app"),
-      import("netlify-cms-widget-mdx"),
+      import("netlify-cms-widget-mdx")
     ]).then(([{ default: CMS }, WidgetMdx]) => {
       // @ts-ignore
       window.CMS_MANUAL_INIT = true;
@@ -42,7 +36,7 @@ const Admin = dynamic(
           backend: {
             name: "github",
             repo: "lightingbeetle/next-lighter",
-            branch: "main",
+            branch: "main"
           },
           local_backend: true,
           publish_mode: "editorial_workflow",
@@ -62,22 +56,22 @@ const Admin = dynamic(
                 {
                   label: "Title",
                   name: "title",
-                  widget: "string",
+                  widget: "string"
                 },
                 {
                   label: "Docs",
                   name: "body",
                   // @ts-ignore
                   widget: "mdx",
                   // @ts-ignore
-                  mode: "raw",
-                },
+                  mode: "raw"
+                }
               ],
               extension: "mdx",
-              format: "frontmatter",
-            },
-          ],
-        },
+              format: "frontmatter"
+            }
+          ]
+        }
       });
 
       CMS.registerPreviewStyle("/_next/static/css/styles.chunk.css");
@@ -86,19 +80,11 @@ const Admin = dynamic(
         widgetFor("body")
       );
 
-      CMS.registerWidget("mdx", WidgetMdx.MdxControl, (args) => (
+      CMS.registerWidget("mdx", WidgetMdx.MdxControl, args => (
         <StyleComponentsInjector>
           {WidgetMdx.setupPreview({
-            components: Styleguide.mdxComponents,
-            allowedImports: {
-              "../../": {
-                Import: Components,
-              },
-              ...componentImports,
-              "@lighting-beetle/lighter-styleguide": {
-                Import: Styleguide,
-              },
-            },
+            components: getMDXComponents().mdxComponents,
+            scope: { ...getMDXScope(), ...getMDXComponents() }
           })(args)}
         </StyleComponentsInjector>
       ));

diff --git a/packages/design-system/src/pages/base/tokens.tsx b/packages/design-system/src/pages/base/tokens.tsx
@@ -1,30 +1,24 @@
-import fs from 'fs';
-import path from 'path';
-import matter from 'gray-matter';
-import DesignSystemPage from '../../components/DesignSystemPage';
-import { getDesignSystemRoutes } from '../../utils/getDesignSystemRoutes';
+import DesignSystemPage from "../../components/DesignSystemPage";
+import { getDesignSystemRoutes } from "../../utils/getDesignSystemRoutes";
+// @ts-ignore
+import TokensDocs from "components/tokens/tokens.docs.mdx";
 
-const TokensPage = ({ filename, routes, title }) => {
-  return <DesignSystemPage routes={routes} fileName={filename} title={title} />;
+const TokensPage = ({ routes, title }) => {
+  return (
+    <DesignSystemPage routes={routes} title={title}>
+      <TokensDocs />
+    </DesignSystemPage>
+  );
 };
 
-export async function getStaticProps({ params }) {
+export async function getStaticProps() {
   const routes = getDesignSystemRoutes();
 
-  const filename = path.join('tokens', 'tokens.docs.mdx');
-
-  const mdxPost = fs
-    .readFileSync(path.join(process.cwd(), '..', 'components', 'src', filename))
-    .toString();
-
-  const { data } = matter(mdxPost);
-
   return {
     props: {
-      filename,
-      title: data.title ?? 'Default title',
-      routes,
-    },
+      title: "Tokens",
+      routes
+    }
   };
 }