読書ナビ
BOOK DRIP
BOOK DRIPは、悩みやテーマから書籍記事へ進める静的な読書ナビである。記事の要点と次の行動を型付きのメタデータで保持し、悩み別ガイドには読む順番と各本の役割を記録する。検索索引もサイトのビルド工程で作り、追加した記事を検索対象へ反映する。
公開サイトを見る （新しいタブ）
技術スタック
| 技術 | このサイトでの役割 |
|---|---|
| Astro | 書籍記事、コラム、ガイドをコンテンツコレクションとして読み込み、個別ページや一覧を静的HTMLとして生成する。 |
| TypeScript / Zod | 記事の日付、分類、要点、行動案と、ガイドが参照する書籍の役割をスキーマで定義し、ビルド時に型を検査する。 |
| Pagefind | Astroの出力後に検索索引を生成する。検索ページは配信された索引を読み込み、サイト内の記事を探せるようにする。 |
| Tailwind CSS | 記事、書籍カード、ガイドの表示に使うスタイルを構成し、複数のコンテンツ種別で見た目と余白の規則を揃える。 |
処理の流れ
記事とガイドを登録
書籍記事とコラムを別コレクションに置き、ガイドには紹介する書籍記事の識別子、読む順番での役割、選定理由を記録する。
公開対象を選ぶ
下書きと公開日を確認し、本番で表示する記事を絞る。ガイドの書籍参照は記事コレクションと照合して表示する。
ページと索引を生成
コンテンツ監査と型検査の後に静的ページを作り、その出力からPagefindの検索索引を構築して配信する。
実装の工夫
記事の意味を型で保持
書籍記事には解決する悩み、向く読者、向かない読者、次の行動を任意のメタデータとして持たせている。記事本文の外でも書籍選びに必要な情報を取り出せるため、カードや本探しの表示に同じ項目を使える。
読む順番をデータ化
ガイドは書籍記事の識別子と、その本を読む役割、選んだ理由を組で保持する。表示時に記事コレクションを参照するため、書名を並べるだけでなく、悩みやテーマごとに各本を読む順番と理由を示せる。
検索をビルドへ組み込む
コンテンツ監査、型検査、Astroのページ生成、Pagefindの索引作成を一つのビルド手順に並べている。記事の追加後に検索索引を手作業で更新する工程を設けず、生成済みページに基づく検索を配信する。
構成と制約
- 検索索引はビルド済みHTMLから生成されるため、記事の追加や公開日の変更を反映するには再ビルドが必要である。
- 書籍記事とコラムは別コレクションで管理し、ガイドの書籍参照は書籍記事の識別子を前提にする。
実装確認：