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 { readFile } from 'node:fs/promises';

import { compile } from '@mdx-js/mdx';
import remarkFrontmatter from 'remark-frontmatter';
import remarkMdxFrontmatter from 'remark-mdx-frontmatter';

const { contents } = await compile(await readFile('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.

`parsers`

A mapping A mapping of node types to parsers. Each key represents a frontmatter node type. The value is a function that accepts the frontmatter data as a string, and returns the parsed data. By default yaml nodes will be parsed using yaml and toml nodes using toml.

License

MIT @ Remco Haszing

npm