x issue began 26min ago #128
Comments
This was referenced Oct 11, 2020
Merged
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
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:
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="affect 8000 ed/{{ . | 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>The text was updated successfully, but these errors were encountered: