gatsby-theme-pitayan
A theme plugin of Gatsby for those who enjoys building their blog site with minimalist design.
Builtin Features
- Gatsby V5 ready
- SEO ready (site structured data & meta tags)
- Dark / light mode switch enabled via Tailwindcss
- Source code highlight
- Customizable in page site links
- Medium-like selection-popover for social sharing or copy
- Medium-like image popover magnifier
- Email newsletter subscription with MailChimp
- Multiple authors for single blog post
- And more...
Usage
To use this theme, you'll need to:
- Install the dependencies via Yarn or NPM.
$ npm install --save-dev gatsby @pitayan/gatsby-theme-pitayan react@18 react-dom@18
# or
$ yarn add gatsby @pitayan/gatsby-theme-pitayan react@18 react-dom@18- Setup your project folder structure:
your-site
├── content/
│ ├── authors/
│ ├── posts/
│ └── site/
├── src/
│ └── assets/- Create
tailwind.config.jsandpostcss.config.jsunder project root folder. Export the theme's defaults if you don't need customization.
// tailwind.config.js
module.exports = require("@pitayan/gatsby-theme-pitayan/tailwind.config")
// postcss.config.js
module.exports = require("@pitayan/gatsby-theme-pitayan/postcss.config")- Configure the theme in
gatsby-config.js:
{
...,
plugins: [
{
resolve: `@pitayan/gatsby-theme-pitayan`,
options: {
siteAssets: "src/assets",
postsPerPage: 10,
tableOfContentsLevels: 3,
mailChimpEndpoint: "***",
mailChimpTimeout: 3500,
applyGatsbyRemarkPlugins(defaultGatsbyRemarkPlugins) => {
// Don't forget to return the default gatsby-remark-plugins unless you hope to tune up all of the plugins by yourself
return [
...defaultGatsbyRemarkPlugins,
]
}
}
}
]
}- Add site metadata, authors, posts, and site pages as needed.
Contribute
This project is a Monorepo. Which uses npm as package manager. As long as the Node supports npm workspaces then it should fit the contributing prerequisites.
To be verbose, the recommended Node version: >= 16.5.0.
# To start local development
$ npm -w packages/www run develop
# To clean caches
$ npm -w packages/www run clean
# To build local
$ npm -w packages/www run build
# To serve local build
$ npm -w packages/www run serve
