Skip to content

x issue began 26min ago #128

@mistermantas

Description

@mistermantas

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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions