Add "last updated at" times to the index and repo pages.

Fixes #31.

frontend/src/components/local-time.ts

@@ -0,0 +1,36 @@
+import { localFormatter } from '@lib/formatTime.js';
+import { LitElement, html, type PropertyDeclaration } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+const dateProperty: PropertyDeclaration<Date | null> = {
+    type: Object,
+    converter(date: string | null) {
+        const result = new Date(date ?? "");
+        if (isNaN(result.getTime())) return null;
+        return result;
+    },
+}
+
+@customElement('local-time')
+export class LocalTime extends LitElement {
+    // The single time represented by this element.
+    @property(dateProperty)
+    datetime: Date | null = null;
+
+    // The range of time represented by this element.
+    @property(dateProperty)
+    from: Date | null = null
+    @property(dateProperty)
+    to: Date | null = null
+
+    render() {
+        if (this.datetime) {
+            return html`${localFormatter.format(this.datetime)}`;
+        } else if (this.from && this.to) {
+            return html`${localFormatter.formatRange(this.from, this.to)}`;
+        } else {
+            console.error(this, "should have 'datetime' or 'from' and 'to' attributes.");
+            return html`<slot></slot>`;
+        }
+    }
+}

frontend/src/lib/formatTime.ts

@@ -0,0 +1,12 @@
+// For use in the static site generator.
+export const englishUtcFormatter = new Intl.DateTimeFormat("en-US", {
+    dateStyle: "medium",
+    timeStyle: "long",
+    timeZone: "UTC",
+});
+
+// For use in client-side code.
+export const localFormatter = new Intl.DateTimeFormat(undefined, {
+    dateStyle: "medium",
+    timeStyle: "long"
+});

frontend/src/pages/[org]/[repo].astro

@@ -3,6 +3,7 @@ import Duration from "@components/Duration.astro";
 import GhLabel from "@components/GhLabel.astro";
 import Issue from "@components/Issue.astro";
 import Layout from "@layouts/Layout.astro";
+import { englishUtcFormatter } from "@lib/formatTime.js";
 import { IssueSummary } from "@lib/repo-summaries";
 import {
 agendaLengthSLO,
@@ -56,13 +57,25 @@ untriaged.push(...triageViolations);
 untriaged.sort(cmpByTimeUsed);
 ---
 
+<script>
+    import "@components/local-time.js";
+</script>
+
 <Layout title={`${org}/${repo} Issues`}>
     <h1>
         <a href=`https://github.com/${org}/${repo}/issues`
             >{org}/{repo} Issues</a
         >
     </h1>
 
+    <p>
+        Last updated <local-time datetime={details.cachedAt}
+            >{
+                englishUtcFormatter.format(new Date(details.cachedAt))
+            }</local-time
+        >.
+    </p>
+
     {
         details.labelsPresent ? null : (
             <p>

frontend/src/pages/index.astro

@@ -1,13 +1,28 @@
 ---
 import GhLabel from "@components/GhLabel.astro";
+import { englishUtcFormatter } from "@lib/formatTime";
 import { IssueSummary } from "@lib/repo-summaries";
 import { agendaLengthSLO, groupBySlo } from "@lib/slo";
 import * as ghLabels from "@lib/triage-labels";
 import { getCollection } from "astro:content";
+import assert from "node:assert";
 import Layout from "../layouts/Layout.astro";
 
 const repos = await getCollection("github");
 
+let oldestCache: Date;
+let newestCache = (oldestCache = new Date(repos[0].data.cachedAt));
+for (const repo of repos) {
+    const repoCachedAt = new Date(repo.data.cachedAt);
+    if (repoCachedAt < oldestCache) {
+        oldestCache = repoCachedAt;
+    }
+    if (repoCachedAt > newestCache) {
+        newestCache = repoCachedAt;
+    }
+}
+assert(oldestCache <= newestCache);
+
 let totalTriageViolations = 0;
 let totalUrgentViolations = 0;
 let totalSoonViolations = 0;
@@ -153,10 +168,24 @@ function compareByKey(
 repoSummaries.sort(compareByKey);
 ---
 
+<script>
+    import "@components/local-time.js";
+</script>
+
 <Layout title="Browser Spec Maintenance Status">
     <main>
         <h1>Browser Spec Maintenance Status</h1>
 
+        <p>
+            Last updated <local-time
+                frdom={oldestCache.toISOString()}
+                to={newestCache.toISOString()}
+                >{
+                    englishUtcFormatter.formatRange(oldestCache, newestCache)
+                }</local-time
+            >.
+        </p>
+
         <p>Across all browser specs, we have:</p>
         <ul>
             {
@@ -193,8 +222,8 @@ repoSummaries.sort(compareByKey);
             {
                 totalGroupsOverAgendaLimit > 0 ? (
                     <li class="warning">
-                        {totalGroupsOverAgendaLimit} group(s) with too many issues
-                        on the agenda
+                        {totalGroupsOverAgendaLimit} group(s) with too many
+                        issues on the agenda
                     </li>
                 ) : null
             }