website

// All client-side JS the site ships, in one plain vanilla file — no
// bundler needed for two small, independent event listeners.

// Wires up the theme button rendered as static markup in site-header.njk
// (no web component, no framework — a stateless click-to-toggle button
// doesn't need one). Loaded with `defer` so this runs after the DOM is
// parsed and #theme-change already exists.
document.getElementById("theme-change").addEventListener("click", () => {
  const root = document.documentElement;
  // data-theme is tri-state: absent means "follow the OS preference" (see
  // `color-scheme: light dark` in shared.css). Resolve against that OS
  // preference when no explicit value is set yet, so the first click
  // always flips to the opposite of what's *currently shown* rather than
  // assuming light.
  const currentTheme = root.getAttribute("data-theme");
  const isDark = currentTheme ? currentTheme === "dark" : matchMedia("(prefers-color-scheme: dark)").matches;
  const next = isDark ? "light" : "dark";
  root.setAttribute("data-theme", next);
  localStorage.setItem("theme", next);
});

// .file-explorer-tree lives outside #file-pane (see the comment on
// .file-explorer in repos.css) so htmx swaps of #file-pane never re-render
// it — clicking a file never rebuilds the tree. That's good for keeping
// scroll position/expanded folders, but it also means the .active-file
// class painted at page-load time never moves on its own. Move it here,
// synchronously on click, instead of waiting on htmx's response.
document.addEventListener("click", (e) => {
  const link = e.target.closest(".file-explorer-tree a");
  if (!link) return;
  const tree = link.closest(".file-explorer-tree");
  const current = tree.querySelector("a.active-file");
  if (current) current.classList.remove("active-file");
  link.classList.add("active-file");
});

// Copies the git clone command shown in the repo header (see .clone-cmd in
// repos.css) and flips the button to a checkmark for a bit as feedback,
// instead of a tooltip/toast that would need its own positioning logic.
document.addEventListener("click", (e) => {
  const btn = e.target.closest(".copy-btn");
  if (!btn) return;
  navigator.clipboard.writeText(btn.dataset.clone).then(() => {
    clearTimeout(btn._copyResetTimer);
    btn.classList.add("copied");
    btn._copyResetTimer = setTimeout(() => btn.classList.remove("copied"), 1500);
  });
});