export const navSortSelf = 2
export const info = {
  author: [
    {name: 'Titus Wormer', github: 'wooorm', twitter: 'wooorm'}
  ],
  published: new Date('2021-10-06'),
  modified: new Date('2021-11-01')
}

# Frontmatter

This guide explores how to support YAML frontmatter in MDX. {/* more */}
MDX supports standard markdown syntax ([CommonMark][]).
That means frontmatter is not supported by default.

MDX comes with a powerful and dynamic alternative to frontmatter, namely ESM
(`import`/`export`).
These exports:

```mdx path="post.mdx"
export const name = 'World'
export const title = 'Hi, ' + name + '!'

# {title}
```

Can be used like so:

```js path="example.js"
import * as Post from './post.mdx' // Assumes an integration is used to compile MDX -> JS.

console.log(Post.title) // Prints 'Hi, World!'
```

You might prefer frontmatter though, as it lets you define data that can be
extracted from the file system *before* compiling.
Say our MDX with frontmatter looked like this:

```mdx path="post.mdx"
---
title: Hi, World!
---

# Hi, World!
```

Then without compiling or evaluating the metadata can be accessed like so:

```js path="example.js"
import {promises as fs} from 'node:fs'
import yaml from 'js-yaml'

main()

async function main() {
  console.log(yaml.loadAll(await fs.readFile('post.mdx'))[0])
  // Prints `{title: 'Hi, World!'}`
}
```

Our compiler, `@mdx-js/mdx`, doesn’t understand YAML frontmatter by default but
it can be enabled by using a remark plugin,
[`remark-frontmatter`][remark-frontmatter]:

```js path="example.js"
import {promises as fs} from 'node:fs'
import remarkFrontmatter from 'remark-frontmatter'
import {compile} from '@mdx-js/mdx'

main()

async function main() {
  console.log(
    await compile(await fs.readFile('post.mdx'), {
      remarkPlugins: [remarkFrontmatter]
    })
  )
}
```

Now it “works”.
The frontmatter is ignored.
But the data embedded in the frontmatter isn’t available from *inside* the MDX.
What if we wanted that too?
Like so:

```mdx path="post.mdx"
---
title: Hi, World!
---

# {frontmatter.title}
```

That’s exactly what the remark plugin
[`remark-mdx-frontmatter`][remark-mdx-frontmatter] does.

remark plugins can be passed in
[`options.remarkPlugins`][options-remark-plugins].
More info on plugins is available in [§ Extending MDX][extend]

[commonmark]: https://spec.commonmark.org/current/

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

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

[options-remark-plugins]: /packages/mdx/#optionsremarkplugins

[extend]: /docs/extending-mdx/
