gatsby-theme-patternfly

Getting started

This project is a Gatsby theme that incorporates the PatternFly design system. Using the theme makes it easy to create a gatsby site that is responsive and accessible.

First steps

• Create your site – use the gatsby CLI to bootstrap your site

gatsby new my-patternfly-site

• Add the PatternFly theme

yarn add gatsby-theme-patternfly

or

npm install gatsby-theme-patternfly

• Edit gatsby-config.js

const topNav = [
  {
    // The text displayed on the item
    title: 'Documentation',
    // The root path that enables/activates the item
    rootPath: '/documentation',
    // The page that is actually linked to when the item is clicked
    path: '/documentation/about'
  }
];

const sideNav = [
  {
    // shows this side nav on the home page
    rootPath: '/',
    nav: [
      {
        // The text displayed on the item
        title: 'Direct link',
        // The page that is linked to
        path: '/direct/link'
      },
      {
        title: 'Expandable link',
        pages: [
          {
            title: 'Expandable link',
            path: '/expandable/link'
          }
        ]
      }
    ]
  }
];

module.exports = {
  // add plugin gatsby-theme-patternfly
  plugins: [
    {
      resolve: 'gatsby-theme-patternfly',
      options: {
        // enable or disable the top nav (default true)
        useTopNav: true,
        // enable or disable the side navs (default true)
        useSideNav: true,
        // one or more top navigation definitions
        topNav: topNav,
        // one or more side navigation definitions
        sideNav: sideNav
      }
    }
  ]
}

• Create corresponding mdx files that match the path given in the gatsby-config

For example, for the path /direct/link in the config, create the file src/pages/direct/link.mdx.

• Start developing – navigate into your directory with cd my-patternfly-site.

Start it up with gatsby develop

• Make some changes! – open localhost:8000 in your browser to see your site running.

  Each of the Items in your side bar correlates to a MDX file in your src/pages/ directory. Navigate to a site and try editing the corresponding markdown file. You'll be able to see it update live!

Pages and navigation items

• Navigation items are added by modifying the gatsby-theme-patternfly plugin in the gatsby-config.js file. Restart the development server after modifications to see the changes. If you don't want side navs or a top nav, you can modify the useTopNav and useSideNav configuration for the plugin .
• You can have page specific side navs by editing the rootPath values in the plugin config.
• Pages are created from *.mdx files. Add pages to the /src/pages directory. If you have a side nav item path of /docs/api/button, then you need a corresponding page under /src/pages/docs/api/button.mdx.

Overriding the theme

The main configuration for the site (/gatsby-config.js) is provided by and inherited from the theme. You can override the config through your own config. Similarly, you can override the theme components by creating components of the same name under /src/gatsby-theme-patternfly/components.