README
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
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,
},
},