@fullstackdatasolutions/articles 0.2.1 → 0.3.0

package/README.md

@@ -171,6 +171,29 @@ hero: {
 
 ---
 
+## ArticleDetailHero
+
+`ArticleDetailHero` renders the article's featured image full-width behind the title, category tags, and metadata (date, read time, author). Use it in your `app/articles/[slug]/page.tsx` instead of building a custom hero.
+
+```tsx
+import { ArticleDetailHero } from '@fullstackdatasolutions/articles'
+
+<ArticleDetailHero
+  article={article}
+  categoryBasePath="/articles/category"
+/>
+```
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `article` | `Article` | yes | Article object returned by `getArticleMetadata` |
+| `categoryBasePath` | `string` | no | Base path for category links (e.g. `"/articles/category"`). Omit to render categories as plain text. |
+
+- Category tags are capped at 4. When an article has more than 4 categories, only the first 4 are shown.
+- All layout styles are inline so the component renders correctly regardless of whether `@source` is configured for the package.
+
+---
+
 ## Comments setup
 
 ### 1. Enable in config
@@ -234,7 +257,7 @@ JSON-LD structured data (`ArticleSchema`, `BreadcrumbSchema`, `CollectionPageSch
 | `title` | `string` | yes | Article title |
 | `excerpt` | `string` | yes | One-sentence summary for cards and meta |
 | `author` | `string` | no | Defaults to `'Andrew Blase'` |
-| `tags` | `string[]` | no | Used as categories. First tag = primary category. |
+| `tags` | `string[]` | no | Used as categories. First tag = primary category. ArticleDetailHero displays at most 4 category tags; articles with more than 4 show only the first 4 in the hero. |
 | `date` | `YYYY-MM-DD` | no | Omit to publish immediately. Future dates hide until that date. |
 | `featuredImage` | `string` | no | Filename relative to the article directory. Auto-detected if omitted. |
 

package/dist/index.cjs

@@ -71,6 +71,7 @@ var src_exports = {};
 __export(src_exports, {
   ArticleCard: () => ArticleCard,
   ArticleCategoryGrid: () => ArticleCategoryGrid,
+  ArticleDetailHero: () => ArticleDetailHero,
   ArticleSchema: () => ArticleSchema,
   ArticleSearchBar: () => ArticleSearchBar,
   ArticlesHero: () => ArticlesHero,
@@ -110,37 +111,26 @@ function ArticleCategoryGrid({ categories, pageSize = 8 }) {
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-3xl font-bold text-foreground mb-4", children: "Browse by Category" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-lg text-muted-foreground", children: "Explore our articles by topic to find the insights most relevant to your interests." })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "div",
-      {
-        className: "sm:grid-cols-4",
-        style: {
-          display: "grid",
-          gridTemplateColumns: "repeat(1, minmax(0, 1fr))",
-          gap: "1.5rem"
-        },
-        children: visible.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: `/articles/category/${cat.slug}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group overflow-hidden rounded-xl border border-border shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer bg-card", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", style: { position: "relative", height: "13rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            import_image.default,
-            {
-              src: cat.featuredImage,
-              alt: cat.name,
-              fill: true,
-              sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
-              className: "object-cover group-hover:scale-105 transition-transform duration-300"
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 text-center", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-semibold text-foreground text-base", children: cat.name }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground mt-1", children: [
-              cat.count,
-              " ",
-              cat.count === 1 ? "article" : "articles"
-            ] })
-          ] })
-        ] }) }, cat.slug))
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6", children: visible.map((cat) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_link.default, { href: `/articles/category/${cat.slug}`, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "group overflow-hidden rounded-xl border border-border shadow-sm hover:shadow-lg transition-all duration-300 cursor-pointer bg-card", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", style: { position: "relative", height: "13rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_image.default,
+        {
+          src: cat.featuredImage,
+          alt: cat.name,
+          fill: true,
+          sizes: "(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw",
+          className: "object-cover group-hover:scale-105 transition-transform duration-300"
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "p-4 text-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "font-semibold text-foreground text-base", children: cat.name }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { className: "text-sm text-muted-foreground mt-1", children: [
+          cat.count,
+          " ",
+          cat.count === 1 ? "article" : "articles"
+        ] })
+      ] })
+    ] }) }, cat.slug)) }),
     hasMore && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-10 text-center", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "button",
       {
@@ -670,10 +660,110 @@ function ArticlesPage({ config }) {
   ] });
 }
 
-// src/CategoryArticlesPage.tsx
+// src/ArticleDetailHero.tsx
 var import_image4 = __toESM(require("next/image"), 1);
 var import_link5 = __toESM(require("next/link"), 1);
+var import_lucide_react5 = require("lucide-react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
+function toSlug(cat) {
+  return cat.toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^a-z0-9-]/g, "");
+}
+function ArticleDetailHero({ article, categoryBasePath }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "section",
+    {
+      style: {
+        position: "relative",
+        height: "18rem",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          import_image4.default,
+          {
+            src: article.featuredImage,
+            alt: article.title,
+            fill: true,
+            sizes: "100vw",
+            className: "object-cover",
+            priority: true
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              inset: 0,
+              backgroundColor: "rgba(0,0,0,0.6)"
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+          "div",
+          {
+            style: {
+              position: "relative",
+              zIndex: 10,
+              textAlign: "center",
+              color: "white",
+              padding: "0 1rem",
+              maxWidth: "56rem",
+              margin: "0 auto",
+              width: "100%"
+            },
+            children: [
+              article.categories && article.categories.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { style: { display: "flex", flexWrap: "wrap", justifyContent: "center", gap: "0.5rem", marginBottom: "1rem" }, children: article.categories.slice(0, 4).map(
+                (cat) => categoryBasePath ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  import_link5.default,
+                  {
+                    href: `${categoryBasePath}/${toSlug(cat)}`,
+                    className: "inline-block bg-white/20 text-white text-sm font-medium px-3 py-1 rounded-full hover:bg-white/30 transition-colors",
+                    children: cat
+                  },
+                  cat
+                ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  "span",
+                  {
+                    className: "inline-block bg-white/20 text-white text-sm font-medium px-3 py-1 rounded-full",
+                    children: cat
+                  },
+                  cat
+                )
+              ) }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-4xl md:text-5xl font-bold mb-4", children: article.title }),
+              /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "1.5rem", fontSize: "0.875rem", color: "rgba(255,255,255,0.8)" }, children: [
+                article.date && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Calendar, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: article.date })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.Clock, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { children: article.readTime })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react5.User, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { children: [
+                    "By ",
+                    article.author
+                  ] })
+                ] })
+              ] })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/CategoryArticlesPage.tsx
+var import_image5 = __toESM(require("next/image"), 1);
+var import_link6 = __toESM(require("next/link"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function getCategoryDescription(config, slug, categoryName) {
   var _a;
   const raw = (_a = config.categoryDescriptions) == null ? void 0 : _a[slug];
@@ -689,8 +779,8 @@ function CategoryArticlesPage({ category, articles, config }) {
   const description = getCategoryDescription(config, category, categoryName);
   const pageSize = (_a = config.pageSize) != null ? _a : DEFAULT_PAGE_SIZE;
   const siteUrl = config.siteUrl.replace(/\/$/, "");
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       BreadcrumbSchema,
       {
         items: [
@@ -700,9 +790,9 @@ function CategoryArticlesPage({ category, articles, config }) {
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("section", { className: "relative h-72 md:h-96 flex items-center justify-center overflow-hidden", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-        import_image4.default,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("section", { className: "relative h-72 md:h-96 flex items-center justify-center overflow-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        import_image5.default,
         {
           src: heroImage,
           alt: categoryName,
@@ -712,24 +802,24 @@ function CategoryArticlesPage({ category, articles, config }) {
           priority: true
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute inset-0 bg-black/60" }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative z-10 text-center text-white px-4", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm font-semibold uppercase tracking-widest mb-3 opacity-80", children: "Category" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h1", { className: "text-4xl md:text-5xl font-bold mb-3", children: categoryName }),
-        description.long && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-lg opacity-90 max-w-2xl mx-auto mt-2", children: description.long }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "text-lg opacity-70 mt-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute inset-0 bg-black/60" }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative z-10 text-center text-white px-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm font-semibold uppercase tracking-widest mb-3 opacity-80", children: "Category" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h1", { className: "text-4xl md:text-5xl font-bold mb-3", children: categoryName }),
+        description.long && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-lg opacity-90 max-w-2xl mx-auto mt-2", children: description.long }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "text-lg opacity-70 mt-2", children: [
           articles.length,
           " article",
           articles.length === 1 ? "" : "s"
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("section", { className: "py-16 bg-muted/50 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "mb-8 flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_link5.default, { href: "/articles", className: "text-sm text-primary hover:underline", children: "\u2190 All Articles" }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-muted-foreground", children: description.short })
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("section", { className: "py-16 bg-muted/50 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "mb-8 flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_link6.default, { href: "/articles", className: "text-sm text-primary hover:underline", children: "\u2190 All Articles" }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-sm text-muted-foreground", children: description.short })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LatestArticles, { articles, pageSize })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LatestArticles, { articles, pageSize })
     ] }) })
   ] });
 }
@@ -740,7 +830,7 @@ var import_react7 = require("react");
 
 // src/CommentForm.tsx
 var import_react4 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var MAX_LENGTH = 2e3;
 var WARN_THRESHOLD = 1800;
 function submitLabel(submitting, parentId) {
@@ -779,8 +869,8 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
       "textarea",
       {
         value: body,
@@ -793,13 +883,13 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
         "aria-label": parentId ? "Reply text" : "Comment text"
       }
     ),
-    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
+    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
       remaining,
       " characters remaining"
     ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs text-destructive", children: error }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "submit",
@@ -808,7 +898,7 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
           children: submitLabel(submitting, parentId)
         }
       ),
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -823,7 +913,7 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
 
 // src/CommentItem.tsx
 var import_react5 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function relativeTime(iso) {
   const diff = Date.now() - new Date(iso).getTime();
   const minutes = Math.floor(diff / 6e4);
@@ -861,15 +951,15 @@ function CommentItem({
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: `${isReply ? "ml-8 border-l-2 border-border pl-4" : ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "rounded-lg bg-muted/40 p-3 space-y-1", children: comment.isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm italic text-muted-foreground", children: "Comment removed" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-sm font-medium text-foreground", children: comment.authorName }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-muted-foreground", children: relativeTime(comment.createdAt) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: `${isReply ? "ml-8 border-l-2 border-border pl-4" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "rounded-lg bg-muted/40 p-3 space-y-1", children: comment.isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm italic text-muted-foreground", children: "Comment removed" }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-medium text-foreground", children: comment.authorName }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-xs text-muted-foreground", children: relativeTime(comment.createdAt) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-foreground whitespace-pre-wrap break-words", children: comment.body }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-3 pt-1", children: [
-        canReply && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-foreground whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex gap-3 pt-1", children: [
+        canReply && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             onClick: () => setShowReplyForm((v) => !v),
@@ -877,7 +967,7 @@ function CommentItem({
             children: showReplyForm ? "Cancel" : "Reply"
           }
         ),
-        canDelete && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        canDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
           "button",
           {
             onClick: handleDelete,
@@ -888,7 +978,7 @@ function CommentItem({
         )
       ] })
     ] }) }),
-    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       CommentForm,
       {
         articleSlug,
@@ -900,7 +990,7 @@ function CommentItem({
         onCancel: () => setShowReplyForm(false)
       }
     ) }),
-    replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "mt-2 space-y-2", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-2 space-y-2", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       CommentItem,
       {
         comment: __spreadProps(__spreadValues({}, reply), { replies: [] }),
@@ -915,7 +1005,7 @@ function CommentItem({
 }
 
 // src/CommentThread.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function CommentThread({
   comments,
   articleSlug,
@@ -923,9 +1013,9 @@ function CommentThread({
   onRefresh
 }) {
   if (comments.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm text-muted-foreground text-center py-6", children: "No comments yet. Be the first to share your thoughts." });
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground text-center py-6", children: "No comments yet. Be the first to share your thoughts." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     CommentItem,
     {
       comment,
@@ -938,7 +1028,7 @@ function CommentThread({
 }
 
 // src/CommentsSection.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CommentsSection({ articleSlug, config }) {
   var _a, _b, _c, _d, _e, _f;
   const { data: session, status } = (0, import_react6.useSession)();
@@ -970,10 +1060,10 @@ function CommentsSection({ articleSlug, config }) {
   if (!enabled) return null;
   const count = comments.length;
   const label = count === 1 ? "1 comment" : `${count} comments`;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { "aria-label": "Comments", className: "mt-12 pt-8 border-t border-border space-y-6", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h2", { className: "text-xl font-semibold text-foreground", children: loading ? "Comments" : label }),
-    status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CommentForm, { articleSlug, onSuccess: fetchComments }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { "aria-label": "Comments", className: "mt-12 pt-8 border-t border-border space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "text-xl font-semibold text-foreground", children: loading ? "Comments" : label }),
+    status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CommentForm, { articleSlug, onSuccess: fetchComments }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "button",
         {
           onClick: () => (0, import_react6.signIn)(),
@@ -984,8 +1074,8 @@ function CommentsSection({ articleSlug, config }) {
       " ",
       "to join the discussion."
     ] }),
-    fetchError && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-destructive", children: fetchError }),
-    loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading comments\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    fetchError && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-destructive", children: fetchError }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading comments\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       CommentThread,
       {
         comments,
@@ -1000,6 +1090,7 @@ function CommentsSection({ articleSlug, config }) {
 0 && (module.exports = {
   ArticleCard,
   ArticleCategoryGrid,
+  ArticleDetailHero,
   ArticleSchema,
   ArticleSearchBar,
   ArticlesHero,