@reflexjs/gatsby-theme-styleguide

Adds a styleguide to your site to make building and testing themes easy.

Installation

npm i @reflexjs/gatsby-theme-styleguide

Configuration

// gatsby-config.js

module.exports = {
  plugins: [`@reflexjs/gatsby-theme-styleguide`],
}

Options

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@reflexjs/gatsby-theme-styleguide`,
      options: {
        contentPath: "styleguide",
        basePath: "/styleguide",
      },
    },
  ],
}

Data models

Styleguide

type Styleguide implements Node @dontInfer {
  id: ID!
  title: String
  weight: Int
  excerpt: String
  slug: String
  body: String
}

Usage

Place your styleguide inside styleguide as follows:

site
  └── styleguide
    └── buttons.mdx

Note: On first run, sample styleguides for buttons, colors, forms, and typography will be automatically generated for you.