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
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. |
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. |
Example Config:
{resolve: `gatsby-theme-catalyst-hydrogen`,options: {sanityProjectId: "abcd1234",sanityDataset: "mydata",sanityWatchMode: false,}}