Skip to content

gatsby-theme-catalyst-hydrogen

This theme is for a complete site using multiple different themes layered together and data from SANITY.io. It is designed for a freelance writer or author.

Tutorial:

Building a website for a freelance writer using gatsby-theme-catalyst-hydrogen

Demos

Catalyzing Start

gatsby new hydrogen https://github.com/ehowey/gatsby-starter-catalyst-hydrogen

Sanity Theme Options

OptionValuesDescription
sanityProjectIdStringRequired, Sanity project ID
sanityDatasetStringDefaults to “production”, change to reflect the dataset name you are using in Sanity
sanityTokenStringDefaults to null, should only be used with env variables for security purposes.
sanityWatchModeBooleanDefaults to true, toggle for watch mode
sanityOverlayDraftsBooleanDefaults to false, toggle for live previews, a token and private dataset is required.
sanityCreatePagesBooleanDefaults to true, toggle to turn on/off page generation from SANITY.io.
sanityCreatePostsBooleanDefaults to true, toggle to turn on/off blog post page generation from SANITY.io.
sanityCreateCategoriesBooleanDefaults to true, toggle to turn on/off category page generation from SANITY.io.
sanityCreatePostsListBooleanDefaults to true, toggle to turn on/off blog post list generation from SANITY.io.
sanityCreateProjectsBooleanDefaults to true, toggle to turn on/off project page generation from SANITY.io.
sanityCreateProjectsListBooleanDefaults to true, toggle to turn on/off project list generation from SANITY.io.
sanityPostPathStringDefaults to “/posts”, is the path for before posts, e.g. site.com/posts/post-1.
sanityPostListPathStringDefaults to “/posts”, is the path for the posts list, e.g. site.com/posts/.
sanityProjectPathStringDefaults to “/projects”, is the path for before projects, e.g. site.com/projects/post-1.
sanityProjectListPathStringDefaults to “/projects”, is the path for the projects list page, e.g. site.com/projects/.
sanityPostListTitleStringDefaults to “Posts”, is title for the posts list page.
sanityProjectListTitleStringDefaults to “Projects”, is title for the projects list page.
sanityDisplayPostListTitleBooleanDefaults to true, toggle to turn on/off the post list title.io.
sanityDisplayProjectListTitleBooleanDefaults to true, toggle to turn on/off the project list title.io.

Core Theme Options

OptionValuesDescription
contentPathStringDefaults to “content/pages”, determines where the pages are created from.
assetPathStringDefaults to “content/assets”, determines where the page assets like images are located.
remarkImagesWidthInteger valueDefaults to 1440, allows you to customize the image width option for gatsby-remarks-images.
imageQualityInteger valueDefaults to 50, allows you to customize the image quality on a scale of 0 - 100.
useAlertBannerBooleanDefaults to false, toggles the display of an alert banner across the top of the page.

Header Theme Options

OptionValuesDescription
useStickyHeadertrue or falseDefaults to false, controls whether the header is sticky or static
useHeaderSocialLinkstrue or falseDefaults to true, controls whether the social links are displayed or not
useColorModetrue or falseDefaults to true, controls whether the dark mode toggle is available.
OptionValuesDescription
useFooterSocialLinkstrue or falseDefaults to true, controls whether the social links are displayed or not
footerContentLocationString value, “left”, “right” or “center”Defaults to “left”, determines the location of the footer content.

Example Config:

{
      resolve: `gatsby-theme-catalyst-hydrogen`,
      options: {
        sanityProjectId: "abcd1234",
        sanityDataset: "mydata",
        sanityWatchMode: false,
      }
    }

© 2021 Gatsby Theme Catalyst