@fullstackdatasolutions/articles 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-08-12
+
+### Added
+
+- **`Breadcrumb` accepts `containerClassName`.** New optional prop, default `'max-w-7xl'` (unchanged from before), applied to the breadcrumb `<ol>` in place of the previously hardcoded value. Lets a consuming site align the breadcrumb bar's content width to its own reading column instead of the package's fixed default. Found on theroleplayersguild.com, where the breadcrumb's `max-w-7xl` sat visibly wider than the article body's `max-w-3xl` column beneath it.
+
+### Fixed
+
+- **`ArticleDetailHero` byline never rendered the configured author avatar.** It always showed a generic user icon even when a single `authors[]` entry had a real `avatar` set (and even though `RelatedArticlesSection`/`ArticleCard` byline avatars worked correctly from the same data). Now resolves and renders the avatar image for the single-author case, matching the existing `ArticleCard` pattern; falls back to the icon when no avatar is set or multiple authors are configured, so existing output is unchanged unless a consumer already had `authors[].avatar` configured.
+
 ## [1.1.0] - 2026-08-09
 
 ### Added

package/README.md

@@ -194,6 +194,7 @@ export default async function Page({ params }: ArticlePageProps) {
         article={article}
         authors={authors}
         categoryBasePath="/articles/category"
+        config={siteConfig}
       />
       <ArticleViewTracker article={article} config={siteConfig} />
       {siteConfig.showToc !== false && article.toc && article.toc.length > 0 && (

package/dist/index.cjs

@@ -265,6 +265,7 @@ function getDisplayItems(items) {
 function Breadcrumb({
   items,
   className = "",
+  containerClassName = "max-w-7xl",
   showSchema = true,
   separator = ">"
 }) {
@@ -276,7 +277,7 @@ function Breadcrumb({
       {
         "aria-label": "Breadcrumb",
         className: `border-b border-border bg-background/80 px-4 py-3 text-sm text-muted-foreground ${className}`,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: "mx-auto flex max-w-7xl items-center gap-2 overflow-hidden", children: displayItems.map((item, index) => {
+        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ol", { className: `mx-auto flex items-center gap-2 overflow-hidden ${containerClassName}`, children: displayItems.map((item, index) => {
           const isLast = index === displayItems.length - 1;
           const key = `${item.name}-${index}`;
           return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { className: "flex min-w-0 items-center gap-2", children: [
@@ -1155,6 +1156,15 @@ var import_jsx_runtime13 = require("react/jsx-runtime");
 function toSlug(cat) {
   return cat.toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^a-z0-9-]/g, "");
 }
+function resolveAvatarUrl(author, config) {
+  if (!author.avatar) return null;
+  if (author.avatar.startsWith("http://") || author.avatar.startsWith("https://")) {
+    return author.avatar;
+  }
+  if (!(config == null ? void 0 : config.siteUrl)) return null;
+  const siteUrl = config.siteUrl.replace(/\/$/, "");
+  return `${siteUrl}/articles/authors/${author.slug}/${author.avatar.replace(/^\/+/, "")}`;
+}
 function ArticleDetailHero({
   article,
   categoryBasePath = "/articles/category",
@@ -1272,24 +1282,36 @@ function ArticleDetailHero({
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.Clock, { className: "h-4 w-4" }),
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: article.readTime })
                     ] }),
-                    showConfiguredAuthors && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: "h-4 w-4" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
-                        "By",
-                        " ",
-                        authors.map((author, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.Fragment, { children: [
-                          index > 0 && ", ",
-                          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
-                            import_link8.default,
-                            {
-                              href: `/articles/authors/${author.slug}`,
-                              className: "font-medium text-white underline-offset-4 hover:underline",
-                              children: author.name
-                            }
-                          )
-                        ] }, author.slug))
-                      ] })
-                    ] }),
+                    showConfiguredAuthors && (() => {
+                      const singleAvatarUrl = authors.length === 1 ? resolveAvatarUrl(authors[0], config) : null;
+                      return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                        singleAvatarUrl ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                          import_image5.default,
+                          {
+                            src: singleAvatarUrl,
+                            alt: "",
+                            width: 20,
+                            height: 20,
+                            className: "h-5 w-5 rounded-full object-cover"
+                          }
+                        ) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: "h-4 w-4" }),
+                        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+                          "By",
+                          " ",
+                          authors.map((author, index) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react4.Fragment, { children: [
+                            index > 0 && ", ",
+                            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                              import_link8.default,
+                              {
+                                href: `/articles/authors/${author.slug}`,
+                                className: "font-medium text-white underline-offset-4 hover:underline",
+                                children: author.name
+                              }
+                            )
+                          ] }, author.slug))
+                        ] })
+                      ] });
+                    })(),
                     showLegacyAuthor && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.User, { className: "h-4 w-4" }),
                       /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [