@riebeckite/plugin-breadcrumbs 0.0.24 → 0.0.26

package/dist/components/breadcrumbs.d.ts

@@ -1,9 +1,9 @@
 import type { BreadcrumbItem } from "../src/types.js";
 export type BreadcrumbsProps = {
-    items: readonly BreadcrumbItem[];
+    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;
+declare const Breadcrumbs: ({ items: explicitItems, ariaLabel, className, separator, }: Readonly<BreadcrumbsProps>) => Promise<import("hono/utils/html").HtmlEscapedString>;
 export default Breadcrumbs;

package/dist/components/breadcrumbs.js

@@ -1,12 +1,59 @@
+// components/breadcrumbs.tsx
+import { useArticleContext, useSiteContext } from "@riebeckite/ui";
+import { html } from "hono/html";
+
+// src/breadcrumbs.ts
+import { resolvePublicFolderLocation } from "@riebeckite/core";
+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) {
+    items[items.length - 1] = item;
+    return;
+  }
+  items.push(item);
+}
+function publicPathSegments(permalink) {
+  return permalink.split("/").filter(Boolean);
+}
+function titleCaseSegment(segment) {
+  return segment.length === 0 ? segment : segment.charAt(0).toUpperCase() + segment.slice(1);
+}
+
 // components/breadcrumbs.tsx
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-var Breadcrumbs = (({
-  items,
+var Breadcrumbs = (async ({
+  items: explicitItems,
   ariaLabel = "Breadcrumb",
   className = "rb-breadcrumbs",
   separator = "/"
 }) => {
-  if (items.length === 0) return null;
+  const site = useSiteContext();
+  const article = useArticleContext();
+  const items = explicitItems ?? (site && article?.entry ? await getBreadcrumbs({
+    view: site.view,
+    entry: article.entry,
+    homeLabel: site.config.site.title
+  }) : void 0);
+  if (!items) return html``;
+  if (items.length === 0) return html``;
   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

package/dist/index.js

@@ -148,14 +148,24 @@ function hasBreadcrumbListType(value) {
 }
 
 // components/breadcrumbs.tsx
+import { useArticleContext, useSiteContext } from "@riebeckite/ui";
+import { html } from "hono/html";
 import { jsx, jsxs } from "hono/jsx/jsx-runtime";
-var Breadcrumbs = (({
-  items,
+var Breadcrumbs = (async ({
+  items: explicitItems,
   ariaLabel = "Breadcrumb",
   className = "rb-breadcrumbs",
   separator = "/"
 }) => {
-  if (items.length === 0) return null;
+  const site = useSiteContext();
+  const article = useArticleContext();
+  const items = explicitItems ?? (site && article?.entry ? await getBreadcrumbs({
+    view: site.view,
+    entry: article.entry,
+    homeLabel: site.config.site.title
+  }) : void 0);
+  if (!items) return html``;
+  if (items.length === 0) return html``;
   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

package/package.json

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