Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/dashpilot/netlify-build-status-widget
Widget that shows the current status of your Netlify builds. Ideal for use with Netlify CMS
https://github.com/dashpilot/netlify-build-status-widget
netlify netlify-cms status-widget
Last synced: 3 months ago
JSON representation
Widget that shows the current status of your Netlify builds. Ideal for use with Netlify CMS
- Host: GitHub
- URL: https://github.com/dashpilot/netlify-build-status-widget
- Owner: dashpilot
- Created: 2020-01-26T18:34:12.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-02-03T20:36:26.000Z (about 3 years ago)
- Last Synced: 2023-03-10T14:24:32.005Z (almost 2 years ago)
- Topics: netlify, netlify-cms, status-widget
- Language: CSS
- Homepage:
- Size: 12.3 MB
- Stars: 16
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Netlify Build Status Widget (with live status display)
Widget that shows the current status of your Netlify builds. Ideal for use with Netlify CMS
# The problem this widget solves
If you use Netlify CMS, there currently is no way to see the status of your build. You press save, visit your site, and the changes aren't visible (yet), and there's no way to know when the build is finished. This can be especially confusing for users who are used to Wordpress and other 'monolithic' CMS systems. I ran into this issue myself, and saw that [others](https://github.com/netlify/netlify-cms/issues/2324) were also looking for a solution.
This package displays a widget on your site (if you're logged in to Netlify CMS), displaying the current build status of your site. So you press save in Netlify CMS, visit your site, and get live updates of the build status! The script contains the widget code as well as a Netlify function that checks the build status.
# Example
[https://netlify-build-status-widget.netlify.com](https://netlify-build-status-widget.netlify.com/)
# Preview
# How to use?
## Option 1: Standalone (without Netlify CMS / Netlify Identity)
This is the simplest option: deploy this project to Netlify, and create the following environment variables in Netlify (Settings > Build & Deploy > Environment):
`NETLIFY_TOKEN` (create a token via User Settings > Applications > Personal Access Tokens)
`NETLIFY_SITE_ID` (Settings > General > Site Details > API ID).
## Option 2: Integration with Netlify CMS and Netlify Identity
### Step 1: add script
Just add the widget CCS and JS to the head of your index.html:
```javascript
```
### Step 2: init the script
Assuming you already set up the [Netlify Identity redirect](https://www.netlifycms.org/docs/add-to-your-site/#add-the-netlify-identity-widget) in your index.html, simply modify it to look like this:
```javascript
if (window.netlifyIdentity) {
window.netlifyIdentity.on("init", user => {
if (!user) {
window.netlifyIdentity.on("login", () => {
document.location.href = "/admin/";
});
} else {
checkBuildStatus();
}
});
}
```
### Step 3: add and configure the Netlify function
Run: `npm i netlify --save` in your project's folder (this installs the Netlify API NPM package)
Drop the status.js file in your Netlify functions directory, and create the following environment variables in Netlify (Settings > Build & Deploy > Environment):
`NETLIFY_TOKEN` (create a token via User Settings > Applications > Personal Access Tokens)
`NETLIFY_SITE_ID` (Settings > General > Site Details > API ID).
Visit your site and you should see the Netlify Build Status widget, showing you the current build status!
# Todo
- make a button so you can easily refresh the page
I welcome any feedback on the implementation, since it's been a while since I've released anything :-)
## Press the :star: button
Don't forget to press the :star: button to let me know I should continue improving this project.