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
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",
assetPath: "assets",
basePath: "/december",
},
},
],
};
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
yarn dev