@riebeckite/plugin-docs 0.0.23 → 0.0.25

package/README.md

@@ -67,6 +67,12 @@ fields you want to override and leave the rest of the vault untouched.
 
 The plugin provides React-like JSX components for site integration:
 
+- `<DocsSidebar items={...} currentPermalink? label? />` renders
+  `details.rb-docs-sidebar-details` with `nav.rb-docs-sidebar`
+- `<DocsPrevNext previous? next? />` renders `nav.rb-docs-prev-next`
+
+The `initDocsSidebar` client keeps the sidebar collapsible.
+
 ## l10n and publishing
 
 When localization metadata from `@riebeckite/plugin-l10n` is present, each page

package/README_ja.md

@@ -64,10 +64,10 @@ sidebar:
 
 Plugin は React ライクな JSX コンポーネントをサイト統合に提供します。
 
-- `<DocsSidebar items={...} currentPermalink? label? />` は `nav.rr-docs-sidebar` を描画
-- `<DocsPrevNext previous? next? />` は `nav.rr-docs-prev-next` を描画
+- `<DocsSidebar items={...} currentPermalink? label? />` は `details.rb-docs-sidebar-details` と `nav.rb-docs-sidebar` を描画
+- `<DocsPrevNext previous? next? />` は `nav.rb-docs-prev-next` を描画
 
-クライアント `initDocsSidebar` はフッタリング可能なサイドバー動作のためにそのまま残ります。
+クライアント `initDocsSidebar` がサイドバーを畳めるようにします。
 
 ## l10n と公開の境界
 

package/dist/components/docs-prev-next.d.ts

@@ -4,5 +4,5 @@ export type DocsPrevNextProps = {
     readonly next?: DocsNavigationLink;
     readonly language?: string;
 };
-declare const DocsPrevNext: ({ previous, next, language, }: Readonly<DocsPrevNextProps>) => import("hono/jsx/jsx-dev-runtime").JSX.Element;
+declare const DocsPrevNext: (props: Readonly<DocsPrevNextProps>) => Promise<import("hono/utils/html").HtmlEscapedString>;
 export default DocsPrevNext;

package/dist/components/docs-sidebar.d.ts

@@ -1,8 +1,8 @@
 import type { DocsNavigationItem } from "../src/types.js";
 export type DocsSidebarProps = {
-    readonly items: readonly DocsNavigationItem[];
+    readonly items?: readonly DocsNavigationItem[];
     readonly currentPermalink?: string;
     readonly label?: string;
 };
-declare const DocsSidebar: ({ items, currentPermalink, label, }: Readonly<DocsSidebarProps>) => import("hono/jsx/jsx-dev-runtime").JSX.Element;
+declare const DocsSidebar: (props: Readonly<DocsSidebarProps>) => Promise<import("hono/utils/html").HtmlEscapedString>;
 export default DocsSidebar;

package/dist/components/docs-sidebar.js

@@ -1,38 +1,268 @@
+// components/docs-sidebar.tsx
+import { useArticleContext, useSiteContext } from "@riebeckite/ui";
+import { html } from "hono/html";
+
+// index.ts
+import {
+  createClientEntry,
+  createStyleAsset,
+  definePlugin
+} from "@riebeckite/core";
+
+// src/navigation.ts
+var ROOT_SEGMENT = "";
+function resolveDocsOptions(options) {
+  return {
+    root: normalizeRoot(options.root),
+    sidebar: {
+      auto: options.sidebar?.auto ?? true,
+      label: options.sidebar?.label ?? "Docs navigation"
+    },
+    prevNext: options.prevNext ?? true
+  };
+}
+function buildDocsNavigation(entries, options) {
+  if (!options.sidebar.auto) return [];
+  const docsEntries = entries.map((entry) => toNavigationEntry(entry, options.root)).filter((entry) => Boolean(entry)).filter((entry) => !entry.hidden);
+  const root = createTreeNode(ROOT_SEGMENT);
+  for (const entry of docsEntries) addEntry(root, entry);
+  const rootIndex = root.index;
+  const items = buildItems(root, []);
+  if (!rootIndex) return items;
+  return [toItem(rootIndex, []), ...items];
+}
+function normalizeRoot(root) {
+  return root.replace(/\\/g, "/").replace(/^\/+|\/+$/g, "");
+}
+function toNavigationEntry(entry, root) {
+  const relativePath = resolveRelativeDocsPath(entry, root);
+  if (!relativePath) return null;
+  const segments = relativePath.split("/").filter(Boolean);
+  const isIndex = ["index", "README"].includes(segments.at(-1) ?? "");
+  const sidebar = readSidebarFrontmatter(
+    "frontmatter" in entry ? entry.frontmatter.sidebar : void 0
+  );
+  return {
+    entry,
+    relativePath,
+    segments,
+    isIndex,
+    title: resolveTitle(entry, sidebar),
+    order: sidebar.order,
+    hidden: sidebar.hidden ?? false,
+    collapsed: sidebar.collapsed
+  };
+}
+function resolveRelativeDocsPath(entry, root) {
+  if (entry.slug === root) return "index";
+  if (!entry.slug.startsWith(`${root}/`)) return null;
+  return stripFilenameLanguage(
+    entry.slug.slice(root.length + 1),
+    entry.publicLocation.language
+  );
+}
+function stripFilenameLanguage(path, language) {
+  if (!language) return path;
+  const segments = path.split("/");
+  const last = segments.at(-1);
+  if (last === void 0) return path;
+  segments[segments.length - 1] = last.replace(
+    new RegExp(`[._-]${escapeRegExp(language)}$`, "i"),
+    ""
+  );
+  return segments.join("/");
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+function readSidebarFrontmatter(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return {};
+  const record = value;
+  return {
+    ...typeof record.label === "string" && record.label.trim() ? { label: record.label.trim() } : {},
+    ...typeof record.order === "number" && Number.isFinite(record.order) ? { order: record.order } : {},
+    ...typeof record.hidden === "boolean" ? { hidden: record.hidden } : {},
+    ...typeof record.collapsed === "boolean" ? { collapsed: record.collapsed } : {}
+  };
+}
+function resolveTitle(entry, sidebar) {
+  if (sidebar.label) return sidebar.label;
+  if (entry.title.trim()) return entry.title.trim();
+  return titleFromSegment(entry.slug.split("/").at(-1) ?? entry.slug);
+}
+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);
+    node.children.set(segment, child);
+    node = child;
+  }
+  if (entry.isIndex) node.index = entry;
+  else node.page = entry;
+}
+function buildItems(node, path) {
+  return [...node.children.values()].toSorted(compareNodes).map((child) => nodeToItem(child, [...path, child.segment]));
+}
+function nodeToItem(node, path) {
+  const primary = node.index ?? node.page;
+  const children = [
+    ...node.index && node.page ? [toItem(node.page, [])] : [],
+    ...buildItems(node, path)
+  ];
+  if (primary) return toItem(primary, children);
+  return {
+    title: titleFromSegment(node.segment),
+    children
+  };
+}
+function toItem(entry, children) {
+  return {
+    title: entry.title,
+    href: entry.entry.permalink,
+    slug: entry.entry.slug,
+    ...entry.order === void 0 ? {} : { order: entry.order },
+    ...entry.collapsed === void 0 ? {} : { collapsed: entry.collapsed },
+    children
+  };
+}
+function compareNodes(a, b) {
+  const left = a.index ?? a.page;
+  const right = b.index ?? b.page;
+  return compareNavigationKeys(
+    left?.order,
+    left?.title ?? titleFromSegment(a.segment),
+    a.segment,
+    right?.order,
+    right?.title ?? titleFromSegment(b.segment),
+    b.segment
+  );
+}
+function compareNavigationKeys(leftOrder, leftTitle, leftPath, rightOrder, rightTitle, rightPath) {
+  if (leftOrder !== void 0 || rightOrder !== void 0) {
+    if (leftOrder === void 0) return 1;
+    if (rightOrder === void 0) return -1;
+    const order = leftOrder - rightOrder;
+    if (order !== 0) return order;
+  }
+  const title = leftTitle.localeCompare(rightTitle, "en", {
+    sensitivity: "base"
+  });
+  if (title !== 0) return title;
+  return leftPath.localeCompare(rightPath, "en", { sensitivity: "base" });
+}
+function createTreeNode(segment) {
+  return { segment, children: /* @__PURE__ */ new Map() };
+}
+function titleFromSegment(segment) {
+  return segment.replace(/[-_]+/g, " ").replace(/\b\p{L}/gu, (letter) => letter.toLocaleUpperCase("en"));
+}
+
+// index.ts
+var getDocsNavigation = ({ view, entrySlug, options }) => {
+  const entry = view.findRoutableBySlug(entrySlug);
+  if (!entry) return [];
+  const localized = view.discoverableEntries.filter(
+    (candidate) => candidate.publicLocation.language === entry.publicLocation.language
+  );
+  return buildDocsNavigation(localized, resolveDocsOptions(options));
+};
+
 // components/docs-sidebar.tsx
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-var DocsSidebar = (({
+var DocsSidebar = (async (props) => {
+  const site = useSiteContext();
+  const article = useArticleContext();
+  const options = findDocsOptions(site?.config.plugins);
+  const items = props.items ?? (site && article?.entry && options ? await getDocsNavigation({
+    view: site.view,
+    entrySlug: article.entry.slug,
+    options
+  }) : []);
+  const currentPermalink = props.currentPermalink ?? article?.entry?.permalink;
+  const label = props.label ?? options?.sidebar?.label ?? "Docs navigation";
+  if (items.length === 0) return html``;
+  const permalink = currentPermalink ?? "";
+  return /* @__PURE__ */ jsxs("details", { class: "rb-docs-sidebar-details", "data-docs-sidebar-details": true, open: true, children: [
+    /* @__PURE__ */ jsx("summary", { class: "rb-docs-sidebar-summary", children: label }),
+    /* @__PURE__ */ jsx("nav", { class: "rb-docs-sidebar", "aria-label": label, "data-docs-sidebar": true, children: /* @__PURE__ */ jsx(
+      DocsSidebarItems,
+      {
+        items,
+        currentPermalink: permalink,
+        level: 1
+      }
+    ) })
+  ] });
+});
+function DocsSidebarItems({
   items,
   currentPermalink,
-  label = "Docs navigation"
-}) => {
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx("nav", { class: "rr-docs-sidebar", "aria-label": label, children: /* @__PURE__ */ jsx("ol", { class: "rr-docs-sidebar__list", children: items.map((item) => /* @__PURE__ */ jsx(
-    DocsSidebarItem,
+  level
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
     {
-      item,
-      currentPermalink
-    },
-    `${item.slug ?? item.title}`
-  )) }) });
-});
+      class: `rb-docs-sidebar__list rb-docs-sidebar__list--level-${level}`,
+      "data-docs-level": String(level),
+      children: items.map((item) => /* @__PURE__ */ jsx(
+        DocsSidebarItem,
+        {
+          item,
+          currentPermalink,
+          level
+        },
+        item.slug ?? item.title
+      ))
+    }
+  );
+}
 function DocsSidebarItem({
   item,
-  currentPermalink
+  currentPermalink,
+  level
 }) {
-  const current = item.href === currentPermalink;
-  return /* @__PURE__ */ jsxs("li", { class: "rr-docs-sidebar__item", children: [
-    item.href ? /* @__PURE__ */ jsx("a", { href: item.href, "aria-current": current ? "page" : void 0, children: item.title }) : /* @__PURE__ */ jsx("span", { children: item.title }),
-    item.children.length > 0 ? /* @__PURE__ */ jsx("ol", { class: "rr-docs-sidebar__list", children: item.children.map((child) => /* @__PURE__ */ jsx(
-      DocsSidebarItem,
-      {
-        item: child,
-        currentPermalink
-      },
-      `${child.slug ?? child.title}`
-    )) }) : null
-  ] });
+  const isCurrent = item.href === currentPermalink;
+  const isCurrentBranch = item.children.some(
+    (child) => containsPermalink(child, currentPermalink)
+  );
+  const collapsed = item.collapsed === true && !isCurrent && !isCurrentBranch;
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      class: `rb-docs-sidebar__item rb-docs-sidebar__item--level-${level}`,
+      "data-docs-level": String(level),
+      "data-docs-collapsed": item.children.length > 0 ? String(collapsed) : void 0,
+      children: [
+        item.href ? /* @__PURE__ */ jsx(
+          "a",
+          {
+            class: "rb-docs-sidebar__link",
+            href: item.href,
+            "data-docs-link": true,
+            "aria-current": isCurrent ? "page" : void 0,
+            children: item.title
+          }
+        ) : /* @__PURE__ */ jsx("span", { class: "rb-docs-sidebar__section", "data-docs-section": true, children: item.title }),
+        item.children.length > 0 ? /* @__PURE__ */ jsx(
+          DocsSidebarItems,
+          {
+            items: item.children,
+            currentPermalink,
+            level: level + 1
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function containsPermalink(item, currentPermalink) {
+  return item.href === currentPermalink || item.children.some((child) => containsPermalink(child, currentPermalink));
 }
 var docs_sidebar_default = DocsSidebar;
+function findDocsOptions(plugins) {
+  return plugins?.find((plugin) => plugin.name.startsWith("docs:"))?.options;
+}
 export {
   docs_sidebar_default as default
 };

package/dist/index.js

@@ -161,13 +161,23 @@ function titleFromSegment(segment) {
 }
 
 // components/docs-prev-next.tsx
+import { useArticleContext, useSiteContext } from "@riebeckite/ui";
+import { html } from "hono/html";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-var DocsPrevNext = (({
-  previous,
-  next,
-  language
-}) => {
-  if (!previous && !next) return null;
+var DocsPrevNext = (async (props) => {
+  const site = useSiteContext();
+  const article = useArticleContext();
+  const options = findDocsOptions(site?.config.plugins);
+  const navigation = site && article?.entry && options ? await getDocsNavigation({
+    view: site.view,
+    entrySlug: article.entry.slug,
+    options
+  }) : [];
+  const resolved = article?.entry ? await getDocsPrevNext({ items: navigation, slug: article.entry.slug }) : {};
+  const previous = props.previous ?? resolved.previous;
+  const next = props.next ?? resolved.next;
+  const language = props.language ?? article?.entry?.publicLocation.language;
+  if (!previous && !next) return html``;
   const labels = language === "ja" ? { nav: "前後のドキュメント", previous: "前へ", next: "次へ" } : {
     nav: "Previous and next docs pages",
     previous: "Previous",
@@ -209,42 +219,107 @@ var DocsPrevNext = (({
   ] });
 });
 var docs_prev_next_default = DocsPrevNext;
+function findDocsOptions(plugins) {
+  return plugins?.find((plugin) => plugin.name.startsWith("docs:"))?.options;
+}
 
 // components/docs-sidebar.tsx
+import { useArticleContext as useArticleContext2, useSiteContext as useSiteContext2 } from "@riebeckite/ui";
+import { html as html2 } from "hono/html";
 import { jsx as jsx2, jsxs as jsxs2 } from "hono/jsx/jsx-runtime";
-var DocsSidebar = (({
+var DocsSidebar = (async (props) => {
+  const site = useSiteContext2();
+  const article = useArticleContext2();
+  const options = findDocsOptions2(site?.config.plugins);
+  const items = props.items ?? (site && article?.entry && options ? await getDocsNavigation({
+    view: site.view,
+    entrySlug: article.entry.slug,
+    options
+  }) : []);
+  const currentPermalink = props.currentPermalink ?? article?.entry?.permalink;
+  const label = props.label ?? options?.sidebar?.label ?? "Docs navigation";
+  if (items.length === 0) return html2``;
+  const permalink = currentPermalink ?? "";
+  return /* @__PURE__ */ jsxs2("details", { class: "rb-docs-sidebar-details", "data-docs-sidebar-details": true, open: true, children: [
+    /* @__PURE__ */ jsx2("summary", { class: "rb-docs-sidebar-summary", children: label }),
+    /* @__PURE__ */ jsx2("nav", { class: "rb-docs-sidebar", "aria-label": label, "data-docs-sidebar": true, children: /* @__PURE__ */ jsx2(
+      DocsSidebarItems,
+      {
+        items,
+        currentPermalink: permalink,
+        level: 1
+      }
+    ) })
+  ] });
+});
+function DocsSidebarItems({
   items,
   currentPermalink,
-  label = "Docs navigation"
-}) => {
-  if (items.length === 0) return null;
-  return /* @__PURE__ */ jsx2("nav", { class: "rr-docs-sidebar", "aria-label": label, children: /* @__PURE__ */ jsx2("ol", { class: "rr-docs-sidebar__list", children: items.map((item) => /* @__PURE__ */ jsx2(
-    DocsSidebarItem,
+  level
+}) {
+  return /* @__PURE__ */ jsx2(
+    "ul",
     {
-      item,
-      currentPermalink
-    },
-    `${item.slug ?? item.title}`
-  )) }) });
-});
+      class: `rb-docs-sidebar__list rb-docs-sidebar__list--level-${level}`,
+      "data-docs-level": String(level),
+      children: items.map((item) => /* @__PURE__ */ jsx2(
+        DocsSidebarItem,
+        {
+          item,
+          currentPermalink,
+          level
+        },
+        item.slug ?? item.title
+      ))
+    }
+  );
+}
 function DocsSidebarItem({
   item,
-  currentPermalink
+  currentPermalink,
+  level
 }) {
-  const current = item.href === currentPermalink;
-  return /* @__PURE__ */ jsxs2("li", { class: "rr-docs-sidebar__item", children: [
-    item.href ? /* @__PURE__ */ jsx2("a", { href: item.href, "aria-current": current ? "page" : void 0, children: item.title }) : /* @__PURE__ */ jsx2("span", { children: item.title }),
-    item.children.length > 0 ? /* @__PURE__ */ jsx2("ol", { class: "rr-docs-sidebar__list", children: item.children.map((child) => /* @__PURE__ */ jsx2(
-      DocsSidebarItem,
-      {
-        item: child,
-        currentPermalink
-      },
-      `${child.slug ?? child.title}`
-    )) }) : null
-  ] });
+  const isCurrent = item.href === currentPermalink;
+  const isCurrentBranch = item.children.some(
+    (child) => containsPermalink(child, currentPermalink)
+  );
+  const collapsed = item.collapsed === true && !isCurrent && !isCurrentBranch;
+  return /* @__PURE__ */ jsxs2(
+    "li",
+    {
+      class: `rb-docs-sidebar__item rb-docs-sidebar__item--level-${level}`,
+      "data-docs-level": String(level),
+      "data-docs-collapsed": item.children.length > 0 ? String(collapsed) : void 0,
+      children: [
+        item.href ? /* @__PURE__ */ jsx2(
+          "a",
+          {
+            class: "rb-docs-sidebar__link",
+            href: item.href,
+            "data-docs-link": true,
+            "aria-current": isCurrent ? "page" : void 0,
+            children: item.title
+          }
+        ) : /* @__PURE__ */ jsx2("span", { class: "rb-docs-sidebar__section", "data-docs-section": true, children: item.title }),
+        item.children.length > 0 ? /* @__PURE__ */ jsx2(
+          DocsSidebarItems,
+          {
+            items: item.children,
+            currentPermalink,
+            level: level + 1
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function containsPermalink(item, currentPermalink) {
+  return item.href === currentPermalink || item.children.some((child) => containsPermalink(child, currentPermalink));
 }
 var docs_sidebar_default = DocsSidebar;
+function findDocsOptions2(plugins) {
+  return plugins?.find((plugin) => plugin.name.startsWith("docs:"))?.options;
+}
 
 // src/docs-sidebar.client.ts
 var COLLAPSIBLE_PROPERTY = "--rb-docs-sidebar-collapsible";
@@ -296,15 +371,15 @@ function renderItems(items, currentPermalink, level) {
 function renderItem(item, currentPermalink, level) {
   const isCurrent = item.href === currentPermalink;
   const isCurrentBranch = item.children.some(
-    (child) => containsPermalink(child, currentPermalink)
+    (child) => containsPermalink2(child, currentPermalink)
   );
   const children = item.children.length > 0 ? renderItems(item.children, currentPermalink, level + 1) : "";
   const collapsed = item.collapsed === true && !isCurrent && !isCurrentBranch;
   const state = item.children.length > 0 ? ` data-docs-collapsed="${collapsed ? "true" : "false"}"` : "";
   return `<li class="rb-docs-sidebar__item rb-docs-sidebar__item--level-${level}" data-docs-level="${level}"${state}>${renderItemLabel(item, isCurrent)}${children}</li>`;
 }
-function containsPermalink(item, currentPermalink) {
-  return item.href === currentPermalink || item.children.some((child) => containsPermalink(child, currentPermalink));
+function containsPermalink2(item, currentPermalink) {
+  return item.href === currentPermalink || item.children.some((child) => containsPermalink2(child, currentPermalink));
 }
 function renderItemLabel(item, isCurrent) {
   const current = isCurrent ? ' aria-current="page"' : "";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-docs",
-  "version": "0.0.23",
+  "version": "0.0.25",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,11 +28,12 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.23"
+    "@riebeckite/ui": "0.0.25",
+    "@riebeckite/core": "0.0.25"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.23"
+    "@riebeckite/test": "0.0.25"
   },
   "publishConfig": {
     "access": "public"