@riebeckite/plugin-breadcrumbs 0.0.21 → 0.0.23

package/README.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-breadcrumbs
 
+<!-- Generated from docs/docs/plugins/breadcrumbs.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 Build-time breadcrumb navigation derived from the note's slug hierarchy. For
 every published entry the plugin inserts a `<nav>` at the top of the rendered
 HTML and enriches the page with a hierarchical BreadcrumbList JSON-LD schema.
@@ -68,25 +70,9 @@ breadcrumbs({
 });
 ```
 
-## Output
-
-```html
-<nav class="rb-breadcrumbs" data-breadcrumbs aria-label="Breadcrumbs">
-  <ol>
-    <li class="rb-breadcrumbs__item">
-      <a class="rb-breadcrumbs__link" href="/">Blog</a>
-      <span class="rb-breadcrumbs__separator" aria-hidden="true">/</span>
-    </li>
-    <li class="rb-breadcrumbs__item">
-      <a class="rb-breadcrumbs__link" href="/folder">Folder</a>
-      <span class="rb-breadcrumbs__separator" aria-hidden="true">/</span>
-    </li>
-    <li class="rb-breadcrumbs__item">
-      <span class="rb-breadcrumbs__current" aria-current="page">Note</span>
-    </li>
-  </ol>
-</nav>
-```
+## Display
+
+Breadcrumbs are rendered above the article on every eligible page. This page shows the live navigation for its own path.
 
 ## Style
 
@@ -114,4 +100,4 @@ import "@riebeckite/plugin-breadcrumbs/style.css";
 
 ## See also
 
-- [Plugin guide](../../../docs/docs/reference/plugin-api.md)
+- [Plugin guide](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.md)

package/README_ja.md

@@ -1,5 +1,7 @@
 # @riebeckite/plugin-breadcrumbs
 
+<!-- Generated from docs/docs/plugins/breadcrumbs.ja.md. Edit the canonical documentation in docs/docs/plugins and run `pnpm docs:sync`. -->
+
 ノートのスラッグ階層からパンくずナビゲーションをビルド時に生成する
 プラグインです。公開対象の各エントリについて、記事上部に `<nav>` を挿入し、
 階層構造を反映した BreadcrumbList の JSON-LD も出力します。クライアント側
@@ -67,25 +69,9 @@ breadcrumbs({
 });
 ```
 
-## 出力
-
-```html
-<nav class="rb-breadcrumbs" data-breadcrumbs aria-label="Breadcrumbs">
-  <ol>
-    <li class="rb-breadcrumbs__item">
-      <a class="rb-breadcrumbs__link" href="/">ブログ</a>
-      <span class="rb-breadcrumbs__separator" aria-hidden="true">/</span>
-    </li>
-    <li class="rb-breadcrumbs__item">
-      <a class="rb-breadcrumbs__link" href="/folder">フォルダ</a>
-      <span class="rb-breadcrumbs__separator" aria-hidden="true">/</span>
-    </li>
-    <li class="rb-breadcrumbs__item">
-      <span class="rb-breadcrumbs__current" aria-current="page">ノート</span>
-    </li>
-  </ol>
-</nav>
-```
+## 表示
+
+パンくずは対象ページの記事上部に描画されます。このページでも、自身のパスに対応するナビゲーションを確認できます。
 
 ## スタイル
 
@@ -113,4 +99,4 @@ import "@riebeckite/plugin-breadcrumbs/style.css";
 
 ## 関連リンク
 
-- [プラグイン API](../../../docs/docs/reference/plugin-api.ja.md)
+- [プラグイン API](https://github.com/Rerurate514/riebeckite/blob/main/docs/docs/reference/plugin-api.ja.md)

package/dist/components/breadcrumbs.d.ts

@@ -0,0 +1,9 @@
+import type { BreadcrumbItem } from "../src/types.js";
+export type BreadcrumbsProps = {
+    items: readonly BreadcrumbItem[];
+    ariaLabel?: string;
+    className?: string;
+    separator?: string;
+};
+declare const Breadcrumbs: ({ items, ariaLabel, className, separator, }: Readonly<BreadcrumbsProps>) => import("hono/jsx/jsx-dev-runtime").JSX.Element;
+export default Breadcrumbs;

package/dist/components/breadcrumbs.js

@@ -0,0 +1,18 @@
+// components/breadcrumbs.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+var Breadcrumbs = (({
+  items,
+  ariaLabel = "Breadcrumb",
+  className = "rb-breadcrumbs",
+  separator = "/"
+}) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { class: className, "data-breadcrumbs": true, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { class: `${className}__item`, children: [
+    index === items.length - 1 ? /* @__PURE__ */ jsx("span", { class: `${className}__current`, "aria-current": "page", children: item.name }) : item.url ? /* @__PURE__ */ jsx("a", { class: `${className}__link`, href: item.url, children: item.name }) : /* @__PURE__ */ jsx("span", { class: `${className}__text`, children: item.name }),
+    index < items.length - 1 ? /* @__PURE__ */ jsx("span", { class: `${className}__separator`, "aria-hidden": "true", children: separator }) : null
+  ] }, `${item.name}-${index}`)) }) });
+});
+var breadcrumbs_default = Breadcrumbs;
+export {
+  breadcrumbs_default as default
+};

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 import type { BreadcrumbsOptions } from "./src/types.js";
-export { buildBreadcrumbItems } from "./src/breadcrumbs.js";
+export type { BreadcrumbsProps } from "./components/breadcrumbs.js";
+export { default as Breadcrumbs } from "./components/breadcrumbs.js";
+export { buildBreadcrumbItems, getBreadcrumbs, } from "./src/breadcrumbs.js";
 export { resolveBreadcrumbsOptions } from "./src/options.js";
 export { BREADCRUMBS_ATTRIBUTE, buildBreadcrumbHeadTag, buildBreadcrumbJsonLd, hasBreadcrumbHeadTag, renderBreadcrumbNav, } from "./src/render.js";
 export type { BreadcrumbItem, BreadcrumbsOptions, ResolvedBreadcrumbsOptions, } from "./src/types.js";

package/dist/index.js

@@ -1,6 +1,5 @@
 // index.ts
 import {
-  appendContentBodySlot,
   createStyleAsset,
   definePlugin
 } from "@riebeckite/core";
@@ -29,6 +28,24 @@ function buildBreadcrumbItems(args) {
   });
   return items;
 }
+var getBreadcrumbs = ({ view, entry, homeLabel = "" }) => {
+  if (!view.findRoutableBySlug(entry.slug)) return [];
+  const segments = publicPathSegments(entry.permalink);
+  const items = [];
+  if (homeLabel) pushBreadcrumbItem(items, { name: homeLabel, url: "/" });
+  for (let index = 0; index < segments.length - 1; index += 1) {
+    const pathname = `/${segments.slice(0, index + 1).join("/")}`;
+    const target = view.discoverableEntries.find(
+      (candidate) => candidate.permalink === pathname
+    );
+    pushBreadcrumbItem(items, {
+      name: target?.title || titleCaseSegment(segments[index]),
+      ...target ? { url: target.permalink } : {}
+    });
+  }
+  pushBreadcrumbItem(items, { name: entry.title, url: entry.permalink });
+  return items;
+};
 function pushBreadcrumbItem(items, item) {
   const previous = items.at(-1);
   if (previous?.name === item.name) {
@@ -130,6 +147,22 @@ function hasBreadcrumbListType(value) {
   return hasBreadcrumbListType(record["@graph"]);
 }
 
+// components/breadcrumbs.tsx
+import { jsx, jsxs } from "hono/jsx/jsx-runtime";
+var Breadcrumbs = (({
+  items,
+  ariaLabel = "Breadcrumb",
+  className = "rb-breadcrumbs",
+  separator = "/"
+}) => {
+  if (items.length === 0) return null;
+  return /* @__PURE__ */ jsx("nav", { class: className, "data-breadcrumbs": true, "aria-label": ariaLabel, children: /* @__PURE__ */ jsx("ol", { children: items.map((item, index) => /* @__PURE__ */ jsxs("li", { class: `${className}__item`, children: [
+    index === items.length - 1 ? /* @__PURE__ */ jsx("span", { class: `${className}__current`, "aria-current": "page", children: item.name }) : item.url ? /* @__PURE__ */ jsx("a", { class: `${className}__link`, href: item.url, children: item.name }) : /* @__PURE__ */ jsx("span", { class: `${className}__text`, children: item.name }),
+    index < items.length - 1 ? /* @__PURE__ */ jsx("span", { class: `${className}__separator`, "aria-hidden": "true", children: separator }) : null
+  ] }, `${item.name}-${index}`)) }) });
+});
+var breadcrumbs_default = Breadcrumbs;
+
 // index.ts
 var BREADCRUMBS_PLUGIN_NAME = "breadcrumbs";
 function breadcrumbs(options = {}) {
@@ -141,7 +174,7 @@ function breadcrumbs(options = {}) {
       version: "breadcrumbs-v1",
       dependencyMode: "none"
     },
-    outputDependencies: [{ type: "global" }],
+    contentOutputDependencies: [{ type: "global" }],
     options,
     validateOptions: validateBreadcrumbsOptions,
     onManifestCreated: (context) => {
@@ -155,10 +188,6 @@ function breadcrumbs(options = {}) {
           homeLabel: resolved.homeLabel
         });
         if (items.length === 0) continue;
-        const nav = renderBreadcrumbNav(items, resolved);
-        if (!hasSlotFragment(entry.bodySlots?.["article.header"], nav)) {
-          appendContentBodySlot(entry, "article.header", nav);
-        }
         if (resolved.jsonLd) {
           const schema = buildBreadcrumbJsonLd(config, items);
           if (!hasBreadcrumbHeadTag(entry.headTags)) {
@@ -170,17 +199,15 @@ function breadcrumbs(options = {}) {
         }
       }
     },
-    assets: [createStyleAsset(BREADCRUMBS_PLUGIN_NAME)]
+    assets: [
+      createStyleAsset(
+        BREADCRUMBS_PLUGIN_NAME,
+        "@riebeckite/plugin-breadcrumbs/style.css"
+      )
+    ]
   });
 }
 var breadcrumbsPlugin = breadcrumbs;
-function hasSlotFragment(slot, fragment) {
-  return slot === fragment || slot?.startsWith(`${fragment}
-`) || slot?.endsWith(`
-${fragment}`) || slot?.includes(`
-${fragment}
-`) || false;
-}
 function validateBreadcrumbsOptions(options) {
   if (!options) return [];
   const issues = [];
@@ -194,19 +221,23 @@ function validateBreadcrumbsOptions(options) {
   assertNonEmptyString("className");
   assertNonEmptyString("ariaLabel");
   assertNonEmptyString("separator");
-  if (options.jsonLd !== void 0 && typeof options.jsonLd !== "boolean") {
-    issues.push({ path: "jsonLd", message: "Expected a boolean." });
+  for (const key of ["jsonLd"]) {
+    if (options[key] !== void 0 && typeof options[key] !== "boolean") {
+      issues.push({ path: key, message: "Expected a boolean." });
+    }
   }
   return issues;
 }
 export {
   BREADCRUMBS_ATTRIBUTE,
   BREADCRUMBS_PLUGIN_NAME,
+  breadcrumbs_default as Breadcrumbs,
   breadcrumbs,
   breadcrumbsPlugin,
   buildBreadcrumbHeadTag,
   buildBreadcrumbItems,
   buildBreadcrumbJsonLd,
+  getBreadcrumbs,
   hasBreadcrumbHeadTag,
   renderBreadcrumbNav,
   resolveBreadcrumbsOptions

package/dist/src/breadcrumbs.d.ts

@@ -1,4 +1,4 @@
-import type { ContentManifest, ContentManifestEntry, ResolvedRiebeckiteConfig } from "@riebeckite/core";
+import type { ContentManifest, ContentManifestEntry, PluginDataHelper, PublicContentEntry, PublicContentView, ResolvedRiebeckiteConfig } from "@riebeckite/core";
 import type { BreadcrumbItem } from "./types.js";
 export type BuildBreadcrumbItemsArgs = {
     manifest: ContentManifest;
@@ -7,3 +7,8 @@ export type BuildBreadcrumbItemsArgs = {
     homeLabel: string;
 };
 export declare function buildBreadcrumbItems(args: BuildBreadcrumbItemsArgs): BreadcrumbItem[];
+export declare const getBreadcrumbs: PluginDataHelper<{
+    view: PublicContentView;
+    entry: PublicContentEntry;
+    homeLabel?: string;
+}, readonly BreadcrumbItem[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@riebeckite/plugin-breadcrumbs",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.js",
@@ -12,14 +12,21 @@
       "source": "./index.ts",
       "default": "./dist/index.js"
     },
+    "./components": {
+      "types": "./dist/components/breadcrumbs.d.ts",
+      "import": "./dist/components/breadcrumbs.js",
+      "source": "./components/breadcrumbs.tsx",
+      "default": "./dist/components/breadcrumbs.js"
+    },
     "./style.css": "./style.css"
   },
   "dependencies": {
-    "@riebeckite/core": "0.0.21"
+    "hono": "^4.12.25",
+    "@riebeckite/core": "0.0.23"
   },
   "devDependencies": {
     "tsx": "^4.22.4",
-    "@riebeckite/test": "0.0.21"
+    "@riebeckite/test": "0.0.23"
   },
   "publishConfig": {
     "access": "public"