/gatsby-transformer-remark-frontmatter

Allows querying frontmatter fields as markdown with gatsby

Primary LanguageTypeScript

gatsby-transformer-remark-frontmatter

Allows querying Markdown frontmatter fields as markdown. Works for all string keys in frontmatter, including those that are under lists, as long as you can define a GraphQL schema.

Install

npm i gatsby-transformer-remark-frontmatter

How to use

// in your gatsby-config.js
plugins: [
  'gatsby-transformer-remark',
  'gatsby-transformer-remark-frontmatter'
]

Add the @md directive to fields in your GraphQL schema that you want to parse as Markdown.

Example

Clone the repository and run the example project with npm run run-example, or read the following:

Given the following markdown file

---
templateKey: index-template
sidebar: |
  # Some Markdown Content
  ![My Fancy Image](../image.png)
list:
  - item: |
     # Currently Supported
---

# Main Content

Some Text

The following GraphQL schema can be combined with the query below to get the body content and the sidebar markdown as html.

Schema:

type ListItem {
  item: String @md
}
type Frontmatter @infer {
  sidebar: String @md
  list: [ListItem!]
}
type MarkdownRemark implements Node @infer {
  frontmatter: Frontmatter!
}

Query:

query {
  allMarkdownRemark(filter: { frontmatter: { templateKey: { eq: "index-template" } } }) {
    html
    frontmatter {
      templateKey
      sidebar {
        html
      }
      list {
        item {
          html
        }
      }
    }
  }
}