remark-mdx-frontmatter

A remark plugin for converting frontmatter metadata into MDX exports

Installation

This package depends on the AST output by remark-frontmatter

npm install remark-frontmatter remark-mdx-frontmatter

Usage

This remark plugin takes frontmatter content, and outputs it as JavaScript exports. Both YAML and TOML frontmatter data are supported.

For example, given a file named example.mdx with the following contents:

---
hello: frontmatter
---

Rest of document

The following script:

import { readFileSync } from 'fs';

import remarkFrontmatter from 'remark-frontmatter';
import { remarkMdxFrontmatter } from 'remark-mdx-frontmatter';
import { compileSync } from 'xdm';

const { contents } = compileSync(readFileSync('example.mdx'), {
  jsx: true,
  remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter],
});
console.log(contents);

Roughly yields:

export const hello = 'frontmatter';

export default function MDXContent() {
  return <p>Rest of document</p>;
}

Options

name

By default, every frontmatter object key is turned into a JavaScript export. If name is specified, the YAML content is exported as one single export using this name. This is useful if you wish to use top-level frontmatter nodes other than objects, or if the frontmatter content contains keys which aren’t valid JavaScript identifiers.