Awesome

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

• 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.

Compatibility

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

License

MIT © Remco Haszing