setup mdx import, demo with README, storybook

VulcanJS · Jun 18, 2020 · a8b7d91 · a8b7d91
1 parent 889c909
commit a8b7d91
Show file tree

Hide file tree

Showing 8 changed files with 511 additions and 14 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -20,6 +20,20 @@ module.exports = {
     // add magic imports and isomorphic imports to Storybook
     const withVulcan = extendWebpackConfig("client")(config);
 
+    // add mdx support
+    // @see https://mdxjs.com/getting-started/webpack
+    withVulcan.module.rules.push({
+      test: /\.mdx?$/,
+      use: ["babel-loader", "@mdx-js/loader"],
+    });
+    // Bypass interference with Storybook doc, which already set a conflicting rule for .md import
+    // @see https://github.com/storybookjs/storybook/issues/7644#issuecomment-592536159
+    withVulcan.module.rules = [
+      ...withVulcan.module.rules.filter(
+        (rule) => rule.test.source !== "\\.md$"
+      ),
+    ];
+
     // add bundle analyzer
     withVulcan.plugins = (withVulcan.plugins || []).concat(plugins);
 

diff --git a/README.md b/README.md
@@ -1,6 +1,6 @@
 # Vulcan Next Starter
 
-![vulcan-next-starter banner](https://github.com/VulcanJS/vulcan-next-starter/blob/devel/public/vulcan-next-starter-banner_800.png)
+![vulcan-next-starter banner](https://raw.githubusercontent.com/VulcanJS/vulcan-next-starter/devel/public/vulcan-next-starter-banner_800.png)
 
 **WORK IN PROGRESS**
 

diff --git a/docs/features.md b/docs/features.md
@@ -100,6 +100,14 @@ More broadly, it is related to the impossibility of [reading static files in Nex
 
 `lang` attribute is set automatically on `<html>` during server-render
 
+## MDX support
+
+Get started by reading [MDXJS official doc](https://mdxjs.com/).
+
+### MD and MDX import in React
+
+### Loading MD/MDX in Storybook
+
 ## Cypress for e2e testing
 
 ### TypeScript and vanilla JS (+ESLint)
@@ -250,11 +258,13 @@ Demo a Mongodb connection with Mongoose (maybe we could find a demo database onl
  ### Others
 
 Redirection demo for private pages => demo a page that is not available for Example, and redirect to home with an HTTP request
+Cookies during server render
 Remove debug routes from bundle
 Pure JS support (no TS), in cypress, in code, in storybook, in jest...
 PErformance testing?
 A way to debug which files are built in TypeScript
-MDX support
+Default styling for MDX, using Material UI
+Easy opt out of MDX
 Prettier config
 Doc for the perfect VS Code setup
 TypeScript/Eslint security rules
@@ -265,4 +275,4 @@ USe ES6 in webpack configs, next.config (see electron-react-boilerplate for a de
 Reproduction of various small issues
 Mock of next packages from storybook, in jest
 Efficient plug to Vulcan
-Define Vulcan package standard
+Define Vulcan package standard
diff --git a/next.config.js b/next.config.js
@@ -1,5 +1,7 @@
-const flowRight = require("lodash/flowRight");
 const { extendNextConfig } = require("./packages/@vulcan/next"); // TODO: load from @vulcan/next when it's on NPM
+const withMDX = require("@next/mdx")({ extension: /\.mdx?$/ });
+
+const flowRight = require("lodash/flowRight");
 const debug = require("debug")("vns:next");
 
 // fooBar => FOO_BAR
@@ -53,8 +55,11 @@ module.exports = (phase, { defaultConfig }) => {
     extendedConfig = withBundleAnalyzer(extendedConfig);
   }
 
+  // To support markdown import
+  extendedConfig.pageExtensions = ["js", "jsx", "md", "mdx", "ts", "tsx"];
   extendedConfig = flowRight([
     withPkgInfo,
+    withMDX,
     // add other wrappers here
   ])(extendedConfig);
 

diff --git a/package.json b/package.json
@@ -43,6 +43,8 @@
     "@apollo/react-ssr": "3.1.3",
     "@apollo/react-testing": "3.1.4",
     "@material-ui/core": "^4.10.2",
+    "@mdx-js/loader": "^1.6.6",
+    "@next/mdx": "^9.4.4",
     "apollo-cache-inmemory": "1.6.6",
     "apollo-client": "2.6.9",
     "apollo-link": "1.2.14",

diff --git a/src/components/home/home.tsx b/src/components/home/home.tsx
@@ -1,5 +1,12 @@
+import "~/types/mdx.d.ts"; // TODO: load this automatically
+import Readme from "../../../README.md";
 export default () => (
   <div>
-    <h1>Vulcan Next Starter</h1>
+    <h1>Welcome to Vulcan Next Starter</h1>
+    <p>
+      Below, find the readme loaded from an MD file using{" "}
+      <a href="https://mdxjs.com/">MDXJS</a>
+    </p>
+    <Readme />
   </div>
 );
diff --git a/src/types/mdx.d.ts b/src/types/mdx.d.ts
@@ -0,0 +1,9 @@
+// @see https://mdxjs.com/advanced/typescript
+declare module "*.mdx" {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+}
+declare module "*.md" {
+  let MDXComponent: (props: any) => JSX.Element;
+  export default MDXComponent;
+}