site/home-main.ts

Functions

Imports

It imports components/site-header/site-header.ts, components/theme-switch/theme-switch.ts. No module of this repo imports it.

Source

1// The public page's script (site/home.ts writes the page; it reads whole without this). The header and
2// its theme button are Capsomer's own site header; the rest is the page's: the family preview, the
3// component filter, the copy button and the live test count.
4import { enhance as enhanceHeader } from "../components/site-header/site-header.ts";
5import { enhance as enhanceTheme } from "../components/theme-switch/theme-switch.ts";
6
7enhanceHeader();
8enhanceTheme();
9
10// The preview takes the chosen family as a site would, with data-family (purple is the default, so none).
11const stage = document.querySelector<HTMLElement>("[data-cap-part='stage']");
12for (const input of document.querySelectorAll<HTMLInputElement>("input[name='home-family']")) {
13  input.addEventListener("change", () => {
14    if (!stage) return;
15    if (input.value === "purple") delete stage.dataset.family;
16    else stage.dataset.family = input.value;
17  });
18}
19// The preview's chips and switch respond, so the panel behaves like the components it shows.
20for (const chip of document.querySelectorAll<HTMLButtonElement>(".home-try .cap-chip")) {
21  chip.addEventListener("click", () => chip.setAttribute("aria-pressed", String(chip.getAttribute("aria-pressed") !== "true")));
22}
23for (const sw of document.querySelectorAll<HTMLInputElement>(".home-try .cap-switch input")) {
24  sw.addEventListener("change", () => {
25    const state = sw.parentElement?.querySelector(".cap-switch-state");
26    if (state) state.textContent = sw.checked ? "On" : "Off";
27  });
28}
29
30// The component filter: by name and summary, with the count said aloud.
31const find = document.querySelector<HTMLElement>("[data-cap-part='find']");
32const parts = [...document.querySelectorAll<HTMLLIElement>(".home-parts > li")];
33if (find) {
34  find.hidden = false;
35  const input = find.querySelector("input");
36  const count = find.querySelector("[role='status']");
37  input?.addEventListener("input", () => {
38    const q = input.value.trim().toLowerCase();
39    let shown = 0;
40    for (const li of parts) {
41      const hit = !q || (li.textContent ?? "").toLowerCase().includes(q);
42      li.hidden = !hit;
43      if (hit) shown++;
44    }
45    if (count) count.textContent = q ? `${shown} of ${parts.length} components` : `${parts.length} components`;
46  });
47}
48
49// Copy the install lines; the button says it worked.
50const copy = document.querySelector<HTMLButtonElement>("[data-cap-part='copy']");
51if (copy && navigator.clipboard) {
52  copy.hidden = false;
53  copy.addEventListener("click", async () => {
54    try {
55      await navigator.clipboard.writeText(document.getElementById("home-install")?.textContent ?? "");
56      copy.textContent = "Copied";
57    } catch {
58      copy.textContent = "Copy failed";
59    }
60    setTimeout(() => (copy.textContent = "Copy"), 2000);
61  });
62}
63
64// The last run on main, from the results branch CI writes (the admin reads the same file).
65const live = document.querySelector<HTMLElement>("[data-live='tests']");
66if (live) {
67  fetch("https://raw.githubusercontent.com/DrDustinEdwards/capsomer/results/results.json", { cache: "no-cache" })
68    .then((r) => (r.ok ? r.json() : null))
69    .then((j: { totals?: { passed: number; failed: number } } | null) => {
70      if (!j?.totals) return;
71      const { passed, failed } = j.totals;
72      const [n, , note] = live.children;
73      if (n) n.textContent = (passed + failed).toLocaleString("en-US");
74      if (note) note.textContent = failed ? `${failed} failing on the last run` : "all passed on the last run";
75      live.hidden = false;
76    })
77    .catch(() => {});
78}