Menu
Is there an easy way to convert frontmatter content to html on Gatsby, without just setting that content as html itself on the markdown?
So in this example:
---
about:
description: >-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nis
Lorem ipsum dolor sit amet, [Apply](asd.das.com) lorm sadf.
image: /img/new_screen.png
title: Everything you need to grow your audience.
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nisi ligula at ante. Duis sagittis suscipit felis, id posuere massa posuere et. Phasellus non diam consectetur, eleifend magna ac, facilisis metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent massa ipsum, pulvinar finibus ante
What's the best way to access "description" as html?
675
Transform Markdown to HTML and frontmatter to data using gatsby-transformer-remark. You'll use the plugin gatsby-transformer-remark to recognize files which are Markdown and read their content. The plugin will convert the frontmatter metadata part of your Markdown files as frontmatter and the content part as HTML.
You can use Markdown files as a content source for your Gatsby site. To do so, you'll need to install two plugins: gatsby-source-filesystem and gatsby-transformer-remark . As with Gatsby itself, you can install both using npm. The gatsby-source-filesystem plugin reads files from your computer.
Gatsby's File System Route API lets you dynamically create new pages from data layer nodes by naming your files with a special syntax. File System Routes only work on files in the src/pages directory (or subdirectories). To create a new collection route, you name your file {nodeType. field}.
Frontmatter is a way to identify metadata in Markdown files. Metadata can literally be anything you want it to be, but often it's used for data elements your page needs and you don't want to show directly. Some examples of common metadata are: Title of the post. Description for SEO purposes.
I don't believe there is an easy way to do what you're asking. As an alternative, you might break up your markdown into two files, one for the description and the other for the content.
description.md
---
pageId: description
groupId: home
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nis
Lorem ipsum dolor sit amet, [Apply](asd.das.com) lorm sadf.
main.md
---
pageId: main
groupId: home
image: /img/new_screen.png
title: Everything you need to grow your audience.
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in maximus lorem. Sed non neque eget augue eleifend ultricies ac cursus mauris. Aliquam sed lectus at ex ullamcorper euismod in a quam. Donec convallis nisl nec risus suscipit placerat. Proin bibendum, tellus aliquam condimentum vulputate, lacus augue egestas magna, quis iaculis nisi ligula at ante. Duis sagittis suscipit felis, id posuere massa posuere et. Phasellus non diam consectetur, eleifend magna ac, facilisis metus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent massa ipsum, pulvinar finibus ante
Depending on your needs, you can get all related information about the "home" group with the corresponding graphql query:
{
allMarkdownRemark(filter: {frontmatter: {groupId: {eq: "home"}}}) {
edges {
node {
html
frontmatter {
pageId
}
}
}
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
