Skip to content

Latest commit

 

History

History
171 lines (135 loc) · 3.69 KB

README.md

File metadata and controls

171 lines (135 loc) · 3.69 KB
Raw

Changelog - Gatsby Theme

Ready to be used changelog theme

✨ Features

  • Theme UI for styling
  • PrismJS highlighting
  • Gatsby Image
  • Releases in MDX
  • Tags
  • Static pages for non post types
  • SEO friendly
  • Fully customizable through gatsby-config.js, gatsby-plugin-theme-ui and shadow components
  • Linting with ESLint and Stylelint
  • Code formatting with Prettier

🚀 Installation

To use this theme in your Gatsby sites, follow these instructions:

  1. Install the theme

    # npm
npm install --save gatsby-theme-changelog
# yarn
yarn add  gatsby-theme-changelog

  2. Add the theme to your gatsby-config.js:

    module.exports = {
	plugins: ["gatsby-theme-changelog"]
};

  3. Start your site

    gatsby develop

⚙ Configuration

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
		}
	}
};

💅 Customization

You can override theme components using Component Shadowing

  1. Create a folder with theme name gatsby-theme-changelog

  2. 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
  1. You can also override theme-ui theme style by creating 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: {}
});
  1. You can also override or add new global css styles in assets as they are imported in globalStyle.js which has an importAll helper
import { importAll } from "./helpers";
importAll(require.context("../assets/", true, /\.css$/));

✍ Writing content

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

🧐 What's inside?

.
├── 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

👨🏻‍💻👩‍💻 Contributing

Contributions, issues and feature requests are welcome !

Demo

Live demo

Author

Abdessalam BENHARIRA