Skip to content

gatsby-theme-catalyst-lithium

This theme is for a personal blog using multiple different themes layered together. Content is authored in MDX and git is used as the CMS. It was designed to be easily customized and extended via component shadowing and variants in the final site. Styling in the theme is intentionally minimalist so that it can be customized for the final site.

Demos

  • gatsby-starter-catalyst-lithium

Catalyzing Start

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

Frontmatter fields

The following fields are available in front matter.

FieldRequired?ValuesDescription
titleYesStringTitle of the post
dateYesDatePublication date, e.g. 2019-04-15
subTitleYesStringSub title or deck for blog posts
authorYesStringAuthor of the post
featuredImageYesStringFeatured image to be used for the post
featuredImageCaptionYesStringCaption for the featured image
socialImageYesStringSocial image to be used for the post
slugNoStringOptionally used to specify the link slug for the post
categoriesYesArrayCategories for the post, [“cats”, “dogs”, “snakes”]
keywordsNoArrayKeywords used for SEO, [“key1”, “key2”, “key3”]
draftNoBooleanDefaults 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.

The one custom option is useHero which conditionally inserts a hero section which is designed to be shadowed and customized. You can see an example of this in gatsby-starter-catalyst-lithium.

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 theme
useHero: true,
},
},

Lithium Options

OptionValuesDescription
useHeroBooleanDefaults to false, controls whether the hero section is enabled or not.

Blog Theme Options

OptionValuesDescription
contentPathStringDefaults to “content/posts”, determines where the posts are created from.
assetPathStringDefaults to “content/assets”, determines where the post assets like images are located.
basePathStringDefaults to “/blog”, determines the page location for the post list.
excerptLengthStringDefaults to “140”, determines the length of the excerpt use for post summaries.
postListTitleStringDefaults to “Posts”, allows you to control the title of your post page, e.g. “Blog” or “Writing” or “Digital Garden”
displayPostListTitleBooleanDefaults to true, allows you to remove the visual title of your post page but keep it in the page title in the browser.
rssTitleStringDefaults to “RSS Feed”, allows you to customize the title of the RSS feed.

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.
displaySiteLogotrue or falseDefaults to true, controls whether the logo is displayed
displaySiteLogoMobiletrue or falseDefaults to true, controls whether the logo is displayed at the mobile breakpoint
displaySiteTitletrue or falseDefaults to true, controls whether the site title is displayed
displaySiteTitleMobiletrue or falseDefaults to true, controls whether the site title is displayed at the mobile breakpoint
invertLogotrue or falseDefaults to false, controls whether the logo is inverted when the mobile menu is open
useStickyHeadertrue or falseDefaults to false, controls whether the header is sticky or static
useSocialLinkstrue 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.
useKatextrue or falseDefaults to false, enables gatsby-remark-katex for displaying math equations.
footerContentLocationString value, “left”, “right” or “center”Defaults to “left”, determines the location of the footer content.
remarkImagesWidthInteger valueDefaults to 1440, allows you to customize the image width option for gatsby-remarks-images.

Variants

gatsby-theme-catalyst-lithium includes additional variants to allow for easier customization of the theme.

  • variants.postContainer: Targets the container div for individual posts
  • variants.postTitle: Targets the title for individual posts
  • variants.postSubTitle: Targets the sub title for individual posts
  • variants.postMeta: Targets the meta for individual posts
  • variants.postImage: Targets the image for individual posts
  • variants.postCategory: Targets the categories for individual posts
  • variants.postListPageTitle: Targets the page title for post lists
  • variants.postListContainer: Targets the container div for the post list
  • variants.postListWrapper: Targets the wrapper div for individual posts within the post list
  • variants.postListImage: Targets the image for individual posts within the post list
  • variants.postListContent: Targets the container div for content of an individual posts within the post list, e.g. Title, sub title, etc.
  • variants.postListTitle: Targets the title for individual posts within the post list
  • variants.postListSubTitle: Targets the sub title for individual posts within the post list
  • variants.postListMeta: Targets the meta for individual posts within the post list
  • variants.postListExcerpt: Targets the excerpt for individual posts within the post list
  • variants.postListReadmore: Targets the read more link for individual posts within the post list
  • variants.postListCategory: Targets the categories for the post list

© 2020 Gatsby Theme Catalyst