🚀 Way2Go NotionBlog

以下に、**/archives/** ページ追加の要件定義をご提示します。  
本要件定義は、astro-notion-blog をベースとした現行プロジェクトへ最小限の変更で導入することを前提としています。

---

## 1. 目的

- **/archives/** ページにアクセスした際、archives ディレクトリ内の Markdown ファイルの記事一覧をカード形式で表示する。
- 各記事カードをクリックすると、個別記事ページへ遷移し、記事の詳細（タイトル、本文、画像等）を表示する。
- 既存の `src/posts/page` で使用しているレイアウトやデザインの流れを踏襲し、統一感を維持する。

---

## 2. 機能要件

### (1) 一覧ページ（/archives/）

- **URL:** `/archives/`
- **表示内容:**
  - 記事一覧をカード形式で表示。
  - 各カードには主に以下の情報を含む（必要に応じて追加情報も検討）:
    - タイトル
    - 発行日
    - 概要・サムネイル（該当する場合）
- **レイアウト:**
  - 既存の `src/posts/page` と同様のレイアウト・スタイルを採用する。
- **ソース:**
  - Markdown コンテンツは `src/archives/page` 内のファイルから取得する。
  - 使用する Markdown には Hugo のフロントマターが含まれているため、フロントマターの情報（例えば、タイトル、日付、タグなど）を適切にパースする必要がある。
  - Markdown 内に HTML タグが存在するため、そのまま HTML として出力（Astro の `unsafeHTML` 等を使用して埋め込み表示が可能な設定を検討）。

### (2) 個別記事ページ

- **URL:** `/archives/[slug]` （例：`/archives/sample-post`）
- **表示内容:**
  - 選択した記事の詳細（タイトル、記事本文、画像・動画など）を表示する。
- **ルーティング:**
  - ダイナミックルーティングを採用し、記事の識別子（slug や unique id）に基づいて個別ページを生成する。
- **Markdown 処理:**
  - Hugo 由来のフロントマターを正しくパースし、Markdown 中の HTML タグもそのままレンダリングする。
  
---

## 3. 技術要件

- **ファイル構成:**
  - 新規ディレクトリ `src/archives` を作成する。
    - `src/archives/page.astro`: 一覧ページ用ファイル（既存の `src/posts/page` のレイアウトを流用）。
    - `src/archives/[slug].astro`: 個別記事ページ用のダイナミックルーティングファイル。
- **Markdown パース設定:**
  - 既存の `src/posts/page` 内で実装されている Markdown パーシングのロジックを可能な限り再利用する。
  - Hugo 形式のフロントマターと、HTML タグが含まれるケースに対応する設定（必要に応じて `astro.config.mjs` やプラグインの調整）を行う。
- **レイアウト共通化:**
  - レイアウトやスタイリングは、既存の `src/posts/page` のものをインポートまたは参照する形で、重複コードの排除および一貫性の維持を図る。
- **最小限の変更:**
  - 既存のファイル（特に `src/posts/page` など）には改修を加えず、新規ファイルの追加・参照で要件を満たす。
  
---

## 4. UI/UX 要件

- **カード一覧表示:**
  - ユーザーが一覧画面上で直感的に記事内容を把握できるように、カードには視認性の高い情報（タイトル、発行日、概要）を表示する。
  - 各カードクリックで、即座に個別記事ページへ遷移する仕組みを実装する。
- **レスポンシブ対応:**
  - PC、タブレット、スマートフォン各端末で適切に表示されるデザインの採用。
- **ナビゲーション:**
  - 個別記事ページから一覧に戻る、または別の記事へ移動するナビゲーションを整備する。

---

## 5. テスト項目

- **一覧ページ (/archives/)**
  - 正しいカード形式で記事一覧が表示されること。
  - 各カードに表示される情報（タイトル、発行日、概要・サムネイルなど）が正確であること。
- **個別記事ページ (/archives/[slug])**
  - ダイナミックルーティングにて正しい記事が表示されること。
  - Markdown の Hugo フロントマターおよび HTML タグが正しくパース・レンダリングされること。
- **デザイン・レスポンシブ**
  - 既存の `src/posts/page` と同様のレイアウト・スタイルが適用されており、各端末での表示確認を実施する。
- **セキュリティ**
  - Markdown 内の HTML タグ出力に伴う XSS 等の脆弱性がないか確認する。

---

## 6. 注意点・リスク

- **HTML の直接出力:**
  - Markdown 内の HTML タグをそのまま出力する場合、意図しないスタイル崩れやセキュリティリスク（XSS）が発生する可能性があるため、十分な検証と必要であればサニタイズの検討を行う。
- **Hugo フロントマターの互換性:**
  - エクスポートされた Markdown のフロントマターがプロジェクト内のパースロジックと整合しない場合、表示エラーとなるリスク。
- **既存ファイルへの影響:**
  - 既存の `src/posts/page` は触らずに新規機能を追加するため、共通レイアウトの参照方法やスタイリングが正しく継承されているか、慎重な検証が必要。

---

## 7. 最終成果物

- `/archives/` にて記事一覧をカード形式で表示し、クリックしたカードで対応する個別記事ページ（`/archives/[slug]`）へ遷移できる。
- Markdown コンテンツは Hugo のフロントマターと HTML タグを含む形態そのままに正しくレンダリングされる。
- 既存の `src/posts/page` のレイアウト・スタイルを流用し、プロジェクト全体のデザインコンシステンシーを維持できる。

---

以上が、astro-notion-blog ベースのプロジェクトに対する archives ページ追加の要件定義となります。今後この仕様に沿って、必要な新規ファイルの作成、及び既存コンポーネントの再利用を進めてください。