gatsby-transformer-front10-story-loader

gatsby-transformer-javascript-frontmatter

Parses Stories files to extract content.

Install

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

Parsing algorithm

In a .story.js (or .story.jsx / .story.ts / .story.tsx) file, export a frontmatter object to set your metadata variables, like so:

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:

{
  allStories {
    edges {
      node {
        story {
          code
          hiddenInMobile
          name
          summary
        }
      }
    }
  }
}

Which would return something like:

{
  "data": {
    "stories": {
      "edges": [
        {
          "node": {
            "story": {
              "code": "<Icon icon=\"icon icon-switch\"/>",
              "hiddenInMobile": false,
              "name": "Sorting",
              "summary": ""
            }
          }
        }
      ]
    }
  }
}