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-siteAdd the PatternFly theme
yarn add gatsby-theme-patternflyor
npm install gatsby-theme-patternflyEdit gatsby-config.js
const topNav = [{// The text displayed on the itemtitle: 'Documentation',// The root path that enables/activates the itemrootPath: '/documentation',// The page that is actually linked to when the item is clickedpath: '/documentation/about'}];const sideNav = [{// shows this side nav on the home pagerootPath: '/',nav: [{// The text displayed on the itemtitle: 'Direct link',// The page that is linked topath: '/direct/link'},{title: 'Expandable link',pages: [{title: 'Expandable link',path: '/expandable/link'}]}]}];module.exports = {// add plugin gatsby-theme-patternflyplugins: [{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 definitionstopNav: topNav,// one or more side navigation definitionssideNav: 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 filesrc/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
anduseSideNav
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
.