@arshad/gatsby-theme-blog-core

Adds a post type for Gatsby sites

Usage no npm install needed!

<script type="module">
  import arshadGatsbyThemeBlogCore from 'https://cdn.skypack.dev/@arshad/gatsby-theme-blog-core';
</script>

README

@arshad/gatsby-theme-blog-core

Version License PRs welcome!

This core theme includes a Post type that you can use to build a Gatsby blog. It has support for post excerpt, featured image, tags and paginated pages. It includes no styles.

Installation

Step 1: In the root of your Gatsby site, run the following command:

yarn add @arshad/gatsby-theme-blog-core

Step 2: Enable it in gatsby-config.js

// gatsby-config.js
...
  plugins: [
    `@arshad/gatsby-theme-blog-core`
  ]
...

Theme options

Key Default value Description
contentPath content/posts Location of your blog posts
basePath /blog Root url for all blog posts
postsPerPage 5 Number of posts to show per page for pagination
pageTitle Blog The title for the blog page. Leave blank for no title
pageExcerpt null The excerpt for the blog page. Leave blank for no excerpt

Example usage

// gatsby-config.js
...
  plugins: [
    {
      resolve: `@arshad/gatsby-theme-blog-core`,
      options: {
        basePath: `/posts`,
        postsPerPage: 10,
      }
    }
  ]
...

Data models

Post

type Post implements Node @dontInfer {
  id: ID!
  title: String!
  date: Date! @dateformat
  excerpt(pruneLength: Int = 150): String
  slug: String!
  body: String!
  image: File @fileByRelativePath
  caption: String
  tags: [String]
}

Example

Place your blog posts inside content/posts as follows:

site
  ├── content
  │   └── posts
  │       └── 2019-11-20-slug-for-post
  │           ├── image.jpg
  │           └── index.mdx
  ├── node_modules
  ├── gatsby-config.js
  └── package.json
# site/content/posts/2019-11-30-slug-for-post/index.mdx

---

title: Proident enim aliqua exercitation laborum Dolor
date: 2019-10-11
excerpt: Consequat consectetur mollit commodo nisi reprehent velit aliqua quis nisi laborum.
image: ./image.jpg
caption: Commodo nisi reprehent velit
tags: ["lipsum", "nobis", "animi"]

---

Et aliquip labore id minim adipisicing excepteur labore in ex deserunt duis quis cillum in.

Customization

Create the following components in your site to shadow and customize the core components:

src
└── @arshad
    └── gatsby-theme-blog-core
        └── components
            ├── post-teaser.js
            ├── post.js
            ├── posts.js
            └── tag.js

To learn more about component shadowing, check out the official theme docs.

Slug

You can provide your own slug resolver as follows:

{
  resolve: `@arshad/gatsby-theme-blog-core`,
  options: {
    slugResolver: (node, parentNode) => custom_slug(node.title)
  }
},

Support

Create an issue on the main repo @arshad/gatsby-themes.