gridsome-transformer-netlify

Netlify-CMS YAML (.yml) transformer for Gridsome

• Image widget to g-image conversion
• Markdown widget parsed with Marked

Tested with Gridsome v0.6.6

About

This transformer plugin parses YAML (.yml) files generated by Netlify-CMS. To parse Netlify-CMS generated Markdown (.md) files use gridsome-plugin-netlify-cms-paths

• Netlify-CMS image widget outputs a path with a leading /.
• Gridsome <g-image> requires a relative path for the image src.

This transformer changes the path of all Netlify-CMS generated YAML image fields, to the relative path of the /static directory. Changing the image path before it's inserted into the GraphQL layer allows <g-image> to function correctly with the image paths from Netlify-CMS. Image previews in the Netlify-CMS dashboard should work correctly as well.

Netlify-CMS generated markdown widget fields are then parsed as is described here.

Install

Do not install the official '@gridsome/transformer-yaml' package. If it is already installed in your package.json you must remove before using this plugin.

yarn add gridsome-transformer-netlify or npm install gridsome-transformer-netlify

Usage

1. Add the transformer plugin and any YAML data sources to your gridsome-config.js file:

module.exports = {
  transformers: {
    netlify:{},
  },
  plugins: [
    {
      use: 'gridsome-transformer-netlify',
      options: {
        imageKey: 'image',    // default value (optional)
        markdownKey: 'body',  // default value (optional)
      },
    },
    {
      use: '@gridsome/source-filesystem',
      options: {
        path: 'src/data/home.yml',
        typeName: 'home',
        },
    },
  ],
}

2. Set the media and public folders in your config.yml:

media_folder: "/static/assets/images"
public_folder: "/assets/images"

3. Now that the image is correctly inserted into the GraphQL DB, you can access the data with a Gridsome page-query as usual:

<page-query>
query Home {
  home: allhome {
    edges {
      node {
        section1 {
          header
          image
          body
        }
        section2 {
          header
          image
          body
        }
      }
    }
  }
}
</page-query>

In this example $page.home.edges[0].node.section1.image would contain a <g-image> compatible image src. The YAML file might look something like this:

section1:
  header: Section 1 Header text
  image: /assets/images/some-image.jpg
  body: >-
    Section 1 body text.

section2:
  header: Section 2 Header text
  image: /assets/images/some-other-image.png
  body: >-
    Section 2 body text.

Caveats

• Only works with Gridsome page-queries, not static-queries.
• Images in parsed markdown are recognized as g-images, yet...
• Must use the /static directory so images are available in the same location for the image widget preview.

Related

• https://github.com/gridsome/gridsome/issues/445

• https://github.com/gridsome/gridsome/issues/292

• https://github.com/gridsome/gridsome/issues/285

• https://github.com/gridsome/gridsome/issues/137

• fix-netlify-cms-paths-on-gridsome

• gridsome-plugin-netlify-cms-paths

• transformer-yamljson