Gatsby: help making yaml files more powerful

Created on 6 Nov 2017 · 3Comments · Source: gatsbyjs/gatsby

Hi all, can I get some help writing markdown within a yaml page? I am attempting a switch from jekyll to gatsby, but one of the nice features of jekyll was the liquid templating language which allowed you to pass any string (from a yaml file for instance) through a markdownify pipe. This was useful when I had several pieces of information I wanted structured on the page but organized together in a yaml file. Example:

- title: My Title
  image: ./assets/image.png
  description: >
    Here is a long winded description that includes a [link](https://code-somewhere.com).
- title: Second Item
  image: ./assets/image2.png
  description >
    more text ...

On a similar note, loading an image this way seems to not be possible, I have hacky solutions for that, like importing all the images somewhere else in the file, but is there a way to let webpack know to copy any images in the pages/ folder even if they 'appear' to not be used?

Source

andykais

👍3

Most helpful comment

On images, if you use gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp, you can query these images.

See for example how gatsbyjs.org queries author avatars

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/blog/author.yaml

On running yaml fields through markdown — you can create sub-nodes that you specify their mediatype as markdown and then gatsby-transformer-remark will convert them to html e.g. https://github.com/gatsbyjs/gatsby/blob/d855150dadb91e80b836d2bd5e160cb0b84f5e2a/packages/gatsby-source-contentful/src/normalize.js#L143

Sorry if that's super high-level and not very actionable. Gatsby is focused on making it easy to setup custom data transformation pipelines. For common tasks, people can create higher-level plugins which setup stuff like this for you automatically but I don't know that anyone has yet for yaml => markdown => html.

To make this happen you'll need to dive into Gatsby's docs and look at plugins to understand how to do what you want to do.

KyleAMathews on 7 Nov 2017

👍3

All 3 comments

On images, if you use gatsby-source-filesystem + gatsby-transformer-yaml + gatsby-transformer-sharp/gatsby-plugin-sharp, you can query these images.

See for example how gatsbyjs.org queries author avatars

https://github.com/gatsbyjs/gatsby/blob/master/www/src/templates/template-blog-post.js#L306 & https://github.com/gatsbyjs/gatsby/blob/master/docs/blog/author.yaml

To make this happen you'll need to dive into Gatsby's docs and look at plugins to understand how to do what you want to do.

KyleAMathews on 7 Nov 2017

👍3

thanks for the advice, I dont think Im ready to commit that much time into essentially making a gatsby plugin right now. I have my naiive solution like so:

import data from './_data.yaml'
import markdownIt from 'markdown-it'
const md = markdownIt({
  html: true,
  linkify: true
})
const loadedData = data.map(item => ({
  ...item,
  image: item.image && require(item.image),
  description: md.render(item.description)
}))

this can still happen during the build stage so it works for my purposes. I think the problem is graphql is aimed at building data first and using a similar template for multiple pages. I am following a 'module' structure like so:
```
pages/
one-page/
index.js
_data.yml
assets/
img1.png
another-page/
...

andykais on 8 Nov 2017

👍2

A simple way to do this would be to compile the markdown fields using onCreateNode. https://www.gatsbyjs.org/tutorial/part-four/#programmatically-creating-pages-from-data and add the compiled field as a new field with createNodeField.

You'd just do that in your gatsby-node.js

KyleAMathews on 9 Nov 2017

👍2

Was this page helpful?

0 / 5 - 0 ratings