mdx0

React MDX-based static site generator powered by x0

npm i -D mdx0

Add scripts to package.json

"scripts": {
  "start": "mdx src",
  "build": "mdx src --out-dir dist",
}

Create an mdx0.config.js file

import theme from './theme'
import components from './system.json'

export default props => ({
  components,
  theme
})

Create mdx files, which can include both markdown syntax and React JSX

Example src/index.mdx file

import { Box } from 'grid-styled'

# Hello mdx0

<Box color='tomato'>
  Box
</Box>

Run in development mode

npm start

Build as static site

npm run build

Configuration

Add an mdx0.config.js file to include a custom configuration. The default export should be a function that accepts an initial props argument and returns a config object.

The following fields are used in the config object:

• theme - object passed to styled-components ThemeProvider
• components - object of components to include in mdx markdown scope
• routes - array of route objects with path string and component function
• title - string for document <title>
• description - string for description meta tag
• twitter - object for twitter meta tags

Routing

By default mdx0 will create a route for each .mdx file in the directory if no custom routes array is provided.

Components

To include a set of components in scope for mdx files, use the components field.

// example mdx0.config.js
import * as Rebass from 'rebass'

export default {
  components: Rebass
}

# mdx file

<Heading>
  Rebass components are now in scope for mdx files
</Heading>

MIT License