/* SubMedium — app: homepage feed + story-cluster detail + tweaks */
const { useState: useS, useEffect: useE } = React;
const ACCENTS = [
{ name: "Amber", c: "#BE530F" },
{ name: "Cobalt", c: "#1F4FB0" },
{ name: "Oxblood", c: "#8E2A24" },
{ name: "Forest", c: "#1E6B47" },
{ name: "Ink", c: "#2A2722" },
];
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"edition": "day",
"accent": "#BE530F",
"brief": true
}/*EDITMODE-END*/;
/* ----- source row (cluster detail) ----- */
function SourceRow({ s, lead }) {
const src = SRC[s.k] || { name: s.k };
return (
{src.name}
{src.tag}
{s.h}
);
}
/* ----- coverage spread (tag distribution) ----- */
function CoverageSpread({ sources }) {
const tags = {};
sources.forEach((s) => { const t = (SRC[s.k] || {}).tag || "Other"; tags[t] = (tags[t] || 0) + 1; });
const entries = Object.entries(tags);
return (
{entries.map(([t, n], i) => (
))}
{entries.map(([t, n]) => (
{t} · {n}
))}
);
}
/* ============ CLUSTER DETAIL ============ */
function ClusterView({ s, onBack, openStory }) {
useE(() => { window.scrollTo(0, 0); }, [s.id]);
const related = STORIES.filter((x) => x.section === s.section && x.id !== s.id).slice(0, 4);
return (
{/* main */}
{s.kicker}
{s.live && }
Updated {s.time} ago
{s.headline}
{s.dek}
{s.image &&
}
{/* The Brief — expanded */}
The Brief
· synthesized from {s.sourceCount} sources
{s.brief}
Generated automatically · verify against original reporting below
{/* all coverage */}
All coverage
{s.sourceCount} sources · newest first
{s.sources.map((src, i) =>
)}
{s.sourceCount > s.sources.length && (
)}
{/* rail */}
);
}
function RailCard({ title, children }) {
return (
);
}
function FactRow({ label, v }) {
return (
{label}
{v}
);
}
/* ============ HOMEPAGE ============ */
function Home({ section, forYou, query, openStory, showBrief }) {
let list = STORIES;
if (section !== "Top") list = STORIES.filter((s) => s.section === section);
if (query.trim()) {
const q = query.toLowerCase();
list = STORIES.filter((s) => (s.headline + s.dek + s.kicker).toLowerCase().includes(q));
}
const [lead, ...rest] = list.length ? list : STORIES;
const grid = rest.slice(0, 6);
const more = rest.slice(6);
const trending = TRENDING.map((t) => STORIES.find((s) => s.headline.toLowerCase().includes(t.t.split(" ")[0].toLowerCase())) || STORIES[0]);
return (
{forYou &&
}
{query.trim() &&
{list.length} results for “{query}”
}
{/* lead */}
openStory(lead)} showBrief={showBrief} />
{/* body grid */}
{/* main column */}
{forYou ? "Curated for you" : (section === "Top" ? "Top stories" : section)}
{grid.map((s, i) => (
= 3 ? "1px solid var(--line)" : "none",
}}>
openStory(s)} thumb={i === 0} brief={i === 0 && showBrief} />
))}
{more.length > 0 && (
<>
More coverage
{more.map((s, i) => (
openStory(s)} />
))}
)}
{/* right rail */}
{children}
);
}
function MarketsCard() {
return (
{MARKETS.slice(0, 6).map((q, i) => {
const up = q.pct >= 0;
return (
{q.sym}
{q.val}
{up ? "+" : "−"}{Math.abs(q.pct).toFixed(2)}%
);
})}
);
}
function ForYouBanner() {
return (
Your edition.
Ranked across the 8 topics you follow · refreshed 4 min ago
);
}
function FollowingCard() {
return (
{TOPICS.map((t) => (
{t}
))}
+ Add
);
}
function DigestCard() {
return (
The Daily Brief
One AI-synthesized digest of everything you follow, in your inbox by 6am.
);
}
/* ============ APP ============ */
function App() {
const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [section, setSection] = useS("Top");
const [forYou, setForYou] = useS(false);
const [query, setQuery] = useS("");
const [active, setActive] = useS(null); // cluster story or null
useE(() => {
document.documentElement.setAttribute("data-edition", t.edition);
document.documentElement.style.setProperty("--accent", t.accent);
}, [t.edition, t.accent]);
const openStory = (s) => setActive(s);
const goHome = () => { setActive(null); setQuery(""); setSection("Top"); };
return (
{ setSection(s); setActive(null); }} onHome={goHome}
query={query} setQuery={(q) => { setQuery(q); setActive(null); }} forYou={forYou} setForYou={setForYou} />
{active
? setActive(null)} openStory={openStory} />
: }
setTweak("edition", v)} />
a.c)} onChange={(v) => setTweak("accent", v)} />
setTweak("brief", v)} />
);
}
function Footer() {
return (
);
}
ReactDOM.createRoot(document.getElementById("root")).render();