Commit 88a199b6 authored by Mantas's avatar Mantas
Browse files

v2-rc1

parent 4c175215
<p align="center"><img src="https://raw.githubusercontent.com/mistermantas/cstate/master/images/highlight.png" alt="cState"></p>
<p align="center"><img src="https://raw.githubusercontent.com/cstate/cstate/master/images/highlight.png" alt="cState"></p>
<p align="center"><a href="https://github.com/mistermantas/cstate/releases"><img src="https://img.shields.io/github/release/mistermantas/cstate/all.svg?style=flat-square" alt="GitHub release" /></a> <a href="https://github.com/mistermantas/cstate/commits/master"><img src="https://img.shields.io/github/last-commit/mistermantas/cstate.svg?style=flat-square" alt="GitHub last commit" /></a> <a href="https://github.com/mistermantas/cstate/tree/master/"><img src="https://img.shields.io/github/repo-size/mistermantas/cstate.svg?style=flat-square" alt="GitHub repo size in bytes" /></a> <a href="https://gitter.im/cState/Lobby"><img src="https://img.shields.io/badge/chat-gitter-ed1965.svg?style=flat-square" alt="Gitter" /></a> <a href="https://twitter.com/mistermantas"><img src="https://img.shields.io/twitter/follow/mistermantas.svg?style=social&amp;label=Follow" alt="Twitter" /></a></p>
<p align="center"><a href="https://github.com/cstate/cstate/releases"><img src="https://img.shields.io/github/release/cstate/cstate/all.svg?style=flat-square" alt="GitHub release" /></a> <a href="https://github.com/cstate/cstate/commits/master"><img src="https://img.shields.io/github/last-commit/cstate/cstate.svg?style=flat-square" alt="GitHub last commit" /></a> <a href="https://github.com/cstate/cstate/tree/master/"><img src="https://img.shields.io/github/repo-size/cstate/cstate.svg?style=flat-square" alt="GitHub repo size in bytes" /></a> <a href="https://gitter.im/cState/Lobby"><img src="https://img.shields.io/badge/chat-gitter-ed1965.svg?style=flat-square" alt="Gitter" /></a> <a href="https://twitter.com/cstate"><img src="https://img.shields.io/twitter/follow/mistermantas.svg?style=social&amp;label=Follow" alt="Twitter" /></a> <a href="https://github.com/matiassingers/awesome-readme#readme"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome README" /></a></p>
> Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Completely free with Netlify & GitHub Pages.
[**Want an example? Click here to see a live demo!**](https://cstate-example.netlify.com)
[You can also see what an example cState project’s source code.](https://github.com/cstate/example)
*Looking for contributors! See Contribute section:*
## Contents
......@@ -30,6 +32,7 @@
+ 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/)
+ Extensive documentation on the [wiki](https://github.com/cstate/cstate/wiki)
## Getting started
......@@ -57,7 +60,7 @@ mkdir themes; cd themes;
3. Now simply add a Git submodule pointing to this repository, like so:
```bash
git submodule add https://github.com/mistermantas/cstate
git submodule add https://github.com/cstate/cstate
```
4. Set up cState for your liking. It is now ready to be used in production.
......@@ -67,7 +70,7 @@ git submodule add https://github.com/mistermantas/cstate
1. Clone this repository in the command line:
```bash
git clone https://github.com/mistermantas/cstate.git
git clone https://github.com/cstate/cstate.git
```
2. Go to the `exampleSite` folder, like so:
......@@ -139,16 +142,20 @@ Time to break that down.
`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)*
### I have more questions!
Check out [the wiki](https://github.com/cstate/cstate/wiki).
## Contribute
cState needs help to grow, not only would it benefit from stuff like unit tests, but also get influenced by fresh ideas to grow even further.
+ 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).
+ Before submitting a pull request, create an issue to [discuss the implications of your proposal](https://github.com/cstate/cstate/issues).
+ Write consistent, simple, readable code and precise documentation.
+ [Join the Gitter chat](http://discord.io/choraleapp) for help or discussion.
+ You may also the creator’s [mnts Discord](https://discord.gg/EvQZdhT).
## License
[MIT](https://github.com/mistermantas/cstate/blob/master/LICENSE.md) © Mantas Vilčinskas
[MIT](https://github.com/cstate/cstate/blob/master/LICENSE.md) © Mantas Vilčinskas
......@@ -6,7 +6,7 @@
# Welcome to the cState configuration file!
#
# This is the configuration file for v2-rc1.
# This is the configuration file for v2.0!
# If you are using an earlier version, or one
# in the future, such as v3, you may see errors
# pop up when deploying a cState website.
......@@ -44,11 +44,15 @@
# What is your status page called?
# Shows up in the browser bar and meta tags
title: cState Status
title: Eggsample App Status
# What language is this page in?
# What language is this site using?
# Only alters the html[lang] attribute
languageCode: en-US
#
# ISO 639-1 defines abbreviations.
# See: https://en.wikipedia.org/wiki/List_of_ISO_639-1_codes
# Also: https://www.w3schools.com/tags/ref_language_codes.asp
languageCode: en
# What is the hostname or path to the root?
# Where is the site hosted?
......@@ -80,7 +84,6 @@ params:
-
name: Media Proxy
description: This is the service responsible for serving images, audio, and video. It is reliant on our CDN.
# partial: custom/metrics
# What header design should we use?
#
......@@ -120,14 +123,22 @@ params:
# name: Name
# link: https://example.com
# Uptime statistics tab
# Auto refresh the page
# every ~5 min
#
# Shows link to /stats
# (uptime stats)
# This does nothing but
# refresh the page; it
# does not send alerts!
#
# Default: true
# BOOLEAN; `true`, `false`
showUptime: true
autoRefresh: true
# Incident posts shown
# in one page
#
# NUMERIC; Default: `10`
incidentPostsPerPage: 10
# Colors throughout cState
#
......@@ -187,13 +198,13 @@ buildFuture: true
# These options affect the core of cState.
# Please do not change them if you do not
# know what you are doing.
theme: cstate-master
theme: cstate
# If you are developing locally and want
# to contribute to the cState Git repo,
# please uncomment this option but do not
# forget to re-comment it when
themesDir: ../..
# forget to re-comment it when commiting.
# themesDir: ../..
# This option tells cState what version
# your config file is using.
......
---
---
<!--
Please keep this file if you wish to enable API access.
-->
---
title: Uptime
description: This page has some information analyzing the downtime that has been reported on this status page.
type: uptime
---
<!--
Please keep this file if you wish to show uptime stats.
-->
exampleSite/static/logo.png

21.2 KB | W: | H:

exampleSite/static/logo.png

5.57 KB | W: | H:

exampleSite/static/logo.png
exampleSite/static/logo.png
exampleSite/static/logo.png
exampleSite/static/logo.png
  • 2-up
  • Swipe
  • Onion skin
images/screenshot.png

46.4 KB | W: | H:

images/screenshot.png

118 KB | W: | H:

images/screenshot.png
images/screenshot.png
images/screenshot.png
images/screenshot.png
  • 2-up
  • Swipe
  • Onion skin
images/tn.png

37.5 KB | W: | H:

images/tn.png

65 KB | W: | H:

images/tn.png
images/tn.png
images/tn.png
images/tn.png
  • 2-up
  • Swipe
  • Onion skin
......@@ -48,9 +48,16 @@
</div>
{{ end }}
{{ if .Site.Params.autoRefresh }}
<div class="faded right">
<small><em>We auto-refresh every 5 minutes</em></small>
</div>
<div class="padding-s"></div>
{{ else }}
<div class="padding"></div>
{{ end }}
<!-- Individual info -->
<div class="padding"></div>
<div class="components">
{{ $systems := .Site.Params.systems }}
{{ range $index, $systems }}
......@@ -103,17 +110,12 @@
<!-- End main -->
</div>
{{ if .Site.Params.customTabs }}
<div class="tabs">
<div class="contain tabs--inner">
<a href="#incidents" class="tab tab--current">
<a href="/#incidents" class="tab tab--current">
Incidents
</a>
{{ if .Site.Params.showUptime }}
<a href="/stats" class="tab tab--other">
Uptime
</a>
{{ end }}
{{ range .Site.Params.customTabs }}
<a href="{{ .link }}" class="tab tab--other">
......@@ -122,19 +124,70 @@
{{ end }}
</div>
</div>
{{ else }}
<div class="contain">
<h2 class="center">Incident history</h2>
<hr>
</div>
{{ end }}
<div class="contain">
<div class="contain" id="incidents">
<div class="padding"></div>
{{ if not .Data.Pages }}
<p class="center">Looks like we do not have any incidents logged.</p>
{{ if not $incidents }}
<div class="padding"></div>
<h3>Is it the calm before the storm?</h3>
<p>This status page has no logged incidents. This may be because the status page owner (or owners) have recently set up their status page, have had no downtime, or have not logged any downtime.</p>
<div class="padding"></div>
{{ else }}
{{ range .Data.Pages }}
{{ $paginator := .Paginate $incidents .Site.Params.incidentPostsPerPage }}
{{ range $paginator.Pages }}
{{ .Render "issue" }}
{{ end }}
<!-- If there are more than 2 pages, show pagination -->
{{ if gt $paginator.TotalPages 1 }}
<hr>
<div class="center">
{{ if $paginator.HasPrev }}
<a href="{{ $paginator.Prev.URL }}#incidents">
&nbsp;
Previuos
</a>
{{ else }}
<span class="faded">
&nbsp;
Previuos
</span>
{{ end }}
&nbsp; &nbsp;
{{ $paginator.PageNumber }}
/
{{ $paginator.TotalPages }}
&nbsp; &nbsp;
{{ if $paginator.HasNext }}
<a href="{{ $paginator.Next.URL }}#incidents">
Next &nbsp;
</a>
{{ else }}
<span class="faded">
Next &nbsp;
</span>
{{ end }}
</div>
{{ end }}
{{ end }}
</div>
{{ partial "js" . }}
{{ partial "footer" . }}
</body>
......
......@@ -11,7 +11,7 @@
<p>{{ .Site.Params.description }}</p>
<!-- Please keep this one around to help cState grow <3 -->
<small class="copyright faded">Powered by <a href="https://github.com/mistermantas/cstate">cState <b>v2.0-rc1</b></a></small>
<small class="copyright faded">Powered by <a href="https://github.com/cstate/cstate">cState v2.0</a></small>
</div>
</div>
......
......@@ -3,7 +3,7 @@
* Dev toolset
*/
console.log('Welcome to cState! https://github.com/mistermantas/cstate');
console.log('Welcome to cState v2.0! https://github.com/cstate/cstate');
document.querySelector('html').className = 'js';
......@@ -11,20 +11,15 @@
* Make theme color pretty
*/
if (document.body.className === 'status-down') {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeDownColor);
} else if (document.body.className === 'status-disrupted') {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeDisruptedColor);
} else {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
if (document.body.className === 'change-header-color') {
if (document.body.className === 'status-down') {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeDownColor);
} else if (document.body.className === 'status-disrupted') {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeDisruptedColor);
} else {
document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
}
}
</script>
<!--
<script>
/**
* Check for internet
*/
function hasClass(element, className) {
return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
......@@ -32,6 +27,8 @@
if (hasClass(document.querySelector('body'), 'status-homepage')) {
var lastUpdated = document.querySelector('.summary__date');
lastUpdated.innerHTML = 'Last checked just now';
var lastUpdate = new Date();
function timeSince(date) {
......@@ -63,96 +60,19 @@
var aDay = 24*60*60*1000;
}
function checkCurrentStatus() {
// Check for each status
if (hasClass(document.querySelector('body'), 'status-ok')) {
window.currentState = 'Operational';
}
if (hasClass(document.querySelector('body'), 'status-disrupted')) {
window.currentState = 'Disrupted';
}
if (hasClass(document.querySelector('body'), 'status-down')) {
window.currentState = 'Down';
}
if (hasClass(document.querySelector('body'), 'status-notice')) {
window.currentState = 'Maintenance';
}
}
checkCurrentStatus();
// Set for first time use
if (typeof(Storage) !== 'undefined') {
window.sessionStorage.setItem('priorState', currentState);
}
// Show second by second updates
window.setInterval(function() {
if (hasClass(document.querySelector('body'), 'status-homepage')) {
lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
}
checkCurrentStatus();
if (typeof(Storage) !== "undefined") {
if (window.sessionStorage.getItem('priorState') !== currentState) {
displayNotification('Status changed from ' + window.sessionStorage.getItem('priorState') + ' to ' + currentState);
var lastUpdateTime = new Date() - lastUpdate;
// Refresh every 4m 30s
if (lastUpdateTime > 290000) {
location.reload;
}
window.sessionStorage.setItem('priorState', currentState);
} else {
console.log('UNSUPPORTED - SMART NOTIFICATIONS');
}
}, 1000);
/**
* Modern browser shiz
*/
if (navigator.serviceWorker) {
console.log('Service Worker and Push is supported');
navigator.serviceWorker.register('sw.js')
.then(function(swReg) {
console.log('Service Worker is registered', swReg);
swRegistration = swReg;
})
.catch(function(error) {
console.error('Service Worker Error', error);
});
} else {
console.log('Push messaging is not supported');
}
Notification.requestPermission(function(status) {
console.log('Notification permission status:', status);
});
function displayNotification(title, body) {
if (Notification.permission == 'granted') {
navigator.serviceWorker.getRegistration().then(function(reg) {
var options = {
body: body,
icon: '/favicon.png',
vibrate: [100, 50, 100],
data: {
dateOfArrival: Date.now(),
primaryKey: 1
},
actions: [
{action: 'view', title: 'View incident'},
{action: 'close', title: 'Dismiss'},
]
};
reg.showNotification(title, options);
});
}
}
}, 5000)
</script>
-->
{{ if ne .Site.Params.googleAnalytics "UA-00000000-1" }}
<!-- Global site tag (gtag.js) - Google Analytics -->
......
......@@ -10,7 +10,7 @@
<title>{{ if eq .Title .Site.Title }}{{ .Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title>
<link rel="canonical" href="{{ .Permalink }}">
{{ .Hugo.Generator }}
<meta name="theme-color" content="#{{ .Site.Params.ok }}">
<meta name="theme-color" content="#{{ .Site.Params.brand }}">
<script>
var themeBrandColor = '#{{ .Site.Params.brand }}';
var themeOkColor = '#{{ .Site.Params.ok }}';
......@@ -68,7 +68,8 @@
h3 { font-size: 20px; }
h4 { font-size: 18px; }
.stat { font-size: 18px; }
.headline { font-size: 20px; }
.bold { color: #000; }
h2, h4 {
font-weight: normal;
......@@ -121,6 +122,8 @@
}
.center { text-align: center; }
.right { text-align: right; }
.padding-s { padding: 6px; }
.padding { padding: 12px; }
.summary {
......
{{ partial "meta" . }}
{{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
{{ $active := where $incidents "Params.resolved" "=" false }}
{{ $isNotice := where $active "Params.severity" "=" "notice" }}
{{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
{{ $isDown := where $active "Params.severity" "=" "down" }}
<body class="uptime 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 }}">
{{ partial "header" . }}
<div class="padding"></div>
<div class="tabs">
<div class="contain tabs--inner">
<a href="/" class="tab tab--other">
Incidents
</a>
<a href="/stats" class="tab tab--current">
Uptime
</a>
</div>
</div>
{{ if not $active }}
<div class="contain">
<!-- still counting ALL the things -->
{{ $inactive := where $incidents "Params.resolved" "=" true }}
{{ range $inactive }}
{{ $t := (time .Params.ResolvedWhen) }}
{{ $timeDiff := (sub $t.Unix .Date.Unix) }}
{{ $diffInMin := (div $timeDiff 60) }}
{{ $.Scratch.Add "rackedUpDowntime" $timeDiff }}
{{ end }}
{{ $scratchValue := $.Scratch.Get "rackedUpDowntime" }}
<noscript>
<div class="stat">
{{ if gt $scratchValue 3600 }}
{{ $minutesForCalc := (mod (div $scratchValue 60) 60) }}
{{ div (sub (div $scratchValue 60) $minutesForCalc) 60 }}h
{{ $minutesForCalc }}m
{{ else }}
{{ $secsForCalc := (mod $scratchValue 60) }}
{{ div (sub $scratchValue $secsForCalc) 60 }}m
{{ $secsForCalc }}s
{{ end }} of downtime so far
<hr>
</div>
</noscript>
<script>
function roundUp(rnum, rlength) {
var newnumber = Math.round(rnum * Math.pow(10, rlength)) / Math.pow(10, rlength);
return newnumber;
}
var x = ( ((2419200 - {{ $scratchValue }}) / 2419200) * 100 );
document.write(
'<div class="stat">' + roundUp(x, 2) + '% uptime' + '<hr></div>';
);
/*
7 week - 604800
30 days - 2419200
60 days - 4838400
90 days - 7257600
*/
</script>
<p>
There have been {{ len $incidents }} incidents in total so far.
In total, this added up to {{ $scratchValue }}s (or {{ div $scratchValue 60 }} min) of downtime. Please note that the uptime statistics only counts resolved incidents, ongoing incidents are not included in these calculations.
</p>
</div>
{{ else }}
<div class="contain">
<p>Uptime stats are not available during an outage. Sorry!</p>
</div>
{{ end }}
{{ partial "js" . }}
{{ partial "footer" . }}
name = "cstate"
name = "cState"
license = "MIT"
licenselink = "https://github.com/mistermantas/cstate/blob/master/LICENSE.md"
description = "Über fast, backwards compatible (IE8+), tiny, and simple status page built with Hugo. Compatible with Netlify & GitHub Pages."
homepage = "https://github.com/mistermantas/cstate"
tags = ['hugo', 'netlify', 'status', 'statuspage', 'fast', 'light', 'ie8', 'ie9', 'ie10', 'ie11', 'github', 'github-pages', 'gh-pages', 'serverside', 'serverless', 'no-javascript', 'github-page', 'netlify-cms', 'gh-pages', 'responsive', 'minimal', 'google analytics', 'clean', 'minimalist', 'light', 'product', 'technical', 'widgets', 'products', 'mobile', 'onepage', 'singlepage', 'single page', 'spa']
min_version = "0.28"
min_version = "0.41"
[author]
name = "mistermantas"
homepage = "https://github.com/mistermantas"
name = "cState / mistermantas"
homepage = "https://github.com/cstate"
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment