Changelog Gatsby theme starter
Ready to be used changelog theme
gatsby-config.js
, gatsby-plugin-theme-ui
and shadow components
To use this theme in your Gatsby sites, follow these instructions:
Install the theme
# npm
npm install --save gatsby-theme-changelog
# yarn
yarn add gatsby-theme-changelog
Add the theme to your gatsby-config.js
:
module.exports = {
plugins: ["gatsby-theme-changelog"]
};
Start your site
gatsby develop
module.exports = {
plugins: [
{
resolve: " gatsby-theme-changelog",
options: {
basePath: "", // base url "/"
tagsPath: "", // tags url "/tags"
contentPath: "", // content url for posts"/content/posts"
assetPath: "" // assets url "/content/assets"
}
}
],
siteMetadata: {
url: "https://abdessalam.dev",
title: "My web project",
author: "Abdessalam",
description: "Web project changelog",
logo: "logo-icon.png", // logo in header
locale: "en",
themeConfig: {
themeSwitcher: true, // enable theme switcher
loadMorePosts: false, // enable load more posts
postsPerPage: 10, // posts to display per page
postsIncrementBy: 5 // posts increment value
}
}
};
You can override theme components using Component Shadowing
Create a folder with theme name gatsby-theme-changelog
Override any component you want by creating a new one and its css file, for example Nav.js
and Nav.css
src/gatsby-theme-changelog/components/Nav.js
gatsby-plugin-theme-ui
folder and new object style or components or merge with theme file in index.js
src/gatsby-plugin-theme-ui
import baseTheme from "gatsby-theme-changelog/src/gatsby-plugin-theme-ui";
import merge from "lodash.merge";
export default merge({}, baseTheme, {
colors: {},
styles: {}
});
globalStyle.js
which has an importAll helperimport { importAll } from "./helpers";
importAll(require.context("../assets/", true, /\.css$/));
Example of release post in content/posts/[POST_TITLE]/index.mdx
You can create pages by passing type to page
---
type: post
title: v1.0.0
date: 2019-07-22
draft: false
author: Abdessalam
tags:
- New
---
Content goes here
.
βββ node_modules
βββ src
| βββ assets
| βββ components
| | βββ Layout.js
| | βββ Layout.css
| | βββ ...
| | βββ SEO.js
| βββ gatsby-plugin-theme-ui
| βββtemplates
| | βββ page.js
| | βββ posts.js
| | βββ post.js
| | βββ tag.js
| βββ utils
| βββ globalStyle.js
| βββ helpers.js
βββ .gitignore
βββ .prettierrc.js
βββ .eslintrc.js
βββ .stylelintrc.config.js
βββ package.json
βββ README.md
βββ LICENSE
Contributions, issues and feature requests are welcome !