Source

// A tiny path router: the site is static, so every path serves index.html and the app reads the URL.
import { useEffect, useState } from "react";

export function navigate(to: string) {
  if (to === location.pathname + location.search + location.hash) return;
  history.pushState(null, "", to);
  window.dispatchEvent(new PopStateEvent("popstate"));
  window.scrollTo(0, 0);
}

export function usePath(): string {
  const [path, setPath] = useState(location.pathname);
  useEffect(() => {
    const onPop = () => setPath(location.pathname);
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);
  return path;
}

// Same-site links marked data-nav move without a page load.
document.addEventListener("click", (e) => {
  const a = (e.target as Element | null)?.closest?.("a[data-nav]") as HTMLAnchorElement | null;
  if (!a || e.defaultPrevented || e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;
  e.preventDefault();
  navigate(a.getAttribute("href") || "/");
});