diff options
| -rw-r--r-- | README.md | 19 | ||||
| -rw-r--r-- | exampleSite/config.yml | 35 | ||||
| -rw-r--r-- | exampleSite/content/api.html | 6 | ||||
| -rw-r--r-- | exampleSite/content/stats.html | 9 | ||||
| -rw-r--r-- | exampleSite/static/logo.png | bin | 21758 -> 5707 bytes | |||
| -rw-r--r-- | images/screenshot.png | bin | 47463 -> 120506 bytes | |||
| -rw-r--r-- | images/tn.png | bin | 38424 -> 66535 bytes | |||
| -rw-r--r-- | layouts/index.html | 77 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 2 | ||||
| -rw-r--r-- | layouts/partials/js.html | 114 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 7 | ||||
| -rw-r--r-- | layouts/uptime/single.html | 86 | ||||
| -rw-r--r-- | theme.toml | 8 |
13 files changed, 128 insertions, 235 deletions
@@ -1,11 +1,13 @@ -<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&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&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 diff --git a/exampleSite/config.yml b/exampleSite/config.yml index 6bd09b9..d829b3a 100644 --- a/exampleSite/config.yml +++ b/exampleSite/config.yml @@ -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. diff --git a/exampleSite/content/api.html b/exampleSite/content/api.html deleted file mode 100644 index bf2b338..0000000 --- a/exampleSite/content/api.html +++ /dev/null @@ -1,6 +0,0 @@ ---- ---- - -<!-- -Please keep this file if you wish to enable API access. ---> diff --git a/exampleSite/content/stats.html b/exampleSite/content/stats.html deleted file mode 100644 index bee2349..0000000 --- a/exampleSite/content/stats.html +++ /dev/null @@ -1,9 +0,0 @@ ---- -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. ---> diff --git a/exampleSite/static/logo.png b/exampleSite/static/logo.png Binary files differindex 851d104..95223da 100644 --- a/exampleSite/static/logo.png +++ b/exampleSite/static/logo.png diff --git a/images/screenshot.png b/images/screenshot.png Binary files differindex 9f4b673..59f49e8 100644 --- a/images/screenshot.png +++ b/images/screenshot.png diff --git a/images/tn.png b/images/tn.png Binary files differindex 5c59fc4..52f9ba2 100644 --- a/images/tn.png +++ b/images/tn.png diff --git a/layouts/index.html b/layouts/index.html index b937777..f5fbb05 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -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"> + ⭠ + Previuos + </a> + {{ else }} + <span class="faded"> + ⭠ + Previuos + </span> + {{ end }} + + + + {{ $paginator.PageNumber }} + / + {{ $paginator.TotalPages }} + + + + {{ if $paginator.HasNext }} + <a href="{{ $paginator.Next.URL }}#incidents"> + Next + ⭢ + </a> + {{ else }} + <span class="faded"> + Next + ⭢ + </span> + {{ end }} + </div> + {{ end }} {{ end }} </div> + + {{ partial "js" . }} {{ partial "footer" . }} </body> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index f9c49d8..55e512c 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -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> diff --git a/layouts/partials/js.html b/layouts/partials/js.html index a26d36c..1896127 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/js.html @@ -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 --> diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html index b5b7568..ef9e3af 100644 --- a/layouts/partials/meta.html +++ b/layouts/partials/meta.html @@ -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 { diff --git a/layouts/uptime/single.html b/layouts/uptime/single.html deleted file mode 100644 index cfad105..0000000 --- a/layouts/uptime/single.html +++ /dev/null @@ -1,86 +0,0 @@ -{{ 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" . }} @@ -1,11 +1,11 @@ -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" |
