Gatsby Advent Theme

A simple and easy advent theme using Gatsby and Styled Components. Write your posts with Markdown.

Demo

Manual Setup

In your gatsby-config.js:

npm i @agney/gatsby-theme-advent

# OR #
yarn add @agney/gatsby-theme-advent

You can start using it by adding the following to gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: `@agney/gatsby-theme-advent`,
      options: {
        contentPath: "content", // Tell the theme where your markdown files are.
        assetPath: "assets", // Tell the there where your cover image is.
        basePath: "/december", // Tell the theme which URL to render the theme at.
      },
    },
  ],
};

Options

| Options | Description | Required | Default | | ----------- | :-------------------------------------------------: | :------: | :-----: | | contentPath | This where markdown files are hosted | false | content | | assetPath | This is where your cover image can be | false | assets | | basePath | This is where URL where the theme is to be rendered | false | |

Adding the Data

Add markdown files with frontmatter:

---
title: "This is the first advent gift"
date: "2019-12-01T22:12:03.284Z"
published: true
---

The post will be published only if the frontmatter published is true.

Changing the theme

Create a theme.js file at src/@agney/gatsby-theme-advent/utils/theme.js

const theme = {};

export default theme;

See full properties here

If you need to keep existing theme and edit some of the values:

import merge from "lodash.merge";
import theme from "@agney/gatsby-theme-advent";

export default merge({}, theme, {
  colors: {
    primary: "blue",
  },
});

Replacing Components (Shadowing)

Docs

Contributing

This theme makes use of Yarn Workspaces

yarn  # Install packages and dependencies
yarn dev