Show the community server's status on the homepage

docs/index.html

@@ -149,6 +149,17 @@
   .btn-secondary:hover { border-color: var(--ink); text-decoration: none; }
   .btn .ver { font-family: var(--mono); font-weight: 500; font-size: 14px; opacity: 0.85; }
   .actions .plain { font-size: 15px; }
+  /* The community server's status, under the join button. */
+  .server-status { display: grid; grid-template-columns: 9px 1fr; column-gap: 10px; row-gap: 2px; margin: 16px 0 0; font-size: 14px; color: var(--muted); }
+  .server-status .dot { align-self: start; margin-top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--rule-strong); }
+  .server-status .status-when { grid-column: 2; }
+  .server-status .status-when:empty { display: none; }
+  .server-status[data-state="ok"] .dot { background: #2E9E5B; box-shadow: 0 0 0 3px rgba(46, 158, 91, 0.18); }
+  .server-status[data-state="warn"] .dot { background: #D19A1C; box-shadow: 0 0 0 3px rgba(209, 154, 28, 0.2); }
+  .server-status[data-state="down"] .dot { background: #D2463C; box-shadow: 0 0 0 3px rgba(210, 70, 60, 0.2); }
+  .server-status[data-state="down"] .status-text,
+  .server-status[data-state="warn"] .status-text { color: var(--ink); }
+  .server-status .status-when { font-size: 13px; }
 
   .term { background: var(--term-bg); color: var(--term-ink); border-radius: 6px; padding: 18px 20px; font-family: var(--mono); font-size: 13.5px; line-height: 1.5; overflow-x: auto; border: 1px solid var(--rule-strong); }
   .term pre { margin: 0; white-space: pre-wrap; }
@@ -298,6 +309,7 @@
             <a class="btn btn-secondary" id="try-server" href="https://haven.moviethingy.xyz/?invite=da0b9be7">Join the community server</a>
             <a class="plain" href="https://github.com/ancsemi/Haven">Source on GitHub</a>
           </div>
+          <p class="server-status" id="server-status" data-state="unknown" role="status" aria-live="polite"><span class="dot" aria-hidden="true"></span><span class="status-text">Checking the community server…</span><span class="status-when"></span></p>
         </div>
         <div>
           <div class="term" role="img" aria-label="Haven's start-up message in a terminal: HAVEN is running, with the local and network addresses">
@@ -618,6 +630,64 @@
 })();
 </script>
 
+<script>
+// The community server's status line. A job checks the server every ten
+// minutes (scripts/community-status.js) and keeps the result on the repo's
+// site-status branch; this reads it when the page opens and every two
+// minutes after. A result older than 40 minutes means the checks stopped,
+// so it says so rather than showing an old answer.
+(() => {
+  const line = document.getElementById('server-status');
+  if (!line) return;
+  const text = line.querySelector('.status-text');
+  const when = line.querySelector('.status-when');
+  const SOURCE = 'https://raw.githubusercontent.com/ancsemi/Haven/site-status/status.json';
+  const STALE_MS = 40 * 60 * 1000;
+  const ago = (iso) => {
+    const min = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 60000));
+    if (min < 1) return 'just now';
+    if (min < 60) return min === 1 ? '1 minute ago' : `${min} minutes ago`;
+    const h = Math.round(min / 60);
+    return h === 1 ? '1 hour ago' : `${h} hours ago`;
+  };
+  const at = (isoTime) => new Date(isoTime).toLocaleString([], { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+  // Certificate dates in the visitor's own time; anything else as the
+  // checker wrote it.
+  const say = (s) => {
+    if (s.code === 'cert-expired' && s.certificateExpires) {
+      return `The community server's security certificate expired ${at(s.certificateExpires)}, so browsers won't connect until it's renewed.`;
+    }
+    if (s.code === 'cert-expiring' && s.certificateExpires) {
+      return `The community server is online. Its security certificate runs out ${at(s.certificateExpires)}.`;
+    }
+    return s.message || 'The community server is online.';
+  };
+  const show = (state, message, detail) => {
+    line.dataset.state = state;
+    text.textContent = message;
+    when.textContent = detail || '';
+  };
+  const check = async () => {
+    try {
+      const res = await fetch(`${SOURCE}?t=${Date.now()}`, { cache: 'no-store' });
+      if (!res.ok) throw new Error(`status ${res.status}`);
+      const s = await res.json();
+      if (!s || !s.checkedAt || Date.now() - Date.parse(s.checkedAt) > STALE_MS) {
+        show('unknown', "The community server's status hasn't been checked lately.");
+        return;
+      }
+      const state = ['ok', 'warn', 'down'].includes(s.state) ? s.state : 'unknown';
+      const since = state === 'down' && s.code !== 'cert-expired' && s.since ? `Since ${at(s.since)}. ` : '';
+      show(state, say(s), `${since}Checked ${ago(s.checkedAt)}.`);
+    } catch (err) {
+      show('unknown', "Couldn't load the community server's status.");
+    }
+  };
+  check();
+  setInterval(check, 2 * 60 * 1000);
+})();
+</script>
+
 <script>
 // "Try it now" in the bar: back to the top, then light up the community server button.
 (() => {