// Pages for 閱讀人生 const { useState: useStateP, useEffect: useEffectP, useMemo: useMemoP } = React; // ─── HOME · 首頁 ─── function HomePage({ navigate }) { const articles = window.ARTICLES; const featured = articles.filter(a => a.featured); const recent = articles.slice(0, 6); return (
{/* Featured pair */}
{featured.slice(0, 2).map(a => )}
{/* Recent — catalogue style */}
{recent.map((a, i) => )}
{/* Categories preview */}
{window.TAGS.map(tag => { const count = articles.filter(a => a.tag === tag.id).length; return (
navigate('tag', { id: tag.id })} style={{ border: '1px solid var(--rule)', background: 'var(--paper-light)', padding: '24px 20px', cursor: 'pointer', textAlign: 'center', transition: 'background 0.2s' }} onMouseEnter={e => e.currentTarget.style.background = 'var(--paper-dark)'} onMouseLeave={e => e.currentTarget.style.background = 'var(--paper-light)'}>
{tag.glyph}
{tag.lat}
{tag.zh}
{String(count).padStart(2,'0')} entries
); })}
); } // ─── INDEX · 心得目錄 ─── function IndexPage({ navigate }) { const [filter, setFilter] = useStateP('all'); const articles = filter === 'all' ? window.ARTICLES : window.ARTICLES.filter(a => a.tag === filter); return (
FILTER · 篩 選 {window.TAGS.map(t => ( ))} {articles.length} of {window.ARTICLES.length}
{articles.map((a, i) => )}
{/* List card view below */}
{articles.map(a => )}
); } // ─── TAGS · 分類總覽 ─── function TagsPage({ navigate }) { return (
{window.TAGS.map(tag => { const count = window.ARTICLES.filter(a => a.tag === tag.id).length; return navigate('tag', { id: tag.id })} />; })}
{/* Each category section with its articles */} {window.TAGS.map((tag, i) => { const list = window.ARTICLES.filter(a => a.tag === tag.id); return (
{list.map(a => )}
); })}
); } // ─── TAG (single category) ─── function TagPage({ navigate, tagId }) { const tag = window.TAGS.find(t => t.id === tagId); if (!tag) return
Unknown tag.
; const list = window.ARTICLES.filter(a => a.tag === tag.id); return (
{tag.glyph}
{tag.lat}
· {tag.zh} ·
{list.length} ENTRIES · sub categoria
{list.map(a => )}
); } // ─── ABOUT · 關於 ─── function AboutPage({ navigate }) { return (

閱讀人生 · Vita Lectionis ，是一個慢讀慢寫的個人筆記。我把讀過的書、看過的電影、上過的課、走過的地方，當成是自然博物學家收集標本——每一個都仔細看過、仔細寫過、貼上標籤，留在這個小小的紙本博物館裡。

這個網站的設計刻意取自 19 世紀植物圖鑑的版面語言：泛黃紙感、襯線體、雙線分隔、中英並列。希望讀者在閱讀的時候，能夠慢一點，像翻一本舊書那樣翻過去。

不接廣告、不收訂閱、不放追蹤碼。Sub umbra alarum tuarum.

{/* Stats panel */}
{[ { lab: 'Entries · 心得篇數', val: window.ARTICLES.length }, { lab: 'Categories · 類別', val: window.TAGS.length }, { lab: 'Avg. Read · 平均閱讀', val: Math.round(window.ARTICLES.reduce((s,a)=>s+a.readMin,0)/window.ARTICLES.length) + ' min' }, { lab: 'Since · 起站於', val: 'MMXXIII' }, ].map((s, i) => (
{s.lab}
{s.val}
))}
EPISTOLA · 來 信
若您有書籍、電影或學習材料想要推薦，歡迎來信。我大概一週讀一次信，一個月回一次。 ✉   lector@vita-lectionis · placeholder
); } // ─── ARTICLE · 單篇文章閱讀頁 (3 variants) ─── function ArticleTitleBlock({ article }) { return (
{article.cat} · {article.catLat}

{article.title}

{article.titleLat}
{article.date} {article.author} {article.readMin} min read No. {String(window.ARTICLES.indexOf(article)+1).padStart(3,'0')}
); } function ArticleBody({ blocks, variant }) { return ( <> {blocks.map((b, i) => { if (b.type === 'lead') return

{b.text}

; if (b.type === 'p') return

{b.text}

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

{b.num}. {b.en} · {b.zh} ·

); if (b.type === 'blockquote') return (
{b.text} {b.attr}
); if (b.type === 'md') return (
); return null; })} ); } function ArticleColophon({ article }) { return (
PLATE · 圖 版
PL. {article.plate}
❦   FINIS   ❦
CATALOGUED · 編 入
{article.date}
); } function PrevNext({ article, navigate }) { const idx = window.ARTICLES.indexOf(article); const prev = idx > 0 ? window.ARTICLES[idx - 1] : null; const next = idx < window.ARTICLES.length - 1 ? window.ARTICLES[idx + 1] : null; return (
{prev ? ( navigate('article', { id: prev.id })}>
← PRECEDENS · 較 新
{prev.title}
 ) :
} {next ? ( navigate('article', { id: next.id })}>
SEQUENS · 較 舊 →
{next.title}
 ) :
}
); } // Variant A — 經典博物誌 (single col + marginalia sidebar) function ArticleVariantA({ article, navigate }) { return (
); } // Variant B — 雙欄古籍 (two cols + TOC) function ArticleVariantB({ article, navigate }) { const headings = article.body.filter(b => b.type === 'h2'); return (
·Lead001 {headings.map((h, i) => ( {h.num}. {h.en} {String((i+1)*2+1).padStart(3,'0')} ))}
); } // Variant C — 簡素抄本 (minimal centered + reading progress) function ArticleVariantC({ article, navigate }) { const [progress, setProgress] = useStateP(0); useEffectP(() => { const onScroll = () => { const docH = document.documentElement.scrollHeight - window.innerHeight; const p = Math.min(100, Math.max(0, (window.scrollY / Math.max(1, docH)) * 100)); setProgress(p); }; window.addEventListener('scroll', onScroll, { passive: true }); onScroll(); return () => window.removeEventListener('scroll', onScroll); }, [article.id]); return (
RATING · 評 等
); } function ArticlePage({ navigate, articleId, variant, setVariant }) { const article = window.ARTICLES.find(a => a.id === articleId); useEffectP(() => { window.scrollTo(0, 0); }, [articleId]); if (!article) return
Article not found.
; const VariantComp = { A: ArticleVariantA, B: ArticleVariantB, C: ArticleVariantC }[variant] || ArticleVariantA; return (
{[ { id: 'A', en: 'Classica', zh: '經典博物誌' }, { id: 'B', en: 'Bicolumna', zh: '雙欄古籍' }, { id: 'C', en: 'Simplex', zh: '簡素抄本' }, ].map(v => ( ))}
); } Object.assign(window, { HomePage, IndexPage, TagsPage, TagPage, AboutPage, ArticlePage, });