Gatsby Themes

This is a playground for small sites that I create. I turn them into Gatsby themes to reuse or for others to try.

Setup

Gatsby theme development uses yarn workspaces.

gatsby new my-site https://github.com/brettinternet/gatsby-themes
cd my-site
yarn workspace example start

Layout

.
├── README.md
├── example
│   ├── README.md
│   ├── gatsby-config.js
│   ├── package.json
│   └── src
├── gatsby-theme-margo
│   ├── README.md
│   ├── gatsby-config.js
│   ├── index.js
│   └── package.json
├── package.json
└── yarn.lock

`gatsby-theme-""`

This directory is the theme package itself.

`example`

This is an example usage of a theme. I've modified the example site's build so that it displays all of the themes, and prefixes each theme's pathname with the theme name. This wouldn't be done when you're extending just one theme.

example/
- gatsby-config.js: Specifies which theme to use and any other one-off config a site might need.
- src/: Source code such as one-off pages or components that might live in a user's site.

Extending

Component Shadowing

Learn about component shadowing with Gatsby themes.

For example, if you wanted to overwrite the theme's footer, you could create a subdirectory at the root of your Gatsby project with the theme's name, and create your own Footer.jsx.

gatsby-theme-margot
└── src
    └── components
        └── Footer.jsx

Themes

Margot
MOTD

Usage

Add the theme in the plugins array.

module.exports = {
  siteMetadata: {
    title: "My Themed Gatsby App",
  },
  plugins: [
    {
      resolve: `gatsby-theme-margot`,
      options: {
        // options
      },
    },
  ],
}

Options

To override default options, set option fields to a "defined falsy" value, such as an empty string ("") or null. If it's undefined, the default value is used to demo the theme.

There are two ways to pass options to the theme.

1. Pass options into options object of the theme plugin

{
  resolve: `gatsby-theme-margot`,
  options: {
    title: 'My site',
  },
},

2. Set values in your `gatsby-config.js` as `SiteMetadata`

siteMetadata: {
  title: 'My other site',
  eventDetails: {
    description: undefined,
  }
},

brettinternet/gatsby-themes