Gatsby: Is there a way to parse markdown within the YAML frontmatter of an .md file?

Created on 5 Jun 2018 · 4Comments · Source: gatsbyjs/gatsby

I'd really like to be able to simply add markdown within the YAML frontmatter of a .md file. I feel like this is where Jekyll is really powerful and I'd like the same for Gatsby. For example I'd like the list in the description here:

---
title: This is the title
description: |
    - **List item 1**
    - [List Item 2](https://www.google.com)
    - List Item 3
---

to turn into an actual <ul> with a bolded first list item and a linked second item on the frontend. Right now using gatsby-transformer-remark only parses this as plain text rather than parsing that out. If anyone could point me in the right direction I'd really appreciate it. Thanks!

question or discussion

Source

frostyweather

👍9 🎉1

All 4 comments

One approach would be to use onCreateNode to handle extra processing on the nodes.

exports.onCreateNode = async function({ node }) {
  if (node.internal.type === 'MarkdownRemark') {
    node.frontmatter = {
      // do something
    };
  }
  return node;
}

Then you could use remark to parse the frontmatter.

An alternative _might_ be to hook into Gatsby's existing remark toolchain using setParserPlugins. I'm not sure if that can operate on the frontmatter field though, so it'd need some more investigation. See https://github.com/gatsbyjs/gatsby/issues/706 and https://github.com/gatsbyjs/gatsby/issues/3280