🔥 Open source static (serverless) status page. Uses hyperfast Go & Hugo, minimal HTML/CSS/JS, customizable, outstanding browser support (IE8+), preloaded CMS, read-only API, badges & more.
Mostly bugfixes but there's a nice added feature for the components:
link as an optional attribute for a component/system. Link to a frontend right from cState's systems list! Thanks @aperullo for an excellent solution - see #223if you want to unblock cors for netlify.toml, use this:
[headers]
for = ["/*.json", "/*.xml"]
[headers.values]
Access-Control-Allow-Origin = "*"
cState has 1540 stars as of Saturday, February 12, 2022. Thanks for your support.
Mostly bugfixes but there's a nice added feature for the components:
link as an optional attribute for a component/system. Link to a frontend right from cState's systems list! Thanks @aperullo for an excellent solution - see #223if you want to unblock cors for netlify.toml, use this:
[headers]
for = ["/*.json", "/*.xml"]
[headers.values]
Access-Control-Allow-Origin = "*"
cState has 1540 stars as of Saturday, February 12, 2022. Thanks for your support.
pin is set to true for issues (can toggle in Netlify CMS as well)If you open the live demo, you can see how pinned informational posts look like.
cState is starred by 1431 people.
Today we're celebrating Hacktoberfest with a critical bugfix to the JSON API so it works properly when checking for a singular component status (unneeded , removed) and expanding 'shields' - SVG badges - to show status for ANY component as per a user suggestion - #208.
You will need to change the config.yml file for this feature to be enabled. (If you use Netlify CMS, just update your site configuration and the SVG links for specific components will start working after the next deploy.)
This is what your outputs should look like:
outputs:
page:
- html
- json
section:
- html
- json
- rss
home:
- html
- json
- rss
- svg
term:
- html
- json
- rss
- svg
Notice that svg is now added to the bottom under term as well as home.
Once you've done that, go to yourexamplesite.com/affected/api/index.svg (or basically just click open the status page, click on one component (in this case it's API) and then add /index.svg to the end of the link.
cState is starred by 1426 people.
v5.0.5 includes:
This has prompted a discussion about maintenance issues and how to make them work better which will be addressed in a future release.
The updates in this release were pushed to the master branch earlier but didn't receive an official release (meaning you could have a v5.0.4 release which was compiled from different source code depending on where you found it). This update is official and will show up as v5.0.5 when checked in console and all the other usual places.
This repo is starred by 1425 people as of midnight October 1st. Make sure to read #207 and join Hacktoberfest 2021 by contributing your thoughts about how to improve cState!
It is highly advised to update if you are using relative time.
cState has 1361 stars. Thanks for using it!
cState has 1255 stars as of May 9th, thank you for your support!
v5.0.2 fixes #180 (@untuned bug report) by showing the date instead of a nonsense relative time calculation for dates that are in the future.
cState v5 recently introduced lots of awesome new features like improvements to handling time, the API, and more. Read migration guide and full changelog
cState has 1233 stars as of May 1st, 2021. Thanks for your support!
v5.0.0 is a bug fix update, so no big changes, but since v5.* in general just came out, I'll add the changelog from the earlier version as well. With this update Netlify builds and CMS work again by default.
As of today, April 19th, 2021, 1217 people have starred this repository. Thank you for your continued support & use of cState. Hope you enjoy the new features!
Some considerations:
informational or the resolved variables for issues. Those are now booleans instead of strings.term is needed to be added as an output method to the config file, but it got renamed in one of the versions etc etc. Some context: https://github.com/gohugoio/hugo/issues/6911
What you MUST change:
At the very bottom or top of your config.yml, if you wish to use the Last modified feature, add this:
# For features like Last modified, you
# need to use a Git repository. If you
# are using Netlify, you are already
# using Git (with GitHub, GitLab, etc)
#
# So, should Git information be used
# for this website?
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
enableGitInfo: true
Next, here are the newly introduced options. They must be indented under Params. You can disable all these (or not even copy paste this bit) and use cState as usual.
# Should relative time (x min ago) be used?
#
# IMPORTANT: In the frontmatter, the dates MUST be in
# the UTC time zone for this to work preperly. If you
# use Netlify CMS, all good — the CMS picks UTC time
# by default. Otherwise, there may be very inaccurate
# times if multiple time zones are in your issue files.
#
# FOR YOUR CONSIDERATION: This feature was introduced in
# v5. It may be a breaking change in the case when you
# wish to use relative time but old issues do not have
# UTC time (and therefore are out of sync by ±24 hours)
#
# Read the wiki for more:
# https://github.com/cstate/cstate/wiki/Customization#time
#
# If enabled, will display relative times in places like
# the incident history and summaries instead of using
# dateFormat and shortDateFormat (except for if you use
# the old shortcode).
#
# Default: `true`
# BOOLEAN; `true`, `false`
useRelativeTime: true
# If enabled, doesn't show seconds on relative times.
#
# With option ON (true):
# "Last checked <1 min ago"
#
# With option OFF (false; default):
# "Last checked 20s ago"
#
# Default: `false`
# BOOLEAN; `true`, `false`
skipSeconds: false
# Should there be an automatic "Last updated"
# text shown below issues?
#
# Default: `true`
# BOOLEAN; `true`, `false`
enableLastMod: true
If you will use relative time, and therefore UTC, consider editing the dateFormat for people who do not use JavaScript (and other fallbacks). Copy and change the options to this:
dateFormat: January 2, 2006 at 3:04 PM UTC
shortDateFormat: 15:04 UTC — Jan 2
To make the API work flawlessy, change the Output Formats to this:
outputs:
page:
- html
- json
section:
- html
- json
- rss
home:
- html
- json
- rss
- svg
term:
- html
- json
- rss
On Netlify, make sure you are using Ubuntu 16.04 (not the old build image) in Build & deploy settings. You can change the HUGO VERSION in the Environment Variables from the Netlify UI or also edit the netlify.toml file.
Add this to your netlify.toml for your site if you don't have it already:
[build.environment]
HUGO_VERSION = "0.80.0"
[[headers]]
for = "/*.json"
[headers.values]
Access-Control-Allow-Origin = "*"
Docs for headers: https://docs.netlify.com/routing/headers/#multi-value-headers
Vercel equivalent (made by contributor);
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
}
]
}
This update brings a lot of requested and long-awaited features, also some bug fixes to your status page.
What is time? It is an important element for a status page to get right. And there are so many ways to show the time. But some are more confusing than others.
Prior to v5, cState did not give too much thought about what kind of time zone the user was in. Yes, there were (and still are) relative calculations of "how long an outage takes", but does the end user know exactly in which time zone at 6PM the issue began?
date: 2019-10-04 18:05:00
For small countries like Lithuania, there is one time zone that everybody is familiar with — GMT+2 in our case. So you could have the time and date, as shown in the config, be 'synced' to Eastern European/Lithuanian time. Would be confusing for people in vastly different time zones like those of North America, but it might not be a big issue for some.
If you have an international user base, then this is a real problem. Again, your company in San Francisco could choose to use the time in that specific region and add on to the date text that we are using this time zone, not another one. Still, this can be prove to be annoying.
For new setups, cState defaults to relative time and ASSUMES YOU USE UTC TIME.
Thanks to all the people who suggested and worked on this feature, most notably @khamer.
There are lots of updates to the API to make it actually useful. Read here
There aren't many breaking changes unless you rely on informational or the resolved variables for issues. Those are now booleans instead of strings.
Also see #159
Check out the new cState project HTML Embed
Last modified
lastMod (last modified date) is now available through the newer, v2, API and I am trying to figure out how to implement it properly in the UI. There's a param in config.yml enableLastMod if you want to check it out.
Category status
Now when a category is closed you can see the status of it. #101 Groups take on the status of their most degraded child components/systems. Opening the category, like always, shows the individual statuses. This feature is only available with JavaScript on.
On new websites, Vercel deployments will automatically allow cross-origin requests
Introduced in #176 from @jacobhq — copy the file introduced in the new exampleSite directory (or cstate/example repo when v5 goes live to production) to use this functionality for the API.
This update has some high priority bugs in it which are fixed for v5.0.1. If Hugo does not build from this release, check if NETLIFY.TOML has the Hugo version set to exactly 0.80.0 (not 0.80). See emergency fix here.
The Netlify CMS configuration file is not valid and is fixed in v5.0.1.
As of today, April 17th, 2021, 1215 people have starred this repository. Thank you for your continued & use of cState. Hope you enjoy the new features!
Some considerations:
informational or the resolved variables for issues. Those are now booleans instead of strings.term is needed to be added as an output method to the config file, but it got renamed in one of the versions etc etc. Some context: https://github.com/gohugoio/hugo/issues/6911
What you MUST change:
At the very bottom or top of your config.yml, if you wish to use the Last modified feature, add this:
# For features like Last modified, you
# need to use a Git repository. If you
# are using Netlify, you are already
# using Git (with GitHub, GitLab, etc)
#
# So, should Git information be used
# for this website?
#
# We recommend to keep this at `true`.
# BOOLEAN; `true`, `false`
enableGitInfo: true
Next, here are the newly introduced options. You can disable all these (or not even copy paste this bit) and use cState as usual.
# Should relative time (x min ago) be used?
#
# IMPORTANT: In the frontmatter, the dates MUST be in
# the UTC time zone for this to work preperly. If you
# use Netlify CMS, all good — the CMS picks UTC time
# by default. Otherwise, there may be very inaccurate
# times if multiple time zones are in your issue files.
#
# FOR YOUR CONSIDERATION: This feature was introduced in
# v5. It may be a breaking change in the case when you
# wish to use relative time but old issues do not have
# UTC time (and therefore are out of sync by ±24 hours)
#
# Read the wiki for more:
# https://github.com/cstate/cstate/wiki/Customization#time
#
# If enabled, will display relative times in places like
# the incident history and summaries instead of using
# dateFormat and shortDateFormat (except for if you use
# the old shortcode).
#
# Default: `true`
# BOOLEAN; `true`, `false`
useRelativeTime: true
# If enabled, doesn't show seconds on relative times.
#
# With option ON (true):
# "Last checked <1 min ago"
#
# With option OFF (false; default):
# "Last checked 20s ago"
#
# Default: `false`
# BOOLEAN; `true`, `false`
skipSeconds: false
# Should there be an automatic "Last updated"
# text shown below issues?
#
# Default: `true`
# BOOLEAN; `true`, `false`
enableLastMod: true
If you will use relative time, and therefore UTC, consider editing the dateFormat for people who do not use JavaScript (and other fallbacks). Copy and change the options to this:
dateFormat: January 2, 2006 at 3:04 PM UTC
shortDateFormat: 15:04 UTC — Jan 2
To make the API work flawlessy, change the Output Formats to this:
outputs:
page:
- html
- json
section:
- html
- json
- rss
home:
- html
- json
- rss
- svg
term:
- html
- json
- rss
On Netlify, make sure you are using Ubuntu 16.04 (not the old build image) in Build & deploy settings. You can change the HUGO VERSION in the Environment Variables from the Netlify UI or also edit the netlify.toml file.
Add this to your netlify.toml for your site if you don't have it already:
[build.environment]
HUGO_VERSION = "0.80.0"
[[headers]]
for = "/*.json"
[headers.values]
Access-Control-Allow-Origin = "*"
Docs for headers: https://docs.netlify.com/routing/headers/#multi-value-headers
Vercel equivalent (made by contributor);
{
"headers": [
{
"source": "/(.*)",
"headers": [
{ "key": "Access-Control-Allow-Origin", "value": "*" },
{ "key": "Access-Control-Allow-Methods", "value": "GET,OPTIONS" },
{ "key": "Access-Control-Allow-Headers", "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" }
]
}
]
}
This update brings a lot of requested and long-awaited features, also some bug fixes to your status page.
What is time? It is an important element for a status page to get right. And there are so many ways to show the time. But some are more confusing than others.
Prior to v5, cState did not give too much thought about what kind of time zone the user was in. Yes, there were (and still are) relative calculations of "how long an outage takes", but does the end user know exactly in which time zone at 6PM the issue began?
date: 2019-10-04 18:05:00
For small countries like Lithuania, there is one time zone that everybody is familiar with — GMT+2 in our case. So you could have the time and date, as shown in the config, be 'synced' to Eastern European/Lithuanian time. Would be confusing for people in vastly different time zones like those of North America, but it might not be a big issue for some.
If you have an international user base, then this is a real problem. Again, your company in San Francisco could choose to use the time in that specific region and add on to the date text that we are using this time zone, not another one. Still, this can be prove to be annoying.
For new setups, cState defaults to relative time and ASSUMES YOU USE UTC TIME.
Thanks to all the people who suggested and worked on this feature, most notably @khamer.
There are lots of updates to the API to make it actually useful. Read here
There aren't many breaking changes unless you rely on informational or the resolved variables for issues. Those are now booleans instead of strings.
Also see #159
Check out the new cState project HTML Embed
Last modified
lastMod (last modified date) is now available through the newer, v2, API and I am trying to figure out how to implement it properly in the UI. There's a param in config.yml enableLastMod if you want to check it out.
Category status
Now when a category is closed you can see the status of it. #101 Groups take on the status of their most degraded child components/systems. Opening the category, like always, shows the individual statuses. This feature is only available with JavaScript on.
On new websites, Vercel deployments will automatically allow cross-origin requests
Introduced in #176 from @jacobhq — copy the file introduced in the new exampleSite directory (or cstate/example repo when v5 goes live to production) to use this functionality for the API.