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.