Contributing Content

  • pages are markdown files with the .mdx extension (read more about MDX)
  • non-techncial guides should live in ./docs directory
  • component or package documentation should be a README.mdx file in each component/package directory
  • see Getting Started for IDE extenions providing MDX support

directory structure has no impact on the menu groupings

Anatomy of an MDX File

Frontmatter

Every .mdx file contains YAML frontmatter at the top of the file. This contains metadata about the documentation page. The frontmatter specifies the page's name (menu item text) and menu grouping.

---
name: My New Page
menu: About
---

Using React Components

Components, and other JavaScript modules, can be imported into an .mdx file. All import statements should appear as a block immediately after the frontmatter; containing an empty newline before and after the block.

---
name: TextField
menu: Data Entry
---

import { Playground, PropsTable } from '@versionone/doc-components';
import { TextField } from './src';

<Playground>
  <TextField />
</Playground>

Images

Image files must be sourced relative to the .mdx and can be included via standard markdown, as shown below:

![alt text](./path/to/image.png)