@riebeckite/plugin-navigation 0.0.32 → 0.0.33

package/README.md

@@ -10,6 +10,10 @@ the Site owns placement — where each rendered navigation appears.
 
 [日本語](./README_ja.md)
 
+## Live example
+
+The header links — Docs, Plugins, Themes, and GitHub — are generated from the `navigation()` configuration. The Documentation sidebar is the Docs collection navigation.
+
 ## Overview
 
 `navigation()` reads the manifest's discoverable entries — the notes that are
@@ -150,7 +154,7 @@ tab.
 ## Exports
 
 - `navigation(options?)` — plugin factory
-- `navigationPlugin` — alias of `navigation`
+- `navigation` — alias of `navigation`
 - `NAVIGATION_PLUGIN_NAME` — the plugin name, `"navigation"`
 - `buildNavigation(entries, options?)` — build a model from manifest entries
 - `resolveSiteNavigation(config, manifest)` — find the enabled plugin and build

package/README_ja.md

@@ -5,21 +5,25 @@
 サイトナビゲーションを提供する Riebeckite プラグインです。`navigation()` は
 Vault にすでにあるノートから主要ナビゲーションを導出します。Riebeckite 専用の
 ファイルも必須 frontmatter も不要なので、既存の Obsidian Vault をそのまま
-公開できます。ナビゲーションの「モデル」、UI、操作に関わるスタイルはプラグインが持ち、
-配置は Site が担当します。
+公開できます。ナビゲーションのモデル、描画される UI、インタラクションの
+スタイルはプラグインが持ち、どこに置くかは Site が決めます。
 
 [English](./README.md)
 
+## 実行例
+
+ヘッダーの Docs・Plugins・Themes・GitHub のリンクは、`navigation()` の設定から生成されています。右側の Documentation サイドバーは Docs コレクションのナビゲーションです。
+
 ## 仕組み
 
 `navigation()` はマニフェストの discoverable エントリ（公開され、ルーティング
 可能なノート）を読み、スラッグ階層でまとめます。
 
-- フォルダはセクションになる
+- フォルダはセクションになります
 - `index` / `README` ノートはそのフォルダへのリンクになり、同じフォルダの
-  直下のノートは子になる
-- それ以外のノートはリンクになる
-- タイトルはノート自身の `title` を使い、なければスラッグのセグメントから作る
+  直下のノートは子になります
+- それ以外のノートはリンクになります
+- タイトルはノート自身の `title` を使い、なければスラッグのセグメントから作ります
 
 index ノートを持たないフォルダは、子をまとめたラベルとして表示されます。
 モデルは `manifest.discoverableEntries` から作るため、下書き・予約公開・
@@ -59,10 +63,11 @@ const secondary = model?.secondary ?? [];
 `SiteNav` は解決済みのツリーを `<nav>` ランドマークとネストしたリストとして
 描画し、`MobileSiteNav` はコンパクトな `<details>` メニューを描画します。子の
 再帰描画、現在パスの判定、言語を考慮した正規化、外部リンクの扱い、`aria-current`
-に加え、リスト・リンク・子メニュー・フォーカス表示・モバイルパネルの `rb-nav` UI は
-プラグインが自身の `style.css` で担当します（自動生成される plugin styles 経由で
-読み込まれます）。Site はコンポーネントの root を独自のレイアウト用ラッパーに置き、
-`rb-nav` の子要素をスタイルしたりモバイルメニューのマークアップを組み立てたりしません。
+の付与はプラグインが行います。リストの流し方、リンク、子メニュー、フォーカス
+表示、モバイルパネルといった `rb-nav` の UI も、プラグインが自身の `style.css`
+で提供します（自動生成されるプラグインスタイル経由で読み込まれます）。Site は
+コンポーネントのルートを独自のレイアウト用ラッパーに置くだけにし、`rb-nav` の
+子要素をスタイルしたり、モバイルメニューのマークアップを組み立てたりしないでください。
 
 ```tsx
 import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
@@ -87,13 +92,13 @@ import { MobileSiteNav, SiteNav } from "@riebeckite/plugin-navigation";
 ```
 
 `path` は現在のリクエストパスです。`language` は現在のコンテンツ言語で、指定すると
-`SiteNav` は `/language` プレフィックスを取り除いてから現在のアイテムを判定します。
+`SiteNav` は `/language` プレフィックスを取り除いてからアクティブな項目を判定します。
 そのため、言語プレフィックスのない手書き href でもローカライズされたページに
 一致します。`localizeHref` を渡すと現在の言語に合わせて href を書き換えられます。
 `label` でランドマークのラベルを、`class` / `className` で `<nav>` のクラスを
 拡張できます。
 
-root レベルで意図的に見た目を上書きする場合は、`SiteNav` の root またはラッパーに
+ルートレベルで意図的に見た目を上書きする場合は、`SiteNav` のルートまたはラッパーに
 次の公開カスタムプロパティを指定します。`--rb-nav-gap`、
 `--rb-nav-list-flex-wrap`、`--rb-nav-list-justify-content`、
 `--rb-nav-item-display`、`--rb-nav-item-padding`、
@@ -152,7 +157,7 @@ navigation({
 ## エクスポート
 
 - `navigation(options?)`：プラグインファクトリ
-- `navigationPlugin`：`navigation` のエイリアス
+- `navigation`：`navigation` のエイリアス
 - `NAVIGATION_PLUGIN_NAME`：プラグイン名 `"navigation"`
 - `buildNavigation(entries, options?)`：マニフェストエントリからモデルを構築する
 - `resolveSiteNavigation(config, manifest)`：有効なプラグインを見つけてモデルを
@@ -165,9 +170,9 @@ navigation({
 
 ## 制約
 
-- `l10n` Plugin が言語 metadata を付与している場合、導出は表示中の言語に追従し、
-  多言語 Vault の Navigation が言語を混在させることはありません。localization
-  metadata のない Vault では、discoverable な全 entry を使います。
+- `l10n` プラグインが言語メタデータを付与している場合、導出は表示中の言語に追従し、
+  多言語 Vault のナビゲーションが言語を混在させることはありません。ローカライズの
+  メタデータがない Vault では、discoverable な全エントリを使います。
 - 並び順はタイトルのアルファベット順です。frontmatter の順序は読みません。
 - `exclude` / `include` / `order` はまだありません。実際のサイトが必要とした
   ときにだけ追加します。

package/dist/index.d.ts

@@ -4,4 +4,3 @@ export { MobileSiteNav, SiteNav } from "./components/site-nav.js";
 export { buildNavigation, NAVIGATION_PLUGIN_NAME, resolveSiteNavigation, } from "./src/navigation.js";
 export type { NavigationItem, NavigationOptions, NavigationSource, SiteNavigation, } from "./src/types.js";
 export declare function navigation(options?: NavigationOptions): import("@riebeckite/core").RiebeckitePlugin<NavigationOptions>;
-export declare const navigationPlugin: typeof navigation;

package/dist/index.js

@@ -8,9 +8,9 @@ import {
 var ROOT_SEGMENT = "";
 var LOCALIZATION_TRANSLATION_KEY = "l10n.translationId";
 var NAVIGATION_PLUGIN_NAME = "navigation";
-function buildNavigation(entries, options = {}) {
+function buildNavigation(entries, options = {}, folderIcons = {}) {
   return {
-    primary: options.items ?? deriveNavigation(entries),
+    primary: options.items ?? deriveNavigation(entries, folderIcons),
     secondary: options.secondary ?? []
   };
 }
@@ -21,7 +21,8 @@ function resolveSiteNavigation(source, manifest, language) {
   if (!plugin) return null;
   return buildNavigation(
     selectEntriesByLanguage(manifest.discoverableEntries, language),
-    plugin.options ?? {}
+    plugin.options ?? {},
+    manifest.icons?.folders ?? {}
   );
 }
 function validateNavigationOptions(options) {
@@ -31,11 +32,11 @@ function validateNavigationOptions(options) {
   validateItems(options.secondary, "secondary", issues, /* @__PURE__ */ new Set());
   return issues;
 }
-function deriveNavigation(entries) {
+function deriveNavigation(entries, folderIcons) {
   const nodes = entries.map(toNavigationEntry).filter((entry) => Boolean(entry));
-  const root = createTreeNode(ROOT_SEGMENT);
+  const root = createTreeNode(ROOT_SEGMENT, "");
   for (const node of nodes) addEntry(root, node);
-  return buildItems(root);
+  return buildItems(root, folderIcons);
 }
 function toNavigationEntry(entry) {
   const path = entry.publicLocation.metadata?.[LOCALIZATION_TRANSLATION_KEY] ?? entry.slug;
@@ -57,27 +58,28 @@ function addEntry(root, entry) {
   const path = entry.isIndex ? entry.segments.slice(0, -1) : entry.segments;
   let node = root;
   for (const segment of path) {
-    const child = node.children.get(segment) ?? createTreeNode(segment);
+    const child = node.children.get(segment) ?? createTreeNode(segment, node.path ? `${node.path}/${segment}` : segment);
     node.children.set(segment, child);
     node = child;
   }
   if (entry.isIndex) node.indexes.push(entry);
   else node.page = entry;
 }
-function buildItems(node) {
-  return [...node.children.values()].toSorted(compareNodes).map(nodeToItem);
+function buildItems(node, folderIcons) {
+  return [...node.children.values()].toSorted(compareNodes).map((child) => nodeToItem(child, folderIcons));
 }
-function nodeToItem(node) {
+function nodeToItem(node, folderIcons) {
   const singleIndex = node.indexes.length === 1 ? node.indexes[0] : void 0;
   const primary = singleIndex ?? (node.indexes.length === 0 ? node.page : void 0);
   const extra = node.indexes.length <= 1 ? singleIndex && node.page ? [node.page] : [] : [...node.indexes, ...node.page ? [node.page] : []];
   const children = [
     ...extra.map((entry) => toItem(entry)),
-    ...buildItems(node)
+    ...buildItems(node, folderIcons)
   ];
   if (primary) return toItem(primary, children);
   return {
     label: titleFromSegment(node.segment),
+    ...folderIcons[node.path] ? { icon: folderIcons[node.path] } : {},
     children
   };
 }
@@ -85,6 +87,7 @@ function toItem(entry, children = []) {
   return {
     label: entry.title,
     href: entry.entry.permalink,
+    ...entry.entry.icon ? { icon: entry.entry.icon } : {},
     ...children.length === 0 ? {} : { children }
   };
 }
@@ -99,8 +102,8 @@ function compareNodes(a, b) {
   if (title !== 0) return title;
   return a.segment.localeCompare(b.segment, "en", { sensitivity: "base" });
 }
-function createTreeNode(segment) {
-  return { segment, indexes: [], children: /* @__PURE__ */ new Map() };
+function createTreeNode(segment, path) {
+  return { segment, path, indexes: [], children: /* @__PURE__ */ new Map() };
 }
 function titleFromSegment(segment) {
   return segment.replace(/[-_]+/g, " ").replace(/\b\p{L}/gu, (letter) => letter.toLocaleUpperCase("en"));
@@ -214,7 +217,7 @@ function NavigationItemView(props) {
   const active = item.href ? isActive(item.href, path, language) : false;
   const href = item.href ? localizeHref?.(item.href) ?? item.href : void 0;
   return /* @__PURE__ */ jsxs("li", { class: "rb-nav__item", children: [
-    href ? /* @__PURE__ */ jsx(
+    href ? /* @__PURE__ */ jsxs(
       "a",
       {
         href,
@@ -222,9 +225,27 @@ function NavigationItemView(props) {
         "aria-current": active ? "page" : void 0,
         target: item.external ? "_blank" : void 0,
         rel: item.external ? "noreferrer" : void 0,
-        children: item.label
+        children: [
+          item.icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              class: "rb-nav__icon",
+              dangerouslySetInnerHTML: { __html: item.icon.html }
+            }
+          ) : null,
+          item.label
+        ]
       }
-    ) : /* @__PURE__ */ jsx("span", { class: "rb-nav__label", children: item.label }),
+    ) : /* @__PURE__ */ jsxs("span", { class: "rb-nav__label", children: [
+      item.icon ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          class: "rb-nav__icon",
+          dangerouslySetInnerHTML: { __html: item.icon.html }
+        }
+      ) : null,
+      item.label
+    ] }),
     item.children && item.children.length > 0 ? /* @__PURE__ */ jsx(
       NavigationItems,
       {
@@ -272,13 +293,11 @@ function navigation(options = {}) {
     ]
   });
 }
-var navigationPlugin = navigation;
 export {
   MobileSiteNav,
   NAVIGATION_PLUGIN_NAME,
   SiteNav,
   buildNavigation,
   navigation,
-  navigationPlugin,
   resolveSiteNavigation
 };

package/dist/src/navigation.d.ts

@@ -1,6 +1,8 @@
-import { type ConfigValidationIssue, type ContentManifest, type ContentManifestEntry } from "@riebeckite/core";
+import { type ConfigValidationIssue, type ContentIcon, type ContentManifest, type ContentManifestEntry } from "@riebeckite/core";
 import type { NavigationOptions, NavigationSource, SiteNavigation } from "./types.js";
+type FolderIcons = Readonly<Record<string, ContentIcon>>;
 export declare const NAVIGATION_PLUGIN_NAME = "navigation";
-export declare function buildNavigation(entries: readonly ContentManifestEntry[], options?: NavigationOptions): SiteNavigation;
+export declare function buildNavigation(entries: readonly ContentManifestEntry[], options?: NavigationOptions, folderIcons?: FolderIcons): SiteNavigation;
 export declare function resolveSiteNavigation(source: NavigationSource, manifest: ContentManifest, language?: string): SiteNavigation | null;
 export declare function validateNavigationOptions(options: NavigationOptions | undefined): readonly ConfigValidationIssue[];
+export {};

package/dist/src/types.d.ts

@@ -1,7 +1,8 @@
-import type { ContentManifestEntry } from "@riebeckite/core";
+import type { ContentIcon, ContentManifestEntry } from "@riebeckite/core";
 export type NavigationItem = {
     readonly label: string;
     readonly href?: string;
+    readonly icon?: ContentIcon;
     readonly children?: readonly NavigationItem[];
     readonly external?: boolean;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-navigation",
-  "version": "0.0.32",
+  "version": "0.0.33",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -15,14 +15,14 @@
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.32",
-    "@riebeckite/ui": "0.0.32"
+    "@riebeckite/core": "0.0.33",
+    "@riebeckite/ui": "0.0.33",
+    "hono": "^4.12.25"
   },
   "devDependencies": {
-    "puppeteer": "^25.11.0",
-    "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.32"
+    "@riebeckite/test": "0.0.33",
+    "puppeteer": "^25.16.0",
+    "tsx": "^4.22.4"
   },
   "publishConfig": {
     "access": "public"

package/style.css

@@ -65,6 +65,11 @@
     text-transform: var(--rb-nav-item-text-transform, none);
   }
 
+  .rb-nav__icon {
+    margin-inline-end: 0.35em;
+    vertical-align: -0.125em;
+  }
+
   .rb-nav__link:hover,
   .rb-nav__link:focus-visible,
   .rb-nav__link--active {