SiteTreeNav

展開可能なカテゴリでドキュメントツリー全体を表示する、サイトマップ風のグリッドコンポーネント。

概要

SiteTreeNavは、展開可能なカテゴリカードのレスポンシブグリッドでドキュメントツリー全体を表示するPreactアイランドコンポーネントです。カテゴリの展開・折りたたみが可能な、サイトマップ形式のドキュメントページ一覧を提供します。

ライブデモ

以下はSiteTreeNavでドキュメントツリー全体を表示した例です（ホームページと同じ表示）：

使い方

SiteTreeNavはpages/index.tsxでホームページのサイトマップを表示するために使用されています：

// pages/index.tsx
import { buildNavTree, groupSatelliteNodes } from "@/utils/docs";
import { getCategoryOrder } from "@/utils/nav-scope";
import SiteTreeNav from "@/components/site-tree-nav";
import { resolveNavSource } from "./lib/_nav-source-docs";
import { defaultLocale } from "@/config/i18n";

export default function IndexPage() {
  const locale = defaultLocale;
  const { navDocs, categoryMeta } = resolveNavSource(locale, undefined);
  const tree = buildNavTree(navDocs, locale, categoryMeta);
  const categoryOrder = getCategoryOrder();
  const groupedTree = groupSatelliteNodes(tree, categoryOrder);

  return (
    <SiteTreeNav
      tree={groupedTree}
      categoryOrder={categoryOrder}
      categoryIgnore={["inbox", "develop"]}
    />
  );
}

このコンポーネントは展開・折りたたみのインタラクティブ機能にPreactステートを使用するため、zfbのアイランドランタイムを介してクライアントでハイドレートされます。

プロップ

特徴

• レスポンシブグリッドレイアウト — repeat(auto-fill, minmax(min(18rem, 100%), 1fr))により、モバイルの1カラムからワイドスクリーンの複数カラムまで適応

• 展開可能なカテゴリ — 各カテゴリカードは折りたたみ可能で、デフォルトでは開いた状態

• 階層的なツリー構造 — ネストされたページはインデントとコネクタラインでツリー構造を表示

• カテゴリリンク — トップレベルカテゴリは矢印アイコンとインデックスページへのリンクを表示

• リーフページ — 個別のドキュメントページはクリック可能なリンクとして表示

ソース

コンポーネントはsrc/components/site-tree-nav.tsxに定義されています。