README
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 |