diff options
author | tdro <tdro@noreply.example.com> | 2022-07-29 21:24:09 -0400 |
---|---|---|
committer | tdro <tdro@noreply.example.com> | 2022-07-29 21:24:09 -0400 |
commit | b163db67a35a10e153a4fa88d1e1f1d8f9a21f8e (patch) | |
tree | 984d46e6ddd5edbddc4b0735752c2982c8d36f1c | |
parent | cc0f3566fc82fd8bfdeb6d5e4234f052fcd764e9 (diff) | |
download | canory-b163db67a35a10e153a4fa88d1e1f1d8f9a21f8e.tar.gz canory-b163db67a35a10e153a4fa88d1e1f1d8f9a21f8e.tar.bz2 canory-b163db67a35a10e153a4fa88d1e1f1d8f9a21f8e.zip |
static/js: Add relative dates
-rw-r--r-- | assets/js/index.js | 44 | ||||
-rw-r--r-- | static/js/index.ts | 3 | ||||
-rw-r--r-- | static/js/timeago.ts | 47 | ||||
-rw-r--r-- | themes/default/layouts/partials/card-meta.html | 6 | ||||
-rw-r--r-- | themes/default/layouts/partials/meta-date-time.html | 6 | ||||
-rw-r--r-- | themes/default/layouts/partials/meta-expiry-date.html | 2 | ||||
-rw-r--r-- | themes/default/layouts/partials/meta-read-time.html | 19 | ||||
-rw-r--r-- | themes/default/layouts/partials/meta-source.html | 9 |
8 files changed, 112 insertions, 24 deletions
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 -}} |