Add Zola templates and browser-tested site scaffold

tests/pages.cjs

@@ -0,0 +1,172 @@
+const assert = require("node:assert/strict");
+const { Buffer } = require("node:buffer");
+const { encode } = require("@msgpack/msgpack");
+const { chromium } = require(process.env.PLAYWRIGHT_PATH || "playwright");
+
+const base = process.env.SITE_URL || "http://127.0.0.1:18790";
+const endpoint = "https://health.quorate.dev/health";
+const paths = ["/", "/about/", "/blog/", "/404.html", "/blog/specimen/"];
+
+const days = Array(30).fill(1);
+days[1] = null;
+days[2] = 23 / 24;
+days[3] = 0;
+
+const snapshot = [
+  1786838400,
+  [
+    ["Nodes", [{ node: "one" }, { node: "two" }], [days, days]],
+    ["Public services", [{ service: "code" }], [days]],
+  ],
+];
+
+function mockHealth(route, mode) {
+  if (mode === "connectionrefused") {
+    return route.abort("connectionrefused");
+  }
+
+  return route.fulfill({
+    status: mode === "503" ? 503 : 200,
+    contentType: "application/msgpack",
+    body: Buffer.from(encode(snapshot)),
+  });
+}
+
+async function checkWidth(page) {
+  assert.equal(
+    await page.evaluate(
+      () => document.documentElement.scrollWidth <= innerWidth,
+    ),
+    true,
+  );
+}
+
+async function checkHealth(page, width, mode) {
+  await page.route(endpoint, (route) => mockHealth(route, mode));
+  await page.goto(`${base}/up/`);
+  await page.waitForFunction(
+    () => document.documentElement.dataset.ready === "true",
+  );
+
+  const healthy = mode === "healthy";
+  assert.equal(await page.locator(".bar").count(), healthy ? 90 : 0);
+  assert.equal(
+    await page.locator(".controls").isVisible(),
+    healthy && width <= 600,
+  );
+
+  if (healthy) {
+    assert.match(
+      await page.locator(".health-group h2").first().textContent(),
+      /Public services/,
+    );
+
+    await page.locator(".bar").nth(2).click();
+    assert.match(await page.locator("#detail").textContent(), /95\.83%/);
+  } else {
+    assert.equal(await page.locator("#observed").textContent(), "No data");
+  }
+
+  await checkWidth(page);
+  await page.unroute(endpoint);
+}
+
+async function checkLayout(page) {
+  assert.equal(await page.locator("header nav a").count(), 4);
+  assert.equal(await page.locator("h1").count(), 1);
+  assert.equal(
+    await page
+      .locator("body")
+      .evaluate((node) => getComputedStyle(node).fontSize),
+    "16px",
+  );
+  assert.equal(
+    await page
+      .locator("h1")
+      .evaluate((node) => getComputedStyle(node).fontSize),
+    "24px",
+  );
+  assert.equal(
+    await page
+      .locator(".shell")
+      .evaluate((node) => getComputedStyle(node).maxWidth),
+    "704px",
+  );
+
+  await checkWidth(page);
+}
+
+async function checkBlog(page) {
+  assert.equal(await page.locator(".posts li").count(), 2);
+  assert.equal(await page.locator(".posts h2").count(), 2);
+  assert.equal(await page.locator(".posts p").count(), 2);
+  assert.equal(await page.locator(".posts img").count(), 1);
+}
+
+async function checkPost(page) {
+  await page.locator(".mermaid svg").waitFor();
+  await page.locator("mjx-container").waitFor();
+
+  assert.equal(await page.locator("blockquote").count(), 1);
+  assert.equal(await page.locator("table").count(), 1);
+}
+
+async function checkPage(page, path) {
+  await page.goto(`${base}${path}`);
+  await checkLayout(page);
+
+  switch (path) {
+    case "/about/":
+      assert.equal(await page.locator("article p").textContent(), "WIP");
+      break;
+    case "/blog/":
+      await checkBlog(page);
+      break;
+    case "/blog/specimen/":
+      await checkPost(page);
+      break;
+  }
+}
+
+async function main() {
+  const browser = await chromium.launch({
+    executablePath: process.env.CHROME_PATH,
+    headless: true,
+  });
+  let cases = 0;
+
+  try {
+    for (const width of [320, 390, 768, 1280]) {
+      for (const colorScheme of ["light", "dark"]) {
+        const page = await browser.newPage({
+          viewport: { width, height: 844 },
+          colorScheme,
+        });
+        const errors = [];
+        page.on("pageerror", (error) => errors.push(error.message));
+
+        for (const mode of ["healthy", "503", "connectionrefused"]) {
+          await checkHealth(page, width, mode);
+          cases++;
+        }
+
+        for (const path of paths) {
+          await checkPage(page, path);
+          cases++;
+        }
+
+        assert.deepEqual(errors, []);
+        await page.close();
+      }
+    }
+
+    console.log(`PASS: ${cases} page and health cases`);
+  } finally {
+    await browser.close();
+  }
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exitCode = 1;
+});