@riebeckite/plugin-docs 0.0.23 → 0.0.24

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-sidebar.js

@@ -6,31 +6,82 @@ var DocsSidebar = (({
   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,
-    {
-      item,
-      currentPermalink
-    },
-    `${item.slug ?? item.title}`
-  )) }) });
+  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,
+  level
+}) {
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      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;
 export {

package/dist/index.js

@@ -218,31 +218,82 @@ var DocsSidebar = (({
   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,
-    {
-      item,
-      currentPermalink
-    },
-    `${item.slug ?? item.title}`
-  )) }) });
+  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,
+  level
+}) {
+  return /* @__PURE__ */ jsx2(
+    "ul",
+    {
+      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;
 
@@ -296,15 +347,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.24",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -28,11 +28,11 @@
   },
   "dependencies": {
     "hono": "^4.12.25",
-    "@riebeckite/core": "0.0.23"
+    "@riebeckite/core": "0.0.24"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.23"
+    "@riebeckite/test": "0.0.24"
   },
   "publishConfig": {
     "access": "public"