v2-dev2

author: Mantas <11616378+mistermantas@users.noreply.github.com> 2018-07-11 14:45:50 +0300
committer: Mantas <11616378+mistermantas@users.noreply.github.com> 2018-07-11 14:45:50 +0300
commit: d7500b363fee49307304fa623f74649cb408b532 (patch)
tree: 1413e689d5c006ab80e251816d595bfa74ab65a0 /layouts
parent: 7061d2290b01c0d875b2e581bd4254b485ef48ed (diff)
13 files changed, 269 insertions, 42 deletions
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index c0a9070..8463204 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -7,4 +7,8 @@
       {{ .Render "post" }}
     </div>
 
-{{ partial "footer" . }}
+
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>
diff --git a/layouts/index.html b/layouts/index.html
index eedb08d..f80dfe0 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -7,7 +7,7 @@
 {{ $isDisrupted := where $active "Params.severity" "=" "disrupted" }}
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 
-  <body class="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 }}">
+  <body class="status-homepage 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" . }}
 
     <!-- Main -->
@@ -33,15 +33,16 @@
           {{ end }}{{ end }}{{ end }}
         </strong>
 
-          <span class="status summary__date" onclick="location.reload()"></span>
-        </div>
+        <span class="summary__date" onclick="location.reload()"></span>
+      </div>
 
       {{ if $active }}
       <div class="announcement-box">
         {{ range $active }}
           <div class="padding">
             <p><strong>{{ .Title }}</strong></p>
-            {{ .Content }}
+            {{ .Content | safeHTML | truncate 500 "…" }}
+            <p><a href="{{ .Permalink }}">Continue reading</a></p>
           </div>
         {{ else }}{{ end }}
       </div>
@@ -53,15 +54,26 @@
       <div class="components">
         {{ $systems := .Site.Params.systems }}
         {{ range $index, $systems }}
-          {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
+          {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .name) }}
 
           {{ $thisIsNotice := where $activeComponentIssues "Params.severity" "=" "notice" }}
           {{ $thisIsDisrupted := where $activeComponentIssues "Params.severity" "=" "disrupted" }}
           {{ $thisIsDown := where $activeComponentIssues "Params.severity" "=" "down" }}
 
           <div class="component" data-status="{{ if $thisIsDown }}down{{ else }}{{ if $thisIsDisrupted }}disrupted{{ else }}{{ if $thisIsNotice }}notice{{ else }}ok{{ end }}{{ end }}{{ end }}">
-            {{ $this := . }}
-            {{ . }}
+            {{ $this := .name }}
+            {{ .name }}
+
+            {{ with .description }}
+              <span class="description">
+                &nbsp; <span class="faded">(?)</span>
+
+                <span class="description__text">
+                  {{ . }}
+                </span>
+              </span>
+            {{ end }}
+
             <span class="component-status">
               {{ if $thisIsDown }}
                 Down
@@ -75,6 +87,12 @@
                 Operational
               {{ end }}{{ end }}{{ end }}
             </span>
+
+            {{ with .partial }}
+            <div>
+              {{ partial . . }}
+            </div>
+            {{ end }}
           </div>
         {{ end }}
       </div>
@@ -88,9 +106,17 @@
       <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">
+         {{ .name }}
+       </a>
+     {{ end }}
     </div>
   </div>
 
diff --git a/layouts/issues/single.html b/layouts/issues/single.html
index bc48ed3..5076148 100644
--- a/layouts/issues/single.html
+++ b/layouts/issues/single.html
@@ -11,7 +11,15 @@
     {{ partial "header" . }}
 
     <div class="contain">
+      <a href="{{ .Site.BaseURL }}">← Go back</a>
+    </div>
+
+    <div class="contain">
       {{ .Render "issue" }}
     </div>
 
-{{ partial "footer" . }}
+
+    {{ partial "js" . }}
+    {{ partial "footer" . }}
+  </body>
+</html>
diff --git a/layouts/partials/custom/above-footer.html b/layouts/partials/custom/above-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/above-header.html b/layouts/partials/custom/above-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/above-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-footer.html b/layouts/partials/custom/below-footer.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-footer.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/below-header.html b/layouts/partials/custom/below-header.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/below-header.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/custom/meta.html b/layouts/partials/custom/meta.html
new file mode 100644
index 0000000..1dadab6
--- /dev/null
+++ b/layouts/partials/custom/meta.html
@@ -0,0 +1,8 @@
+<!--
+
+This file can be used to add custom HTML
+to your cState powered status page.
+
+https://github.com/mistermantas/cstate/wiki/Customization
+
+-->
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index 085b814..d6b5486 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,3 +1,4 @@
+
 <div class="footer">
   <div class="contain">
     <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index c378998..94bef80 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,3 +1,4 @@
+
 {{ if .Site.Params.useLargeHeaderDesign }}
 <div class="header header--large">
   <div class="contain contain--more center">
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index d47cd5d..a26d36c 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -18,48 +18,150 @@
   } else {
     document.querySelector('meta[name=theme-color]').setAttribute('content', themeNoticeColor);
   }
+</script>
 
-
+<!--
+<script>
   /**
    * Check for internet
    */
 
-  var lastUpdated = document.querySelector('.summary__date');
-  var lastUpdate = new Date();
+  function hasClass(element, className) {
+    return (' ' + element.className + ' ').indexOf(' ' + className+ ' ') > -1;
+  }
+
+  if (hasClass(document.querySelector('body'), 'status-homepage')) {
+    var lastUpdated = document.querySelector('.summary__date');
+    var lastUpdate = new Date();
 
-  function timeSince(date) {
-    var seconds = Math.floor((new Date() - date) / 1000);
+    function timeSince(date) {
+      var seconds = Math.floor((new Date() - date) / 1000);
 
-    var interval = Math.floor(seconds / 31536000);
+      var interval = Math.floor(seconds / 31536000);
 
-    if (interval > 1) {
-      return interval + ' years';
+      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';
     }
-    interval = Math.floor(seconds / 2592000);
-    if (interval > 1) {
-      return interval + ' months';
+    var aDay = 24*60*60*1000;
+  }
+
+  function checkCurrentStatus() {
+    // Check for each status
+    if (hasClass(document.querySelector('body'), 'status-ok')) {
+      window.currentState = 'Operational';
     }
-    interval = Math.floor(seconds / 86400);
-    if (interval > 1) {
-      return interval + 'd';
+    if (hasClass(document.querySelector('body'), 'status-disrupted')) {
+      window.currentState = 'Disrupted';
     }
-    interval = Math.floor(seconds / 3600);
-    if (interval > 1) {
-      return interval + 'h';
+    if (hasClass(document.querySelector('body'), 'status-down')) {
+      window.currentState = 'Down';
     }
-    interval = Math.floor(seconds / 60);
-    if (interval > 1) {
-      return interval + 'min';
+    if (hasClass(document.querySelector('body'), 'status-notice')) {
+      window.currentState = 'Maintenance';
     }
-    return Math.floor(seconds) + 's';
   }
-  var aDay = 24*60*60*1000;
+  checkCurrentStatus();
+
+  // Set for first time use
+  if (typeof(Storage) !== 'undefined') {
+    window.sessionStorage.setItem('priorState', currentState);
+  }
 
   // Show second by second updates
   window.setInterval(function() {
-    lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
+    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);
+      }
+
+      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);
+      });
+    }
+  }
 </script>
-{{ with .Site.Params.customJS }}
-<script type="text/javascript" src="{{ . }}"></script>
+-->
+
+{{ if ne .Site.Params.googleAnalytics "UA-00000000-1" }}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <script type="text/javascript" defer src="https://www.googletagmanager.com/gtag/js?id=UA-109775664-1"></script>
+  <script type="text/javascript" defer>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', '{{ .Site.Params.googleAnalytics }}');
+  </script>
 {{ end }}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 2bef153..7b45778 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -132,7 +132,7 @@
     }
 
     .summary__date:hover {
-      color: #{{ .Site.Params.faded }};
+      color: #ccc;
     }
 
     .summary__date:hover:after {
@@ -141,21 +141,47 @@
     }
 
     .components {
-      border: 2px solid #{{ .Site.Params.border }};
+      border: 2px solid #ddd;
       border-bottom: 0;
     }
 
     .component {
       color: #000;
       padding: 16px;
-      border-bottom: 2px solid #{{ .Site.Params.border }};
+      border-bottom: 2px solid #ddd;
+    }
+
+    .description { cursor: pointer; position: relative; }
+    .description__text { display: none; }
+    .description:hover .description__text,
+    .description:active .description__text  {
+      display: block;
+      position: absolute;
+      top: 0;
+      left: 32px;
+      background: #181818;
+      color: #fff;
+      z-index: 50;
+      padding: 8px;
+      border: 2px solid #242424;
+      font-size: 14px;
+      color: #ccc;
+      width: 1000%;
+      height: auto;
+    }
+
+    @media (max-width: 640px) {
+      .description:hover .description__text,
+      .description:active .description__text {
+        width: 50vw;
+      }
     }
 
     .ok { color: #{{ .Site.Params.ok }}; }
     .error { color: #{{ .Site.Params.down }}; }
 
     .footer {
-      margin-top: 20px;
+      padding: 10px;
       background: #f5f5f5;
     }
 
@@ -230,7 +256,7 @@
     .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; }
     .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; }
 
-    .status .announcement-box { border-bottom-width: 1px; }
+    .status-homepage .announcement-box { border-bottom-width: 1px; }
 
 
     /**
@@ -254,7 +280,5 @@
       }
     }
     </style>
-    {{ with .Site.Params.customCSS }}
-    <link href="{{ . }}" rel="stylesheet">
-    {{ end }}
+
   </head>
diff --git a/layouts/uptime/single.html b/layouts/uptime/single.html
index 957ca8f..cfad105 100644
--- a/layouts/uptime/single.html
+++ b/layouts/uptime/single.html
@@ -36,6 +36,7 @@
         {{ $.Scratch.Add "rackedUpDowntime" $timeDiff }}
       {{ end }}
       {{ $scratchValue := $.Scratch.Get "rackedUpDowntime" }}
+      <noscript>
       <div class="stat">
         {{ if gt $scratchValue 3600 }}
           {{ $minutesForCalc := (mod (div $scratchValue 60) 60) }}
@@ -50,6 +51,26 @@
         {{ 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.
author	Mantas <11616378+mistermantas@users.noreply.github.com>	2018-07-11 14:45:50 +0300
committer	Mantas <11616378+mistermantas@users.noreply.github.com>	2018-07-11 14:45:50 +0300
commit	d7500b363fee49307304fa623f74649cb408b532 (patch)
tree	1413e689d5c006ab80e251816d595bfa74ab65a0 /layouts
parent	7061d2290b01c0d875b2e581bd4254b485ef48ed (diff)