// Scoped in an IIFE: this file shares global scope with the other page // entries, and the router now loads all of them into one document. Names // like App, Hero, Footer, Cover and C are declared by several of them, so // leaking them at top level lets the last-loaded page silently clobber the // others' components. Only window.Pages. is exported. (function () { const { useState, useEffect, useRef } = React; const C = window.POSTER_C; const M = window.Marks; // Doodle line-art glyphs (same vocabulary as the homepage organs: // viewBox 0 0 400 400, ink stroke, round joins). Inherit currentColor. const PencilGlyph = ({ s = 120 }) => ( ); const BookGlyph = ({ s = 120 }) => ( ); // --- Striped placeholder "image" — intentional, with a mono caption --- function Cover({ color, label, big = false, mark }) { const Mark = mark && M[mark]; return (

{/* diagonal hatch */}

{Mark && (

)}

{label}

); } // --- Tiny Markdown renderer (poster-styled) --- // Supports: # ## ### headings, paragraphs, > quotes, - / 1. lists, // --- rules, **bold**, *italic*, `code`, [links](url), ![images](src). function renderInline(text, kp) { const out = []; let rest = String(text), k = 0; const re = /(\*\*([^*]+)\*\*|\*([^*]+)\*|_([^_]+)_|`([^`]+)`|\[([^\]]+)\]$([^)]+)$)/; while (rest.length) { const m = rest.match(re); if (!m) { out.push(rest); break; } if (m.index > 0) out.push(rest.slice(0, m.index)); if (m[2] != null) out.push({m[2]}); else if (m[3] != null) out.push({m[3]}); else if (m[4] != null) out.push({m[4]}); else if (m[5] != null) out.push({m[5]}); else if (m[6] != null) out.push({m[6]}); rest = rest.slice(m.index + m[0].length); k++; } return out; } function MarkdownBody({ md }) { const lines = md.replace(/\r\n/g, '\n').split('\n'); const blocks = []; const isStart = (l) => /^(#{1,3}\s|>\s?|[-*]\s+|\d+\.\s+|!\[)/.test(l) || l.trim() === '---'; let i = 0; while (i < lines.length) { const line = lines[i]; if (!line.trim()) { i++; continue; } let m; if ((m = line.match(/^(#{1,3})\s+(.*)$/))) { blocks.push({ t: 'h' + m[1].length, x: m[2] }); i++; continue; } if (line.trim() === '---' || line.trim() === '***') { blocks.push({ t: 'hr' }); i++; continue; } if ((m = line.trim().match(/^!\[([^\]]*)\]$([^)]+)$$/))) { blocks.push({ t: 'img', alt: m[1], src: m[2] }); i++; continue; } if (/^>\s?/.test(line)) { const buf = []; while (i < lines.length && /^>\s?/.test(lines[i])) { buf.push(lines[i].replace(/^>\s?/, '')); i++; } blocks.push({ t: 'q', x: buf.join(' ') }); continue; } if (/^[-*]\s+/.test(line)) { const items = []; while (i < lines.length && /^[-*]\s+/.test(lines[i])) { items.push(lines[i].replace(/^[-*]\s+/, '')); i++; } blocks.push({ t: 'ul', items }); continue; } if (/^\d+\.\s+/.test(line)) { const items = []; while (i < lines.length && /^\d+\.\s+/.test(lines[i])) { items.push(lines[i].replace(/^\d+\.\s+/, '')); i++; } blocks.push({ t: 'ol', items }); continue; } const buf = []; while (i < lines.length && lines[i].trim() && !isStart(lines[i])) { buf.push(lines[i]); i++; } blocks.push({ t: 'p', x: buf.join(' ') }); } const h = { fontWeight: 700, letterSpacing: '-0.01em', lineHeight: 1.1, margin: '40px 0 14px' }; return ( {blocks.map((b, i) => { if (b.t === 'h1') return

{renderInline(b.x, i + 'a')}

; if (b.t === 'h2') return

{renderInline(b.x, i + 'b')}

; if (b.t === 'h3') return

{renderInline(b.x, i + 'c')}

; if (b.t === 'hr') return

; if (b.t === 'q') return (

{renderInline(b.x, i + 'q')}

); if (b.t === 'img') return (

); if (b.t === 'ul') return

{renderInline(it, i + 'u' + j)}

; if (b.t === 'ol') return

{renderInline(it, i + 'o' + j)}

; return

{renderInline(b.x, i + 'p')}

; })} ); } // --- Hero --- function Hero({ posts }) { return (

Field notes & essays

Writing

Notes from building things that see, listen, and speak — on the craft and the failures behind machines that almost feel alive.

{/* book + pencil glyph blobs — same treatment as the homepage organs */}

{/* book — mustard, top-right */}

{/* pencil — blue, lower-left, overlapping */}

{/* pink accent */}

{posts.length} {posts.length === 1 ? 'essay' : 'essays'} Updated {posts[0].date} Flat, minimal & geometric

); } // --- Post card --- function PostCard({ post, onOpen, i }) { const [hover, setHover] = useState(false); return (

onOpen(post)} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} style={{ cursor: 'pointer', display: 'flex', flexDirection: 'column', animation: `fade-up 520ms cubic-bezier(.2,.8,.2,1) ${i * 60}ms both`, transform: hover ? 'translateY(-4px)' : 'translateY(0)', transition: 'transform 400ms cubic-bezier(.2,.8,.2,1)', }}>

{post.n} {post.date} · {post.read}

{post.title}

{post.dek}

{post.sample && ( SAMPLE )} {post.tags.map(t => ( {t} ))}

); } const CARD_MARKS = ['Sunburst', 'Target', 'Plus', 'Bowtie', 'Asterisk', 'XMark']; // --- Post grid --- function PostGrid({ posts, onOpen }) { return (

{posts.map((p, i) => )}

); } // --- Article reader --- function Article({ post, posts, onBack }) { const [md, setMd] = useState(null); useEffect(() => { window.scrollTo({ top: 0 }); }, [post.id]); useEffect(() => { setMd(null); if (!post.file) return; let live = true; fetch(post.file) .then(r => { if (!r.ok) throw new Error(r.status); return r.text(); }) .then(t => { const { body } = window.Markdown.parseFrontmatter(t); if (live) setMd(body); }) .catch(() => { if (live) setMd(null); }); // fall back to structured body return () => { live = false; }; }, [post.id]); return (

{post.kicker} {post.date} · {post.read}

{post.title}

{post.dek}

{(md || post.md) ? ( ) : ( (post.body || []).map((blk, i) => { if (blk.t === 'h') return (

{blk.x}

); if (blk.t === 'q') return (

{blk.x}

); return

{blk.x}

; }) )}

{post.tags.map(t => ( {t} ))}

); } function NextUp({ current, posts, onBack }) { const others = posts.filter(p => p.id !== current.id).slice(0, 3); if (!others.length) return null; return (

Keep reading

{others.map((p, i) => { window.__open(p); } : () => {}} i={i} />)}

); } // --- Footer --- function Footer() { return ( ); } // --- Loading state (shown while article index is being fetched) --- function LoadingState() { return (

Loading…

); } // --- Error state (shown when the article index fails to load entirely) --- function ErrorState() { return (

Couldn’t load writing — please refresh or try again later.

); } // --- App --- function App() { const [posts, setPosts] = useState(null); // null while loading const [active, setActive] = useState(null); const [loadError, setLoadError] = useState(false); useEffect(() => { window.__open = (p) => { setActive(p); window.scrollTo({ top: 0 }); }; }, []); useEffect(() => { let live = true; Promise.all( window.POST_INDEX.map((entry) => fetch(entry.file) .then((r) => { if (!r.ok) throw new Error(r.status); return r.text(); }) .then((raw) => { const { meta } = window.Markdown.parseFrontmatter(raw); return { ...entry, ...meta, color: C[meta.color] || meta.color }; }) .catch(() => null) ) ).then((loaded) => { if (!live) return; const ok = loaded.filter(Boolean); if (ok.length === 0 && window.POST_INDEX.length > 0) { setLoadError(true); return; } setPosts(ok); }).catch(() => { if (live) setLoadError(true); }); return () => { live = false; }; }, []); const open = (p) => { setActive(p); }; const back = () => { setActive(null); }; return (

{loadError ? ( ) : !posts ? ( ) : active ? (

) : ( )}

); } // Registered, not mounted: router.js owns mounting so Barba can swap // containers and re-mount without a full page load. window.Pages = window.Pages || {}; window.Pages.blog = App; })();