@agney/gatsby-theme-advent

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

Usage no npm install needed!

<script type="module">
  import agneyGatsbyThemeAdvent from 'https://cdn.skypack.dev/@agney/gatsby-theme-advent';
</script>

README

Gatsby Advent Theme

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

npm version code style: prettier

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