https://github.com/remcohaszing/remark-mdx-frontmatter

A remark plugin for converting frontmatter metadata into MDX exports
https://github.com/remcohaszing/remark-mdx-frontmatter

frontmatter markdown markdown-frontmatter mdast mdx remark remark-plugin toml unified yaml

Last synced: about 17 hours ago
JSON representation

A remark plugin for converting frontmatter metadata into MDX exports

• Host: GitHub
• URL: https://github.com/remcohaszing/remark-mdx-frontmatter
• Owner: remcohaszing
• License: mit
• Created: 2021-03-07T11:27:07.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2024-06-21T15:28:07.000Z (3 months ago)
• Last Synced: 2024-09-24T06:35:25.127Z (1 day ago)
• Topics: frontmatter, markdown, markdown-frontmatter, mdast, mdx, remark, remark-plugin, toml, unified, yaml
• Language: TypeScript
• Homepage:
• Size: 786 KB
• Stars: 93
• Watchers: 4
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# remark-mdx-frontmatter

[![github actions](https://github.com/remcohaszing/remark-mdx-frontmatter/actions/workflows/ci.yaml/badge.svg)](https://github.com/remcohaszing/remark-mdx-frontmatter/actions/workflows/ci.yaml)

[![codecov](https://codecov.io/gh/remcohaszing/remark-mdx-frontmatter/branch/main/graph/badge.svg)](https://codecov.io/gh/remcohaszing/remark-mdx-frontmatter)

[![npm version](https://img.shields.io/npm/v/remark-mdx-frontmatter)](https://www.npmjs.com/package/remark-mdx-frontmatter)

[![npm downloads](https://img.shields.io/npm/dm/remark-mdx-frontmatter)](https://www.npmjs.com/package/remark-mdx-frontmatter)

A [remark](https://remark.js.org) plugin for converting frontmatter metadata into MDX exports

## Table of Contents

- [Installation](#installation)

- [Usage](#usage)

- [API](#api)

  - [Options](#options)

- [Compatibility](#compatibility)

- [License](#license)

## Installation

This package depends on the AST output by

[remark-frontmatter](https://github.com/remarkjs/remark-frontmatter)

```sh

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:

```mdx

---

hello: frontmatter

---

Rest of document

```

The following script:

```js

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:

```jsx

export const frontmatter = {

  hello: 'frontmatter'

}

export default function MDXContent() {

  return 
Rest of document

}

```


## API

The default export is a [remark](https://remark.js.org) 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`](https://github.com/eemeli/yaml)

  and `toml` nodes using [`toml`](https://github.com/BinaryMuse/toml-node).

## Compatibility

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

## License

[MIT](LICENSE.md) © [Remco Haszing](https://github.com/remcohaszing)