[gatsby-plugin-mdx] MDX in frontmatter

[mrozilla]

Summary

Following the conversation in ChristopherBiscardi/gatsby-mdx#352

Since we're already parsing the body of an .mdx file, we could do the same thing to certain fields in the frontmatter which can then be rendered through the MDXRenderer just like the body.

Basic example

I'd imagine a flag (off by default) for the plugin options that triggers the mechanism, e.g.

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        parseFrontmatter: [`mdx`, `markdown`], // keys which to parse in the frontmatter
      },
    },
  ],
}

which would turn the following .mdx file

---
title: This doesn't get processed
nested:
  mdx: This gets processed [link](https://example.com)
---

This gets processed [link](https://example.com)

into the following query output

{
  frontmatter: {
    title: "This doesn't get processed"
    nested: {
      mdx: {
        body: <processed MDX>
      }
    }
  }
  body <processed MDX>
}

We'd need to deeply traverse the whole frontmatter object. I'd see this happening as an in-place transformation of the frontmatter object as opposed to creating extra gatsby nodes as discussed in ChristopherBiscardi/gatsby-mdx#352 (comment)

Motivation

I'm using this package to process output from Netlify CMS. There are situations (e.g. with variable list types) when mdx/markdown ends up saved in the frontmatter of an .mdx file. I'm currently using a half-assed userland solution dissected out of the plugin's functionality

I'd love to take a stab at a PR but wanted to check with the maintainers (for opinions and possibly guidance) and the community (for interest) first :) Cheers for a lovely package!

[dustinhorton]

Just ran into this need as well.

There are situations (e.g. with variable list types) when mdx/markdown ends up saved in the frontmatter of an .mdx file.

Markdown widgets are my use case so far.

Currently all my markdown is passed to a custom Markdown component. Think I'll work around this limitation for now by checking the type of children—if it's a string, return via ReactMarkdown, otherwise, via MDXRenderer.

[LekoArts]

@dustinhorton You could have a look at these solutions in the meantime: #5021

[gatsbot[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.

If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!

As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[janosh]

I just asked a related question in the MDX spectrum chat.

[renvrant]

@janosh For parsing frontmatter MDX in Gatsby I did use @mdx/runtime successfully, which should be safe because it isn't actually runtime. See: https://github.com/renvrant/gatsby-mdx-netlify-cms-starter

I'm thinking there are performance implications though. It would be great if gatsby-mdx exposed some mechanism to parse MDX from a string, since this is a pretty common use case with configurable CMSes like Netlify CMS.

[janosh]

I tried this suggestion by @ChristopherBiscardi and added the following to gatsby-node.js

const crypto = require(`crypto`)

exports.onCreateNode = async ({ node, actions, createNodeId }) => {
  const { createNode, createParentChildLink } = actions

  if (node.internal.type === `Mdx`) {
    const { frontmatter } = node
    if (frontmatter.mdxTitle) {
      const child = await createNode({
        id: createNodeId(`${node.id} >>> MdxTitle`),
        parent: node.id,
        children: [],
        internal: {
          type: `MdxTitle`,
          contentDigest: crypto
            .createHash(`md5`)
            .update(node.frontmatter.mdxTitle)
            .digest(`hex`),
          content: node.frontmatter.mdxTitle,
          mediaType: `text/markdown`,
          description: `A custom node so that MDX will process the mdxTitle field`,
        },
      })
      await createParentChildLink({ parent: node, child })
    }
  }
}

but that throws

TypeError: Cannot read property 'internal' of undefined  
  - schema.js:1019 
    [repo]/[gatsby]/dist/schema/schema.js:1019:99

[github-actions[bot]]

Hiya!

This issue has gone quiet. Spooky quiet. 👻

We get a lot of issues, so we currently close issues after 30 days of inactivity. It’s been at least 20 days since the last update here.
If we missed this issue or if you want to keep it open, please reply here. You can also add the label "not stale" to keep this issue open!
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks for being a part of the Gatsby community! 💪💜

[github-actions[bot]]

Hey again!

It’s been 30 days since anything happened on this issue, so our friendly neighborhood robot (that’s me!) is going to close it.
Please keep in mind that I’m only a robot, so if I’ve closed this issue in error, I’m HUMAN_EMOTION_SORRY. Please feel free to reopen this issue or create a new one if you need anything else.
As a friendly reminder: the best way to see this issue, or any other, fixed is to open a Pull Request. Check out gatsby.dev/contribute for more information about opening PRs, triaging issues, and contributing!

Thanks again for being part of the Gatsby community! 💪💜

[zslabs]

Is this the official "MDX in frontmatter" topic? There's a few floating around and figured it might be a good to keep one open until an official solution is figured out/a plugin (or support) is added. I did come across gatsby-transformer-remark-fronmatter so that could be a starting point, but appears it may have issue with repeating fields/lists.

[zslabs]

👋 I wrote an article on how I was able to accomplish this. Huge props to this comment. I hope this helps someone else out!

[zslabs]

This is now available as a plugin to help get everyone up and running even quicker!

[Mood93]

What is that latest on this?

@zslabs I see that you have archived your plugin. Do you recommend another way? Thanks!

[nop33]

I would also be very interested in this

[nop33]

Actually, using this package was enough to fix my problem! https://github.com/WhiteAbeLincoln/gatsby-transformer-remark-frontmatter#readme