# gatsby-plugin-mdx-frontmatter

> Utility to parse Markdown frontmatter with MDX in Gatsby using GraphQL Schema customization

Latest version **0.0.4** (published 2021-05-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install gatsby-plugin-mdx-frontmatter
pnpm add gatsby-plugin-mdx-frontmatter
yarn add gatsby-plugin-mdx-frontmatter
bun add gatsby-plugin-mdx-frontmatter
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2021-05-04 |
| First published | 2020-05-15 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 4.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12 |
| Author | Zach Schnackel |
| Maintainers | zachschnackel |
| Keywords | gatsby, gatsby-plugin, mdx, frontmatter |

## Links

- npm: https://www.npmjs.com/package/gatsby-plugin-mdx-frontmatter
- Repository: https://github.com/zslabs/gatsby-plugin-mdx-frontmatter
- Homepage: https://github.com/zslabs/gatsby-plugin-mdx-frontmatter#readme
- Issues: https://github.com/zslabs/gatsby-plugin-mdx-frontmatter/issues
- npm.io page: https://npm.io/package/gatsby-plugin-mdx-frontmatter

## Alternatives

- [@mdxeditor/editor](https://npm.io/package/@mdxeditor/editor.md) — 962.4K weekly downloads
- [mmdb-lib](https://npm.io/package/mmdb-lib.md) — 680.9K weekly downloads
- [playcanvas](https://npm.io/package/playcanvas.md) — 36.2K weekly downloads
- [@glw907/cairn-cms](https://npm.io/package/@glw907/cairn-cms.md) — 967 weekly downloads
- [markdown-to-confluence](https://npm.io/package/markdown-to-confluence.md) — 103 weekly downloads

## Recent versions

- 0.0.4 (latest) — 2021-05-04
- 0.0.3 — 2021-05-04
- 0.0.2 — 2020-05-15

## README

# gatsby-plugin-mdx-frontmatter

Utility to parse Markdown frontmatter with MDX in Gatsby using [GraphQL Schema customization](https://www.gatsbyjs.org/docs/schema-customization/)

_This package encompasses the work shared in [this blog post](https://zslabs.com/articles/mdx-frontmatter-in-gatsby/)._

## Installation

```bash
yarn add gatsby-plugin-mdx-frontmatter
```

## Usage

Add following to your `gatsby-config.js`:

```js
plugins: [
  {
    resolve: 'gatsby-plugin-mdx-frontmatter'
  },
  ...
]
```

Example markdown file we want to attach MDX to:

```md
---
title: My article
items:
  - value: >-
      Item 1 **value**
  - value: >-
      Item 2
      <Button>React-powered button</Button>
  - value: >-
      Item 3 __value__
content: >-
  Here's a **cool** graph!

  <Graph />
---

Article content.
```

We can use the provided `mdx` resolver to attach to each field in your `gatsby-node.js`:

```js
exports.createSchemaCustomization = ({ actions: { createTypes } }) => {
  createTypes(`
    type Mdx implements Node {
      frontmatter: MdxFrontmatter
    }

    type MdxFrontmatter {
      items: [ItemValues]
      content: String @mdx
    }

    type ItemValues {
      value: String @mdx
    }
  `);
};
```

You can then use `<MDXProvider />` and `<MDXRenderer />` as normal for these fields:

```js
import { MDXProvider } from "@mdx-js/react";
import { MDXRenderer } from "gatsby-plugin-mdx";
import Button from "../components/Button";
import Graph from "../components/Graph";

const Article = ({ frontmatter, body }) => (
  <MDXProvider components={{Button, Graph}}>
    <div>
      <h1>{frontmatter.title}</h1>

      <ul>
        {frontmatter.items.map((item) => (
          <li key={item.value}>
            <MDXRenderer>{item.value}</MDXRenderer>
          </li>
        ))}
      </ul>

      <MDXRenderer>{frontmatter.content}</MDXRenderer>

      <MDXRenderer>{body}</MDXRenderer>
    </div>
  </MDXProvider>
);
```

## License

[MIT](LICENSE)

---
_Source: https://npm.io/package/gatsby-plugin-mdx-frontmatter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._