diff options
Diffstat (limited to 'layouts')
| -rw-r--r-- | layouts/index.html | 98 | ||||
| -rw-r--r-- | layouts/issues/issue.html | 34 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 4 | ||||
| -rw-r--r-- | layouts/partials/header-mini.html | 7 | ||||
| -rw-r--r-- | layouts/partials/header.html | 25 | ||||
| -rw-r--r-- | layouts/partials/js.html | 3 | ||||
| -rw-r--r-- | layouts/partials/meta.html | 93 | ||||
| -rw-r--r-- | layouts/shortcodes/track.html | 2 | ||||
| -rw-r--r-- | layouts/uptime/single.html | 65 |
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> - - <small class="date"> - {{ .Date.Format "January 02, 2006 at 3:04 PM" }} - </small> - {{ 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 }} © {{ .Site.Title }}</strong></p> + <p><strong>{{ now.Year }} © {{ .Site.Title }}</strong> + • <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" . }} |