A Satanic Gatsby theme featuring Chakra UI Dark/Light theme with MDX and other suff

inspired by:

• @LekoArts/gatsby-themes
• gatsby-theme-catalyst
• gatsby-theme-nicky-blog
• emgoto.com

Features

• Chakra UI-based theming
• Light/Dark mode
• MDX

Installation

mkdir my-site
cd my-site
yarn init
# install gatsby-theme-lucifero and it's dependencies
yarn add gatsby react react-dom @adamquadmon/gatsby-theme-lucifero

Usage

Theme options

In the src/config/ folder you will find defaultConfig.js

| Key | Default Value | Description | | ---------- | ------------- | ------------------------------------------------------------------------------------------------------- | | basePath | / | Root url for the theme |

Example usage

// gatsby-config.js
module.exports = {
  plugins: [
    {
      resolve: `@adamquadmon/gatsby-theme-lucifero`,
      options: {
        // basePath defaults to `/`
        basePath: `/sideproject`,
      },
    },
  ],
};

Shadowing

Please read the guide Shadowing in Gatsby Themes to understand how to customize the theme! Generally speaking you will want to place your files into src/@adamquadmon/gatsby-theme-lucifero/ to shadow/override files. The Chakra UI config can be configured by shadowing its files in src/gatsby-theme-lucifero/@chakra-ui/gatsby-plugin.

What's inside

This is a list of included plugins, the ones ending in***** are community plugins

Design

• @chakra-ui/gatsby-plugin* - integrate Chakra UI
• gatsby-plugin-svgr* - SVGR plugin to transform SVGs into React components
• gatsby-plugin-image - responsive images
• gatsby-plugin-sharp - image processing functions built on the Sharp image processing library
• gatsby-transformer-sharp - creates ImageSharp nodes
• react-wordcloud react D3 wordcloud component

Data

• gatsby-source-filesystem - create data, pages, locales folders
• gatsby-plugin-react-i18next* - translate your website using react-i18next
• gatsby-transformer-yaml-full* - YAML parser for data content
• gatsby-plugin-mdx - use MDX for page content
  • mdx-yaml-full - convert !mdx yaml tags to mdx
  • gatsby-remark-images - processes images in markdown so they can be used in the production build
  • gatsby-remark-responsive-iframe - wraps iframes or objects within markdown files in a responsive elastic container with a fixed aspect ratio.
  • gatsby-remark-prismjs - adds syntax highlighting to code blocks in markdown files using PrismJS
  • gatsby-remark-copy-linked-files - copies local files linked to/from Markdown files to the root directory
  • gatsby-remark-unwrap-images - unwrap remark images nodes from paragraph nodes
  • gatsby-remark-embed-video - display videos in Markdown
  • gatsby-remark-relative-images - convert markdown image src(s) to be relative for gatsby-remark-images
  • gatsby-remark-normalize-paths - normalize paths in frontmatter and body of markdown files to be gatsby compliant
  • gatsby-remark-external-links - adds the target and rel attributes to external links in markdown
  • remark-codesandbox - create CodeSandbox directly from code blocks
  • rehype-slug - add id attributes to headings
  • rehype-sanitize - sanitize HTML

SEO & Performances

• gatsby-plugin-robots-txt* - creates robots.txt for your site
• gatsby-plugin-react-helmet - implement React Helmet for SEO stuff
• gatsby-plugin-breadcrumb - add breadcrumbs
• gatsby-plugin-sitemap - create a sitemap for your website
• gatsby-plugin-gdpr-cookies* - add Google Analytics (V4 is supported), Google Tag Manager, Facebook Pixel, TikTok Pixel and Hotjar in a GDPR form to your site
• gatsby-plugin-nprogress - shows the nprogress indicator when a page is delayed
• gatsby-plugin-lodash - Lodash webpack & Babel plugins

Design

Theming

This theme uses Chakra UI for css-in-js styling. You can override theming in the src/gatsby-theme-lucifero/@chakra-ui/gatsby-plugin/ folder, the entrypoint is theme.js

Fonts

add a GoolgeFonts from fontsource using yarn:

yarn add @fontsource/im-fell-english

include the font in gatsby-browser.js:

import '@fontsource/im-fell-english';

use the font in theme files, for example in typography.js:

export const typography = {
  fonts: {
    body: 'IM Fell English',
  },
};

Theme Modes

Chakra UI is configured for Dark and Light mode, you can find some example in the components.js file

export const components = {
  components: {
    Heading: {
      baseStyle: ({ colorMode }) => ({
        color: colorMode === 'dark' ? 'gray.300' : 'gray.600',
      }),
    }
  }
}

Colors

Chakra leverage on TailwindCSS base colors. You can find here all Tailwind colors

Components

The theme provide the following components:

• LayoutPage - Layout for Pages
• LayoutContainer - Base Container including:
  • NavBar - full responsive navbar with LangSelector, ThemeSwitcher, SocialButtons, Logo, address and cell info
  • Footer - Logo with organization info, navigation items, LangSelector, SocialButtons and a Map
  • SEO - with ogImage and SchemaOrg
• Cards - Dispaly responsive Cards for content
• CookieConsent - The GDPR stuff
• Hero - Hero component for home pages

Data

YAML

adding a data/collection.yaml file

character: a
number: 1

---

character: b
number: 2

you can query for data inside using GraphQL:

{
  allCollectionYaml {
    edges {
      node {
        character
        number
      }
    }
  }
}

MDX

In the pages folder you can add MDX files to create pages and posts

NavItems

To override the navigation links of the menu you can create the file src/gatsby-theme-lucifero/hooks/use-navItems.js

Changelog

You can find the extensive changelog of changes on GitHub. You'll be able to see each patch, minor, and major changes and what pull requests contributed to them.

Questions?

If you have general questions or need help with Gatsby, please go to one of the support platforms mentioned in Gatsby's documentation. If you have a specific question about this theme, you can head to the GitHub Discussions of the repository.