gatsby-theme-catalyst-lithium
v7.0.7
Published
Gatsby theme for a simple personal blog. MDX and git as the CMS. Support for featured images, social images, RSS Feed and more.
Downloads
26
Readme
Gatsby Theme Catalyst Lithium
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
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 | | socialImage | Yes | String | Social image to be used for the post | | slug | No | String | Optionally used to specify the link slug for the post | | authorLink | Yes | String | Used as a link for the author name in the post summaries | | tags | No | Array | Tags for the post, ["tag1", "tag2", "tag3"] | | 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
Lithium accepts all options from the core theme and blog theme directly, e.g. you can set useColorMode
via gatsby-theme-catalyst-lithium
and it is passed down to the correct theme appropriately.
For example the following config is valid:
{
resolve: `gatsby-theme-catalyst-lithium`,
options: {
// Core theme
displaySiteLogo: false,
displaySiteLogoMobile: false,
footerContentLocation: "right",
useStickyHeader: true,
// Blog theme
excerptLength: 200,
},
},
Lithium 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 |
| ---------------------- | ------------- | ------------------------------------------------------------------------ |
| 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. |