README
Gatsby Theme Catalyst Helium
This is an MDX based personal blog theme that ties together the core theme, blog theme, header and footer themes and then uses this as a basis to create a complete website. Git is used as the CMS. Styling is intentionally basic and is intended to be customized in the starter via variants and Theme-UI. Includes support for featured images, social images, social media icons, and RSS feed.
Documentation
https://www.gatsbycatalyst.com/
Demos
Catalyzing Start
# create a new Gatsby site using the catalyst writer starter site
gatsby new catalyst-hydrogen https://github.com/ehowey/gatsby-starter-catalyst-hydrogen
Frontmatter Fields
The following fields are available in front matter.
Field | Required? | Values | Description |
---|---|---|---|
title | Yes | String | Title of the post |
date | Yes | Date | Publication date, e.g. 2019-04-15 |
subTitle | Yes | String | Sub title or deck for blog posts |
author | Yes | String | Author of the post |
featuredImage | Yes | String | Featured image to be used for the post |
featuredImageCaption | Yes | String | Caption for the featured image |
socialImage | Yes | String | Social image to be used for the post |
slug | No | String | Optionally used to specify the link slug for the post |
categories | Yes | Array | Categories for the post, ["cats", "dogs", "snakes"] |
keywords | No | Array | Keywords used for Seo, ["key1", "key2", "key3"] |
draft | No | Boolean | Defaults to false, set to true if a post is a draft |
Theme options
Helium accepts all options from the core theme, header theme, footer theme and blog theme directly, e.g. you can set useColorMode
via gatsby-theme-catalyst-helium
and it is passed down to the correct theme appropriately.
The one custom option is useHero
which conditionally inserts a hero section which is designed to be shadowed and customized. You can see an example of this in gatsby-starter-catalyst-helium
.
For example the following config is valid:
{
resolve: `gatsby-theme-catalyst-helium`,
options: {
// Core theme
displaySiteLogo: false,
displaySiteLogoMobile: false,
footerContentLocation: "right",
useStickyHeader: true,
// Blog theme
excerptLength: 200,
// Helium theme
useHero: true,
},
},
Helium Options
Option | Values | Description |
---|---|---|
useHero |
Boolean | Defaults to false, controls whether the hero section is enabled or not. |
Blog Theme Options
Option | Values | Description |
---|---|---|
contentPath |
String | Defaults to "content/posts", determines where the posts are created from. |
assetPath |
String | Defaults to "content/assets", determines where the post assets like images are located. |
basePath |
String | Defaults to "/blog", determines the page location for the post list. |
excerptLength |
String | Defaults to "140", determines the length of the excerpt use for post summaries. |
postListTitle |
String | Defaults to "Posts", allows you to control the title of your post page, e.g. "Blog" or "Writing" or "Digital Garden" |
displayPostListTitle |
Boolean | Defaults to true, allows you to remove the visual title of your post page but keep it in the page title in the browser. |
rssTitle |
String | Defaults to "RSS Feed", allows you to customize the title of the RSS feed. |
rssDescription |
String | Defaults to "A great RSS feed", set the RSS description for your feed. |
Core Theme Options
Option | Values | Description |
---|---|---|
contentPath |
String | Defaults to "content/pages", determines where the pages are created from. |
assetPath |
String | Defaults to "content/assets", determines where the page assets like images are located. |
useKatex |
true or false | Defaults to false, enables gatsby-remark-katex for displaying math equations. |
remarkImagesWidth |
Integer value | Defaults to 1440, allows you to customize the image width option for gatsby-remarks-images. |
imageQuality |
Integer value | Defaults to 50, allows you to customize the image quality on a scale of 0 - 100. |
useAlertBanner |
Boolean | Defaults to false, toggles the display of an alert banner across the top of the page. |
Header Theme Options
Option | Values | Description |
---|---|---|
useHeaderSocialLinks |
true or false | Defaults to true, controls whether the social links are displayed or not |
useColorMode |
true or false | Defaults to true, controls whether the dark mode toggle is available. |
Footer Theme Options
Option | Values | Description |
---|---|---|
useFooterSocialLinks |
true or false | Defaults to true, controls whether the social links are displayed or not |
footerContentLocation |
String value, "left", "right" or "center" | Defaults to "left", determines the location of the footer content. |