開発完了
概要
TableOfContents.vue コンポーネントに「メトロライン」スタイルのナビゲーションを実装する。
Before（現状）
現在の目次は単純なリスト形式で、視覚的な進捗インジケーターがない。
- 各項目は単純なテキストリンク
- 階層構造（H2/H3）はインデントで表現
- アクティブな項目はボールド + 色変更のみ
- 通過した項目と未通過の項目の視覚的区別なし
After（目標）
参考画像に基づくメトロラインスタイル：
ON THIS PAGE
●━━ 背景・課題
┃ 現状の問題
┃ 目標
●━━ 現状の構成
┃ └─● 1. R2バケット作成
┃ └─● 2. シークレット設定
┃ └─○ 3. wrangler.toml 更新
○━━ 改善後の構成
○━━ 関連ドキュメント
要件
- 縦の線（メインライン）
- 各項目の左側に縦線を描画
- 通過済み部分は青色（#3b82f6）
- 未通過部分は灰色（#e5e5e5）
- 丸（インジケーター）
- 各項目に丸を配置
- 通過済み：青い塗りつぶし
- アクティブ：青い塗りつぶし + 大きめサイズ + グロー
- 未通過：灰色の塗りつぶし
- 階層構造の表現（重要）
- H2項目：丸はメインライン上
- H3項目：丸は右にインデント（約12px）
- 青い線は青い丸同士を接続する
- 深さが変わる箇所では線が曲がる（L字型）
線の接続パターン
パターン1: 同じ深さの項目を接続
● H2項目A
┃
● H2項目B
パターン2: H2からH3へ（深くなる）
●━━━ H2項目
┃
└─● H3項目（子）
パターン3: H3からH2へ（浅くなる）
● H3項目
┃
●━━━┛ H2項目（次の親）
技術的アプローチ
オプションA: CSS疑似要素
各リストアイテムに ::before / ::after で線を描画。
メリット: シンプルでDOM構造が軽い デメリット: 複雑な曲線の表現が難しい
オプションB: インラインSVG
各アイテムに専用のSVG要素を配置。
メリット: 曲線の表現が容易 デメリット: DOM構造が複雑になる
オプションC: 単一のSVGオーバーレイ
リスト全体に1つのSVGをオーバーレイし、動的にパスを計算。
メリット: 最も柔軟、スムーズなアニメーション可能 デメリット: 位置計算が複雑、スクロール時の同期が必要
実装状況
- 基本的な丸の表示
- 通過/アクティブ/未通過の状態管理
- 青い丸同士の縦線接続
- 階層構造に応じた丸のインデント
- 深さが変わる箇所でのL字接続
- スムーズなアニメーション
参考
添付画像のデザイン要素：
- タイトル: "ON THIS PAGE" + リストアイコン
- 線の太さ: 2px
- 丸のサイズ: 通常 8px、アクティブ 10px
- インデント幅: 12px per level
- 色: 青 #3b82f6、灰 #e5e5e5