gatsby-transformer-javascript-frontmatter

Parses Stories files to extract content.

Install

npm install --save-dev gatsby-transformer-front10-component-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: `./.ui/stories/gatsby/`
      }
    },
    "gatsby-transformer-front10-component-loader"
  ]
};

Parsing algorithm

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

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

How to query

You'd be able to query your frontmatter like:

{
  allComponents {
    edges {
      node {
        component {
          linkRepo
          name
          summary
        }
      }
    }
  }
}

Which would return something like:

{
  "data": {
    "allComponents": {
      "edges": [
        {
          "node": {
            "component": {
              "linkRepo": "",
              "name": "locationSelector",
              "summary": "This is a locationSelector component."
            }
          }
        }
      ]
    }
  }
}