SiteTreeNav
展開可能なカテゴリでドキュメントツリー全体を表示する、サイトマップ風のグリッドコンポーネント。
概要
SiteTreeNavは、展開可能なカテゴリカードのレスポンシブグリッドでドキュメントツリー全体を表示するPreactアイランドコンポーネントです。カテゴリの展開・折りたたみが可能な、サイトマップ形式のドキュメントページ一覧を提供します。
Info
SiteTreeNavはMDXコンテンツで直接利用できます。グローバルMDXタグとして登録されているため、インポートなしで<SiteTreeNav />と書くだけで動作します。以下のライブデモで使用しているSiteTreeNavDemoタグは、まったく同じ自己データ取得型のラッパーに解決されます。MDX内ではこの2つのタグ名は同じものとして使えます。
これは、@takazudo/から提供される、treeプロップを直接受け取る生のSiteTreeNavとは別のコンポーネントです。そちらは自身でデータを取得せず、すでにtreeを持っているページモジュール向けです。両方の使い方は下記の使い方を参照してください。
ライブデモ
以下はSiteTreeNavでドキュメントツリー全体を表示した例です（ホームページと同じ表示）：
使い方
MDXコンテンツでの利用
.mdxファイル内でグローバルMDXタグを直接使用します。インポートは不要です：
<SiteTreeNav />プロップは不要です。現在のロケールのドキュメントコレクションを自身で取得し、ナビゲーションツリーを構築して、インタラクティブなアイランドをレンダリングします — 上記のSiteTreeNavDemoと同じラッパーが使用されます。
ページモジュールでの利用
すでにtreeを持っているページモジュール（例：buildNavTree + groupSatelliteNodesで構築済み）では、代わりにtreeプロップを直接受け取る生のコンポーネントをインポートできます：
import { SiteTreeNav } from "@takazudo/zudo-doc/site-tree-nav-island";
export default function IndexPage() {
return (
<SiteTreeNav
tree={tree}
categoryOrder={categoryOrder}
categoryIgnore={["inbox", "develop"]}
/>
);
}このリポジトリ自体のホームページ（pages/）は、このアイランドを直接呼び出していません。解決済みのロケールをprepareHomeData()に渡し、その結果をHomePageView（どちらも@takazudo/から提供）に渡しています。HomePageViewはヒーローセクションやタグセクションと一緒に、内部でSiteTreeNavをレンダリングします。
このコンポーネントは展開・折りたたみのインタラクティブ機能にPreactステートを使用するため、zfbのアイランドランタイムを介してクライアントでハイドレートされます。
プロップ
以下のプロップは、生のSiteTreeNavアイランド（@takazudo/）に対するものです。MDXタグはデータプロップを一切受け取らず、現在のロケールに対してtree/categoryOrderを自身で解決し、任意のariaLabelのみを転送します。
| プロップ | 型 | デフォルト | 説明 |
|---|---|---|---|
tree | NavNode[] | （必須） | コンテンツコレクションから構築されたナビゲーションツリー |
categoryOrder | string[] | — | トップレベルカテゴリのカスタム並び順 |
categoryIgnore | string[] | — | ツリーから非表示にするカテゴリスラッグ |
initiallyCollapsedCategorySlugs | string[] | — | 初期状態で折りたたんでおくルートカテゴリのスラッグ |
ariaLabel | string | "Site index" | nav要素のアクセシビリティラベル |
特徴
レスポンシブグリッドレイアウト —
repeat(auto-fill, minmax(min(18rem, 100%), 1fr))により、モバイルの1カラムからワイドスクリーンの複数カラムまで適応展開可能なカテゴリ — 各カテゴリカードは折りたたみ可能で、デフォルトでは開いた状態
階層的なツリー構造 — ネストされたページはインデントとコネクタラインでツリー構造を表示
カテゴリリンク — トップレベルカテゴリは矢印アイコンとインデックスページへのリンクを表示
リーフページ — 個別のドキュメントページはクリック可能なリンクとして表示
ソース
SiteTreeNavは@takazudo/zudo-docパッケージから提供されています。ページモジュールで使う場合は、生のアイランドを@takazudo/からインポートしてください。（このリポジトリ内では、アイランドのソースはpackages/にあります。）<SiteTreeNav /> / <SiteTreeNavDemo />のMDXタグは、パッケージ所有のルート（packageOwnedRoutes、デフォルトで有効）によって自動的に組み込まれており、プロジェクト側で管理するファイルはありません。