diff options
Diffstat (limited to 'layouts/index.html')
| -rw-r--r-- | layouts/index.html | 275 |
1 files changed, 57 insertions, 218 deletions
diff --git a/layouts/index.html b/layouts/index.html index 85b800a..68a1265 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,244 +1,83 @@ {{ partial "meta" . }} - - <body> - <div class="header notice"> - <div class="contain"> - <a href="{{ .Site.BaseURL }}" class="logo"> - <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"> +{{ $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="status-{{ if $isDown }}down{{ else }}{{ if $isDisrupted}}disrupted{{ else }}{{ if $isNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}"> + <div class="header"> + <div class="contain contain--more center"> + <a href="/" class="logo"> + {{ if .Site.Params.useLogo }} + <h1><img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}"></h1> + {{ else }} + <h1>{{ .Site.Title }}</h1> + {{ end }} </a> - - <button class="subscribe">Subscribe</button> </div> </div> <!-- Main --> <div class="contain"> <noscript> - <p class="error">Uh oh! It looks like you have disabled JavaScript or your browser is a piece of garbage. This means we cannot fetch the neccesary data to show you information about our services. Please <a href="//enable-javascript.com">enable scripting</a> and try again.</p> + <p class="error">Uh oh! It looks like you have disabled JavaScript. Please <a href="//enable-javascript.com">enable scripting</a> to enhance your experience on this website.</p> + <div class="padding"></div> </noscript> - <div class="subscriber-box"> - <div class="subscriber-box--header"> - <div class="contain"> - <strong>Notifications</strong> - <span class="close"> - <img alt="Close" src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672366-x-128.png"> - </span> - </div> - </div> - - <div class="contain"> - <p>Users of modern browsers such as Chrome and Firefox get access to web notifications, a feature that shows alerts for things such as Facebook mentions, new emails, or in our case, status updates. These updates can be seen even if the user is not actively looking at this status page, however, the tab has to stay open.</p> - - <p class="error">Only some users may be able to use this feature. This feature does not work on mobile devices and is not fully tested.</p> - - <div id="alert-init"> - <input type="checkbox" id="alerts"> - <label for="alerts">Ping me when the status changes</label> - </div> - - <p class="alert-status faded">You have not enabled notifications.</p> - </div> + <!-- Main info --> + <div class="summary"> + <strong> + {{ if $isDown }} + Experiencing major issues + {{ else }} + {{ if $isDisrupted}} + Experiencing disruptions + {{ else }} + {{ if $isNotice }} + Please read announcement + {{ else }} + All systems operational + {{ end }}{{ end }}{{ end }} + </strong> + + <span class="status summary__date" onclick="location.reload()"></span> </div> - <!-- Main info --> - <div class="summary notice"> - <div class="tldr notice"> - <strong>Checking status…</strong> + {{ range $active }} + <div class="padding"></div> + <small class="date">{{ .Date.Format "January 02, 2006 at 3:04 PM" }}</small><br> + <strong class="faded">{{ .Title }}</strong> + {{ .Content }} + <div class="padding"></div> + {{ else }}{{ end }} - <span class="status"></span> - </div> - <div class="details contain"> - <p>{{ .Site.Params.announcement }}</p> - </div> - </div><br> + <div class="padding"></div> <!-- Individual info --> <div class="components"> - <div class="component" data-status="" data-id="forums"> - API <small class="ping testing">Pinging…</small> - </div> - <div class="component" data-status="" data-id="website"> - Website <small class="ping testing">Pinging…</small> - </div> + {{ $systems := .Site.Params.systems }} + {{ range $index, $systems }} + <div class="component" data-status="ok"> + {{ . }} + <span class="component-status">Operational</span> + </div> + {{ end }} </div> - <br> - <small><a href="#disclaimer">Disclaimer</a></small> - <!-- End main --> - </div> + </div><div class="padding"></div><hr> <div class="contain"> - <h2>Incident history</h2><hr><br> + <h2 class="center">Incident history</h2> {{ range first 10 .Data.Pages }} - {{ .Render "post" }} + {{ .Render "issue" }} {{ end }} - - <aside id="meta"> </aside> </div> - <script async> - /** - * Dev toolset - */ - - console.log('Welcome to cState! https://github.com/mistermantas/cstate'); - - /** - * Notifications - */ - - // Notification toggle - document.querySelector('#alerts').addEventListener('click', enableNotifications) - - // Toggling logic - function enableNotifications() { - if(window.Notification && Notification.permission !== "denied") { - Notification.requestPermission(function(status) { - // status is "granted", if accepted by user - var n = new Notification('Great, you just enabled alerts!', { - body: 'You are now going to receive notifications (like this one) whenever the status changes so long as this tab is open. This feature is still being tested.', - icon: '/favicon.ico' - }) - - // Looks like we DO have permission now - // So let's mark that checkbox - document.querySelector('#alert-init').setAttribute('hidden', 'hidden') - document.querySelector('.alert-status').innerHTML = '<strong>Notifications are enabled. </strong>' - document.querySelector('.alert-status').className = 'alert-status' - }) - } - } - - if (Notification.permission === 'granted') { - // Looks like we DO have permission - // So let's mark that checkbox - document.querySelector('#alert-init').setAttribute('hidden', 'hidden') - document.querySelector('.alert-status').innerHTML = '<strong>Notifications are enabled. </strong>' - document.querySelector('.alert-status').className = 'alert-status' - } - - /** - * Subscribe button - */ - - function hasClass(element, cls) { - return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1; - } - - document.querySelector('.subscribe').addEventListener('click', pressSubscribeButton); - document.querySelector('.close').addEventListener('click', pressSubscribeButton); - - function pressSubscribeButton() { - if (document.querySelector('.subscriber-box').className === 'subscriber-box active') { - document.querySelector('.subscriber-box').className = 'subscriber-box'; - } else { - document.querySelector('.subscriber-box').className = 'subscriber-box active'; - } - } - - /** - * Apply data - */ - - document.querySelector('.component[data-id=forums]').setAttribute('data-status', 'ok'); - document.querySelector('.component[data-id=website]').setAttribute('data-status', 'ok'); - - /** - * Get elements - */ - - const header = document.querySelector('.header'); - const summary = document.querySelector('.summary'); - const summaryDetails = document.querySelector('.details'); - const tldr = document.querySelector('.tldr'); - - var summaryText = document.querySelector('.summary strong'); - var lastUpdated = document.querySelector('.summary span'); - - /** - * Prelimenary logic - */ - - var online = navigator.onLine; - - function updateStatus() { - var lastUpdate = new Date; - } - - /** - * Check for internet - */ - - var lastUpdate = new Date(); - - function timeSince(date) { - var seconds = Math.floor((new Date() - date) / 1000); - - var interval = Math.floor(seconds / 31536000); - - if (interval > 1) { - return interval + ' years'; - } - interval = Math.floor(seconds / 2592000); - if (interval > 1) { - return interval + ' months'; - } - interval = Math.floor(seconds / 86400); - if (interval > 1) { - return interval + 'd'; - } - interval = Math.floor(seconds / 3600); - if (interval > 1) { - return interval + 'h'; - } - interval = Math.floor(seconds / 60); - if (interval > 1) { - return interval + 'min'; - } - return Math.floor(seconds) + 's'; - } - var aDay = 24*60*60*1000; - - // Show second by second updates - window.setInterval(function() { - lastUpdated.innerHTML = 'Last updated ' + timeSince(lastUpdate) + ' ago'; - }, 1000); - - - /** - * Adaptive TLDR - */ - - const status = document.querySelector('.component[data-id=forums]').getAttribute('data-status') === 'ok' && - document.querySelector('.component[data-id=website]').getAttribute('data-status') === 'ok' - - if (status) { - // Change text - summaryText.innerHTML = 'All systems operational'; - // Change design - summary.className = 'summary ok'; - tldr.className = 'tldr ok'; - summaryDetails.className = 'details contain ok'; - header.className = 'header ok'; - } else if (!status) { - // Change text - summaryText.innerHTML = 'Experiencing downtime'; - // Change design - summary.className = 'summary down'; - tldr.className = 'tldr down'; - summaryDetails.className = 'details contain down'; - header.className = 'header down'; - - new Notification ( - 'We are experiencing downtime!', { - body : 'Please view the status page for more information. This alert was automatically triggered to let you know of this change.', - icon : '/favicon.ico' - } - ) - } - </script> - -{{ partial "footer" . }} + {{ partial "js" . }} + {{ partial "footer" . }} + </body> +</html> |