|
| 1 | +# remark-mdx-frontmatter |
| 2 | + |
| 3 | +[![github actions][github actions badge]][github actions] [![codecov][codecov badge]][codecov] |
| 4 | +[![npm][npm badge]][npm] [![prettier][prettier badge]][prettier] |
| 5 | + |
| 6 | +> A [remark][] plugin for converting frontmatter metadata into MDX exports |
| 7 | +
|
| 8 | +## Installation |
| 9 | + |
| 10 | +This package depends on the AST output by [remark-frontmatter][] |
| 11 | + |
| 12 | +```sh |
| 13 | +npm install remark-frontmatter remark-mdx-frontmatter |
| 14 | +``` |
| 15 | + |
| 16 | +## Usage |
| 17 | + |
| 18 | +This remark plugin takes frontmatter content, and outputs it as JavaScript exports. Both YAML and |
| 19 | +TOML frontmatter data are supported. |
| 20 | + |
| 21 | +For example, given a file named `example.mdx` with the following contents: |
| 22 | + |
| 23 | +```mdx |
| 24 | +--- |
| 25 | +hello: frontmatter |
| 26 | +--- |
| 27 | + |
| 28 | +Rest of document |
| 29 | +``` |
| 30 | + |
| 31 | +The following script: |
| 32 | + |
| 33 | +```js |
| 34 | +import { readFileSync } from 'fs'; |
| 35 | + |
| 36 | +import remarkFrontmatter from 'remark-frontmatter'; |
| 37 | +import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter'; |
| 38 | +import { compileSync } from 'xdm'; |
| 39 | + |
| 40 | +const { contents } = compileSync(readFileSync('example.mdx'), { |
| 41 | + jsx: true, |
| 42 | + remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter], |
| 43 | +}); |
| 44 | +console.log(contents); |
| 45 | +``` |
| 46 | + |
| 47 | +Roughly yields: |
| 48 | + |
| 49 | +```jsx |
| 50 | +export const hello = 'frontmatter'; |
| 51 | + |
| 52 | +export default function MDXContent() { |
| 53 | + return <p>Rest of document</p>; |
| 54 | +} |
| 55 | +``` |
| 56 | + |
| 57 | +### Options |
| 58 | + |
| 59 | +#### `name` |
| 60 | + |
| 61 | +By default, every frontmatter object key is turned into a JavaScript export. If `name` is specified, |
| 62 | +the YAML content is exported as one single export using this name. This is useful if you wish to use |
| 63 | +top-level frontmatter nodes other than objects, or if the frontmatter content contains keys which |
| 64 | +aren’t valid JavaScript identifiers. |
| 65 | + |
| 66 | +[github actions badge]: |
| 67 | + https://github.com/remcohaszing/remark-mdx-frontmatter/workflows/ci/badge.svg |
| 68 | +[github actions]: https://github.com/remcohaszing/remark-mdx-frontmatter/actions |
| 69 | +[npm badge]: https://img.shields.io/npm/v/remark-mdx-frontmatter |
| 70 | +[npm]: https://www.npmjs.com/package/remark-mdx-frontmatter |
| 71 | +[prettier badge]: https://img.shields.io/badge/code_style-prettier-ff69b4.svg |
| 72 | +[prettier]: https://prettier.io |
| 73 | +[remark]: https://remark.js.org |
| 74 | +[remark-frontmatter]: https://github.com/remarkjs/remark-frontmatter |
0 commit comments