gatsby-theme-quick-start

Set ups Theme UI, MDX, and some common Gatsby plugins like gatsby-plugin-react-helmet and sharp image plugins—see gatsby-config for more details. Uses a Theme UI preset that focuses on typography. The theme also uses @affectionatedoor/opentype that enables OpenType features—you need a font file that supports them to see the difference.

Quick start

(No pun intended).

Create a new hello-world project:

gatsby new . https://github.com/gatsbyjs/gatsby-starter-hello-world

Install the theme along with Theme UI:

yarn add @affectionatedoor/gatsby-theme-quick-start theme-ui

Add the theme as a plugin in your gatsby-config.js:

// gatsby-config.js
module.exports = {
  plugins: ["@affectionatedoor/gatsby-theme-quick-start"]
};

Use the Layout component in your index page:

// src/pages/index.js
import React from "react";
import Layout from "@affectionatedoor/gatsby-theme-quick-start/src/components/Layout";

export default () => <Layout>Hello world!</Layout>;

Any md/mdx files inside your src/pages will be picked-up.

Change the Theme UI theme

To change the Theme UI theme, create the following file: /your-site/src/gatsby-plugin-theme-ui/index.js. This is an example:

// src/gatsby-plugin-theme-ui/index.js
import baseTheme from "@affectionatedoor/gatsby-theme-quick-start/src/gatsby-plugin-theme-ui/index";

const theme = {
  ...baseTheme,
  fonts: {
    ...baseTheme.fonts,
    heading: "'Georgia', serif"
  }
};

export default theme;

This is the preset used by the theme.

Theme options

Name	Description	Type	Default
imageDirectory	Images for sharp	string	src/images
pageDirectory	This exists to make mdx files available to GraphQL queries.	string	src/pages
logoFilename	Place the logo inside the imageDirectory.	string	gatsby-icon.png
gatsbyMdxConfig	You can't configure gatsby-plugin-mdx multiple times so with this option you can override it	object	See baseGatsbyMdxConfig in gatsby-config