Installation

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: {
        paginationOffset: 5,
        author: 'Daniel Husar',
      },
    },
  ]
}

Plugin accepts 2 options:

• paginationOffset (number) - number of articles per page
• author (string) - author name for the rss feed

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',

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.

Dev environment

You can use @components and @styles aliases to import components.

You can separatelly shadow every single mdx component. Take a look inside src/components/mdx folder.

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