// EntryPage.jsx — generic long-form content renderer driven by content/entries.json. // // Route: #/entry/ // // Each entry in entries.json is rendered as a Palantir-style document page: // breadcrumb + doc# → kicker/lede → hero image + caption → meta strip → // block-based body → related entries → CTA. // // Supported block types (in entry.blocks[]): // { type: "paragraph", text } // { type: "heading", text } // { type: "pullquote", text, attribution? } // { type: "list", items: [string, …] } // { type: "image", src, alt?, caption? } // { type: "video", src, poster?, webm? } // { type: "stats", items: [{ n, u?, lbl }] } // { type: "spacer" } // { type: "html", html } // raw HTML, for escape hatches only const { useState: useES, useEffect: useEE } = React; // in-memory cache so we don't re-fetch the feed on every nav let __entriesCache = null; let __entriesPromise = null; function loadEntries() { if (__entriesCache) return Promise.resolve(__entriesCache); if (__entriesPromise) return __entriesPromise; __entriesPromise = fetch("content/entries.json") .then((r) => { if (!r.ok) throw new Error("Failed to load entries.json: " + r.status); return r.json(); }) .then((data) => { __entriesCache = (data && data.entries) || []; return __entriesCache; }); return __entriesPromise; } // expose so other components (NewsBlock, Capabilities) can show titles/dates // without each fetching independently. window.LuliusContent = { load: loadEntries, byKind: (kind) => loadEntries().then((es) => es.filter((e) => e.kind === kind)), bySlug: (slug) => loadEntries().then((es) => es.find((e) => e.slug === slug)), }; // ───────────────────────── block renderers ───────────────────────── function Block({ b }) { switch (b.type) { case "paragraph": return

{b.text}

; case "heading": return

{b.text}

; case "pullquote": return (

{b.text}

{b.attribution && (
— {b.attribution}
)}
); case "list": return ( ); case "image": return (
{b.caption && (
FIG · {b.caption}
)}
); case "video": return (
{b.caption && (
VID · {b.caption}
)}
); case "stats": return (
{b.items.map((s, i) => (
{s.n}{s.u && {s.u}}
{s.lbl}
))}
); case "spacer": return
; case "html": return
; default: return null; } } // ───────────────────────── related card ───────────────────────── // Hero media renderer — switches between MediaImg and MediaFrame based on file // extension. .html (and .htm) heroes are embedded via the sandboxed iframe // component so self-contained HTML assets work as drop-in replacements for // static images. baseWidth/baseHeight let an entry declare its embedded // content's natural canvas size (e.g. a 2280×720 wide-format diagram) so the // iframe viewport matches and nothing gets cropped at the edges. function HeroMedia({ src, alt, position, baseWidth, baseHeight }) { const isHtml = /\.html?($|\?|#)/i.test(src); if (isHtml) { return ; } return ; } function RelatedCard({ entry, onNavigate }) { return ( { e.preventDefault(); onNavigate(`/entry/${entry.slug}`); }} style={{ display: "flex", flexDirection: "column", border: "1px solid var(--line)", background: "var(--ink-2)", padding: 24, gap: 16, transition: "border-color .25s ease, transform .25s ease", textDecoration: "none", color: "inherit", }} onMouseEnter={(e) => { e.currentTarget.style.borderColor = "var(--accent)"; }} onMouseLeave={(e) => { e.currentTarget.style.borderColor = "var(--line)"; }} >
{entry.tag} {entry.dateLabel}
{entry.title}
{entry.subtitle || entry.lede}
Read entry →
 ); } // ───────────────────────── main page ───────────────────────── function EntryPage({ slug, onNavigate }) { const [entry, setEntry] = useES(undefined); // undefined = loading, null = not found const [all, setAll] = useES([]); useEE(() => { let dead = false; loadEntries().then((entries) => { if (dead) return; setAll(entries); const e = entries.find((x) => x.slug === slug); setEntry(e || null); }).catch(() => { if (!dead) setEntry(null); }); return () => { dead = true; }; }, [slug]); // loading if (entry === undefined) { return (
LOADING ENTRY
); } // not found if (entry === null) { return (
ERR · 404 · entry/{slug}

Entry not on file.

That slug doesn't map to a record in content/entries.json.

{ e.preventDefault(); onNavigate("/"); }} className="btn" style={{ marginTop: 32 }}> Return to index →
); } const related = (entry.related || []) .map((s) => all.find((e) => e.slug === s)) .filter(Boolean); return (
{/* breadcrumb */}
{ e.preventDefault(); onNavigate("/"); }}>Index / {entry.kind === "capability" ? "Capabilities" : "Dispatch"} / {entry.title}
{entry.doc &&
DOC · {entry.doc}
}
{/* kicker + hero — layout depends on entry.heroLayout */} {(() => { const layout = entry.heroLayout || (entry.hero ? "cinematic" : "none"); // Shared kicker pieces, reused across layouts const eyebrows = (
{entry.tag} {entry.dateLabel}
); const titleEl = (

{entry.title}

); const subtitleEl = entry.subtitle ? (

{entry.subtitle}

) : null; // ── Profile: 2-col grid, image lives beside the title block ── if (layout === "profile" && entry.hero) { return (
{eyebrows}

{entry.title}

{subtitleEl}
{entry.heroCaption && (
FIG · {entry.heroCaption}
)}
); } // ── Feature: kicker, then a contained 16:9 image inside .wrap ── if (layout === "feature" && entry.hero) { return ( <>
{eyebrows} {titleEl} {subtitleEl}
{entry.heroCaption && (
FIG · {entry.heroCaption}
)}
); } // ── Cinematic (default): full-bleed 21:9 hero below the kicker ── if (layout === "cinematic" && entry.hero) { return ( <>
{eyebrows} {titleEl} {subtitleEl}
{entry.heroCaption && (
FIG · {entry.heroCaption}
)}
); } // ── None / no image: just the kicker ── return (
{eyebrows} {titleEl} {subtitleEl}
); })()} {/* meta strip */} {entry.meta && entry.meta.length > 0 && (
{entry.meta.map(([k, v], i) => (
{k}
{v}
))}
)} {/* body */}
{/* related */} {related.length > 0 && (
→ Related
{related.map((r) => )}
)}
); } window.EntryPage = EntryPage;