// app.jsx — router, chrome, tweaks, mount const { useState: useS, useEffect: useE, useRef: useR } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "frontTheme": "light", "accent": "#7A37CF", "headline": "refined", "reveal": false } /*EDITMODE-END*/; function parseRoute() { const h = (window.location.hash || "#/").replace(/^#/, ""); const parts = h.split("/").filter(Boolean); if (parts.length === 0) return { name: "home" }; if (parts[0] === "read") return { name: "article", slug: parts[1] }; if (parts[0] === "section") return { name: "archive", section: parts[1] }; if (parts[0] === "pitch") return { name: "pitch" }; if (parts[0] === "about") return { name: "about" }; if (parts[0] === "contributor") return { name: "profile", id: parts[1] }; if (parts[0] === "legal") return { name: "legal", doc: parts[1] }; // legacy redirect if (parts[0] === "terms") return { name: "legal", doc: "terms" }; if (parts[0] === "privacy") return { name: "legal", doc: "privacy" }; if (parts[0] === "editorial") return { name: "legal", doc: "editorial" }; if (parts[0] === "bookmarks") return { name: "bookmarks" }; if (parts[0] === "contributors") return { name: "contributors" }; if (parts[0] === "volunteer") return { name: "volunteer" }; if (parts[0] === "donate") return { name: "donate" }; if (parts[0] === "dispatch") return { name: "dispatch" }; return { name: "home" }; } function Header({ route, onSearch }) { const [scrolled, setScrolled] = useS(false); const [open, setOpen] = useS(false); useE(() => { const on = () => setScrolled(window.scrollY > 20); on(); window.addEventListener("scroll", on, { passive: true }); return () => window.removeEventListener("scroll", on); }, []); useE(() => { setOpen(false); }, [route]); const nav = [ { label: "All Stories", hash: "/section/all", active: route.name === "archive" && (route.section === "all" || !sectionById(route.section)) }, ...SECTIONS.map((s) => ({ label: s.name, hash: "/section/" + s.id, active: route.name === "archive" && route.section === s.id })), { label: "About", hash: "/about", active: route.name === "about" } ]; return (

{open && (

{nav.map((n) => { e.preventDefault(); go(n.hash); }} style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 24, padding: "8px 0", color: n.active ? "var(--accent)" : "var(--fg)" }}>{n.label} )} { e.preventDefault(); go("/bookmarks"); }} style={{ fontFamily: "var(--ff-display)", fontWeight: 700, fontSize: 24, padding: "8px 0", color: route.name === "bookmarks" ? "var(--accent)" : "var(--fg)" }}>Saved

)}

); } function Footer() { return ( ); } function useReadingProgress(route) { useE(() => { const bar = document.getElementById("read-progress"); const on = () => { const el = document.getElementById("article-content"); if (route.name !== "article" || !el) { bar.style.width = "0%"; return; } const start = el.offsetTop - window.innerHeight * 0.4; const end = el.offsetTop + el.offsetHeight - window.innerHeight * 0.6; const p = Math.max(0, Math.min(1, (window.scrollY - start) / (end - start))); bar.style.width = p * 100 + "%"; }; on(); window.addEventListener("scroll", on, { passive: true }); window.addEventListener("resize", on); return () => { window.removeEventListener("scroll", on); window.removeEventListener("resize", on); }; }, [route]); } function App() { const [t, setTweak] = useTweaks(TWEAK_DEFAULTS); const [route, setRoute] = useS(parseRoute()); const [searchOpen, setSearchOpen] = useS(false); const [cmsReady, setCmsReady] = useS(true); // render immediately with static data // On mount: try to load live content from Sanity in the background. // Static placeholders are always visible — Sanity content swaps in if available. useE(() => { loadFromSanity().then(data => { const hasArticles = data?.articles?.length > 0; const hasContributors = data && Object.keys(data.contributors).length > 0; if (hasArticles) window.ARTICLES = data.articles; if (hasContributors) window.CONTRIBUTORS = data.contributors; setCmsReady(true); }); }, []); useE(() => { const on = () => setRoute(parseRoute()); window.addEventListener("hashchange", on); return () => window.removeEventListener("hashchange", on); }, []); useE(() => { const onKey = (e) => { if ((e.ctrlKey || e.metaKey) && e.key === "k") { e.preventDefault(); setSearchOpen(true); } }; window.addEventListener("keydown", onKey); return () => window.removeEventListener("keydown", onKey); }, []); useReadingProgress(route); useE(() => { document.documentElement.style.setProperty("--accent", t.accent); document.body.classList.toggle("type-grand", t.headline === "grand"); document.documentElement.classList.toggle("do-reveal", !!t.reveal); }, [t]); const homeDark = route.name === "home" && t.frontTheme === "dark"; let page; switch (route.name) { case "article": page = ; break; case "archive": page = ; break; case "pitch": page = ; break; case "about": page = ; break; case "profile": page = ; break; case "legal": page = ; break; case "bookmarks": page = ; break; case "contributors": page = ; break; case "volunteer": page = ; break; case "donate": page = ; break; case "dispatch": page = ; break; default: page = ; } return (

setSearchOpen(true)} />

{page}

); } ReactDOM.createRoot(document.getElementById("root")).render(); window.addEventListener("load", () => { const l = document.getElementById("loading"); if (l) { l.style.opacity = 0; setTimeout(() => l.remove(), 500); } }); setTimeout(() => { const l = document.getElementById("loading"); if (l) { l.style.opacity = 0; setTimeout(() => l.remove(), 500); } }, 1400);