Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/khriztianmoreno/gatsby-status-dashboard
Dashboard showing the statuses of my Netlify builds & CircleCI tests
https://github.com/khriztianmoreno/gatsby-status-dashboard
circleci dashboard gatsby hacktoberfest jamstack jamstack-site netlify react status
Last synced: about 1 month ago
JSON representation
Dashboard showing the statuses of my Netlify builds & CircleCI tests
- Host: GitHub
- URL: https://github.com/khriztianmoreno/gatsby-status-dashboard
- Owner: khriztianmoreno
- License: mit
- Created: 2019-08-04T02:02:40.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T17:35:58.000Z (about 2 years ago)
- Last Synced: 2024-04-15T00:05:15.101Z (10 months ago)
- Topics: circleci, dashboard, gatsby, hacktoberfest, jamstack, jamstack-site, netlify, react, status
- Language: JavaScript
- Homepage: https://status-dashboard-gatsby.netlify.com/
- Size: 7.29 MB
- Stars: 0
- Watchers: 3
- Forks: 1
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/status-dashboard-gatsby/deploys)
Gatsby Status Dashboard
Showing the statuses of Netlify deploys & CircleCI projects. Made with [gatsby-source-netlify](https://www.gatsbyjs.org/packages/gatsby-source-netlify/) and [gatsby-source-circleci](https://www.gatsbyjs.org/packages/gatsby-source-circleci/).
[**Demo Website**](https://status-dashboard-gatsby.netlify.com/)
## 🚀 Getting Started
[](https://app.netlify.com/start/deploy?repository=https://github.com/khriztianmoreno/gatsby-status-dashboard)
1. **Clone a Gatsby site.**
Use the Gatsby CLI to create a new site clone this repository.
```sh
git clone new project-name [email protected]:khriztianmoreno/gatsby-status-dashboard.git
```
2. **Start developing.**
Navigate into your new site's directory and start it up.
```sh
cd project-name
gatsby develop
```
### Environment variables
You **must** have two environment variables configured in your project as the theme relies on them: `NETLIFY_ACCESS_KEY` and `CIRCLECI_KEY`. Otherwise the theme can't access information from the source plugins.
Gatsby also has [official documentation](https://www.gatsbyjs.org/docs/environment-variables/) on environment variables.
### Components
This theme doesn't setup an individual page but rather exposes two React components:
- `Info`: Displays the number of Netlify websites and CircleCI projects (e.g. "18 Websites" and "7 CircleCI Projects")
- `Grid`: Displays the sites in a card grid (using CSS Grid). The individual cards contain the name of the site, links to GitHub and CircleCI, and displays the Netlify deploy status & optionally the CircleCI status
3. **Open the code and start customizing!**
Your site is now running at `http://localhost:8000`!
If you want to learn more about how you can use a Gatsby starter that is configured with a Gatsby theme, you can checkout this [shorter](https://www.gatsbyjs.org/docs/themes/using-a-gatsby-theme/) or [longer](https://www.gatsbyjs.org/tutorial/using-a-theme/) tutorial. The tutorials don't exactly apply to this starter however the concepts are the same.
### Formatters
The Netlify API doesn't update the paths to GitHub when you e.g. change your username (it'll keep the one from the time you created the Netlify project). As the theme will use the GitHub URLs from Netlify projects to check against CircleCI (to see if it can find CircleCI projects with the same GitHub URL), they need to be the same.
Hence this theme allows to shadow a `formatters` file. It'll be used to replace words in the URL, e.g. replace `khriztianmoreno` with `khriztianmoreno`. You can find the file in `src/utils`.
## 🎓 Learning Gatsby
Looking for more guidance? Full documentation for Gatsby lives [on Gatsby's website](https://www.gatsbyjs.org/).
### Themes
- To learn more about Gatsby themes specifically, we recommend checking out the [theme docs](https://www.gatsbyjs.org/docs/themes/).
### General
- **For most developers, I recommend starting with the [in-depth tutorial for creating a site with Gatsby](https://www.gatsbyjs.org/tutorial/).** It starts with zero assumptions about your level of ability and walks through every step of the process.
- **To dive straight into code samples, head [to Gatsby's documentation](https://www.gatsbyjs.org/docs/).** In particular, check out the _Reference Guides_ and _Gatsby API_ sections in the sidebar.