@adamquadmon/gatsby-theme-lucifero

    1.1.1 • Public • Published

    @adamquadmon/gatsby-theme-lucifero

    @adamquadmon/gatsby-theme-lucifero is released under the MIT license. Current npm package version.

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

    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

    Data

    SEO & Performances

    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.

    Install

    npm i @adamquadmon/gatsby-theme-lucifero

    DownloadsWeekly Downloads

    32

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    923 kB

    Total Files

    63

    Last publish

    Collaborators

    • adamquadmon