Doc updates, bugfixes, add rel time to NCMS

10 files changed, 71 insertions, 32 deletions

diff --git a/exampleSite/config.yml b/exampleSite/config.yml
index 49faaee..7dc5972 100644
--- a/exampleSite/config.yml
+++ b/exampleSite/config.yml
@@ -161,17 +161,44 @@ params:
   #
   # dateFormat Default: "January 2, 2006 at 3:04 PM"
   # shortDateFormat Default: "15:04 — Jan 2"
-  dateFormat: January 2, 2006 at 3:04 PM
-  shortDateFormat: 15:04 — Jan 2
+  dateFormat: January 2, 2006 at 3:04 PM UTC
+  shortDateFormat: 15:04 UTC — Jan 2
 
-  # If enabled, will display relative times for incident history and summaries instead of using dateFormat.
+  # Should relative time (x min ago) be used?
+  #
+  # IMPORTANT: In the frontmatter, the dates MUST be in
+  # the UTC time zone for this to work preperly. If you 
+  # use Netlify CMS, all good — the CMS picks UTC time
+  # by default. Otherwise, there may be very inaccurate
+  # times if multiple time zones are in your issue files.
+  #
+  # FOR YOUR CONSIDERATION: This feature was introduced in
+  # v5. It may be a breaking change in the case when you
+  # wish to use relative time but old issues do not have
+  # UTC time (and therefore are out of sync by ±24 hours)
+  #
+  # Read the wiki for more: 
+  # https://github.com/cstate/cstate/wiki/Customization#time 
+  #
+  # If enabled, will display relative times in places like
+  # the incident history and summaries instead of using
+  # dateFormat and shortDateFormat (except for if you use
+  # the old shortcode).
   #
   # Default: `true`
+  # BOOLEAN; `true`, `false`
   useRelativeTime: true
-
+ 
   # If enabled, doesn't show seconds on relative times.
   #
+  # With option ON (true):
+  # "Last checked <1 min ago"
+  #
+  # With option OFF (false; default):
+  # "Last checked 20s ago"
+  #
   # Default: `false`
+  # BOOLEAN; `true`, `false`
   skipSeconds: false
 
   # What header design should we use?
diff --git a/exampleSite/content/issues/2019-10-08-testing-new-pipeline.md b/exampleSite/content/issues/2019-10-08-testing-new-pipeline.md
index 4f139de..4e9da4f 100644
--- a/exampleSite/content/issues/2019-10-08-testing-new-pipeline.md
+++ b/exampleSite/content/issues/2019-10-08-testing-new-pipeline.md
@@ -1,7 +1,7 @@
 ---
 title: New Pipeline Rollout
 date: 2019-10-05 16:24:00 
-resolved: false
+resolved: true
 resolvedWhen: 2019-10-05 16:58:00 
 # Possible severity levels: down, disrupted, notice
 severity: disrupted
diff --git a/exampleSite/content/issues/2020-06-13-maintenance-window.md b/exampleSite/content/issues/2021-02-13-maintenance-window.md
index 404ccc4..00b4765 100644
--- a/exampleSite/content/issues/2020-06-13-maintenance-window.md
+++ b/exampleSite/content/issues/2021-02-13-maintenance-window.md
@@ -1,8 +1,9 @@
 ---
 title: Maintenance Window
-date: 2020-06-13 15:54:00
-resolved: true
-resolvedWhen: 2020-06-13 16:54:00
+#date: 24 Feb 21 12:35 +0200
+date: 2021-02-24 10:35:00
+resolved: false
+resolvedWhen: 2021-02-24 12:10:00
 # Possible severity levels: down, disrupted, notice
 severity: disrupted
 affected:
@@ -10,4 +11,4 @@ affected:
 section: issue
 ---
 
-*Just began* - We're currently shutting down the network. {{< track "2018-06-13 15:54:00" >}}
+*Just began* - We're currently shutting down the network. {{< track "2018-06-13 12:54:00" >}}
diff --git a/i18n/tl.yml b/i18n/tl.yaml
index 1600abc..1600abc 100644
--- a/i18n/tl.yml
+++ b/i18n/tl.yaml
diff --git a/layouts/index.json b/layouts/index.json
index 5c47558..b37af7a 100644
--- a/layouts/index.json
+++ b/layouts/index.json
@@ -5,8 +5,8 @@
 {{ $isDown := where $active "Params.severity" "=" "down" }}
 {
   "is": "index",
-  "cStateVersion": "4.4",
-  "apiVersion": "1.0.0",
+  "cStateVersion": "5.0",
+  "apiVersion": "2.0",
   "title": "{{ .Site.Title }}",
   "languageCodeHTML": "{{ .Site.LanguageCode }}",
   "languageCode": "{{ T "languageCode" }}",
diff --git a/layouts/issues/small.html b/layouts/issues/small.html
index 79db524..531b47b 100644
--- a/layouts/issues/small.html
+++ b/layouts/issues/small.html
@@ -8,7 +8,7 @@
 <a href="{{ .Permalink }}" class="issue no-underline">
   {{ if .Params.informational }}
 
-  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
+  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "Jan 2 15:04:05 2006 UTC" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
@@ -23,7 +23,7 @@
     </span>
 
   {{ else if .Params.Resolved }}
-  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
+  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "Jan 2 15:04:05 2006" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
@@ -65,9 +65,10 @@
         </div>
       {{ end }}
     {{ end }}
-  {{ else }}
 
-  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "02 Jan 2006 03:05:00 PM" }}">
+  {{ else }}
+  <!-- If not resolved -->
+  <small class="date float-right {{ cond .Site.Params.useRelativeTime "relative-time" "" }}" title="{{ .Date.Format "Jan 2 15:04:05 2006 UTC" }}">
       {{ if .Site.Params.dateFormat }}
         {{ .Date.Format .Site.Params.dateFormat }}
       {{ else }}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
index 8465483..d966643 100644
--- a/layouts/partials/js.html
+++ b/layouts/partials/js.html
@@ -3,11 +3,11 @@
    * Dev toolset
    */
 
-  console.log('cState v4.4 - https://github.com/cstate/cstate');
+  console.log('cState v5 Dev - https://github.com/cstate/cstate');
   document.getElementsByTagName('html')[0].className = 'js';
 
   /**
-   * Make theme color pretty
+   * Change header color based on status
    */
 
   if (document.body.className === 'change-header-color') {
@@ -43,6 +43,7 @@
   /**
    * Returns a relative date string for the given date.
    */
+  
   function timeSince(date) {
     var seconds = Math.floor((new Date() - date) / 1000);
 
@@ -78,6 +79,7 @@
    * Changes elements with the class 'relative-time' into relative times and
    * moves the timestamp to a title attribute tooltip.
    */
+  
   function updateRelativeTimes() {
     var elements = document.querySelectorAll('.relative-time');
     for (var i = 0; i < elements.length; i++) {
@@ -95,21 +97,17 @@
       element.innerHTML = html.trim();
     }
   }
+
   updateRelativeTimes();
-  setInterval(updateRelativeTimes, 5000);
 
-  /**
-   * Reload homepage after 290 seconds.
-   */
-  if (document.querySelector('body.status-homepage')) {
-    setTimeout(location.reload, 290000)
-  }
+  // Update "time since" feature every 5s
+  setInterval(updateRelativeTimes, 5000);
 </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 src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}"></script>
   <script type="text/javascript" defer>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}
diff --git a/layouts/partials/meta.html b/layouts/partials/meta.html
index 77c66db..283e840 100644
--- a/layouts/partials/meta.html
+++ b/layouts/partials/meta.html
@@ -12,7 +12,7 @@
     {{ range .AlternativeOutputFormats -}}
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
     {{ end -}}
-    <meta name="generator" content="cState v4.4 - https://github.com/cstate/cstate">
+    <meta name="generator" content="cState v5 Dev - https://github.com/cstate/cstate">
     <meta name="theme-color" content="{{ .Site.Params.brand }}">
     <script>
     var themeBrandColor = '{{ .Site.Params.brand }}';
diff --git a/static/admin/config.yml b/static/admin/config.yml
index 4fb01ae..582fe2f 100644
--- a/static/admin/config.yml
+++ b/static/admin/config.yml
@@ -110,6 +110,18 @@ collections:
             hint: 'What is your status page called? Shows up in the browser bar and meta.'
             name: 'title'
             widget: 'string'
+          - label: 'Use relative time (issue began x min ago)'
+            name: 'useRelativeTime'
+            widget: 'boolean'
+            hint: 'IMPORTANT: In the frontmatter, the dates MUST be in the UTC time zone. If you use Netlify CMS, the CMS picks UTC time by default, so no need to worry. However, there may be very inaccurate times, if you manually define non-UTC time in your issues. Read the wiki for more: https://github.com/cstate/cstate/wiki/Customization#time'
+            required: false
+            default: true
+          - label: 'Skip seconds in relative time calculations?'
+            name: 'skipSeconds'
+            widget: 'boolean'
+            hint: 'For users of relative time. With option ON (true): "Last checked <1 min ago". With option OFF (false; default): "Last checked 20s ago". Read the wiki for more: https://github.com/cstate/cstate/wiki/Customization#skip-seconds-v50'
+            required: false
+            default: false
           - label: 'Build future posts'
             name: 'buildFuture'
             widget: 'boolean'
@@ -180,16 +192,16 @@ collections:
               - label: 'Long date format'
                 name: 'dateFormat'
                 widget: 'string'
-                hint: 'Default: January 2, 2006 at 3:04 PM. Hugo formatting docs: https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference'
-                default: 'January 2, 2006 at 3:04 PM'
+                hint: 'Default: January 2, 2006 at 3:04 PM UTC. Ddocs:  https://github.com/cstate/cstate/wiki/Customization#changing-date-formats-v30'
+                default: 'January 2, 2006 at 3:04 PM UTC'
               - label: 'Short date format'
                 name: 'shortDateFormat'
                 widget: 'string'
-                hint: 'Default: 15:04 — Jan 2. Hugo formatting docs: https://gohugo.io/functions/format/#hugo-date-and-time-templating-reference'
-                default: '15:04 — Jan 2'
+                hint: 'Default: 15:04 UTC — Jan 2. Hugo formatting docs: https://github.com/cstate/cstate/wiki/Customization#changing-date-formats-v30'
+                default: '15:04 UTC — Jan 2'
               # Design site title color toggle in v4.0.1
               - label: 'Site title text color'
-                hint: 'This is irrelevant, if you use a logo in your header. Docs: https://github.com/cstate/cstate/wiki/Customization#site-title-text-color-v401'
+                hint: 'This is irrelevant, if you use a logo in your header. Docs: https://github.com/cstate/cstate/wiki/Customization#changing-date-formats-v30'
                 name: 'headerTextColor'
                 widget: 'select'
                 default: 'white'
diff --git a/static/admin/index.html b/static/admin/index.html
index 3071a98..00bc051 100644
--- a/static/admin/index.html
+++ b/static/admin/index.html
@@ -14,7 +14,7 @@
     /admin/ directory.
     -->
 
-    <script>console.log('You are using cState. The version can be looked at from the console on the homepage or incidents view.+ https://github.com/cstate')</script>
+    <script>console.log('You are using cState. The version can be looked at from the console on the homepage or incidents view. https://github.com/cstate')</script>
     <script src="https://identity.netlify.com/v1/netlify-identity-widget.js"></script>
     <script src="https://unpkg.com/netlify-cms@^2.0.0/dist/netlify-cms.js"></script>
     <script>