gatsby-transformer-front10-story-loader/README.md

Parses Stories files to extract content.

# 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](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-source-filesystem) installed and configured.

```javascript
// 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:

```javascript
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:

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

Which would return something like:

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