Skip to content

gatsby-theme-catalyst-core

This acts as a core theme on which all other themes are based. It houses a basic site architecture, as much logic as possible, along with most dependencies. Imagine this as the foundation of a house. There are some latent components which are used to enable easy shadowing in child themes. There are minimal styles applied at this stage. For an example of what this can look like when finished with styles and other themes check out - gatsby-starter-catalyst-hydrogen.

Demos

Catalyzing Start

gatsby new catalyst-core https://github.com/ehowey/gatsby-starter-catalyst-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.

Example Config:

{
resolve: `gatsby-theme-catalyst-core`,
options: {
assetPath: "src/images",
useAlertBanner: true
}
}

Remark Plugins

gatsby-plugin-mdx uses standard Gatsby remark plugins to help manage the markdown content. The following plugins are installed and configured:

  • gatsby-remark-relative-images
  • gatsby-remark-images
  • gatsby-remark-copy-linked-files
  • gatsby-remark-smartypants
  • gatsby-remark-reading-time
  • gatsby-remark-external-links
  • gatsby-remark-responsive-iframe

One notable omission is gatsby-remark-autolink-headers - this is handled through Theme-UI and headers are currently receiving an automatic ID which can be linked to.

You can customize the max image width generated by gatsby-remark-images via the theme option remarkImagesWidth, default max width is 1440px.

© 2021 Gatsby Theme Catalyst