Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

@undataforum/gatsby-theme-blog

A Gatsby theme to create a blog with post pages and a posts overview page. This theme can also be used for news articles.

Usage

Theme options

Key Default Value Description
basePath / Root url for all posts. Should be changed to /blog in most cases. basePath is used in Gatsby lifecycle methods to generate individual post pages and the posts overview page.
contentPath content/posts Location of profile MDX files. The filename convention is <slug>.md, e.g. the-power-of-new-data-sources.md. If you do not set a slug in the frontmatter, the MDX file’s base name, in this example the-power-of-new-data-sources, is used as slug. contentPath is used to configure plugin gatsby-source-filesystem. Any file in contentPath is part of the GraphQL Mdx collection.
assetPath content/assets Location of assets for blog posts. assetPath is used to configure plugin gatsby-source-filesystem. Any image in assetPath can be linked to a post by adding it to the frontmatter images array via relative path. Images can follow any file name convention you like.
collection blog The collection option is supplied to the name option of plugin gatsby-source-filesystem for the contentPath definition. This makes it possible to filter File nodes by collection using sourceInstanceName. If you configure this theme more than once in gatsby-config.js, you can use collection to distinguish different post collections, e.g. collection blog for a blog and collection news for news articles.
profiles undefined If profiles is not set, frontmatter authors is interpreted as an array of author names and rendered as such. If profiles is set, it refers to a specific collection of profiles created with @undataforum/gatsby-theme-profiles. In this case frontmatter authors is interpreted as array of author slugs that each reference a profile in the collection defined by the profiles option.

This example config shows how to configure two separate posts collections:

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@undataforum/gatsby-theme-blog`,
      options: {
        basePath: '/news',
        contentPath: '/content/news',
        assetPath: '/assets/news',
        collection: 'news'
      },
    },
        {
      resolve: '@undataforum/gatsby-theme-blog',
      options: {
        basePath: '/blog',
        contentPath: '/content/blog',
        assetPath: '/assets/blog',
        collection: 'blog'
      },
    },
  ],
}

MDX frontmatter

Frontmatter keys for MDX posts located in contentPath. The YAML type of each key corresponds to the GraphQL type listed in the following section.

Key Required Description
title yes Post title.
date yes Date in yyyy-MM-dd format. This is the date as it should appear on the website. There is no timezone magic happening anywhere.
authors no If theme option profiles is not set, this is a list of author names. If theme option profiles is set, this is a list of author slugs that references profiles from the collection provided in theme option profiles.
slug no The default slug is the post MDX file’s base name. This value overrides the default.
description no The default description for SEO purposes is the first paragraph in a post MDX file. This value overrrides the default.
images no List of relative paths to images that can be included into a post via MDX.

GraphQL Profile type

This theme adds GraphQL type Post which can be queried with post and allPost queries. Type Post makes no assumptions about what the underlying data source is.

Field Type Description
id ID! Gatsby node GUID.
slug ID! Alternative ID used for querying and building the graph.
collection String! Distinguish separate post collections.
title PostTitle! Text and compiled MDX variants of post title.
date Date!
authors [String!]! or [Profile!]! Type depends on theme option profiles.
description PostDescription! Text and compiled MDX variants of post description.
body String! A string representation of the body of the profile page. For MDX pages this is the MDX body.
images [File!] Relative paths to images.
path String! Path to generated page.