// Book Reader — migrated from the Vite/TypeScript app // Renders markdown chapters fetched from /book-content/*.json const { useState: useSt, useEffect: useEf, useMemo } = React; // ── Configure marked renderer (runs once at script load) ───────────────────── (function configureMarked() { if (!window.marked) return; window.marked.use({ renderer: { // marked v4 API: (code, language, isEscaped) code(code, lang) { if (lang === 'mermaid') { return `
${code}
`; } const esc = String(code) .replace(/&/g, '&') .replace(//g, '>'); if (lang) { return `
${lang}
${esc}
`; } return `
${esc}
`; }, }, breaks: false, gfm: true, }); })(); // ── Admonition preprocessing ────────────────────────────────────────────────── const ADM = { note: { bg: '#eff6ff', border: '#3b82f6', label: 'Note' }, tip: { bg: '#f0fdf4', border: '#22c55e', label: 'Tip' }, warning: { bg: '#fffbeb', border: '#f59e0b', label: 'Warning' }, danger: { bg: '#fef2f2', border: '#ef4444', label: 'Danger' }, info: { bg: '#eff6ff', border: '#3b82f6', label: 'Info' }, }; function preprocessAdmonitions(md) { return md.replace( /^:::(\w+)(?:[ \t]+(.+?))?\s*\n([\s\S]*?)^:::/gm, (_, type, title, body) => { const c = ADM[type] || ADM.note; const label = (title || c.label).trim(); const bodyHtml = window.marked ? window.marked.parse(body.trim()) : `

${body.trim().replace(/\n/g, '
')}

`; return ( `\n
` + `

${label}

` + `
${bodyHtml}
\n` ); } ); } function renderMarkdown(content) { if (!window.marked) return `
${content}
`; const processed = preprocessAdmonitions(content); return window.marked.parse(processed); } // ── Sidebar ─────────────────────────────────────────────────────────────────── function BookSidebar({ manifest, currentSlug, readChapters, onNavigate, open, isMobile, onClose }) { const [collapsed, setCollapsed] = useSt({}); // Auto-expand the module containing the current chapter useEf(() => { if (!manifest) return; setCollapsed(prev => { const next = { ...prev }; manifest.modules.forEach(mod => { if (mod.chapters.some(ch => ch.slug === currentSlug)) { next[mod.slug] = false; } }); return next; }); }, [manifest, currentSlug]); if (!open) return null; const sidebarContent = ( ); // On mobile, wrap in an overlay backdrop if (isMobile) { return (
{ if (e.target === e.currentTarget) onClose(); }} style={{ position: 'fixed', inset: 0, zIndex: 199, background: 'rgba(0,0,0,0.4)', }} > {sidebarContent}
); } return sidebarContent; } // ── Header ──────────────────────────────────────────────────────────────────── function BookReaderHeader({ chapterTitle, prev, next, onBack, onNavigate, onToggleSidebar, isMobile }) { return (
{/* Left: toggle + breadcrumb */}
/ {chapterTitle || '…'}
{/* Right: prev / next */}
{prev && ( )} {next && ( )}
); } // ── Main surface ────────────────────────────────────────────────────────────── function BookReaderSurface({ goto, bookSlug }) { const slug = bookSlug || 'intro'; const isMobile = window.useIsMobile(); const [manifest, setManifest] = useSt(null); const [chapter, setChapter] = useSt(null); const [loading, setLoading] = useSt(true); const [sidebarOpen, setSidebarOpen] = useSt(!isMobile); const [readChapters, setReadChapters] = useSt(() => { try { return JSON.parse(localStorage.getItem('book-read-chapters') || '[]'); } catch { return []; } }); // Auto-close sidebar on mobile when entering reader useEf(() => { setSidebarOpen(!isMobile); }, [isMobile]); // Load manifest once useEf(() => { fetch('../../book-content/manifest.json') .then(r => r.json()) .then(setManifest) .catch(console.error); }, []); // Load chapter when slug changes useEf(() => { setLoading(true); setChapter(null); fetch(`../../book-content/${slug}.json`) .then(r => r.json()) .then(data => { setChapter(data); setLoading(false); setReadChapters(prev => { if (prev.includes(slug)) return prev; const next = [...prev, slug]; try { localStorage.setItem('book-read-chapters', JSON.stringify(next)); } catch {} return next; }); }) .catch(() => setLoading(false)); }, [slug]); // Run mermaid diagrams after chapter renders useEf(() => { if (chapter && window.mermaid) { setTimeout(() => { try { window.mermaid.run(); } catch {} }, 80); } }, [chapter]); // Flat chapter list for prev/next const allChapters = manifest ? manifest.modules.flatMap(m => m.chapters) : []; const currentIdx = allChapters.findIndex(c => c.slug === slug); const prevChapter = currentIdx > 0 ? allChapters[currentIdx - 1] : null; const nextChapter = currentIdx < allChapters.length - 1 ? allChapters[currentIdx + 1] : null; const renderedHtml = useMemo( () => chapter ? renderMarkdown(chapter.content) : '', [chapter] ); function onNavigate(newSlug) { goto('book-reader', newSlug); window.scrollTo({ top: 0, behavior: 'instant' }); if (isMobile) setSidebarOpen(false); } // Intercept internal /docs/ and /book/ links inside content function handleContentClick(e) { const a = e.target.closest('a[href]'); if (!a) return; const href = a.getAttribute('href'); if (href && (href.startsWith('/docs/') || href.startsWith('/book/'))) { e.preventDefault(); const parts = href.split('/').filter(Boolean); const targetSlug = parts[parts.length - 1]; if (targetSlug) onNavigate(targetSlug); } } return (
setSidebarOpen(false)} />
goto('book')} onNavigate={onNavigate} onToggleSidebar={() => setSidebarOpen(o => !o)} isMobile={isMobile} /> {/* Content */}
{loading && (

Loading chapter…

)} {chapter && (
)} {/* Bottom prev / next cards */} {chapter && (prevChapter || nextChapter) && (
{prevChapter ? ( ) :
} {nextChapter ? ( ) :
}
)}
); } window.BookReaderSurface = BookReaderSurface;