Gatsby Theme Catalyst Hydrogen

This is a full-featured theme that ties together the core theme, header and footer themes and then uses this as a basis to create a complete website. The theme relies on data from SANITY.io and includes a customized content studio for the CMS.

Documentation

https://www.gatsbycatalyst.com/

Demos

• gatsby-starter-catalyst-hydrogen
• www.briannasharpe.com

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

Theme options

Hydrogen accepts all options from the core theme and sanity theme directly, e.g. you can set sanityProjectId via gatsby-theme-catalyst-hydrogen and it is passed down to the correct theme appropriately. You may want to consider using environment variables for some of your SANITY.io information, if you are using a token then you need to use environment variables so you do not commit this to GitHub.

For example the following config is valid:

{
      resolve: `gatsby-theme-catalyst-hydrogen`,
      options: {
        // Core theme
        invertSiteLogo: false,
        footerContentLocation: "right",
        useStickyHeader: true,
        // Sanity theme
        sanityProjectId: "abc123",
        sanityDataset: "development",
      },
    },

Sanity Theme Options

Option	Values	Description
sanityProjectId	String	Required, Sanity project ID
sanityDataset	String	Defaults to "production", change to reflect the dataset name you are using in Sanity
sanityToken	String	Defaults to null, should only be used with env variables for security purposes.
sanityWatchMode	Boolean	Defaults to true, toggle for watch mode
sanityOverlayDrafts	Boolean	Defaults to false, toggle for live previews, a token and private dataset is required.
sanityCreatePages	Boolean	Defaults to true, toggle to turn on/off page generation from SANITY.io.
sanityCreatePosts	Boolean	Defaults to true, toggle to turn on/off blog post page generation from SANITY.io.
sanityCreateCategories	Boolean	Defaults to true, toggle to turn on/off category page generation from SANITY.io.
sanityCreatePostsList	Boolean	Defaults to true, toggle to turn on/off blog post list generation from SANITY.io.
sanityCreateProjects	Boolean	Defaults to true, toggle to turn on/off project page generation from SANITY.io.
sanityCreateProjectsList	Boolean	Defaults to true, toggle to turn on/off project list generation from SANITY.io.
sanityPostPath	String	Defaults to "/posts", is the path for before posts, e.g. site.com/posts/post-1.
sanityPostListPath	String	Defaults to "/posts", is the path for the posts list, e.g. site.com/posts/.
sanityProjectPath	String	Defaults to "/projects", is the path for before projects, e.g. site.com/projects/post-1.
sanityProjectListPath	String	Defaults to "/projects", is the path for the projects list page, e.g. site.com/projects/.
sanityPostListTitle	String	Defaults to "Posts", is title for the posts list page.
sanityProjectListTitle	String	Defaults to "Projects", is title for the projects list page.
sanityDisplayPostListTitle	Boolean	Defaults to true, toggle to turn on/off the post list title.io.
sanityDisplayProjectListTitle	Boolean	Defaults to true, toggle to turn on/off the project list title.io.

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
useStickyHeader	true or false	Defaults to false, controls whether the header is sticky or static
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.

Environment Variables

You can read the Gatsby docs about environment variables which may be helpful.

At the top of your gatsby-config.js file you will want the following, require("dotenv").config()

Then in your site you can create a .env file in your main site directory with the following information. You do not want to commit this file to git as the token should remain private.

Example .env:

SANITY_PROJECT_ID = utcr8kb1
SANITY_DATASET = production
SANITY_TOKEN = skRE6nh0PRCFP4juyGzMC7gvlop (actual token is much longer)

Example Config:

{
  resolve: `gatsby-theme-catalyst-hydrogen`,
  options: {
    sanityProjectID: process.env.SANITY_PROJECT_ID,
    sanityDataset: process.env.SANITY_DATASET,
  },
},