Installation

July 30, 2019•1 minute read

Installation

Using yarn:

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

Or using npm:

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

Configuration

Add plugin to you gatsby config:

gatsby-config.js

module.exports = {
  siteMetadata: {
    ...
  },
  plugins: [
    {
      resolve: '@daniel.husar/gatsby-theme-spring',
      options: {
        paginationOffset: 5,
        author: 'Daniel Husar',
      },
    },
  ]
}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',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: '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