// Landing page: Featured carousel (Zone 1), Grid (Zone 2), Footer (Zone 3). const { useState, useEffect, useRef, useMemo } = React; const CategoryTag = ({ catId, size='sm' }) => { const c = window.CATEGORIES[catId]; if (!c) return null; const pad = size==='lg' ? '8px 12px' : '5px 9px'; const fs = size==='lg' ? 12 : 11; return ( {c.monogram} {c.name} ); }; const fmtDate = iso => { const d = new Date(iso+'T00:00:00'); return d.toLocaleDateString('en-US',{month:'short', day:'numeric', year:'numeric'}); }; // ---------- Subscribe confirmation messages ---------- const CONFIRM_MSGS = [ n => `${n}, your Sundays just got a standing reservation.`, n => `Noted, ${n}. The good kind of noted.`, n => `${n} is on the list. The one worth being on.`, n => `Sunday is officially looking forward to meeting you, ${n}.`, n => `Filed under good decisions, ${n}. See you this weekend.`, n => `Somewhere a notebook just wrote your name in the yes column, ${n}.`, n => `One thoughtful email, once a week. You've made worse commitments, ${n}.`, n => `Your future self will thank you, ${n}. Your current self can just say you're welcome.`, n => `The work ships Sunday. You're on it, ${n}.`, n => `${n} — you're in. No noise, no sponsors. Just the work.`, ]; const randomConfirm = (fullName) => { const first = fullName.trim().split(' ')[0] || 'Hey'; return CONFIRM_MSGS[Math.floor(Math.random() * CONFIRM_MSGS.length)](first); }; // ---------- Subscribe modal (portal to body) ---------- const SubscribeModal = ({ onClose }) => { const [name, setName] = useState(''); const [email, setEmail] = useState(''); const [confirmed, setConfirmed] = useState(null); const nameRef = useRef(null); useEffect(() => { if (nameRef.current) nameRef.current.focus(); const onKey = (e) => { if (e.key === 'Escape') onClose(); }; document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [onClose]); const submit = (e) => { e.preventDefault(); if (!email.includes('@')) return; setConfirmed(randomConfirm(name || 'Friend')); }; const modal = ( ); return ReactDOM.createPortal(modal, document.body); }; // ---------- ZONE 1: Featured carousel ---------- const Featured = ({ posts, onOpen, heroLayout }) => { const [idx, setIdx] = useState(0); const [paused, setPaused] = useState(false); const [progress, setProgress] = useState(0); const DUR = 8000; const startRef = useRef(performance.now()); const rafRef = useRef(0); useEffect(() => { startRef.current = performance.now(); setProgress(0); const tick = (t) => { if (paused) { startRef.current = t - progress*DUR; rafRef.current = requestAnimationFrame(tick); return; } const p = Math.min(1, (t - startRef.current)/DUR); setProgress(p); if (p >= 1) { setIdx(i => (i+1) % posts.length); startRef.current = t; } rafRef.current = requestAnimationFrame(tick); }; rafRef.current = requestAnimationFrame(tick); return () => cancelAnimationFrame(rafRef.current); }, [paused, posts.length, idx]); const advance = (n) => { setIdx(i => (i+n+posts.length) % posts.length); startRef.current = performance.now(); setProgress(0); }; const jumpTo = (n) => { setIdx(n); startRef.current = performance.now(); setProgress(0); }; const post = posts[idx]; const cat = window.CATEGORIES[post.cat]; const isFramed = heroLayout === 'framed'; return (

{String(idx+1).padStart(2,'0')} / {String(posts.length).padStart(2,'0')}

{post.read} read · {fmtDate(post.date)}

{post.title}

{post.excerpt}

{posts.map((_,i)=>(

); }; // ---------- ZONE 2: Grid ---------- const Card = ({ post, onOpen }) => ( {e.preventDefault(); onOpen(post.slug);}}>

{fmtDate(post.date)}

{post.title}

{post.excerpt}

); const Grid = ({ posts, onOpen }) => { const [cat, setCat] = useState('all'); const [aud, setAud] = useState('Everyone'); const filtered = useMemo(()=> posts.filter(p => { const catOk = cat==='all' || p.cat===cat; const audOk = aud==='Everyone' || p.audience==='Everyone' || p.audience===aud; return catOk && audOk; }), [cat, aud, posts]); const categoriesList = [['all','All pieces'], ...Object.values(window.CATEGORIES).map(c=>[c.id, c.name])]; return (

The index

Design Outcomes.

{post.title}

{post.title}

Everything, organized by how you read.