NoteTrayIndex

ノートトレイを番号付きインデックス、カード一覧、日付タイムラインとして表示します。

概要

NoteTrayIndexは、ノートトレイ内のフラットなアイテムを一覧表示するサーバーレンダリングのPreactコンポーネントです。MDXでグローバルに利用でき、インポートもハイドレーション指定も必要ありません。

以下の例ではショーケースのBlogトレイを使用します。

番号付きインデックス

デフォルトのindexスタイルは、安定したゼロ埋めのrankを強調し、各アイテムのdescriptionも表示します。タイトルだけでなく、行全体がリンクです。行をホバーまたはフォーカスすると、上下の罫線が強調され、テキストに下線が付きます。rankは引き続き行のマーカーとして表示されます。

1. 06ショーケースをAstroから移行するコンテンツツリーをサイトの安定した中心に保つと、フレームワーク移行をレビューしやすくなります。
2. 05まず警告し、後からエラーにするタグガバナンスは、ビルドを止める前に役立つ監査シグナルとして始められます。
3. 04ドキュメント履歴をビルドから切り離すドキュメントごとの重い処理をメインのサイトビルドの外で実行すると、Git履歴を便利なまま保てます。
4. 0316remドロワーの設計固定幅のサイドバードロワーで、ドキュメントを圧迫せず予測しやすいナビゲーションを実現します。
5. 02カテゴリをフラットなリストにするすべての子ページが同じ小さなコレクションに属するなら、カテゴリインデックスをシンプルに保てます。
6. 01ルートをパッケージに置く理由ルートとchromeの処理をzudo-docに移し、プロジェクトをコンテンツに集中させる方法。

<NoteTrayIndex category="blog" style="index" />

カード

cardsスタイルは各アイテムをゆったり表示し、タグナビゲーションが有効ならタグも含めます。CategoryNavと同様に、枠で囲まれたカード全体がリンクです。ただし、枠内のタグチップはそれぞれ独立したリンクのままです。showDateを設定すると、広い画面ではカード右端の列に日付を表示し、狭い画面ではタイトルの後に表示します。

<NoteTrayIndex category="blog" style="cards" showDate />

タイムライン

timelineスタイルは日付付きトレイを月ごとにまとめます。各アイテムは、日を示す数字をレール上のマーカーとして表示し、タイトルから始まります。timelineにはupdatedを表示しません。また、日付なしのトレイで使うとビルドエラーになります。

<NoteTrayIndex category="blog" style="timeline" />

プロップ

アイテムはトレイのcategory_sort_orderに従います。空のトレイ、存在しないカテゴリ、ノートトレイではないカテゴリでは何もレンダリングしません。

宣言フィールド、並び順、検証、制限事項についてはノートトレイを参照してください。

ソース

MDXラッパーは@takazudo/zudo-doc/note-tray-index、表示コンポーネントは@takazudo/zudo-doc/nav-indexingから提供されます。パッケージ所有ルートによって自動的に登録されます。