remark-mdx-frontmatter

A remark plugin for converting frontmatter metadata into MDX exports

Table of Contents

• Installation
• Usage
• API
  • Options
• Compatibility
• License

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 { value } = await compile(await readFile('example.mdx'), {
  jsx: true,
  remarkPlugins: [remarkFrontmatter, remarkMdxFrontmatter]
})
console.log(value)

Roughly yields:

export const frontmatter = {
  hello: 'frontmatter'
}

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

API

The default export is a remark plugin.

Options

• default: The default value to export if no frontmatter data is found. (Default: undefined).
• name: The identifier name of the variable the frontmatter data is assigned to. (Default: frontmatter).
• 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.

In addition it supports unist-util-mdx-define options.

Compatibility

This project is compatible with Node.js 18 or greater.

License

MIT © Remco Haszing