Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lekoarts/gatsby-themes

Get high-quality and customizable Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options.
https://github.com/lekoarts/gatsby-themes

gatsby gatsby-theme gatsby-themes gatsbyjs lekoarts lekoarts-oss theme-ui themes typescript

Last synced: about 1 month ago
JSON representation

Host: GitHub
URL: https://github.com/lekoarts/gatsby-themes
Owner: LekoArts
License: mit
Created: 2019-07-04T19:09:25.000Z (over 5 years ago)
Default Branch: main
Last Pushed: 2024-10-01T01:42:47.000Z (about 1 month ago)
Last Synced: 2024-10-09T17:54:11.052Z (about 1 month ago)
Topics: gatsby, gatsby-theme, gatsby-themes, gatsbyjs, lekoarts, lekoarts-oss, theme-ui, themes, typescript
Language: TypeScript
Homepage: https://themes.lekoarts.de
Size: 99.7 MB
Stars: 1,875
Watchers: 16
Forks: 544
Open Issues: 18
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

Free & Open Source Gatsby Themes by LekoArts

Get **high-quality** and **customizable** Gatsby themes to quickly bootstrap your website! Choose from many professionally created and impressive designs with a wide variety of features and customization options. Use Gatsby Themes to take your project to the next level and let you and your customers take advantage of the many benefits Gatsby has to offer.

## 🎨 Themes Overview

[![Themes Preview Banner](https://img.lekoarts.de/gatsby/thin_banner.jpg)](https://themes.lekoarts.de)

## 💼 Contents

This repository is a collection of my Gatsby themes, managed as a [monorepo](https://trunkbaseddevelopment.com/monorepos/) with [Changesets](https://github.com/changesets/changesets) and [yarn workspaces](https://yarnpkg.com/lang/en/docs/workspaces/).

- `.changeset`: Changeset files and configuration.
- `.github`: GitHub actions, templates for issues, and FUNDING file. A GitHub action will publish the `/examples` as starters to individual GitHub repositories. Another GitHub action will handle the publishing of packages.
- `cypress`: Contains the Cypress tests for `examples`.
- `examples`: Contains the corresponding example sites for the `themes`. These projects can and should be used as a starter and will be copied over to their own repository. Hence they contain example data and additional Gatsby plugins (e.g. `gatsby-plugin-manifest`). The folder names are the contents after `gatsby-theme-*`.
- `packages`: Shared helpers and utilities for the themes. Compiled with [tsup](https://github.com/egoist/tsup).
- `plop-templates`: Template for [plop.js](https://plopjs.com/).
- `scripts`: In order to run the tests on GitHub Actions some utility bash scripts are needed which are located here.
- `themes`: Contains the themes themselves. They should only have the bare minimum of plugins installed (as `examples` can expand them) and also use `Theme UI` for styling. The naming of the folders must be `gatsby-theme-[name-with-dashes]` and the package name under the scope of `@lekoarts`.
- `www`: Contains the source code for [themes.lekoarts.de](http://themes.lekoarts.de).
- `vite.config.ts` & `vitest-setup.ts`: [Vitest](https://vitest.dev/) is used for Unit Testing.

## 🤝 How to Contribute

Make sure that you have `yarn` installed on your machine (as it's mandatory for `yarn workspaces`). Fork this repository, clone it and run `yarn` in the root directory.

To launch the development server of an example site, use:

```sh
yarn workspace [examples/name] develop
```

Or for a build:

```sh
yarn workspace [examples/name] build
```

In the case of `examples/emma` this command would be `yarn workspace emma develop`. Now you can make changes to the respective theme and see them via Hot-Reloading.

Commit your changes to a feature branch of your fork and open up a PR against this repository. The PR will have checks in place (unit and end-to-end tests) which you can also run on your machine in preparation for the PR.

Have a look at the [contributing guide](CONTRIBUTING.md) to learn more.

## 🤩 Support Me

Thanks for using this project! I'm always interested in seeing what people do with my projects, so don't hesitate to tag me on [Twitter](https://twitter.com/lekoarts_de) and share the project with me.

Please star this project, share it on Social Media or consider supporting me on [GitHub Sponsors](https://github.com/sponsors/LekoArts)!

## 🎓 Learning Gatsby Themes

### Articles from lekoarts.de

- [How I used Theme UI to build my Gatsby Themes library](https://www.lekoarts.de/javascript/how-i-used-theme-ui-to-seamlessly-convert-design-to-code?utm_source=gatsby-themes&utm_medium=README)
- [Setting up a Gatsby Themes workspace with TypeScript, ESLint & Cypress](https://www.lekoarts.de/javascript/setting-up-a-yarn-workspace-with-typescript-eslint-and-cypress?utm_source=gatsby-themes&utm_medium=README)
- [Specimens for Gatsby powered Design Systems](https://www.lekoarts.de/garden/specimens-for-gatsby-powered-design-systems?utm_source=gatsby-themes&utm_medium=README)
- [Creating your own Status Dashboard with Gatsby](https://www.lekoarts.de/garden/creating-your-own-status-dashboard-with-gatsby?utm_source=gatsby-themes&utm_medium=README)

### Official resources

- [Gatsbyjs.com - Gatsby Themes](https://www.gatsbyjs.com/docs/themes/)
- [Building a Theme](https://www.gatsbyjs.com/tutorial/building-a-theme/)
- [Free egghead.io "Gatsby Theme Authoring" course](https://egghead.io/courses/gatsby-theme-authoring)

### Paid resources

- [Composable Gatsby Themes](https://egghead.io/courses/composable-gatsby-themes)