Gatsby-theme-catalyst-helium NPM

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

gatsby-starter-catalyst-helium

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.