From b163db67a35a10e153a4fa88d1e1f1d8f9a21f8e Mon Sep 17 00:00:00 2001
From: tdro <tdro@noreply.example.com>
Date: Fri, 29 Jul 2022 21:24:09 -0400
Subject: static/js: Add relative dates

---
 assets/js/index.js                                 | 44 +++++++++++++++++++-
 static/js/index.ts                                 |  3 +-
 static/js/timeago.ts                               | 47 ++++++++++++++++++++++
 themes/default/layouts/partials/card-meta.html     |  6 +--
 .../default/layouts/partials/meta-date-time.html   |  6 +--
 .../default/layouts/partials/meta-expiry-date.html |  2 +-
 .../default/layouts/partials/meta-read-time.html   | 19 ++++-----
 themes/default/layouts/partials/meta-source.html   |  9 +++--
 8 files changed, 112 insertions(+), 24 deletions(-)
 create mode 100644 static/js/timeago.ts

diff --git a/assets/js/index.js b/assets/js/index.js
index d64997c..71ff972 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -434,4 +434,46 @@
         }
     });
 })();
-console.log("Surface Control: OK");
+(function() {
+    const relative = new Intl.RelativeTimeFormat("en", {
+        localeMatcher: "best fit",
+        numeric: "always",
+        style: "long"
+    });
+    const date = ()=>{
+        [
+            ...document.querySelectorAll("time")
+        ].forEach((element)=>{
+            try {
+                const time = new Date(element.dateTime) || new Date();
+                const interval = (new Date().getTime() - time.getTime()) / 1000;
+                const seconds = Math.floor(interval);
+                const minutes = Math.floor(seconds / 60);
+                const hours = Math.floor(minutes / 60);
+                const days = Math.floor(hours / 24);
+                if (seconds <= 60) {
+                    return element.textContent = relative.format(-1 * seconds, "second");
+                }
+                if (minutes <= 120) {
+                    return element.textContent = relative.format(-1 * minutes, "minute");
+                }
+                if (hours <= 48) {
+                    return element.textContent = relative.format(-1 * hours, "hour");
+                }
+                if (days <= 60) {
+                    return element.textContent = relative.format(-1 * days, "day");
+                }
+            } catch (err) {
+                console.error("Error: Unable to resolve relative time format!", err);
+            }
+        });
+    };
+    const substitution = setInterval(date, 4);
+    self.addEventListener("load", ()=>{
+        setTimeout(()=>{
+            clearInterval(substitution);
+            setInterval(date, 1000);
+        }, 1000);
+    });
+})();
+console.log("Surface Control: Complete");
diff --git a/static/js/index.ts b/static/js/index.ts
index 6000441..52cc678 100644
--- a/static/js/index.ts
+++ b/static/js/index.ts
@@ -2,5 +2,6 @@ import "./pager.ts";
 import "./plumber.ts";
 import "./instantpage.ts";
 import "./fixedsearch.ts";
+import "./timeago.ts";
 
-console.log("Surface Control: OK");
+console.log("Surface Control: Complete");
diff --git a/static/js/timeago.ts b/static/js/timeago.ts
new file mode 100644
index 0000000..2cd72ca
--- /dev/null
+++ b/static/js/timeago.ts
@@ -0,0 +1,47 @@
+(function () {
+  type second = number;
+  type millisecond = number;
+
+  const relative = new Intl.RelativeTimeFormat("en", {
+    localeMatcher: "best fit",
+    numeric: "always",
+    style: "long",
+  });
+
+  const date = () => {
+    [...document.querySelectorAll("time")]
+      .forEach(
+        (element) => {
+          try {
+            const time: millisecond = new Date(element.dateTime) || new Date();
+            const interval: second = ((new Date().getTime() - time.getTime()) / 1000);
+
+            const seconds: number = Math.floor(interval);
+            const minutes: number = Math.floor(seconds / 60);
+            const hours:   number = Math.floor(minutes / 60);
+            const days:    number = Math.floor(hours   / 24);
+
+            if (seconds <= 60)  { return element.textContent = relative.format(-1 * seconds, "second",); }
+            if (minutes <= 120) { return element.textContent = relative.format(-1 * minutes, "minute",); }
+            if (hours   <= 48)  { return element.textContent = relative.format(-1 * hours,   "hour",);   }
+            if (days    <= 60)  { return element.textContent = relative.format(-1 * days,    "day",);    }
+
+          } catch (err) {
+            console.error(
+              "Error: Unable to resolve relative time format!",
+              err,
+            );
+          }
+        },
+      );
+  }
+
+  const substitution = setInterval(date, 4);
+
+  self.addEventListener("load", () => {
+    setTimeout(() => {
+      clearInterval(substitution);
+      setInterval(date, 1000);
+    }, 1000);
+  });
+})();
diff --git a/themes/default/layouts/partials/card-meta.html b/themes/default/layouts/partials/card-meta.html
index 83e8052..f7da69a 100644
--- a/themes/default/layouts/partials/card-meta.html
+++ b/themes/default/layouts/partials/card-meta.html
@@ -27,7 +27,7 @@
 
   {{- partial "meta-handle.html" . -}}
 
-  {{- partial "meta-draft.html" . -}}
+  {{- partial "meta-date-time.html" . -}}
 
   {{- partial "meta-read-time.html" . -}}
 
@@ -35,11 +35,11 @@
 
   {{- partial "meta-unlisted.html" . -}}
 
-  {{- partial "meta-date-time.html" . -}}
-
   {{- partial "meta-expiry-date.html" . -}}
 
   {{- partial "meta-link.html" . -}}
 
   {{- partial "meta-source.html" . -}}
+
+  {{- partial "meta-draft.html" . -}}
 </section>
diff --git a/themes/default/layouts/partials/meta-date-time.html b/themes/default/layouts/partials/meta-date-time.html
index 60e6d1c..f1e49d0 100644
--- a/themes/default/layouts/partials/meta-date-time.html
+++ b/themes/default/layouts/partials/meta-date-time.html
@@ -12,10 +12,10 @@
       title="{{ .Date | time.Format "Posted: Monday, January 2, 2006 at 15:04:05 MST" }}
 {{ if .Lastmod.After .Date }}{{ .Lastmod | time.Format "Edited: Monday, January 2, 2006 at 15:04:05 MST" }}{{ end }}">
       {{ (.Date.Local | time.Format "3:04 PM Jan 2 2006") -}}
-      {{ if .Lastmod.After .Date }}
-        (edited)
-      {{- end -}}
     </time>
+    {{ if .Lastmod.After .Date }}
+      <span>(edited)</span>
+    {{- end -}}
 {{- /* This comment removes trailing newlines and white spaces. */ -}}
   </a>
 {{- /* This comment removes trailing newlines and white spaces. */ -}}
diff --git a/themes/default/layouts/partials/meta-expiry-date.html b/themes/default/layouts/partials/meta-expiry-date.html
index a4ddeea..0521e60 100644
--- a/themes/default/layouts/partials/meta-expiry-date.html
+++ b/themes/default/layouts/partials/meta-expiry-date.html
@@ -3,10 +3,10 @@
   {{- $duration := lang.FormatNumberCustom 0 (math.Round (mul (div $diff.Hours 24) -1)) -}}
 
   <micro-metadata-expiry>
+    {{- safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/trash-2.svg")) -}}
     <time
       datetime= "{{- .ExpiryDate | time.Format "2006-01-02T15:04:05Z" -}}"
       title="Self destructs within {{ $duration }} days ({{ .ExpiryDate | time.Format "Monday, January 2 2006 at 15:04:05 MST" }})">
-      {{- safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/trash-2.svg")) -}}
       {{- .ExpiryDate | time.Format "Jan 2 2006" -}}
 {{- /* This comment removes trailing newlines and white spaces. */ -}}
     </time>
diff --git a/themes/default/layouts/partials/meta-read-time.html b/themes/default/layouts/partials/meta-read-time.html
index 2a5e395..bc32f41 100644
--- a/themes/default/layouts/partials/meta-read-time.html
+++ b/themes/default/layouts/partials/meta-read-time.html
@@ -1,17 +1,12 @@
-<micro-metadata-readtime>
-  {{- $seconds := mul (div .WordCount 180.0) 60.0 -}}
-  {{- $seconds = printf "%.0f" $seconds -}}
-
-  {{- if eq $seconds "0" -}}
-    {{- $seconds = "1" -}}
-  {{- end -}}
+{{- $seconds := mul (div .WordCount 180.0) 60.0 -}}
+{{- $seconds = printf "%.0f" $seconds -}}
+{{- if eq $seconds "0" -}}
+  {{- $seconds = "1" -}}
+{{- end -}}
 
+<micro-metadata-readtime>
   {{- safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/clock.svg")) -}}
-
-  <read-time title="Takes {{ $seconds }} second{{- if not (eq $seconds "1") -}}s{{- end }} to read">
-    {{ $seconds }} sec
-{{- /* This comment removes trailing newlines and white spaces. */ -}}
-  </read-time>
+  <read-time title="Takes {{ $seconds }} second{{- if not (eq $seconds "1") -}}s{{- end }} to read">{{ $seconds }} sec</read-time>
 {{- /* This comment removes trailing newlines and white spaces. */ -}}
 </micro-metadata-readtime>
 {{- /* This comment removes trailing newlines and white spaces. */ -}}
diff --git a/themes/default/layouts/partials/meta-source.html b/themes/default/layouts/partials/meta-source.html
index ca6450c..4a1dbc6 100644
--- a/themes/default/layouts/partials/meta-source.html
+++ b/themes/default/layouts/partials/meta-source.html
@@ -1,9 +1,9 @@
 {{- if not .ExpiryDate -}}
+{{- $author := index .Site.Data ((or .Params.author .Site.Author.default.user) | default "default") -}}
+{{- $source := print $author.user "/messages/" .File.LogicalName -}}
+
   <micro-metadata-source>
-    {{- $author := index .Site.Data ((or .Params.author .Site.Author.default.user) | default "default") -}}
-    {{- $source := print $author.user "/messages/" .File.LogicalName -}}
     {{- safeHTML (readFile (print (partial "function-paths.html" "static") "/icons/feather/code.svg")) -}}
-
     <cite>
       {{- with .Params.feed.raw -}}
       <a title="{{ $.Site.BaseURL }}/{{ . }}" href="{{ $.Site.BaseURL }}/{{ . }}">
@@ -13,7 +13,10 @@
         title="{{ .Site.BaseURL }}/{{ partial "function-paths.html" "markdown" }}/{{ $source }}">
       {{- end -}}
         raw
+{{- /* This comment removes trailing newlines and white spaces. */ -}}
       </a>
+{{- /* This comment removes trailing newlines and white spaces. */ -}}
     </cite>
+{{- /* This comment removes trailing newlines and white spaces. */ -}}
   </micro-metadata-source>
 {{- end -}}
-- 
cgit v1.2.3