**cState is now ready for use in production! With a switch to the Hugo theming system, you can now independently manage incidents, content, settings, while seamlessly keeping cState up to date.**
+ Whole new header design that lets you choose between a logo and just text
+ Updated incident history section and post design
+ Updated config file; added variables for changing the look and feel of your status page
+ Ensured proper legacy browser support by making JavaScript optional
+ Update incident view to include better mini header, clear issue type, and whether it is resolved
+ Updated footer design, added copyright notice
- Removed pinging, which was never properly implemented
- Removed notifications, as they never worked in the first place
- Fixed bug, where the main announcement box would clip, creating a small white 1px border
- Generally removed a lot of leftover cruft and ensured cState is in pristine condition for a stable release
> TL;DR is to be a good, sensible person. It does not matter who you are.
> TL;DR is to be a good, sensible person. It does not matter who you are, this rule applies to _everybody_.
This community as a whole, much like others, is made up of a mixture of professionals and volunteers from all over the world, working on every aspect of the project at hand. Diversity can be a strength, but it can also lead to communication issues and unhappiness. To that end, we have a few ground rules that we ask people to adhere to. This code applies to all spaces managed by the project creators equally.
[](https://github.com/mistermantas/cstate/commits/master)
[](https://github.com/mistermantas/cstate/tree/master/)
[](https://github.com/mistermantas/cstate/releases) [](https://github.com/mistermantas/cstate/commits/master) [](https://github.com/mistermantas/cstate/tree/master/) [](https://gitter.im/cState/Lobby) [](https://twitter.com/mistermantas)
> The fastest and most efficient status page on the market, beating even paid solutions. cState has outstanding browser support (IE8+) and can easily be managed with GitHub Pages or Netlify. Ready for production.
> Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages.
+ Built with [Hugo](https://gohugo.io), a hyperfast Golang generator
+ Works not just on mobile browsers, but also on archaic browsers like Internet Explorer 8
+ Works not just on mobile, but also on the archaic Internet Explorer 8
+ Comes with a simple, focused, and extremely light design
+ Edit your status page just from the config file
+ Comes pre-equipped with Netlify CMS for quick updates
+ Edit your status page from a simple config file
+ Comes pre-equipped with Netlify CMS for quick admin updates
+ Easy to edit and deploy on Netlify or GitHub Pages
+ Secure, ready for HTTPS, thanks to [JAMstack](https://jamstack.org/)
## Getting started
For this tutorial, it is assumed that you have Hugo and Git installed (check with `hugo version` & `git --version`).
## Install
#### Production (with Netlify)
We encourage you to use [Netlify](https://www.netlify.com) for cState. These are the following options you need to change in deploy settings:
+ Build command: **hugo**
+ Publish directory: **public**
+ Add one build enviroment variable
+ Add one build environment variable
+ Key: **HUGO_VERSION**
+ Value: **0.31**
For this tutorial, it is assumed that you have Hugo and Git installed (check with `hugo version` & `git --version`).
**This does not seem to work in one go on PowerShell, so enter each command individually.**
1. Download the contents of the `exampleSite` directory in this repository. This will be your site guts, which will hold the content and configuration for the status page.
2. Create a `themes` folder and navigate to it on the command line.
```bash
# 1. First off, we initialize the Git repository
# !: If you already have one, skip this step
git init;
# !: THIS ONLY WORKS ON BASH, USE THE 2ND COMMAND FOR POWERSHELL
# 2. Then this creates all the necessary directories
4. Set up cState for your liking. It is now ready to be deployed
#### Development
Now is a good time to make cState look the way you want it to, so upload a favicon (and logo) to `/static/`. Edit `config.yml` to fit your needs. And so on, and so forth.
1. Clone this repository in the command line:
**Do not change any files in the `themes` directory or its subdirectories. Everything is handled automatically by Git. If the content or static directories are empty, create at least one file in them (such as `gitkeep.txt`) to make sure Git picks them up.**
3. Then try out the site! A link to it will be shown on screen.
# All done
git push -u origin master
```bash
hugo serve
```
For an example of a working status page, see [rabbitnode/status](https://github.com/rabbitnode/status).
The main directory is the theme itself (the cState guts, basically) and the `exampleSite` folder houses all content. Use this local setup to experiment before deploying to production!
If you would like to commit/make a PR, make sure that `themesDir` is a comment before trying to merge upstream.
## Updating
From your root directory, enter these 2 commands:
Assuming the production install instructions were followed, keep cState updated by having an up to date Git submodule in the `themes` folder. containing this repository. Your content will stay separate, as to avoid any conflicts.
```bash
# 1. Fetch submodules
git submodule update --init--recursive;
# 2. Now pull the changes
git submodule foreach git pull origin master
git submodule update
```
You may also need to update the build enviroment variable **HUGO_VERSION** if you are using Netlify to [the latest equivelant](https://github.com/gohugoio/hugo/releases).
You can [read more on git-scm.com](https://git-scm.com/book/en/v2/Git-Tools-Submodules) about submodules.
## FAQ
### Where do issues go? What is the frontmatter, how do I define metadata for issues?
Create a file in `content/issues`. The name of the file will be the slug (what shows up in the URL bar). For example, this is what `i-am-an-issue.md` should look like:
Create a file in `content/issues`. The name of the file will be the slug (what shows up in the URL bar). For example, this is what `major-outage-east-us.md` should look like:
```md
---
Title: Give your issue a good title
Description: This description is here merely for metadata purposes and may show up in search results. It may be used as a summary.
Date: 2017-02-30 14:30
Title: Major outage in East US
Date: 2017-02-30 14:30:00
Resolved: true
ResolvedWhen: 2017-02-30 16:00:00
Severity: down
Affected:
-Client Area
-API
Section: post
---
Content goes here.
*Monitoring* - After hitting the ole reboot button Example Chat App is now recovering. We're going to continue to monitor as everyone reconnects. {{<track"2018-04-1316:50:00">}}
*Investigating* - We're aware of users experiencing unavailable guilds and issues when attempting to connect. We're currently investigating. {{<track"2018-04-1315:54:00">}}
```
Time to break that down.
`Title`: This is the one of the most important parts of an incident. *(required)*
`Description`: This description is here merely for metadata purposes and may show up in search results. It may be used as a summary.
`Date`: An ISO-8601 formatted date. Does not include time zone. *(required)*
`Date`: An ISO-8601 formatted date. Does not include time zone. This is when you first discovered the issue. *(required)*
`Resolved`: Whether issue should affect overall status. Either `true` or `false`. *(boolean, required)*
`ResolvedWhen`: An ISO-8601 formatted date. Does not include time zone. This is when downtime stopped. You may set the time that downtime ended without completely resolving the issue (thus leaving time for monitoring).
`Severity`: If an issue is not resolved, it will have an applied severity. There are 3 levels of severity: `notice`, `disrupted`, and `down`. If there are multiple issues, the status page will take the appearance of the more drastic issue (such as `disrupted` instead of `notice`). *(required)*
`Affected`. Add the items that were present in the config file which should alter the status of each individual system (component). *(array, required)*
`Section`. This must be `issue`, so that Hugo treats it as one. *(required)*
### Is there an admin panel or some easy way to change the state of each issue?
If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similiar.
If you use [Netlify](https://www.netlify.com), you can expect to see Netlify CMS integration very soon. Otherwise, you could fall back to [prose.io](http://prose.io) or something similar.
### How do I make this work on GitHub Pages?
Compile locally, commit changes, and push them out. We do recommend using [Netlify](https://www.netlify.com), however.
Compile locally (using production instructions), commit changes, and push them out. Using [Netlify](https://www.netlify.com) is recommended as it simplifies the process.
### My question was not answered!
...
...
@@ -146,8 +145,9 @@ This part of the documentation still needs to finished. [Questions](https://gith
+ Glance over the [Code of Conduct](/CODE_OF_CONDUCT.md).
+ Before submitting a pull request, create an issue to [discuss the implications of your proposal](https://github.com/mistermantas/cstate/issues).
+ Write consistent, simple, and readable code. You can [join the Chorale Discord](http://discord.io/choraleapp) to discuss in `#cstate`.
+ Write consistent, simple, readable code and precise documentation.
+ [Join the Gitter chat](http://discord.io/choraleapp) for help or discussion.
At approximately 14:01, a Redis instance acting as the primary for a highly-available cluster used by our API services was migrated automatically by Google’s Cloud Platform. This migration caused the node to incorrectly drop offline, forcing the cluster to rebalance and trigger known issues with the way our API instances handle Redis failover. After resolving this partial outage, unnoticed issues on other services caused a cascading failure through Example Chat App’s real time system. These issues caused enough critical impact that Example Chat App’s engineering team was forced to fully restart the service, reconnecting millions of clients over a period of 20 minutes.
---
*Update* - A fix has been implemented and we are monitoring the results. Looks like this has been fixed. {{<track"2018-04-1317:30:00">}}
*Monitoring* - After hitting the ole reboot button Example Chat App is now recovering. We're going to continue to monitor as everyone reconnects. {{<track"2018-04-1316:50:00">}}
*Investigating* - We're aware of users experiencing unavailable guilds and issues when attempting to connect. We're currently investigating. {{<track"2018-04-1315:54:00">}}
We believe all users experiencing issues have been able to connect at this time. {{<track"2018-05-2505:54:00">}}
*Monitoring* - We believe the connectivity issues are being caused by an isolated ISP issue. We've had reports that swapping to Google DNS servers (see here; https://developers.google.com/speed/public-dns/docs/using) resolves the problem for users. {{<track"2018-05-2504:40:00">}}
*Investigating* - We're aware of reports that users are experiencing connection issues on the East coast of the United States. We're currently investigating these issues, and apologize for any inconvenience it may be causing you. {{<track"2018-05-2504:13:00">}}
{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
{{ $active := where $incidents "Params.resolved" "=" false }}
...
...
@@ -6,18 +7,8 @@
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}
<bodyclass="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
<bodyclass="status status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }} {{ if not .Site.Params.alwaysKeepBrandColor }}change-header-color{{ end }}">
<smallclass="date">{{ .Date.Format "January 02, 2006 at 3:04 PM" }}</small><br>
<strongclass="faded">{{ .Title }}</strong>
{{ .Content }}
<divclass="padding"></div>
{{ else }}{{ end }}
<!-- Individual info -->
{{ if not $active }}
<divclass="padding"></div>
<divclass="components">
{{ $systems := .Site.Params.systems }}
{{ range $index, $systems }}
<divclass="component"data-status="ok">
{{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
{{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
{{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
{{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
<divclass="component"data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
