-
-
Notifications
You must be signed in to change notification settings - Fork 244
Closed
Description
The main idea is that there's a really good library for showing 'time ago' statements which are likely to be easier to understand for the average person than fiddling around with time zones (which are a separate issue that also need to be fixed so they work properly).
JS: https://www.bootcdn.cn/timeago.js/
Also found this very useful resource for getting this to work with Hugo dates:
https://kodify.net/hugo/date-time/relative-age-js/#1-output-a-hugo-date-in-a-format-timeagojs-likes
There are worries of mine about i18n and user time zones. This will be opt-in for older users, available by default for new ones as usual.
Some code I gave up on trying to write
translations:
##
## v4.4
##
- id: in
translation: in
- id: weeksAgo
translation: "w"
- id: yearAgo
translation: " metus"
## LT
- id: in
translation: in
- id: weeksAgo
translation: " sav." # has to include space
- id: yearAgo
translation: " metus"
issues/issue.html:
{{ $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" }}
<!-- timeago.js v4.0.2 DEPENDENCY -->
<script>
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).timeago={})}(this,function(e){"use strict";var r=["second","minute","hour","day","week","month","year"];var a=["秒","分钟","小时","天","周","个月","年"];function t(e,t){n[e]=t}function i(e){return n[e]||n.en_US}var n={},f=[60,60,24,7,365/7/12,12];function o(e){return e instanceof Date?e:!isNaN(e)||/^\d+$/.test(e)?new Date(parseInt(e)):(e=(e||"").trim().replace(/\.\d+/,"").replace(/-/,"/").replace(/-/,"/").replace(/(\d)T(\d)/,"$1 $2").replace(/Z/," UTC").replace(/([+-]\d\d):?(\d\d)/," $1$2"),new Date(e))}function d(e,t){for(var n=e<0?1:0,r=e=Math.abs(e),a=0;e>=f[a]&&a<f.length;a++)e/=f[a];return(0===(a*=2)?9:1)<(e=Math.floor(e))&&(a+=1),t(e,a,r)[n].replace("%s",e.toString())}function l(e,t){return((t?o(t):new Date)-o(e))/1e3}var s="timeago-id";function h(e){return parseInt(e.getAttribute(s))}var p={},v=function(e){clearTimeout(e),delete p[e]};function m(e,t,n,r){v(h(e));var a=r.relativeDate,i=r.minInterval,o=l(t,a);e.innerText=d(o,n);var u,c=setTimeout(function(){m(e,t,n,r)},Math.min(1e3*Math.max(function(e){for(var t=1,n=0,r=Math.abs(e);e>=f[n]&&n<f.length;n++)e/=f[n],t*=f[n];return r=(r%=t)?t-r:t,Math.ceil(r)}(o),i||1),2147483647));p[c]=0,u=c,e.setAttribute(s,u)}t("en_US",function(e,t){if(0===t)return["just now","right now"];var n=r[Math.floor(t/2)];return 1<e&&(n+="s"),[e+" "+n+" ago","in "+e+" "+n]}),t("zh_CN",function(e,t){if(0===t)return["刚刚","片刻后"];var n=a[~~(t/2)];return[e+" "+n+"前",e+" "+n+"后"]}),e.cancel=function(e){e?v(h(e)):Object.keys(p).forEach(v)},e.format=function(e,t,n){return d(l(e,n&&n.relativeDate),i(t))},e.register=t,e.render=function(e,t,n){var r=e.length?e:[e];return r.forEach(function(e){m(e,e.getAttribute("datetime"),i(t),n||{})}),r},Object.defineProperty(e,"__esModule",{value:!0})});
var timeAgoJSLocale = function(number, index, totalSec) {
// number: the time ago / time in number;
// index: the index of array below;
// totalSec: total seconds between date to be formatted and today's date;
return [
['{{ T "justNow" }}', 'right now'],
['%s{{ T "secondsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s seconds'],
['1 {{ T "minsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 minute'],
['%s {{ T "minsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s minutes'],
['1{{ T "hoursAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 hour'],
['%s{{ T "hoursAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s hours'],
['1{{ T "daysAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 day'],
['%s{{ T "daysAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s days'],
['1{{ T "weeksAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 week'],
['%s{{ T "weeksAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s weeks'],
['1 {{ T "monthsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 month'],
['%s {{ T "monthsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s months'],
['1 {{ T "yearAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} 1 year'],
['%s {{ T "yearsAgo" }} {{ T "someTimeAgo" }}', '{{ T "in" }} %s years']
][index];
};
timeago.register('cStateCustom', timeAgoJSLocale);
</script>
<!-- end -->
<div class="article">
<h1 class="clean">
{{ .Title }}
</h1>
{{ if .Params.Resolved }}
<small class="date" id="startDate">
<!-- Not using "time ago"-->
{{ if .Site.Params.dateFormat }}
{{ .Date.Format .Site.Params.dateFormat }}
{{ else }}
{{ .Date.Format "January 2, 2006 at 3:04 PM" }}
{{ end }}
(UTC) <br>
{{ if .Site.Params.enableTimeConversionToLocal }} {{ end }}
<script>
var date = new Date('{{ .Date.Format "2006-01-02 15:04:05 UTC" }}');
var startDateHTMLContents = document.getElementById('startDate').innerHTML;
document.getElementById('startDate').innerHTML = startDateHTMLContents + timeago.format(date);
</script>
</small>
{{ else }}
<!-- Planning to use "time ago"-->
<small class="date">
{{ if .Site.Params.dateFormat }}
{{ .Date.Format .Site.Params.dateFormat }}
{{ else }}
{{ .Date.Format "January 2, 2006 at 3:04 PM" }}
{{ end }}
</small>
{{ end }}
<p><small>
{{ range .Params.Affected }}
<a href="affected/{{ . | urlize }}/" class="tag no-underline">{{ . }}</a>
{{ end }}
</small></p>
{{ if .Params.informational }}
{{ else if .Params.Resolved }}
{{ $t := (time .Params.ResolvedWhen) }}
{{ $timeDiff := (sub $t.Unix .Date.Unix) }}
{{ $diffInMin := (div $timeDiff 60) }}
<!-- Marker -->
{{ if lt $timeDiff 60 }}
<div class="faded">
<strong>
{{ T "resolved" }} {{ T "inUnderAMinute" }}.
</strong>
</div>
{{ else }}
{{ if gt $timeDiff 3600 }}
<div class="warning tooltip">
<strong>
{{ T "resolvedAfter" }}
{{ $minutesForCalc := (mod $diffInMin 60) }}
{{ div (sub $diffInMin $minutesForCalc) 60 }}h
{{ $minutesForCalc }}m {{ T "ofDowntime" }}.
</strong>
<span class="tooltip__text">
{{ if .Site.Params.dateFormat }}
{{ dateFormat .Site.Params.dateFormat .Params.resolvedWhen }}
{{ else }}
{{ dateFormat "January 2, 2006 at 3:04 PM" .Params.resolvedWhen }}
{{ end }}
</span>
</div>
{{ else }}
<div class="ok tooltip">
<strong>
{{ T "resolvedAfter" }}
{{ $secsForCalc := (mod $timeDiff 60) }}
{{ div (sub $timeDiff $secsForCalc) 60 }}m
{{ T "ofDowntime" }}.
</strong>
<span class="tooltip__text">
{{ if .Site.Params.dateFormat }}
{{ dateFormat .Site.Params.dateFormat .Params.resolvedWhen }}
{{ else }}
{{ dateFormat "January 2, 2006 at 3:04 PM" .Params.resolvedWhen }}
{{ end }}
</span>
</div>
{{ end }}
{{ end }}
{{ else }}
<strong class="error">
{{ if eq .Params.severity "down" }}
■
{{ else if eq .Params.severity "disrupted" }}
▲
{{ else }}
◆
{{ end }}
{{ T "downtimeOngoing" }}</strong>
{{ end }}
<hr>
{{ .Content }}
</div>
<div class="padding"></div>