Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/trentschnee/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.
https://github.com/trentschnee/gatsby-theme-joy-ui
gatsby gatsby-plugin gatsby-theme gatsbyjs joy-ui joyui mui
Last synced: about 1 month ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/trentschnee/gatsby-theme-joy-ui
- Owner: trentschnee
- License: mit
- Created: 2022-11-17T07:11:38.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-10T16:16:48.000Z (over 1 year ago)
- Last Synced: 2024-04-23T21:27:40.908Z (7 months ago)
- Topics: gatsby, gatsby-plugin, gatsby-theme, gatsbyjs, joy-ui, joyui, mui
- Language: TypeScript
- Homepage:
- Size: 3.6 MB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: contributing.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-theme-joy-ui
A joy-ui [gatsby theme plugin ](https://www.gatsbyjs.com/docs/themes/what-are-gatsby-themes/) 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](https://github.com/trentschnee/gatsby-theme-joy-ui) is designed to help alleviate those concerns and has been carefully crafted to help beginners with [Gatsby](https://www.gatsbyjs.com/) & [Joy-UI](https://mui.com/joy-ui/getting-started/overview/)
## Installation
1. Install gatsby-theme-joy-ui with npm or yarn within your gatsby site alongside of @mui/joy
```bash
npm install gatsby-theme-joy-ui @mui/joy
```
2. Configure your theme within the `gatsby-config(.js|.ts)` file of your project
```javascript
//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](https://www.gatsbyjs.com/docs/theme-api/#configuration)
### Setting Up A Custom Font
1. Refer to [gatsby-plugin-webfonts](https://www.gatsbyjs.com/plugins/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:
```javascript
webFontsConfig:{
fonts: {
google: [
{
family: `Roboto`, // your font name here
variants: [`300`, `400`, `500`],
},
],
},
}
```
### Configuring Emotion
1. Refer to [gatsby-plugin-emotion](https://www.gatsbyjs.com/plugins/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:
```javascript
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
```bash
npm run test
```
## Important Links
- [Gatsby Theme Joy UI Plugin Page](https://www.gatsbyjs.com/plugins/gatsby-theme-joy-ui/)
- [Gatsby Theme Joy UI NPM Package Page](https://www.npmjs.com/package/gatsby-theme-joy-ui/)
## Issues
If you see any issues such as missing features/bugs, please refer to [gatsby-joy-ui-theme's issue page](https://github.com/trentschnee/gatsby-theme-joy-ui/issues)
## Inspired From
- [gatsby-theme-material-ui](https://github.com/hupe1980/gatsby-theme-material-ui)
- [Awesome README](https://github.com/matiassingers/awesome-readme)
## Authors
- @trentschnee [https://www.github.com/trentschnee](https://www.github.com/trentschnee) | [https://www.linkedin.com/in/trentschnee/)](https://www.linkedin.com/in/trentschnee/))