danielhusar / gatsby-theme-spring

Robust gatsby theme for your blog.

Gatsby theme spring

Robust gatsby theme for your blog.

Demo

Installation

Using yarn:

yarn add @daniel.husar/gatsby-theme-spring

Or using npm:

npm install @daniel.husar/gatsby-theme-spring

Configuration

Add plugin to you gatsby config:

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    {
      resolve: '@daniel.husar/gatsby-theme-spring',
      options: {
        author: 'Daniel Husar',
        blogPath: '/blog',
        paginationOffset: 5,
      },
    },
  ]
}

Plugin accepts 3 options:

• paginationOffset (number) - number of articles per page
• author (string) - author name for the rss feed
• blogPath (string) - prefix path for blog posts and pagination (First page in the pagination will always be '/')

I recommend populating also siteMetadata with those properties:

title: 'Gatsby theme spring',
description: 'Demo of the gatsby theme spring',
keywords: 'gatsby, theme',
language: 'en',
siteUrl: 'https://gatsby-theme-spring.netlify.com/',
feed_url: 'https://gatsby-theme-spring.netlify.com/rss.xml',
image_url: 'https://gatsby-theme-spring.netlify.com/avatar.png',
twitterHandle: '@DanoHusar',

Setting up

Copy your picture into scr/img/author.png.

Now you can create mdx posts inside src directory. Every post needs to have this metadata:

---
url: "url-to-use"
date: "2019-07-30"
title: "Title of the post"
banner: "./img/hero-image.jpg"
draft: false
---

• url - Post url
• date - Post date
• title - Post title
• banner - Post banner image. To disable image set this to null.
• draft - If post should be in draft mode.

Features

• Gallery layout
• Code samples with live edit
• Monospaced font with programming ligatures
• MDX with batteries included
• Open graph support
• Responsive
• Accessibility report
• Works without javascript
• Written in Typescript
• RSS feed
• Sitemap
• Pagination
• Drafts

License

MIT