// Main app for NoMoreBSNews.com
// Data is loaded from data/briefings.json via js/data-loader.js
const { useState, useMemo, useEffect, useRef } = React;
// Categories + days are populated after fetch. Until then App renders a loader.
let CATEGORIES = [];
let ALL_DAYS = [];
// Only http(s) URLs are safe to link; everything else (javascript:, data:, etc.) is rejected.
const isHttpUrl = (u) => typeof u === "string" && /^https?:\/\//i.test(u);
const PILLARS = [
{ ttl: "Fact-First", sub: "Verified events" },
{ ttl: "Zero Spin", sub: "No commentary" },
{ ttl: "AI-Curated", sub: "Nightly rebuild" },
{ ttl: "Nonpartisan", sub: "No agenda" },
];
const PillarIcon = ({ name }) => {
const common = { width: 22, height: 22, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" };
if (name === "Fact-First") return ;
if (name === "Zero Spin") return ;
if (name === "AI-Curated") return ;
if (name === "Nonpartisan") return ;
return null;
};
// ── Live clock for the utility bar ─────────────────────────────────────────
function useClock() {
const [now, setNow] = useState(() => new Date());
useEffect(() => {
const t = setInterval(() => setNow(new Date()), 1000);
return () => clearInterval(t);
}, []);
return now;
}
const UtilityBar = ({ activeDay }) => {
const now = useClock();
const timeStr = now.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", second: "2-digit", hour12: false });
return (
{activeDay.id === ALL_DAYS[0].id ? "Live Edition" : "Archive Edition"}
UPDATED 06:00 ET · NEXT BUILD IN {countdownTo6AM(now)}
UTC {timeStr}
NYC · LON · TYO
);
};
function countdownTo6AM(now) {
const next = new Date(now);
next.setHours(6, 0, 0, 0);
if (next <= now) next.setDate(next.getDate() + 1);
const diff = next - now;
const h = Math.floor(diff / 3600000);
const m = Math.floor((diff % 3600000) / 60000);
const s = Math.floor((diff % 60000) / 1000);
return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}:${String(s).padStart(2, "0")}`;
}
// ── Masthead ───────────────────────────────────────────────────────────────
const Masthead = ({ activeDay }) => {
return (
);
};
// ── Day strip ──────────────────────────────────────────────────────────────
const DayStrip = ({ activeId, onPick }) => {
return (
);
};
// ── Brief hero ─────────────────────────────────────────────────────────────
const BriefHero = ({ day }) => {
const counts = CATEGORIES.reduce((acc, c) => {
acc[c.id] = day.stories.filter(s => s.cat === c.id).length;
return acc;
}, {});
const topDesks = CATEGORIES.filter(c => counts[c.id] > 0).length;
return (
{day.id === ALL_DAYS[0].id ? "Today's Briefing" : "Archive · " + day.dayLabel}
{day.date.toUpperCase()} · BUILD {day.generatedAt}
At a Glance
{day.summary}
{day.stories.length}
Stories
{day.readMinutes}min
Read time
0
Op-eds · Hot takes · Spin
);
};
// ── Category jump rail ─────────────────────────────────────────────────────
const CategoryRail = ({ day, onJump }) => {
return (
Jump to desk
{CATEGORIES.map(c => {
const count = day.stories.filter(s => s.cat === c.id).length;
if (count === 0) return null;
return (
);
})}
);
};
// ── Story card ─────────────────────────────────────────────────────────────
const Story = ({ story, cat, showSources, showTime }) => {
return (
{String(story.n).padStart(2, "0")}
№{story.n}
{cat.tag}
{showTime && {story.time} ET}
{isHttpUrl(story.url) ? {story.headline} : story.headline}
{story.dossier}
{showSources && story.sources && (
{story.sources.map((s, i) => (
{s}
))}
)}
);
};
// ── Section ────────────────────────────────────────────────────────────────
const Section = ({ cat, stories, showSources, showTime, refSetter }) => {
if (stories.length === 0) return null;
return (
{cat.tag}
{cat.label}
— {cat.note}
{String(stories.length).padStart(2, "0")} stories
{stories.map(s => )}
);
};
// ── Sidebar ────────────────────────────────────────────────────────────────
const Sidebar = ({ day }) => {
const counts = CATEGORIES.map(c => ({
cat: c,
n: day.stories.filter(s => s.cat === c.id).length,
}));
const max = Math.max(...counts.map(c => c.n));
return (
);
};
// ── Footer ─────────────────────────────────────────────────────────────────
const Footer = () => (
<>
);
// ── Tweaks panel ───────────────────────────────────────────────────────────
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "comfortable",
"showSources": true,
"showTime": true,
"showPromo": true,
"accent": "#D62828"
}/*EDITMODE-END*/;
const NoBSTweaks = ({ tweaks, setTweak }) => (
setTweak("density", v)}
options={[
{ value: "compact", label: "Compact" },
{ value: "comfortable", label: "Default" },
{ value: "roomy", label: "Roomy" },
]}
/>
setTweak("showSources", v)} />
setTweak("showTime", v)} />
setTweak("showPromo", v)} />
setTweak("accent", v)}
options={["#D62828", "#3B2A1E", "#7A4B2E", "#1F6FEB"]}
/>
);
// ── App ────────────────────────────────────────────────────────────────────
const LoadingScreen = () => (
Loading today's briefing…
);
const App = () => {
const [data, setData] = useState(null);
const [activeId, setActiveId] = useState(null);
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const sectionRefs = useRef({});
useEffect(() => {
window.NMBS.loadBriefings().then((d) => {
CATEGORIES = d.categories;
ALL_DAYS = d.days;
setData(d);
setActiveId(d.days[0].id);
}).catch(err => {
console.error("Failed to load briefings:", err);
});
}, []);
// apply accent (kept above the early-return so hook order is stable)
useEffect(() => {
document.documentElement.style.setProperty("--red", tweaks.accent);
}, [tweaks.accent]);
if (!data || !activeId) return ;
const activeDay = ALL_DAYS.find(d => d.id === activeId) || ALL_DAYS[0];
const jumpTo = (catId) => {
const el = sectionRefs.current[catId];
if (el) {
const y = el.getBoundingClientRect().top + window.scrollY - 20;
window.scrollTo({ top: y, behavior: "smooth" });
}
};
return (
{CATEGORIES.map(c => {
const stories = activeDay.stories.filter(s => s.cat === c.id);
return (
sectionRefs.current[c.id] = el}
/>
);
})}
{tweaks.showPromo &&
}
);
};
ReactDOM.createRoot(document.getElementById("root")).render();