gatsby-theme-joy-ui

A joy-ui gatsby theme plugin with plug and play functionality. Simply install this plugin to your gatsby project and you are ready to go.

Motivation

For far too long, there have been themes that just require you to figure it out yourself. gatsby-theme-joy-ui is designed to help alleviate those concerns and has been carefully crafted to help beginners with Gatsby & Joy-UI

Installation

1. Install gatsby-theme-joy-ui with npm or yarn within your gatsby site alongside of @mui/joy

  npm install gatsby-theme-joy-ui @mui/joy

2. Configure your theme within the gatsby-config(.js|.ts) file of your project

//gatsby-config.js
module.exports = {
  plugins: {
    resolve: `gatsby-theme-joy-ui`,
    options: {
      //configure your options here. Leave blank if there are none
      //webFontsConfig:{}
      //emotionPluginConfig:{}
    },
  },
};

Configuration Options

Note: If you do not know how to configure theme options, refer to this guide -> theme-api congiuration

Setting Up A Custom Font

1. Refer to gatsby-plugin-webfonts for up to date configuration options
2. Create your custom font configuration within the gatsby-theme-joy-ui.webFontsConfig configuration property in gatsby-config.js Example:

webFontsConfig:{
    fonts: {
      google: [
        {
          family: `Roboto`, // your font name here
          variants: [`300`, `400`, `500`],
        },
      ],
    },
}

Configuring Emotion

1. Refer to gatsby-plugin-emotion for up to date configuration options
2. Create your custom emotion configuration within the gatsby-theme-joy-ui.emotionPluginConfig configuration property in gatsby-config.js Example:

     emotionPluginConfig:{
        // Accepts the following options, all of which are defined by `@emotion/babel-plugin` plugin.
        // The values for each key in this example are the defaults the plugin uses.
        sourceMap: true,
        autoLabel: "dev-only",
        labelFormat: `[local]`,
        cssPropOptimization: true,

}

Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

Please adhere to this project's code of conduct.

Running Tests

To run tests, run the following command

  npm run test

Important Links

• Gatsby Theme Joy UI Plugin Page
• Gatsby Theme Joy UI NPM Package Page

Issues

If you see any issues such as missing features/bugs, please refer to gatsby-joy-ui-theme's issue page

Inspired From

• gatsby-theme-material-ui
• Awesome README

Authors

• @trentschnee https://www.github.com/trentschnee | https://www.linkedin.com/in/trentschnee/))