@agney/gatsby-theme-advent

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