// JournalIndex + ArticlePage — the R+D journal's two views. The journal is the // "r+d" sub of material, but it renders as a blog rather than the project-card // grid that SubcategoryPage shows. Content + derived helpers come from // journal-data.jsx (window.JOURNAL_POSTS / journalSorted / journalDate / // journalReadTime). Shared chrome (CrumbBar, A_Footer, CP_statusColor) comes // from category-page.jsx / direction-a.jsx, so this file loads AFTER both. // // Routes used: // index list → { page:'subcategory', cat:'material', sub:'rd' } (intercepted in app.jsx) // article → { page:'article', slug } const JR_RULE = 'var(--rule)', JR_INK = 'var(--ink)', JR_INK2 = 'var(--ink-2)', JR_INK3 = 'var(--ink-3)', JR_PAPER = 'var(--paper)', JR_PAPER2 = 'var(--paper-2)'; const jrStatusColor = () => (window.CP_statusColor || (() => JR_INK)); // --- inline text: **bold** and `code` --------------------------------------- function jrInline(text) { if (text == null) return null; const parts = String(text).split(/(\*\*[^*]+\*\*|`[^`]+`)/g); return parts.map((seg, i) => { if (/^\*\*[^*]+\*\*$/.test(seg)) return {seg.slice(2, -2)}; if (/^`[^`]+`$/.test(seg)) return {seg.slice(1, -1)}; return {seg}; }); } // ============================================================================= // INDEX // ============================================================================= function JR_Entry({ post, navigate, mobile }) { const [h, setH] = React.useState(false); const d = window.journalDate(post.date); const rt = window.journalReadTime(post); const sc = jrStatusColor(); return (
navigate({ page: 'article', slug: post.slug })} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ cursor: 'pointer', borderBottom: `1px solid ${JR_RULE}`, background: h ? JR_PAPER2 : 'transparent', transition: 'background .15s', display: 'grid', gridTemplateColumns: mobile ? '1fr' : '128px 1fr 150px', gap: mobile ? 10 : 28, padding: mobile ? '22px 22px' : '26px 56px', alignItems: 'baseline' }}> {/* date */}
{d.mono}
{/* title + dek + tags */}
{post.title} →
{post.summary}
{post.tags.map((t) => ( {t} ))}
{/* status + read time */}
{post.status} {rt} min read
); } function JournalIndex({ navigate }) { const cat = window.CATEGORIES.find((c) => c.word === 'material'); const sub = (cat && cat.subs.find((s) => s.id === 'rd')) || { label: 'r+d journal', meta: 'ongoing' }; const Footer = window.A_Footer; const CrumbBar = window.CrumbBar; const mobile = window.useIsMobile(); const posts = window.journalSorted(); const [tag, setTag] = React.useState('all'); const allTags = React.useMemo(() => { const s = new Set(); posts.forEach((p) => p.tags.forEach((t) => s.add(t))); return ['all', ...[...s].sort()]; }, [posts]); const shown = tag === 'all' ? posts : posts.filter((p) => p.tags.indexOf(tag) !== -1); return (
{/* hero */}
§ 04 · journal
r+d journal
· {sub.meta}
Working notes from the shop — experiments, finishes, failed pours, and the occasional bit of code. Written down so I (and maybe you) don't have to relearn them the expensive way.
{/* tag filter */}
filter
{allTags.map((t) => { const on = tag === t; return ( ); })}
{String(shown.length).padStart(2, '0')} {shown.length === 1 ? 'entry' : 'entries'}
{/* list */}
{shown.map((p) => )}
{Footer ?
); } // ============================================================================= // ARTICLE // ============================================================================= function JR_Figure({ block, figures, index, mobile }) { const [h, setH] = React.useState(false); const open = () => { if (window.openImageLightbox) window.openImageLightbox(figures.map((f) => ({ src: f.src, tag: f.tag, title: f.caption })), index); }; return (
setH(true)} onMouseLeave={() => setH(false)} style={{ position: 'relative', aspectRatio: '16 / 10', backgroundColor: JR_PAPER, backgroundImage: block.src ? `url(${block.src})` : 'repeating-linear-gradient(135deg, transparent 0 7px, var(--paper-2) 7px 8px)', backgroundSize: 'cover', backgroundPosition: 'center', border: `1px solid ${h ? JR_INK : JR_RULE}`, cursor: 'zoom-in', display: 'flex', alignItems: 'flex-end', transition: 'border-color .15s' }}> {!block.src && (
[{block.tag}]
)}
⤢
{block.caption}
); } function JR_Block({ block, hIndex, figures, figIndex, mobile }) { switch (block.type) { case 'h': return (

{block.text}

); case 'p': return (

{jrInline(block.text)}

); case 'figure': return ; case 'code': return (
{block.lang && (
{block.lang}
)} 
{block.code}
); case 'steps': return (
    {(block.items || []).map((it, i) => (
  1. {String(i + 1).padStart(2, '0')} {jrInline(it)}
    2. ))}
); case 'quote': return (
{block.text}
{block.cite && (
— {block.cite}
)}
); case 'materials': return (
{block.title || 'Materials'}
{(block.items || []).map(([k, v], i) => (
{k} {v}
))}
); case 'note': return (
note {jrInline(block.text)}
); default: return null; } } // Side-rail table of contents with scroll-spy. function JR_Toc({ headings, activeId }) { const jump = (id) => { const el = document.getElementById(id); if (!el) return; const top = el.getBoundingClientRect().top + window.scrollY - 78; window.scrollTo({ top, behavior: 'smooth' }); }; return ( ); } function ArticlePage({ slug, navigate }) { const Footer = window.A_Footer; const CrumbBar = window.CrumbBar; const mobile = window.useIsMobile(); const all = window.journalSorted(); const idx = all.findIndex((p) => p.slug === slug); const post = all[idx]; // Build a stable heading list + per-figure index for the lightbox. const headings = []; const figures = []; let hCount = 0; const blocks = (post ? post.body : []).map((b) => { const meta = {}; if (b.type === 'h') { meta.hIndex = hCount; headings.push({ id: `h-${hCount}`, text: b.text }); hCount++; } if (b.type === 'figure') { meta.figIndex = figures.length; figures.push(b); } return { b, meta }; }); const [activeId, setActiveId] = React.useState(headings[0] ? headings[0].id : null); React.useEffect(() => { if (!headings.length || typeof IntersectionObserver === 'undefined') return; const els = headings.map((h) => document.getElementById(h.id)).filter(Boolean); const obs = new IntersectionObserver((entries) => { const vis = entries.filter((e) => e.isIntersecting) .sort((a, b) => a.boundingClientRect.top - b.boundingClientRect.top); if (vis[0]) setActiveId(vis[0].target.id); }, { rootMargin: '-72px 0px -65% 0px', threshold: 0 }); els.forEach((el) => obs.observe(el)); return () => obs.disconnect(); }, [slug]); if (!post) { return (
That entry isn't here.
{Footer ?
: null}
); } const d = window.journalDate(post.date); const rt = window.journalReadTime(post); const sc = jrStatusColor(); const newer = all[idx - 1]; // newest-first → previous index is newer const older = all[idx + 1]; const hasToc = !mobile && headings.length >= 2; return (
{/* hero */}
{d.long} · {post.status} · {rt} min read

{post.title}

{post.summary}
{post.tags.map((t) => ( {t} ))} {post.related && ( )}
{/* body */}
{hasToc && }
{blocks.map(({ b, meta }, i) => ( ))} {/* prev / next */}
{Footer ?
: null}
); } function JR_PrevNext({ post, dir, navigate, mobile }) { const right = dir === 'older'; if (!post) return
; const [h, setH] = React.useState(false); return (
navigate({ page: 'article', slug: post.slug })} onMouseEnter={() => setH(true)} onMouseLeave={() => setH(false)} style={{ cursor: 'pointer', padding: mobile ? '18px 0' : '22px 0', textAlign: right ? 'right' : 'left', borderRight: right ? 'none' : `1px solid ${JR_RULE}`, paddingRight: right ? 0 : 20, paddingLeft: right ? 20 : 0 }}>
{right ? 'older →' : '← newer'}
{post.title}
); } Object.assign(window, { JournalIndex, ArticlePage });