gatsby-theme-aurora

Aurora - A Gatsby theme

The quickest way to start building a beautiful, custom, fully-featured Gatsby site

View Live Demo

• Multiple homepage layouts
• Light and Dark Mode
• Simple style customization with Theme UI
• Syntax highlighting for code blocks
• Highlight to share
• Reading time indicators
• Accessible by default
• Tags, pagination, search, and more

Getting Started

Use the Gatsby CLI to create a new site based on the Aurora starter.

npx gatsby new my-blog https://github.com/johno/gatsby-starter-aurora

To run the development server or build your site, use the following commands:

# Run development server
npm start

# Build site
npm run build

Manual Installation

To add the Aurora theme to an existing Gatsby site, install the theme directly.

npm install gatsby-theme-aurora

Then add it to your Gatsby config.

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-theme-aurora',
      options: {}
    },
  ],
}

Configuring Site Metadata

In your Gatsby config, use the following keys to configure your site.

// gatsby-config.js
module.exports = {
  siteMetadata: {
    // Root document title for your site
    title: 'My Blog',
    // Used for meta tags
    description: 'A blog about things I like to write about',
    // Author name
    author: 'Jane Doe',
    // Used for meta tags
    siteURL: 'https://example.com',
    // Links for social network profiles
    socialLinks: [
      {
        name: 'Twitter',
        url: 'https://twitter.com/jxnblk',
      },
    ],
  },
  plugins: [
    {
      resolve: 'gatsby-theme-aurora',
      options: {},
    },
  ]
}

Adding a Post

To create a new blog post, add an .mdx file to content/posts. Include the post's title and date in frontmatter.

---
title: My First Blog Post
date: 2019-10-10
image: './images/hero.jpg'
---

This is my first blog post!

Options

Use the following options to customize the theme.

Name	Description	Default Value
tags	Enable tags for blog posts	false
pagination	Enable pagination for blog posts index page	false

layout | Switch between grid or list homepage layout | grid theme | Enables one of the built-in, preset theme styles | base mdx | Set this option to false when using a custom instance of gatsby-plugin-mdx | true

Theming

Use one of the built-in themes to adjust the look and feel of your sites typography and colors.

Customization

Virtually any aspect of the built in theme styles can be customized by shadowing the src/gatsby-plugin-theme-ui/index.js file.

// example src/gatsby-plugin-theme-ui/index.js
import base from 'gatsby-theme-aurora/theme'

export default {
  ...theme,
  colors: {
    text: '#000',
    background: '#fff',
    primary: 'tomato',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
        primary: 'magenta',
      },
    },
  },
}

Shadowing

All components in the theme can be customized by using component shadowing.

Data Models

Post

Site Metadata

TK