@josefaidt/gatsby-theme
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
Install the theme
yarn add @josefaidt/gatsby-themeAdd the theme to your
gatsby-config.js
plugins array:module.exports = {plugins: ['@josefaidt/gatsby-theme'],}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.jssiteMetadata: {title: 'josef.aidt', // seo title prefixauthor: '@josefaidt',siteUrl: 'https://josefaidt.dev',// base set of seo keywordskeywords: ['josef', 'aidt', 'personal', 'portfolio'],// default seo descriptiondescription: '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.jsexport 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.
Navigation
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.jsimport 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 Titledescription: Some description of the blog postdate: 2019-10-10keywords: ['websites', 'javascript', 'gatsby']---