@fullstackdatasolutions/articles 0.3.0 → 0.4.2

package/dist/index.cjs

@@ -72,8 +72,10 @@ __export(src_exports, {
   ArticleCard: () => ArticleCard,
   ArticleCategoryGrid: () => ArticleCategoryGrid,
   ArticleDetailHero: () => ArticleDetailHero,
+  ArticleNavigation: () => ArticleNavigation,
   ArticleSchema: () => ArticleSchema,
   ArticleSearchBar: () => ArticleSearchBar,
+  ArticleSocialShare: () => ArticleSocialShare,
   ArticlesHero: () => ArticlesHero,
   ArticlesPage: () => ArticlesPage,
   BreadcrumbSchema: () => BreadcrumbSchema,
@@ -668,7 +670,11 @@ 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 }) {
+function ArticleDetailHero({
+  article,
+  categoryBasePath = "/articles/category",
+  showDate = false
+}) {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "section",
     {
@@ -689,6 +695,7 @@ function ArticleDetailHero({ article, categoryBasePath }) {
             fill: true,
             sizes: "100vw",
             className: "object-cover",
+            style: { objectFit: "cover" },
             priority: true
           }
         ),
@@ -716,42 +723,67 @@ function ArticleDetailHero({ article, categoryBasePath }) {
               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
+              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"
                   },
-                  cat
-                )
-              ) }),
+                  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
-                  ] })
-                ] })
-              ] })
+              /* @__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: [
+                    showDate && 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
+                      ] })
+                    ] })
+                  ]
+                }
+              )
             ]
           }
         )
@@ -790,30 +822,55 @@ function CategoryArticlesPage({ category, articles, config }) {
         ]
       }
     ),
-    /* @__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,
-          fill: true,
-          sizes: "100vw",
-          className: "object-cover",
-          priority: true
-        }
-      ),
-      /* @__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_runtime11.jsxs)(
+      "section",
+      {
+        style: {
+          position: "relative",
+          height: "20rem",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          overflow: "hidden"
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            import_image5.default,
+            {
+              src: heroImage,
+              alt: categoryName,
+              fill: true,
+              sizes: "100vw",
+              style: { objectFit: "cover" },
+              priority: true
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { style: { position: "absolute", inset: 0, backgroundColor: "rgba(0,0,0,0.6)" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "div",
+            {
+              style: {
+                position: "relative",
+                zIndex: 10,
+                textAlign: "center",
+                color: "white",
+                padding: "0 1rem"
+              },
+              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_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" }),
@@ -824,13 +881,136 @@ function CategoryArticlesPage({ category, articles, config }) {
   ] });
 }
 
+// src/ArticleSocialShare.tsx
+var import_react4 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function ArticleSocialShare({ title, url, excerpt, shareMessage }) {
+  const [copied, setCopied] = (0, import_react4.useState)(false);
+  const encodedTitle = encodeURIComponent(title);
+  const encodedUrl = encodeURIComponent(url);
+  const encodedExcerpt = encodeURIComponent(excerpt || "");
+  const shareLinks = {
+    linkedin: `https://www.linkedin.com/sharing/share-offsite/?url=${encodedUrl}`,
+    facebook: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`,
+    twitter: `https://twitter.com/intent/tweet?text=${encodedTitle}&url=${encodedUrl}`,
+    reddit: `https://reddit.com/submit?url=${encodedUrl}&title=${encodedTitle}`,
+    email: `mailto:?subject=${encodedTitle}&body=${encodedExcerpt}%0A%0A${encodedUrl}`,
+    whatsapp: `https://wa.me/?text=${encodedTitle}%20${encodedUrl}`,
+    telegram: `https://t.me/share/url?url=${encodedUrl}&text=${encodedTitle}`
+  };
+  const copyToClipboard = () => __async(this, null, function* () {
+    try {
+      yield navigator.clipboard.writeText(url);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    } catch (e) {
+    }
+  });
+  const openShareWindow = (shareUrl) => {
+    window.open(shareUrl, "_blank", "width=600,height=400,scrollbars=yes,resizable=yes");
+  };
+  const btnClass = "inline-flex items-center gap-2 px-3 py-1.5 text-sm rounded-md border border-border bg-background text-foreground hover:bg-primary/10 hover:border-primary hover:text-primary transition-colors cursor-pointer";
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "border-t border-border pt-8 mt-8", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Share2, { className: "h-5 w-5 text-muted-foreground" }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-semibold text-foreground", children: "Share this article" })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.linkedin), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Users, { className: "h-4 w-4" }),
+        "LinkedIn"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.facebook), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs font-bold", children: "f" }),
+        " Facebook"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.twitter), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.MessageCircle, { className: "h-4 w-4" }),
+        "Twitter"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.reddit), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.FileText, { className: "h-4 w-4" }),
+        "Reddit"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.whatsapp), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.MessageCircle, { className: "h-4 w-4" }),
+        "WhatsApp"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: () => openShareWindow(shareLinks.telegram), children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.MessageCircle, { className: "h-4 w-4" }),
+        "Telegram"
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+        "button",
+        {
+          className: btnClass,
+          onClick: () => {
+            globalThis.location.href = shareLinks.email;
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Mail, { className: "h-4 w-4" }),
+            "Email"
+          ]
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("button", { className: btnClass, onClick: copyToClipboard, children: [
+        copied ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Check, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Copy, { className: "h-4 w-4" }),
+        copied ? "Copied!" : "Copy Link"
+      ] })
+    ] }),
+    shareMessage && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-muted-foreground mt-3", children: shareMessage })
+  ] });
+}
+
+// src/ArticleNavigation.tsx
+var import_link7 = __toESM(require("next/link"), 1);
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function truncateTitle(title, maxLength = 60) {
+  return title.length > maxLength ? `${title.substring(0, maxLength)}...` : title;
+}
+function ArticleNavigation({ previous, next, basePath }) {
+  if (!previous && !next) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("nav", { className: "mt-12 pt-8 border-t border-border", "aria-label": "Article navigation", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex justify-between gap-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-1 min-w-0", children: previous && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_link7.default,
+      {
+        href: `${basePath}/${previous.slug}`,
+        className: "group flex items-center gap-3 p-4 rounded-lg border border-border hover:border-primary/20 hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronLeft, { className: "h-5 w-5 text-muted-foreground group-hover:text-primary shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-sm text-muted-foreground mb-1", children: "Previous Article" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "font-medium text-foreground truncate", title: previous.title, children: truncateTitle(previous.title) })
+          ] })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex-1 min-w-0", children: next && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_link7.default,
+      {
+        href: `${basePath}/${next.slug}`,
+        className: "group flex items-center justify-end gap-3 p-4 rounded-lg border border-border hover:border-primary/20 hover:bg-muted/50 transition-colors",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "min-w-0 flex-1 text-right", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "text-sm text-muted-foreground mb-1", children: "Next Article" }),
+            /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "font-medium text-foreground truncate", title: next.title, children: truncateTitle(next.title) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { className: "h-5 w-5 text-muted-foreground group-hover:text-primary shrink-0" })
+        ]
+      }
+    ) })
+  ] }) });
+}
+
 // src/CommentsSection.tsx
-var import_react6 = require("next-auth/react");
-var import_react7 = require("react");
+var import_react7 = require("next-auth/react");
+var import_react8 = require("react");
 
 // src/CommentForm.tsx
-var import_react4 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react5 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var MAX_LENGTH = 2e3;
 var WARN_THRESHOLD = 1800;
 function submitLabel(submitting, parentId) {
@@ -838,9 +1018,9 @@ function submitLabel(submitting, parentId) {
   return parentId ? "Reply" : "Post comment";
 }
 function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
-  const [body, setBody] = (0, import_react4.useState)("");
-  const [submitting, setSubmitting] = (0, import_react4.useState)(false);
-  const [error, setError] = (0, import_react4.useState)(null);
+  const [body, setBody] = (0, import_react5.useState)("");
+  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
+  const [error, setError] = (0, import_react5.useState)(null);
   const remaining = MAX_LENGTH - body.length;
   function handleSubmit(e) {
     return __async(this, null, function* () {
@@ -869,8 +1049,8 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
       "textarea",
       {
         value: body,
@@ -883,13 +1063,13 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
         "aria-label": parentId ? "Reply text" : "Comment text"
       }
     ),
-    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
+    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
       remaining,
       " characters remaining"
     ] }),
-    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)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "submit",
@@ -898,7 +1078,7 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
           children: submitLabel(submitting, parentId)
         }
       ),
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
         "button",
         {
           type: "button",
@@ -912,8 +1092,8 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
 }
 
 // src/CommentItem.tsx
-var import_react5 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function relativeTime(iso) {
   const diff = Date.now() - new Date(iso).getTime();
   const minutes = Math.floor(diff / 6e4);
@@ -934,8 +1114,8 @@ function CommentItem({
   isReply = false,
   onRefresh
 }) {
-  const [showReplyForm, setShowReplyForm] = (0, import_react5.useState)(false);
-  const [deleting, setDeleting] = (0, import_react5.useState)(false);
+  const [showReplyForm, setShowReplyForm] = (0, import_react6.useState)(false);
+  const [deleting, setDeleting] = (0, import_react6.useState)(false);
   const replies = "replies" in comment ? comment.replies : [];
   const canReply = !isReply && !!currentUserId && !comment.isDeleted;
   const canDelete = !!currentUserId && currentUserId === comment.authorId && !comment.isDeleted;
@@ -951,15 +1131,15 @@ function CommentItem({
       }
     });
   }
-  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) })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: `${isReply ? "ml-8 border-l-2 border-border pl-4" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "rounded-lg bg-muted/40 p-3 space-y-1", children: comment.isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm italic text-muted-foreground", children: "Comment removed" }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-sm font-medium text-foreground", children: comment.authorName }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-muted-foreground", children: relativeTime(comment.createdAt) })
       ] }),
-      /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-foreground whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex gap-3 pt-1", children: [
+        canReply && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             onClick: () => setShowReplyForm((v) => !v),
@@ -967,7 +1147,7 @@ function CommentItem({
             children: showReplyForm ? "Cancel" : "Reply"
           }
         ),
-        canDelete && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        canDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "button",
           {
             onClick: handleDelete,
@@ -978,7 +1158,7 @@ function CommentItem({
         )
       ] })
     ] }) }),
-    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       CommentForm,
       {
         articleSlug,
@@ -990,7 +1170,7 @@ function CommentItem({
         onCancel: () => setShowReplyForm(false)
       }
     ) }),
-    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)(
+    replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 space-y-2", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       CommentItem,
       {
         comment: __spreadProps(__spreadValues({}, reply), { replies: [] }),
@@ -1005,7 +1185,7 @@ function CommentItem({
 }
 
 // src/CommentThread.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function CommentThread({
   comments,
   articleSlug,
@@ -1013,9 +1193,9 @@ function CommentThread({
   onRefresh
 }) {
   if (comments.length === 0) {
-    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_runtime16.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)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     CommentItem,
     {
       comment,
@@ -1028,17 +1208,17 @@ function CommentThread({
 }
 
 // src/CommentsSection.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function CommentsSection({ articleSlug, config }) {
   var _a, _b, _c, _d, _e, _f;
-  const { data: session, status } = (0, import_react6.useSession)();
-  const [comments, setComments] = (0, import_react7.useState)([]);
-  const [loading, setLoading] = (0, import_react7.useState)(true);
-  const [fetchError, setFetchError] = (0, import_react7.useState)(null);
+  const { data: session, status } = (0, import_react7.useSession)();
+  const [comments, setComments] = (0, import_react8.useState)([]);
+  const [loading, setLoading] = (0, import_react8.useState)(true);
+  const [fetchError, setFetchError] = (0, import_react8.useState)(null);
   const perArticleEnabled = (_b = (_a = config.perArticleOverride) == null ? void 0 : _a[articleSlug]) != null ? _b : true;
   const enabled = config.enabled && perArticleEnabled;
   const currentUserId = (_f = (_e = (_c = session == null ? void 0 : session.user) == null ? void 0 : _c.email) != null ? _e : (_d = session == null ? void 0 : session.user) == null ? void 0 : _d.name) != null ? _f : void 0;
-  const fetchComments = (0, import_react7.useCallback)(() => __async(this, null, function* () {
+  const fetchComments = (0, import_react8.useCallback)(() => __async(this, null, function* () {
     setLoading(true);
     setFetchError(null);
     try {
@@ -1052,7 +1232,7 @@ function CommentsSection({ articleSlug, config }) {
       setLoading(false);
     }
   }), [articleSlug]);
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (enabled) {
       fetchComments().catch(() => void 0);
     }
@@ -1060,13 +1240,13 @@ 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_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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("section", { "aria-label": "Comments", className: "mt-12 pt-8 border-t border-border space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("h2", { className: "text-xl font-semibold text-foreground", children: loading ? "Comments" : label }),
+    status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CommentForm, { articleSlug, onSuccess: fetchComments }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
         "button",
         {
-          onClick: () => (0, import_react6.signIn)(),
+          onClick: () => (0, import_react7.signIn)(),
           className: "text-primary underline hover:no-underline focus:outline-none",
           children: "Sign in"
         }
@@ -1074,8 +1254,8 @@ function CommentsSection({ articleSlug, config }) {
       " ",
       "to join the discussion."
     ] }),
-    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)(
+    fetchError && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-destructive", children: fetchError }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading comments\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CommentThread,
       {
         comments,
@@ -1091,8 +1271,10 @@ function CommentsSection({ articleSlug, config }) {
   ArticleCard,
   ArticleCategoryGrid,
   ArticleDetailHero,
+  ArticleNavigation,
   ArticleSchema,
   ArticleSearchBar,
+  ArticleSocialShare,
   ArticlesHero,
   ArticlesPage,
   BreadcrumbSchema,