gatsby-transformer-javascript-frontmatter

Parses Stories files to extract content.

Install

npm install --save-dev @kamila-lab/story-loader

How to use

To use this plugin you also need gatsby-source-filesystem installed and configured.

// In your gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `./.stories/`
      }
    },
    "@kamila-lab/story-loader"
  ]
};

Parsing algorithm

In a index.story.js (or index.story.jsx / index.story.ts / index.story.tsx) file.

export default {
  name: "Sorting",
  summary: "",
  code: `<Icon icon="icon icon-switch"/>`
};

How to query

You'd be able to query your frontmatter like:

{
  allStories {
    nodes {
      story {
        code
        component
        name
        summary
      }
    }
  }
}

Which would return something like:

{
  "data": {
    "allStories": {
      "nodes": [
        "story": {
          "component": {
            "code": `<Icon icon="icon icon-switch"/>`,
            "name":"Sorting",
            "summary":""
          }
        }
      ]
    }
  }
}