remark-mdx-frontmatter

What is remark-mdx-frontmatter?

The remark-mdx-frontmatter package is a plugin for the remark processor that allows you to parse and transform frontmatter in MDX files. This is useful for handling metadata in your MDX content, such as titles, dates, and other custom fields.

What are remark-mdx-frontmatter's main functionalities?

Parsing Frontmatter

This feature allows you to parse frontmatter in MDX files. The code sample demonstrates how to use the remark-mdx-frontmatter plugin to parse frontmatter and process the MDX content.

const remark = require('remark');
const mdx = require('remark-mdx');
const frontmatter = require('remark-mdx-frontmatter');

const content = `---
title: 'Hello World'
date: '2023-10-01'
---

# Hello World`;

remark()
  .use(mdx)
  .use(frontmatter)
  .process(content, (err, file) => {
    if (err) throw err;
    console.log(String(file));
  });

Transforming Frontmatter

This feature allows you to transform frontmatter in MDX files. The code sample demonstrates how to use a custom transformer to manipulate the frontmatter data after it has been parsed.

const remark = require('remark');
const mdx = require('remark-mdx');
const frontmatter = require('remark-mdx-frontmatter');

const content = `---
title: 'Hello World'
date: '2023-10-01'
---

# Hello World`;

const transformer = () => (tree) => {
  // Transform the frontmatter here
  console.log(tree.children[0].data);
};

remark()
  .use(mdx)
  .use(frontmatter)
  .use(transformer)
  .process(content, (err, file) => {
    if (err) throw err;
    console.log(String(file));
  });

Other packages similar to remark-mdx-frontmatter

gray-matter

gray-matter is a popular package for parsing frontmatter from various file types, including Markdown and MDX. It provides a simple API for extracting and manipulating frontmatter data. Unlike remark-mdx-frontmatter, gray-matter is not tied to the remark ecosystem and can be used independently.

remark-frontmatter

remark-frontmatter is another plugin for the remark processor that parses frontmatter in Markdown files. It supports YAML, TOML, and other frontmatter formats. While it is similar to remark-mdx-frontmatter, it does not specifically target MDX files and lacks some of the MDX-specific features.

front-matter

front-matter is a lightweight package for parsing frontmatter from strings. It is not tied to any specific file type or processing ecosystem, making it a versatile choice for various use cases. However, it does not offer the same level of integration with MDX as remark-mdx-frontmatter.

README

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