diff options
Diffstat (limited to 'layouts')
| -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 |
5 files changed, 88 insertions, 198 deletions
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" . }} |