v2 Dev Preview 1

author: Mantas <11616378+mistermantas@users.noreply.github.com> 2018-07-05 14:45:24 +0300
committer: Mantas <11616378+mistermantas@users.noreply.github.com> 2018-07-05 14:45:24 +0300
commit: dccc5e9864bb8e5923d633848860d39e4d92e46c (patch)
tree: b083eb048be02d10d0497d1f4b750f504f990366 /layouts
parent: 2c05edfd800690b04d8b1d5529a17276cf6eccd3 (diff)
9 files changed, 248 insertions, 83 deletions
diff --git a/layouts/index.html b/layouts/index.html
index a09d429..eedb08d 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -1,4 +1,5 @@
 {{ partial "meta" . }}
+
 {{ $incidents := where .Site.RegularPages "Params.section" "issue" }}
 {{ $active := where $incidents "Params.resolved" "=" false }}
 
@@ -6,18 +7,8 @@
 {{ $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>
-      </div>
-    </div>
+  <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 }}">
+    {{ partial "header" . }}
 
     <!-- Main -->
     <div class="contain">
@@ -32,7 +23,7 @@
           {{ if $isDown }}
             Experiencing major issues
           {{ else }}
-          {{ if $isDisrupted}}
+          {{ if $isDisrupted }}
             Experiencing disruptions
           {{ else }}
           {{ if $isNotice }}
@@ -42,47 +33,80 @@
           {{ end }}{{ end }}{{ end }}
         </strong>
 
-        <span class="status summary__date" onclick="location.reload()"></span>
+          <span class="status summary__date" onclick="location.reload()"></span>
+        </div>
+
+      {{ if $active }}
+      <div class="announcement-box">
+        {{ range $active }}
+          <div class="padding">
+            <p><strong>{{ .Title }}</strong></p>
+            {{ .Content }}
+          </div>
+        {{ else }}{{ end }}
       </div>
+      {{ end }}
 
-      {{ 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 }}
 
       <!-- Individual info -->
-      {{ if not $active }}
       <div class="padding"></div>
       <div class="components">
         {{ $systems := .Site.Params.systems }}
         {{ range $index, $systems }}
-          <div class="component" data-status="ok">
+          {{ $activeComponentIssues := where $active "Params.affected" "intersect" (slice .) }}
+
+          {{ $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 := . }}
             {{ . }}
-            <span class="component-status">Operational</span>
+            <span class="component-status">
+              {{ if $thisIsDown }}
+                Down
+              {{ else }}
+              {{ if $thisIsDisrupted }}
+                Disrupted
+              {{ else }}
+              {{ if $thisIsNotice }}
+                Maintenance
+              {{ else }}
+                Operational
+              {{ end }}{{ end }}{{ end }}
+            </span>
           </div>
         {{ end }}
       </div>
-      {{ end }}
 
     <!-- End main -->
-  </div><div class="padding"></div><hr>
+  </div>
 
-    <div class="contain">
-      <h2 class="center">Incident history</h2>
 
-      {{ if not .Data.Pages }}
-        <p class="center">Looks like we do not have any incidents logged.</p>
-      {{ else }}
-        {{ range first 10 .Data.Pages }}
-          {{ .Render "issue" }}
-        {{ end }}
-      {{ end }}
+  <div class="tabs">
+    <div class="contain tabs--inner">
+      <a href="#incidents" class="tab tab--current">
+        Incidents
+      </a>
+      <a href="/stats" class="tab tab--other">
+        Uptime
+      </a>
     </div>
+  </div>
+
+
+  <div class="contain">
+    <div class="padding"></div>
+    {{ if not .Data.Pages }}
+      <p class="center">Looks like we do not have any incidents logged.</p>
+    {{ else }}
+      {{ range .Data.Pages }}
+        {{ .Render "issue" }}
+      {{ end }}
+    {{ end }}
+  </div>
 
-    {{ partial "js" . }}
-    {{ partial "footer" . }}
+  {{ partial "js" . }}
+  {{ partial "footer" . }}
   </body>
 </html>
diff --git a/layouts/issues/issue.html b/layouts/issues/issue.html
index 9b63b78..c4d5ab6 100644
--- a/layouts/issues/issue.html
+++ b/layouts/issues/issue.html
@@ -6,24 +6,38 @@
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 
 <div class="article">
-  <span class="marker">
-    {{ .Params.severity }}
-  </span>
-  &nbsp;
-  <small class="date">
-    {{ .Date.Format "January 02, 2006 at 3:04 PM" }}
-  </small>
-  &nbsp;
   {{ if .Params.Resolved }}
-    <span class="ok">✓</span>
-  {{ end }}
+    <span class="ok">✓ Resolved after
+
+      {{ $t := (time .Params.ResolvedWhen) }}
+      {{ $timeDiff := (sub $t.Unix .Date.Unix) }}
+      {{ $diffInMin := (div $timeDiff 60) }}
+
+      {{ if gt $timeDiff 3600 }}
+        {{ $minutesForCalc := (mod $diffInMin 60) }}
 
+        {{ div (sub $diffInMin $minutesForCalc) 60 }}h
+        {{ $minutesForCalc }}m of downtime
+      {{ else }}
+        {{ $secsForCalc := (mod $timeDiff 60) }}
 
+        {{ div (sub $timeDiff $secsForCalc) 60 }}m
+        <!-- {{ $secsForCalc }}s --> of downtime
+      {{ end }}
+    </span>
+  {{ else }}
+    <span class="error">Ongoing, services {{ .Params.severity }}</span>
+  {{ end }}
   <h3>
     <a href="{{ .Permalink }}">{{ .Title }}</a>
   </h3>
 
+  <small class="date">
+    {{ .Date.Format "January 02, 2006 at 3:04 PM" }}
+  </small>
+
   <hr>
 
   {{ .Content }}
 </div>
+<div class="padding"></div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index e1314ce..085b814 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -1,6 +1,8 @@
 <div class="footer">
   <div class="contain">
-    <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong></p>
+    <p><strong>{{ now.Year }} &copy; {{ .Site.Title }}</strong>
+       &nbsp; • &nbsp; <a href="#">Back to top</a>
+    </p>
 
     <p>{{ .Site.Params.description }}</p>
 
diff --git a/layouts/partials/header-mini.html b/layouts/partials/header-mini.html
deleted file mode 100644
index 93a26c2..0000000
--- a/layouts/partials/header-mini.html
+++ /dev/null
@@ -1,7 +0,0 @@
-<div class="header">
-  <div class="contain">
-    <a href="/" class="no-underline">←
-      <strong>{{ .Site.Title }}</strong>
-    </a>
-  </div>
-</div>
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
new file mode 100644
index 0000000..c378998
--- /dev/null
+++ b/layouts/partials/header.html
@@ -0,0 +1,25 @@
+{{ if .Site.Params.useLargeHeaderDesign }}
+<div class="header header--large">
+  <div class="contain contain--more center">
+    <a href="/" class="logo">
+      {{ if .Site.Params.useLogo }}
+        <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}">
+          {{ else }}
+        <h1>{{ .Site.Title }}</h1>
+      {{ end }}
+    </a>
+  </div>
+</div>
+{{ else }}
+<div class="header">
+  <div class="contain">
+    <a href="/" class="logo logo--small">
+      {{ if .Site.Params.useLogo }}
+        <img src="{{ .Site.Params.logo }}" alt="{{ .Site.Title }}">
+          {{ else }}
+        <h1>{{ .Site.Title }}</h1>
+      {{ end }}
+    </a>
+  </div>
+</div>
+{{ end }}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 1e62849..d47cd5d 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -60,3 +60,6 @@
     lastUpdated.innerHTML = 'Last checked ' + timeSince(lastUpdate) + ' ago';
   }, 1000);
 </script>
+{{ with .Site.Params.customJS }}
+<script type="text/javascript" src="{{ . }}"></script>
+{{ end }}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index e3ebbf1..2bef153 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -6,12 +6,13 @@
     <meta http-equiv="x-ua-compatible" content="ie=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <!-- Data -->
-    <meta name="description" content="{{ if .Description }}{{ else }}{{ .Site.Params.description }}{{ end }}">
-    <title>{{ .Site.Title }}</title>
+    <meta name="description" content="{{ with .Description }}{{ . }}{{ else }}{{ .Summary }}{{ end }}">
+    <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 }}">
     <script>
+    var themeBrandColor = '#{{ .Site.Params.brand }}';
     var themeOkColor = '#{{ .Site.Params.ok }}';
     var themeNoticeColor = '#{{ .Site.Params.notice }}';
     var themeDisruptedColor = '#{{ .Site.Params.disrupted }}';
@@ -22,7 +23,7 @@
     /**
      * Color palette
      *
-     * Default:
+     * Defaults:
      * white: #fff;
      * whitesmoke: #f5f5f5;
      * forestgreen: #228B22;
@@ -36,7 +37,7 @@
       margin: 0;
       background: #fff;
       color: #444;
-      font: 100%/1.5 BlinkMacSystemFont, -apple-system, 'San Francisco Text', Helvetica, Arial, sans-serif;
+      font: 100%/1.5 BlinkMacSystemFont, -apple-system, "San Francisco Text", "Roboto", "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";;
       box-sizing: border-box;
     }
 
@@ -46,7 +47,7 @@
 
     hr {
       border: 0;
-      border-bottom: 1px solid #dedede;
+      border-bottom: 1px solid #ccc;
       margin: 24px 0;
     }
 
@@ -65,6 +66,8 @@
     h3 { font-size: 20px; }
     h4 { font-size: 18px; }
 
+    .stat { font-size: 18px; }
+
     h2, h4 {
       font-weight: normal;
       color: #000;
@@ -86,16 +89,21 @@
     }
 
     .header {
-      padding: 16px;
+      padding: 8px 0;
+      background: #{{ .Site.Params.brand }};
     }
 
     .header a {
       color: #fff;
-      font-size: 24px;
+      font-size: 14px;
       font-variant: small-caps;
     }
 
+    .header--large { padding: 16px; }
+    .header--large a { font-size: 20px; }
+
     img {
+      border: 0;
       width: 100%;
       height: auto;
     }
@@ -147,8 +155,7 @@
     .error { color: #{{ .Site.Params.down }}; }
 
     .footer {
-      margin-top: 64px;
-      padding: 20px 0;
+      margin-top: 20px;
       background: #f5f5f5;
     }
 
@@ -162,39 +169,68 @@
     }
 
     .logo img {
-      height: auto;
-      width: 100%;
+      height: 128px;
+      width: auto;
     }
 
     .logo--small img {
-      height: 32px;
+      height: 64px;
       width: auto;
     }
 
-    .article h3 a { border: 0; }
+    .tabs { border-bottom: 1px solid #ccc; }
+    .tabs--inner { padding: 0 16px; margin: 0 auto; }
+    a.tab { display: inline-table; }
+    .tab--current {
+      border: 1px solid #ccc;
+      border-bottom-color: #fff;
+      padding: 12px 18px;
+      position: relative;
+      top: 1px;
+    }
 
-    .marker {
-      text-transform: uppercase;
-      font-size: smaller;
-      padding: 2px 8px;
-      padding-right: 4px;
-      border: 2px solid #{{ .Site.Params.border }};
+    .tab--other {
+      border: 0;
+      padding: 12px 18px;
+      position: relative;
+      top: 1px;
+      color: #aaa;
+    }
+    .tab--other:hover { color: #000; }
+
+    .article {
+      padding-bottom: 20px;
     }
 
+    .article h3 { line-height: 1.25; }
+    .article h3 a { border: 0; }
+    .article h3 a:hover { border-bottom: 1px solid currentColor; }
+
 
     /**
      * Specific to the status
      */
 
-    .status-ok .summary, .status-ok .header { background: #{{ .Site.Params.ok }}; }
-    .status-disrupted .summary, .status-disrupted .header { background: #{{ .Site.Params.disrupted }}; }
-    .status-down .summary, .status-down .header { background: #{{ .Site.Params.down }}; }
-    .status-notice .summary, .status-notice .header { background: #{{ .Site.Params.notice }}; }
+    .status-ok .summary { background: #{{ .Site.Params.ok }}; }
+    .status-disrupted .summary, .change-header-color.status-disrupted .header { background: #{{ .Site.Params.disrupted }}; }
+    .status-down .summary, .change-header-color.status-down .header { background: #{{ .Site.Params.down }}; }
+    .status-notice .summary, .change-header-color.status-notice .header { background: #{{ .Site.Params.notice }}; }
+
+    .announcement-box .padding {
+      padding: 16px;
+      border-bottom: 1px solid currentColor;
+    }
+
+    .status-disrupted .announcement-box .padding { border-bottom-color: #{{ .Site.Params.disrupted }}; }
+    .status-down .announcement-box .padding { border-bottom-color: #{{ .Site.Params.down }}; }
+    .status-notice .announcement-box .padding { border-bottom-color: #{{ .Site.Params.notice }}; }
+
+    .status-ok .announcement-box { border: 2px solid #{{ .Site.Params.ok }}; }
+    .status-disrupted .announcement-box { border: 2px solid #{{ .Site.Params.disrupted }}; }
+    .status-down .announcement-box { border: 2px solid #{{ .Site.Params.down }}; }
+    .status-notice .announcement-box { border: 2px solid #{{ .Site.Params.notice }}; }
 
-    .marker-ok { background: #{{ .Site.Params.ok }}; }
-    .marker-disrupted { background: #{{ .Site.Params.disrupted }}; }
-    .marker-down { background: #{{ .Site.Params.down }}; }
-    .marker-notice { background: #{{ .Site.Params.notice }}; }
+    .status .announcement-box { border-bottom-width: 1px; }
 
 
     /**
@@ -218,4 +254,7 @@
       }
     }
     </style>
+    {{ with .Site.Params.customCSS }}
+    <link href="{{ . }}" rel="stylesheet">
+    {{ end }}
   </head>
diff --git a/layouts/shortcodes/track.html b/layouts/shortcodes/track.html
index 0c0c67f..3a80221 100644
--- a/layouts/shortcodes/track.html
+++ b/layouts/shortcodes/track.html
@@ -1 +1 @@
-<p class="faded">{{ dateFormat "02 Jan 2006 15:04" (.Get 0) }}</p>
+<span class="faded">({{ dateFormat "Jan 02, 2006 - 15:04" (.Get 0) }})</span>
diff --git a/layouts/uptime/single.html b/layouts/uptime/single.html
new file mode 100644
index 0000000..957ca8f
--- /dev/null
+++ b/layouts/uptime/single.html
@@ -0,0 +1,65 @@
+{{ 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" }}
+      <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>
+      <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" . }}
author	Mantas <11616378+mistermantas@users.noreply.github.com>	2018-07-05 14:45:24 +0300
committer	Mantas <11616378+mistermantas@users.noreply.github.com>	2018-07-05 14:45:24 +0300
commit	dccc5e9864bb8e5923d633848860d39e4d92e46c (patch)
tree	b083eb048be02d10d0497d1f4b750f504f990366 /layouts
parent	2c05edfd800690b04d8b1d5529a17276cf6eccd3 (diff)