Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
frostyweather opened this issue Jun 5, 2018 · 6 comments
Labels
type: question or discussion Issue discussing or asking a question about Gatsby

Comments

@frostyweather
Copy link

frostyweather commented Jun 5, 2018

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!

@m-allanson
Copy link
Contributor

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 #706 and #3280

@m-allanson m-allanson added the type: question or discussion Issue discussing or asking a question about Gatsby label Jun 8, 2018
@KyleAMathews
Copy link
Contributor

Due to the high volume of issues, we're closing out older ones without recent activity. Please open a new issue if you need help!

@iantbarker
Copy link

@frostyweather Did you ever find a resolution to this? I am running into the same issue.

@overlordofmu
Copy link

overlordofmu commented Dec 3, 2019

@iantbarker and @frostyweather, you might be interested in the solution posted here:

https://community.netlify.com/t/list-of-body-markdown/3346/7

(I'm cross-posting this issue link there too.) EDIT: It was already cross-posted.

@lourd
Copy link
Contributor

lourd commented Feb 21, 2021

Heads up that this is still an issue. I just posted an issue on Netlify CMS to figure it out from a CMS perspective, but it would be helpful if Gatsby had a better paved path for this. Right now you either have to include a markdown parser at runtime, as folks are doing in the linked solution above, or you have to ditch the official gatsby-transformer-yaml for gatsby-transformer-yaml-plus or gatsby-transformer-yaml-full. They work and have some good features, if you're hand-writing your yaml, but don't look very reassuring with only a few hundred downloads per week and sporadic maintenance.

@lourd
Copy link
Contributor

lourd commented Feb 21, 2021

Some further tinkering showed that this can alternatively be accomplished with custom schema extensions, as described in the docs. The example in the docs is basically this exact use case. It would be awesome if the described schema extension were included in gatsby-transformer-remark.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
type: question or discussion Issue discussing or asking a question about Gatsby
Projects
None yet
Development

No branches or pull requests

6 participants