Markdown files utils for react-static
yarn add -D globby gray-matter mdxc mdx-loader yarn add react react-static-markdown static.config.js
webpack: (config, {defaultLoaders, stage}) => { config.resolve.extensions.push('.md'); config.module.rules = [ { oneOf: [ { test: /\.md$/, use: ['mdx-loader'], }, defaultLoaders.cssLoader, defaultLoaders.jsLoader, defaultLoaders.fileLoader, ], }, ]; return config; }, Usage
import About from 'content/pages/about.md'; ... <About /> Markdown is transformed to mdx js code string during getRoutes and then evaluated to component.
static.config.js
const getFiles = require('react-static-mdx/getFilesWithMdx'); ... const pages = await getFiles('content/pages/*.md'); Usage
import mdxToComponent from 'react-static-mdx/mdxToComponent'; ... const Page = mdxToComponent(page.contentmdx); ... <Page {...props} /> React Static uses the MIT license. For more information on this license, click here.