// Bruno — personal site. Standalone polished build of the editorial-minimal // direction. Single-column, Lora throughout, one blue accent. // // Architecture: // - useHashRoute() — '#/' is home, '#/a/' is a writing entry // - useTweaks() — comes from tweaks-panel.jsx (state + persist) // - applyTheme() — writes CSS variables onto so every node // (incl. Cmd-K and Tweaks) responds to one source // of theme truth instead of prop-drilling colors // - — theme-aware command palette, ⌘K or / // - — wired by the host toolbar toggle const { useEffect, useState, useMemo, useRef, useCallback } = React; // ---------- routing ---------- function parseHash() { const h = (window.location.hash || "").replace(/^#\/?/, ""); if (h.startsWith("a/")) return { kind: "article", id: h.slice(2) }; return { kind: "home" }; } function useHashRoute() { const [route, setRoute] = useState(parseHash); useEffect(() => { const on = () => { setRoute(parseHash()); window.scrollTo({ top: 0, behavior: "instant" }); }; window.addEventListener("hashchange", on); return () => window.removeEventListener("hashchange", on); }, []); return route; } // ---------- accent palette ---------- // Keyed by the light-mode hex so it works directly with . // Each accent has a paired dark-mode hex (a lighter, slightly desaturated // version) so contrast holds when the page flips. const ACCENT_OPTIONS = ["#2563eb", "#c8553d", "#2f6a4a", "#3f3f46"]; const ACCENT_DARK = { "#2563eb": "#7aa7ff", "#c8553d": "#e08068", "#2f6a4a": "#7fbb9c", "#3f3f46": "#a1a1aa", }; // ---------- theme application ---------- function applyTheme(t) { const r = document.documentElement.style; const accentLight = t.accent || ACCENT_OPTIONS[0]; const accentDark = ACCENT_DARK[accentLight] || accentLight; if (t.dark) { r.setProperty("--bg", "#0d0d0c"); r.setProperty("--card", "#141413"); r.setProperty("--ink", "#ece9e3"); r.setProperty("--mute", "#8a8780"); r.setProperty("--soft", "#a5a29b"); r.setProperty("--hair", "#2a2826"); r.setProperty("--accent", accentDark); } else { r.setProperty("--bg", "#ffffff"); r.setProperty("--card", "#fafaf8"); r.setProperty("--ink", "#0a0a0a"); r.setProperty("--mute", "#737373"); r.setProperty("--soft", "#525252"); r.setProperty("--hair", "#e8e8e6"); r.setProperty("--accent", accentLight); } // density: --gap multiplier for vertical rhythm r.setProperty("--gap", t.density === "airy" ? "1.25" : t.density === "cozy" ? "0.85" : "1"); r.setProperty("--bodysize", String(t.bodysize || 17) + "px"); document.body.style.background = "var(--bg)"; document.body.style.color = "var(--ink)"; } // ---------- shared bits ---------- function ELink({ href = "#", children, italic = false, mute = false, style = {} }) { return ( {children} ); } const fmtShort = (iso) => new Date(iso + "T12:00:00").toLocaleDateString("en-US", { year: "2-digit", month: "short", day: "2-digit" }); const fmtLong = (iso) => new Date(iso + "T12:00:00").toLocaleDateString("en-US", { year: "numeric", month: "long", day: "numeric" }); // ---------- home ---------- function Home({ t }) { return (
{SITE.fullName} {SITE.tagline}

{SITE.bioShort}

{SITE.bioLong}

{ENTRIES.length > 0 && (
    {ENTRIES.map(e => (
  • {e.title} {t.showKinds && } {t.showReading && {e.reading}}
    {fmtShort(e.date)}
    • ))}
)} {PROJECTS.length > 0 && (
    {PROJECTS.map(p => (
  • {p.name} {p.meta}

    {p.blurb}

    • ))}
)} {FINDS.length > 0 && (
    {FINDS.map(f => (
  • {fmtShort(f.date)} {f.title} {f.host}

    {f.note}

    • ))}
)}
{SITE.social.map(s => {s.label})}
); } function Group({ title, children }) { return (

{title}

{children}
); } function KindLabel({ kind }) { const label = { research: "research", essay: "essay", note: "note" }[kind] || kind; return {label}; } // ---------- inline markup in article blocks ---------- // Supports `inline code` and **bold**. Applied to p, h2, and quote text. function renderInline(text) { const parts = text.split(/(`[^`]+`|\*\*[^*]+\*\*)/g); return parts.map((part, i) => { if (!part) return null; if (part.startsWith("`") && part.endsWith("`") && part.length >= 2) { return {part.slice(1, -1)}; } if (part.startsWith("**") && part.endsWith("**") && part.length >= 4) { return {part.slice(2, -2)}; } return {part}; }); } // ---------- article reader ---------- function Reader({ id }) { const entry = ENTRIES.find(e => e.id === id); if (!entry) { return (
← Back

No piece here.

That id ({id}) doesn't match anything. The link might be old, or I might have renamed something.

); } const body = getArticleBody(id); return (
← Back to all writing
{fmtLong(entry.date)} · {entry.reading}

{entry.title}

{entry.summary}

{body.map((block, i) => { if (block.kind === "h2") return

{renderInline(block.text)}

; if (block.kind === "quote") return
{renderInline(block.text)}
; if (block.kind === "code") return 
{block.text}
; return

{renderInline(block.text)}

; })}
{entry.tags.map(tag => #{tag})}
← All writing {fmtLong(entry.date)}
); } // ---------- Cmd-K palette (theme-aware) ---------- function CmdKPalette() { const [open, setOpen] = useState(false); const [q, setQ] = useState(""); const inputRef = useRef(null); useEffect(() => { const onKey = (e) => { const tag = (e.target.tagName || "").toLowerCase(); const inField = tag === "input" || tag === "textarea"; const isK = (e.key === "k" || e.key === "K") && (e.metaKey || e.ctrlKey); const isSlash = e.key === "/" && !inField; if (isK || isSlash) { e.preventDefault(); setOpen(v => !v); } else if (e.key === "Escape") setOpen(false); }; const onCustom = () => setOpen(true); window.addEventListener("keydown", onKey); window.addEventListener("cmdk:open", onCustom); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("cmdk:open", onCustom); }; }, []); useEffect(() => { if (open && inputRef.current) { setTimeout(() => inputRef.current.focus(), 30); setQ(""); } }, [open]); const results = useMemo(() => { const idx = window.SEARCH_INDEX || []; if (!q.trim()) return idx.slice(0, 8); const n = q.toLowerCase(); return idx.filter(r => r.title.toLowerCase().includes(n) || (r.sub || "").toLowerCase().includes(n)).slice(0, 12); }, [q]); const grouped = useMemo(() => { const g = {}; results.forEach(r => { (g[r.group] ||= []).push(r); }); return g; }, [results]); if (!open) return null; const go = (r) => { setOpen(false); if (r.group === "Writing") { const e = ENTRIES.find(x => x.title === r.title); if (e) window.location.hash = `#/a/${e.id}`; } }; return (
setOpen(false)}>
e.stopPropagation()}>
⌘K setQ(e.target.value)} placeholder="Search writing, projects, finds…" />
{Object.keys(grouped).length === 0 && (
Nothing here. Try a different word.
)} {Object.entries(grouped).map(([group, items]) => (
{group}
{items.map((r, i) => (
go(r)}>
{r.title}
{r.sub}
))}
))}
↵ open · esc close · / or ⌘K to toggle {results.length} results
); } // ---------- Tweaks (uses helpers from tweaks-panel.jsx) ---------- function Tweaks({ t, setTweak }) { return ( setTweak("accent", v)} options={ACCENT_OPTIONS} /> setTweak("dark", v)} /> setTweak("density", v)} options={["cozy", "normal", "airy"]} /> setTweak("bodysize", v)} min={14} max={20} step={1} unit="px" /> setTweak("showKinds", v)} /> setTweak("showReading", v)} /> setTweak("showNow", v)} /> setTweak("nowText", v)} placeholder="What you're up to" /> setTweak("name", v)} /> setTweak("tagline", v)} /> ); } // ---------- App ---------- function App() { const [t, setTweak] = useTweaks(window.TWEAK_DEFAULTS); const route = useHashRoute(); // patch SITE display values from tweaks (kept as a live override so the // user can edit name/tagline without forking data.jsx). useEffect(() => { SITE.fullName = t.name || SITE.fullName; SITE.tagline = t.tagline || SITE.tagline; }, [t.name, t.tagline]); useEffect(() => { applyTheme(t); }, [t]); return ( <> {route.kind === "home" ? : } ); } ReactDOM.createRoot(document.getElementById("root")).render();