Merge pull request #1804 from tangency-labs/site/local-times

site: show times in the viewer's locale and zone, not UTC

site/assets/app.js

@@ -2,6 +2,17 @@
 (function () {
   "use strict";
 
+  // ---- times: the page is built with UTC times; show each in the viewer's locale and zone.
+  function localTime(t) {
+    return new Date(t * 1000).toLocaleString(undefined, {
+      year: "numeric", month: "short", day: "numeric", hour: "numeric", minute: "2-digit",
+      timeZoneName: "short",
+    });
+  }
+  document.querySelectorAll("time[data-ts]").forEach(function (el) {
+    el.textContent = localTime(+el.getAttribute("data-ts"));
+  });
+
   // ---- sortable tables: <th data-sort="num|text">; a cell's data-v overrides its text.
   function cellValue(td, kind) {
     if (!td) return kind === "num" ? -Infinity : "";
@@ -98,7 +109,7 @@
     var tip = svg.parentNode.querySelector(".tip");
     function sx(t) { return L + (W - L - R) * (t - x0) / Math.max(1, x1 - x0); }
     function fmt(t) {
-      return new Date(t * 1000).toISOString().slice(0, 16).replace("T", " ") + " UTC";
+      return localTime(t);
     }
     function move(ev) {
       var box = svg.getBoundingClientRect();

site/build.py

@@ -634,11 +634,19 @@ def chart_svg(points, cid="chart", title="Share of upstream lines ported over ti
             '<div class="tip" hidden></div></div>')
 
 
+def local_time(t):
+    """A <time> element for epoch `t`: UTC text as the no-script fallback, and the exact
+    instant in `datetime`/`data-ts` so app.js rewrites it in the viewer's own locale and zone."""
+    iso = time.strftime("%Y-%m-%dT%H:%M:%SZ", time.gmtime(t))
+    return (f'<time datetime="{iso}" data-ts="{int(t)}">'
+            f"{time.strftime('%Y-%m-%d %H:%M', time.gmtime(t))} UTC</time>")
+
+
 def chart_table(points):
     rows = []
     for t, s in points:
         tot = s["total_lines"] or 1
-        rows.append(f"<tr><td>{time.strftime('%Y-%m-%d %H:%M', time.gmtime(t))} UTC</td>"
+        rows.append(f"<tr><td>{local_time(t)}</td>"
                     f"<td class=num>{100 * s['green_lines'] / tot:.1f}%</td>"
                     f"<td class=num>{100 * s['done_lines'] / tot:.1f}%</td>"
                     f"<td class=num>{s['count']['green'] + s['count']['partial']} / {s['units']}</td></tr>")
@@ -670,7 +678,7 @@ def status_steps(hist, t0, t1):
         segs.append(f'<i class="st-{esc(st)}" style="width:{w:.2f}%" '
                     f'title="{esc(st)} from {time.strftime("%Y-%m-%d", time.gmtime(t))}"></i>')
     label = ", then ".join(f"{st} from {time.strftime('%Y-%m-%d', time.gmtime(t))}" for t, st, _ in runs)
-    items = "".join(f"<li><time>{time.strftime('%Y-%m-%d %H:%M', time.gmtime(t))} UTC</time> {badge(st)}"
+    items = "".join(f"<li>{local_time(t)} {badge(st)}"
                     f" <span class=muted>{fmt_int(n)} lines</span></li>" for t, st, n in runs)
     d0, d1 = (time.strftime("%b %d", time.gmtime(v)) for v in (t0, t1))
     return (f'<div class="steps" role="img" aria-label="Status history: {esc(label)}">{"".join(segs)}</div>'