gatsby-transformer-javascript-frontmatter

Parses Schemes files to extract content.

Install

npm install --save-dev gatsby-transformer-front10-schemas-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-schemas-loader"
  ]
};

Parsing algorithm

In a name.scheme.js file.

export default {
  fancyName: "Popular Destinations",
  mocked: ["initialFares"],
  sections: [
    {
      fancyName: "PrePopulation",
      properties: [
        {
          fancyName: "Airline Code",
          realPaths: ["prePopulation.airlineIataCode"],
          description: "Which airline are going to use to take the data from",
          uiFieldType: "autocomplete",
          placeholder: "Select a airline...",
          options: [
            { name: "Spirit", value: "nk" },
            { name: "Air Asia", value: "ak" },
            { name: "Aer Lingus", value: "ei" }
          ]
        },
        {
          fancyName: "Language Code",
          realPaths: ["prePopulation.languageCode"],
          description: "The price data will be returned in this language",
          uiFieldType: "string"
        }
      ]
    }
  ]
};

How to query

You'd be able to query your frontmatter like:

{
  schemas: allSchemas {
    edges {
      node {
        schema {
          description
          fancyName
          reactName
          mocked
          sections {
            fancyName
            properties {
              api {
                url
              }
              description
              elements {
                description
                elements {
                  fancyName
                  realPaths
                  uiFieldType
                }
                uiFieldType
              }
              fancyName
              options {
                name
                value
              }
              placeholder
              realPaths
              uiFieldType
            }
          }
        }
        node {
          name
          relativePath
        }
      }
    }
  }
}