gatsby-theme-aurora v0.0.11

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.

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