gatsby-theme-catalyst-helium
This theme is for a personal blog using multiple different themes layered together. Content is authored in MDX and git is used as the CMS. It was designed to be easily customized and extended via component shadowing and variants in the final site. Styling in the theme is intentionally minimalist so that it can be customized for the final site.
Demos
Catalyzing Start
gatsby new helium https://github.com/ehowey/gatsby-starter-catalyst-helium
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 |
draft | No | Boolean | Defaults to false, set to true if a post is a draft |
published | No | Boolean | Defaults to false, set to true to publish a post. |
Theme options
Helium accepts all options from the core 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 themedisplaySiteLogo: false,displaySiteLogoMobile: false,footerContentLocation: "right",useStickyHeader: true,// Blog themeexcerptLength: 200,// Helium themeuseHero: 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. |
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. |
Variants
gatsby-theme-catalyst-helium
includes additional variants to allow for easier customization of the theme.
variants.postContainer
: Targets the container div for individual postsvariants.postTitle
: Targets the title for individual postsvariants.postSubTitle
: Targets the sub title for individual postsvariants.postMeta
: Targets the meta for individual postsvariants.postImage
: Targets the image for individual postsvariants.postCategory
: Targets the categories for individual postsvariants.postListPageTitle
: Targets the page title for post listsvariants.postListContainer
: Targets the container div for the post listvariants.postListWrapper
: Targets the wrapper div for individual posts within the post listvariants.postListImage
: Targets the image for individual posts within the post listvariants.postListContent
: Targets the container div for content of an individual posts within the post list, e.g. Title, sub title, etc.variants.postListTitle
: Targets the title for individual posts within the post listvariants.postListSubTitle
: Targets the sub title for individual posts within the post listvariants.postListMeta
: Targets the meta for individual posts within the post listvariants.postListExcerpt
: Targets the excerpt for individual posts within the post listvariants.postListReadmore
: Targets the read more link for individual posts within the post listvariants.postListCategory
: Targets the categories for the post list