@josefaidt/gatsby-theme

Glacier

subtle and simplistic

Built with gatsby-theme-blog-core, this theme offers an extended experience for building portfolio websites with a blogging platform, all composed using MDX.

Installation and Set-up

  1. Install the theme

    yarn add @josefaidt/gatsby-theme
  2. Add the theme to your gatsby-config.js plugins array:

    module.exports = {
    plugins: ['@josefaidt/gatsby-theme'],
    }
  3. Start the site

    gatsby develop

Sample content is copied to the working directory for a quick starting point.

Included Plugins

A few of the notable plugins are as follows:

  • gatsby-theme-blog-core
  • gatsby-plugin-mdx
  • gatsby-plugin-offline
  • gatsby-plugin-manifest

Offline Usage

This theme includes offline support with a browser confirmation for when the application is updated.

Manifest

To override the manifest values, add the following to your site’s plugin array and modify as necessary.

{
resolve: `gatsby-plugin-manifest`,
options: {
name: `josefaidt.dev`,
icon: 'content/assets/images/favicon.png',
short_name: `josefaidt.dev`,
start_url: `/`,
background_color: 'whitesmoke',
theme_color: '#D46A6A',
display: `minimal-ui`,
},
},

Configuration:

Files

| my-site/
|-- assets/
| |-- images/
| | |-- favicon.png
|-- content/
| |-- pages/
| |-- index.mdx
| |-- nav.json
|-- package.json
|-- gatsby-config.js

gatsby-config

// gatsby-config.js
siteMetadata: {
title: 'josef.aidt', // seo title prefix
author: '@josefaidt',
siteUrl: 'https://josefaidt.dev',
// base set of seo keywords
keywords: ['josef', 'aidt', 'personal', 'portfolio'],
// default seo description
description: 'Welcome to my personal site',
// social links (used by footer to render icons)
social: [
{
name: `Twitter`,
url: `https://twitter.com/josefaidt`,
},
{
name: `GitHub`,
url: `https://github.com/josefaidt`,
},
],
},

Theme

This theme uses the ThemeProvider from style-components. To override the default theme colors, shadow components/theme.js

// src/@josefaidt/gatsby-theme/components/theme.js
export default {
main: '#d46a6a',
accent: '#c6797e',
text: '#5a535b',
grey: '#8b868c',
background: '#ffffff',
backgroundContrast: '#f5f5f5',
}

Note: some animations and background colors require provided values to be in full, 6-digit HEX codes as the theme will apply some transparency.

The navigation component requires a configuration file, to do so create a JSON file, content/pages/nav.json with the node’s name, route, and component. Note for the Blog you do not need to pass a component.

[
{
"name": "home",
"route": "/",
"component": "index.mdx"
},
{
"name": "about",
"route": "/about",
"component": "about.mdx"
},
{
"name": "blog",
"route": "/blog"
}
]

Note: mobile navigation is built to support only a few nodes, exceeding 3-4 nodes will cause stylistic issues.

Blog

This theme uses gatsby-theme-blog-core to power the blog platform.

Blog Text

Text displayed on main blog page above article cards

// src/@josefaidt/gatsby-theme/components/BlogTest.js
import React from 'react'
const BlogText = props => (
<>
<h1>Blog</h1>
<p>
This is the blog description, to edit shadow{' '}
<code>@josefaidt/gatsby-theme/components/blog.js</code>.
</p>
</>
)
export default BlogText

Blog SEO

---
title: My Title
description: Some description of the blog post
date: 2019-10-10
keywords: ['websites', 'javascript', 'gatsby']
---