### Install remark-frontmatter and remark-mdx-frontmatter

Source: https://github.com/remcohaszing/remark-mdx-frontmatter/blob/main/README.md

Install the necessary packages for remark-mdx-frontmatter. This package depends on the AST output from remark-frontmatter.

```sh
npm install remark-frontmatter remark-mdx-frontmatter
```

--------------------------------

### Process MDX with Frontmatter using remark-mdx-frontmatter

Source: https://github.com/remcohaszing/remark-mdx-frontmatter/blob/main/README.md

Use remark-mdx-frontmatter in a JavaScript script to compile an MDX file. This example demonstrates reading an MDX file, processing it with remark-frontmatter and remark-mdx-frontmatter plugins, and logging the compiled output.

```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)
```

```jsx
export const frontmatter = {
  hello: 'frontmatter'
}

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

--------------------------------

### Default Usage: Export YAML Frontmatter as 'frontmatter'

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

This example demonstrates the default behavior of parsing YAML frontmatter and exporting it as a named export called 'frontmatter'. It requires importing necessary modules and configuring remark plugins for compilation.

```js
import { readFile } from 'node:fs/promises'
import { compile } from '@mdx-js/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'

// example.mdx contains:
// ---
// title: Hello frontmatter
// index: 1
// nested:
//   data:
//     structure:
//       including:
//         numbers: 42
//         booleans: true
//         null:
//         arrays:
//           - of
//           - items
// ---

const { value } = await compile(await readFile('example.mdx'), {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    remarkMdxFrontmatter
  ]
})

console.log(value)
// Output (simplified):
// export const frontmatter = {
//   title: 'Hello frontmatter',
//   index: 1,
//   nested: {
//     data: {
//       structure: {
//         including: {
//           numbers: 42,
//           booleans: true,
//           '': null,
//           arrays: ['of', 'items']
//         }
//       }
//     }
//   }
// }
// export default function MDXContent(props = {}) { ... }
```

--------------------------------

### Custom Export Variable Name with 'name' Option

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

Use the 'name' option to specify a custom identifier for the exported frontmatter variable. This example shows how to set it to 'meta'.

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

// page-meta.mdx:
// ---
// title: Hello frontmatter
// index: 1
// ---

const { value } = await compile(source, {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    [remarkMdxFrontmatter, { name: 'frontmatter' }]  // explicit name, same result as default
  ]
})

// Import and use in application:
// import { frontmatter } from './page-meta.mdx'
// console.log(frontmatter.title) // => 'Hello frontmatter'

// With a custom name like { name: 'meta' }:
// export const meta = { title: 'Hello frontmatter', index: 1 }
// import { meta } from './page-meta.mdx'
```

--------------------------------

### Fallback Value with 'default' Option for No Frontmatter

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

The 'default' option provides a fallback value to export when an MDX file lacks frontmatter. This example sets the default export to an object with a 'default' property.

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

// empty.mdx — file has no frontmatter block (empty file)

const { value } = await compile('', {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    [remarkMdxFrontmatter, { default: { default: 'value' } }]
  ]
})

console.log(value)
// Output:
// export const frontmatter = { default: 'value' }
// export default function MDXContent(props = {}) { ... }

// Without the default option, an empty-frontmatter MDX file produces:
// export const frontmatter = undefined
```

--------------------------------

### TypeScript API for remark-mdx-frontmatter Options

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

The plugin provides the `RemarkMdxFrontmatterOptions` TypeScript interface for typed configuration in TypeScript projects. This allows for explicit definition of options like `name`, `default`, and custom `parsers`.

```ts
import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'
import remarkFrontmatter from 'remark-frontmatter'
import { compile } from '@mdx-js/mdx'

const options: RemarkMdxFrontmatterOptions = {
  name: 'meta',                   // export variable name (default: 'frontmatter')
  default: { title: 'Untitled' }, // fallback if no frontmatter
  parsers: {                      // override or extend parsers
    yaml: (raw) => {
      const parsed = /* custom logic */ {}
      return parsed
    }
  }
  // Also accepts all options from unist-util-mdx-define
}

const { value } = await compile('# Hello', {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    [remarkMdxFrontmatter, options]
  ]
})
```

--------------------------------

### Process TOML Frontmatter with remark-mdx-frontmatter

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

Use remarkFrontmatter with 'toml' enabled, alongside remarkMdxFrontmatter, to parse TOML frontmatter. The parsed data is exported as a named `frontmatter` export. Note that TOML objects include `__proto__: null`.

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

// post.mdx:
// +++
// title = "Hello TOML"
// +++
//
// # Hello, World
//
// Some content

const source = `+++
title = "Hello TOML"
+++

# Hello, World

Some content`

const { value } = await compile(source, {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    remarkMdxFrontmatter
  ]
})

console.log(value)
// Output:
// export const frontmatter = {
//   __proto__: null,
// title: 'Hello TOML'
// }
// function _createMdxContent(props) {
//   return (
//     <>
//       <h1>Hello, World</h1>
//       <p>Some content</p>
//     </>
//   )
// }
// export default function MDXContent(props = {}) { ... }
```

--------------------------------

### Next.js Integration with remark-mdx-frontmatter

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

Configure Next.js to use remark-frontmatter and remark-mdx-frontmatter by passing them to the remarkPlugins option in next.config.mjs. This allows frontmatter to be parsed and exported as ES module values.

```javascript
// next.config.mjs — Next.js integration example
import createMDX from '@next/mdx'
import remarkFrontmatter from 'remark-frontmatter'
import remarkMdxFrontmatter from 'remark-mdx-frontmatter'

const withMDX = createMDX({
  options: {
    remarkPlugins: [
      [remarkFrontmatter, ['yaml', 'toml']],
      [remarkMdxFrontmatter, { name: 'frontmatter' }]
    ]
  }
})

export default withMDX({
  pageExtensions: ['js', 'jsx', 'md', 'mdx']
})
```

```mdx
// pages/blog/post.mdx:
// ---
// title: My Blog Post
// date: 2024-01-15
// tags:
//   - javascript
//   - mdx
// ---
//
// Content here...
```

```javascript
// pages/blog/index.jsx — consuming the exported frontmatter:
// import Post, { frontmatter } from './post.mdx'
//
// export default function BlogIndex() {
//   return (
//     <div>
//       <h1>{frontmatter.title}</h1>
//       <p>Published: {frontmatter.date}</p>
//       <ul>{frontmatter.tags.map(tag => <li key={tag}>{tag}</li>)}</ul>
//       <Post />
//     </div>
//   )
// }
```

--------------------------------

### Custom Frontmatter Parsers with remark-mdx-frontmatter

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

Configure custom parsers for frontmatter formats using the `parsers` option in remarkMdxFrontmatter. This allows overriding default parsers or adding support for new formats like JSON.

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

// document.mdx:
// ---
// foo: bar
// ---

const source = `--- 
foo: bar
---`

// Custom YAML parser that wraps raw content in an object
const { value } = await compile(source, {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    [remarkMdxFrontmatter, {
      parsers: {
        yaml: (content) => ({ content })  // returns { content: 'foo: bar' }
      }
    }]
  ]
})

console.log(value)
// Output:
// export const frontmatter = { content: 'foo: bar' }
// export default function MDXContent(props = {}) { ... }

// TypeScript type for options:
// import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter'
// const options: RemarkMdxFrontmatterOptions = {
//   parsers: {
//     yaml: (content) => ({ content }),
//     toml: (content) => JSON.parse(content),  // replace toml parser
//     json: JSON.parse                          // add a new format
//   }
// }
```

--------------------------------

### Preserve YAML Anchors and References

Source: https://context7.com/remcohaszing/remark-mdx-frontmatter/llms.txt

When YAML frontmatter uses anchors and aliases, remark-mdx-frontmatter preserves the reference relationship in the output using an IIFE pattern, ensuring shared object references are maintained.

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

// anchored.mdx:
// ---
// original: &anchor
//   title: Hello frontmatter
// reference: *anchor
// ---

const source = `--- 
original: &anchor
  title: Hello frontmatter
reference: *anchor
---`

const { value } = await compile(source, {
  jsx: true,
  remarkPlugins: [
    [remarkFrontmatter, ['yaml', 'toml']],
    remarkMdxFrontmatter
  ]
})

console.log(value)
// Output — shared reference is preserved as an IIFE:
// export const frontmatter = (($0 = { title: 'Hello frontmatter' }) => ({
//   original: $0,
//   reference: $0
// }))()
//
// Both `frontmatter.original` and `frontmatter.reference` point to the same object.
// frontmatter.original === frontmatter.reference // true
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.