Add Zola templates and browser-tested site scaffold

static/health.js

@@ -0,0 +1,149 @@
+import { decode } from "/vendor/msgpack/index.mjs";
+
+const target = document.querySelector("#target");
+const day = document.querySelector("#day");
+const detail = document.querySelector("#detail");
+const observed = document.querySelector("#observed");
+
+const percent = (value) =>
+  value === null ? "Unknown" : `${(value * 100).toFixed(2)}% healthy`;
+
+function state(value) {
+  switch (value) {
+    case null:
+      return "unknown";
+    case 1:
+      return "good";
+    case 0:
+      return "down";
+    default:
+      return "mixed";
+  }
+}
+
+async function load() {
+  const response = await fetch(
+    document.querySelector("script[data-api]").dataset.api,
+  );
+
+  return response.ok ? decode(await response.arrayBuffer()) : null;
+}
+
+function renderRow(record, recordIndex, dates, select) {
+  const row = document.createElement("article");
+  row.className = "health-row";
+
+  const title = document.createElement("h3");
+  title.textContent = record.name;
+
+  const bars = document.createElement("div");
+  bars.className = "bars";
+  bars.setAttribute("role", "group");
+  bars.setAttribute("aria-label", `${record.name}, daily history`);
+
+  for (const [dayIndex, value] of record.values.entries()) {
+    const button = document.createElement("button");
+    button.type = "button";
+    button.className = `bar ${state(value)}`;
+    button.title = `${dates[dayIndex]}: ${percent(value)}`;
+    button.setAttribute("aria-label", `${record.name} · ${button.title}`);
+    button.setAttribute("aria-pressed", "false");
+    button.dataset.target = String(recordIndex);
+    button.dataset.day = String(dayIndex);
+
+    button.addEventListener("click", () => {
+      target.value = String(recordIndex);
+      day.value = String(dayIndex);
+      select();
+    });
+
+    bars.append(button);
+  }
+
+  row.append(title, bars);
+  return row;
+}
+
+function renderGroup(group, groupIndex, records, dates, select) {
+  const [header, labels, values] = group;
+  const section = document.createElement("section");
+  section.className = "health-group";
+
+  const heading = document.createElement("h2");
+  heading.id = `group-${groupIndex}`;
+  heading.textContent = `${String(groupIndex + 1).padStart(2, "0")}  ${header}`;
+  section.setAttribute("aria-labelledby", heading.id);
+  section.append(heading);
+
+  for (const [seriesIndex, metric] of labels.entries()) {
+    const name =
+      Object.entries(metric)
+        .map(([key, value]) => `${key}=${value}`)
+        .join(", ") || "{}";
+    const record = { name, values: values[seriesIndex] };
+    const recordIndex = records.length;
+
+    records.push(record);
+    target.add(new Option(`${header} · ${name}`, String(recordIndex)));
+    section.append(renderRow(record, recordIndex, dates, select));
+  }
+
+  return section;
+}
+
+function render([start, groups]) {
+  const dates = Array.from({ length: 30 }, (_, index) =>
+    new Date((start + index * 86400) * 1000).toISOString().slice(0, 10),
+  );
+  observed.textContent = `${dates[0]} – ${dates.at(-1)} · UTC`;
+
+  const records = [];
+  const select = () => {
+    const record = records[Number(target.value)];
+    const dayIndex = Number(day.value);
+    detail.textContent = `${record.name} · ${dates[dayIndex]}: ${percent(record.values[dayIndex])}.`;
+
+    for (const bar of document.querySelectorAll(".bar")) {
+      const selected =
+        bar.dataset.target === target.value && bar.dataset.day === day.value;
+      bar.setAttribute("aria-pressed", String(selected));
+    }
+  };
+
+  for (const [index, date] of dates.entries()) {
+    day.add(new Option(date, String(index)));
+  }
+  day.value = "29";
+
+  groups.sort((left, right) => left[1].length - right[1].length);
+  const container = document.querySelector("#groups");
+
+  for (const [groupIndex, group] of groups.entries()) {
+    container.append(renderGroup(group, groupIndex, records, dates, select));
+  }
+
+  if (records.length) {
+    document.querySelector(".controls").hidden = false;
+    target.addEventListener("change", select);
+    day.addEventListener("change", select);
+    select();
+  } else {
+    observed.textContent = "No data";
+  }
+}
+
+let snapshot;
+
+try {
+  snapshot = await load();
+} catch {
+  snapshot = null;
+}
+
+if (snapshot === null) {
+  observed.textContent = "No data";
+} else {
+  render(snapshot);
+}
+
+document.documentElement.dataset.ready = "true";

static/post.js

@@ -0,0 +1,27 @@
+import mermaid from "/vendor/mermaid/mermaid.esm.min.mjs";
+
+const diagrams = document.querySelectorAll('pre code[data-lang="mermaid"]');
+
+for (const code of diagrams) {
+  const diagram = document.createElement("div");
+  diagram.className = "mermaid";
+  diagram.textContent = code.textContent;
+  code.parentElement.replaceWith(diagram);
+}
+
+mermaid.initialize({
+  startOnLoad: false,
+  theme: "neutral",
+  fontFamily: "Comic Neue",
+});
+await mermaid.run();
+
+window.MathJax = {
+  loader: { paths: { fonts: "/vendor/fonts" } },
+  output: { font: "mathjax-fira" },
+  chtml: { matchFontHeight: false },
+};
+
+const script = document.createElement("script");
+script.src = "/vendor/mathjax/tex-chtml-nofont.js";
+document.head.append(script);

static/robots.txt

@@ -0,0 +1,4 @@
+User-agent: *
+Allow: /
+
+Sitemap: https://quorate.dev/sitemap.xml

static/style.css

@@ -0,0 +1,377 @@
+@font-face {
+  font-family: "Comic Neue";
+  src: url("/fonts/neue.ttf");
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Comic Neue";
+  src: url("/fonts/neue-bold.ttf");
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Comic Mono";
+  src: url("/fonts/comic.ttf");
+}
+
+:root {
+  font:
+    16px/1.5 "Comic Neue",
+    sans-serif;
+  color-scheme: light;
+  --paper: #f5f1e8;
+  --ink: #292828;
+  --muted: #69645f;
+  --rule: #cec7bc;
+  --band: #e7dfd2;
+  --link: #7b392c;
+  --good: #625d55;
+  --mixed: #b28032;
+  --down: #a83f32;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) {
+    color-scheme: dark;
+    --paper: #181818;
+    --ink: #f3eee5;
+    --muted: #c0b9b0;
+    --rule: #67625c;
+    --band: #302e2b;
+    --link: #efb99b;
+    --good: #c0b9b0;
+    --mixed: #dfb366;
+    --down: #ed9986;
+  }
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+  --paper: #181818;
+  --ink: #f3eee5;
+  --muted: #c0b9b0;
+  --rule: #67625c;
+  --band: #302e2b;
+  --link: #efb99b;
+  --good: #c0b9b0;
+  --mixed: #dfb366;
+  --down: #ed9986;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  padding: 0 1rem;
+  background: var(--paper);
+  color: var(--ink);
+}
+
+.shell {
+  max-width: 44rem;
+  min-height: 100svh;
+  margin: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+header,
+footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  gap: 0.75rem;
+  padding: 1rem 0;
+}
+
+header {
+  border-bottom: 1px solid var(--rule);
+  flex-wrap: wrap;
+}
+
+footer {
+  border-top: 1px solid var(--rule);
+  padding-block: 0.75rem;
+  color: var(--muted);
+  flex-wrap: wrap;
+}
+
+main {
+  flex: 1;
+  padding: 2rem 0;
+  min-width: 0;
+}
+
+h1 {
+  font-size: 1.5rem;
+  margin: 0 0 0.5rem;
+}
+
+h2 {
+  font-size: 1.2rem;
+}
+
+h3 {
+  font-size: 1.1rem;
+}
+
+p {
+  margin: 0 0 0.6rem;
+}
+
+a {
+  color: var(--link);
+  text-underline-offset: 0.15em;
+}
+
+header a {
+  text-decoration: none;
+}
+
+nav {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.35rem;
+}
+
+nav span {
+  color: var(--rule);
+}
+
+.brand {
+  color: var(--ink);
+  font-weight: bold;
+}
+
+button,
+select {
+  font: inherit;
+  color: inherit;
+  background: var(--paper);
+  border: 1px solid var(--rule);
+  border-radius: 0;
+}
+
+button {
+  cursor: pointer;
+}
+
+#theme {
+  border: 0;
+  padding: 0 0.2rem;
+  line-height: 1;
+}
+
+#theme svg {
+  width: 0.8em;
+  height: 0.8em;
+  vertical-align: baseline;
+}
+
+:focus-visible {
+  outline: 2px solid var(--ink);
+  outline-offset: 3px;
+}
+
+code,
+pre,
+kbd,
+samp {
+  font-family: "Comic Mono", monospace;
+  font-size: 0.95em;
+}
+
+pre {
+  overflow-x: auto;
+  padding: 0.75rem;
+}
+
+blockquote {
+  margin-inline: 0;
+  padding-left: 1rem;
+  border-left: 2px solid var(--rule);
+}
+
+table {
+  border-collapse: collapse;
+  max-width: 100%;
+  display: block;
+  overflow-x: auto;
+}
+
+th,
+td {
+  padding: 0.4rem 0.7rem;
+  border-bottom: 1px solid var(--rule);
+  text-align: left;
+}
+
+.post {
+  max-width: 48rem;
+  line-height: 1.65;
+}
+
+.post h2,
+.post h3 {
+  margin-top: 1.5rem;
+}
+
+.post time {
+  color: var(--muted);
+}
+
+.post img,
+.mermaid svg {
+  max-width: 100%;
+  height: auto;
+}
+
+.posts {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.posts li {
+  border-bottom: 1px solid var(--rule);
+}
+
+.posts a {
+  display: flex;
+  align-items: start;
+  gap: 1rem;
+  padding: 1rem 0;
+  text-decoration: none;
+}
+
+.posts h2 {
+  margin: 0 0 0.25rem;
+}
+
+.posts p {
+  color: var(--ink);
+}
+
+.posts time {
+  color: var(--muted);
+}
+
+.posts img {
+  width: 25%;
+  aspect-ratio: 4 / 3;
+  object-fit: cover;
+}
+
+.masthead {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  border-bottom: 3px double var(--ink);
+  padding-bottom: 1rem;
+  margin-bottom: 1rem;
+}
+
+.badge {
+  background: var(--ink);
+  color: var(--paper);
+  padding: 0.7rem;
+  white-space: nowrap;
+}
+
+.health-group {
+  margin-top: 1.25rem;
+}
+
+.health-group h2 {
+  font-size: 1rem;
+  background: var(--band);
+  border-block: 1px solid var(--ink);
+  padding: 0.35rem 0.5rem;
+}
+
+.health-row {
+  display: grid;
+  grid-template-columns: 12rem minmax(0, 1fr);
+  gap: 0.6rem;
+  padding: 0.6rem 0.5rem;
+  border-bottom: 1px solid var(--rule);
+}
+
+.health-row h3 {
+  font: inherit;
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.bars {
+  display: grid;
+  grid-template-columns: repeat(30, minmax(0, 1fr));
+  gap: 3px;
+  align-items: center;
+}
+
+.bar {
+  border: 0;
+  height: 1.5rem;
+  min-width: 0;
+  padding: 0;
+}
+
+.good {
+  background: var(--good);
+}
+
+.mixed {
+  background: repeating-linear-gradient(
+    135deg,
+    var(--mixed) 0 3px,
+    var(--paper) 3px 5px
+  );
+}
+
+.down {
+  background: var(--down);
+}
+
+.unknown {
+  background: transparent;
+  box-shadow: inset 0 0 0 1px var(--muted);
+}
+
+.bar[aria-pressed="true"] {
+  outline: 2px solid var(--ink);
+  outline-offset: 2px;
+}
+
+.controls {
+  display: none;
+}
+
+#detail {
+  margin-top: 1rem;
+}
+
+@media (max-width: 600px) {
+  .health-row {
+    grid-template-columns: 1fr;
+  }
+
+  .controls:not([hidden]) {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.75rem;
+    margin-top: 1rem;
+  }
+
+  .controls label {
+    max-width: 100%;
+  }
+
+  select {
+    max-width: 100%;
+  }
+}

static/theme.js

@@ -0,0 +1,24 @@
+const mode = localStorage.getItem("theme") || "auto";
+document.documentElement.dataset.theme = mode;
+
+document.addEventListener("DOMContentLoaded", () => {
+  const button = document.querySelector("#theme");
+  const label = () =>
+    button.setAttribute(
+      "aria-label",
+      `Theme: ${document.documentElement.dataset.theme}. Change theme`,
+    );
+  label();
+
+  button.addEventListener("click", () => {
+    const modes = ["auto", "light", "dark"];
+    const next =
+      modes[
+        (modes.indexOf(document.documentElement.dataset.theme) + 1) %
+          modes.length
+      ];
+    document.documentElement.dataset.theme = next;
+    localStorage.setItem("theme", next);
+    label();
+  });
+});