Gatsby theme for Defite.ru

Preview live site

Why?

I wanted to store theme files separate from content files.

Installation

You don't have Gatsby site

npm i --save react react-dom gatsby @defite/gatsby-theme-defite

You already have Gatsby site

npm i --save @defite/gatsby-theme-defite

In both cases copy contents of site folder from the repository into your gatsby folder and replace example content with yours.

Config

gatsby-config.js is a bit messy, but it's working and once you've configured it, you won't touch it anymore.

module.exports = {
    plugins: [
        {
            resolve: '@defite/gatsby-theme-defite',
            options: {
                contentPath: '/content/', //root folder for posts and pages
                siteMetadata: {
                    en: {
                      title: 'John Doe',
                      description: 'Another Gatsby site',
                    },
                    siteUrl: 'https://another-gatsby-site.com',
                },
                manifestOptions: {
                    name: 'John Doe',
                    short_name: 'John Doe',
                    start_url: '/',
                    background_color: '#ffffff',
                    theme_color: '#663399',
                    display: 'minimal-ui',
                    icon: 'assets/gatsby-icon.png'
                },
                langs: ['en'] // your menu, title of page etc.
            }
        }
    ]
}

Language support

The theme supports different languages. It also works with a single language.

To support multiple languages you must add your language to langs array in gatsby-config.js. First item in the array will be your default language and also it will be shown on on / url.

Menu

Menu is created automatically from your pages. You can control order of menu items and which page to show.

---
showInMenu: true // false to not to show 
menuOrder: 2
---

Translate pages

To translate the page for both English and Russian, I've created two Markdown pages like this:

- content
  - pages
      - home.en.md
      = home.ru.md

Insude home.en.md you will find this:

---
templateKey: home
path: /en/
title: Home
---

For russian (or default) I use this template:

---
templateKey: home
path: /
title: Home
---

Translate posts

Posts dir have a little bit different structure:

- content
  - posts
    - en
      - hello-world.en.md
    - ru
      - hello-world.ru.md

I did this not to create chaos inside the posts directory. I hope it will fit everybody's needs.

Inside hello-worlds.ru.md you'll find:

---
templateKey: blog-post
path: /blog/hello-world
title: Hello world
excerpt: console.log('Hello world');
date: "2018-01-02T08:45:09.284Z"
published: true
---

published key is for making published or draft posts. It is convenient for systems like Forestry.

excerpt key is for making short descriptions of the post in the blog listing page.

Post preview image

In order to add preview image for post, add coverImg key to markdown:

---
coverImg: /uploads/your-cover-image.jpg
---