@fullstackdatasolutions/articles 0.4.3 → 0.5.1

package/dist/index.cjs

@@ -73,9 +73,11 @@ __export(src_exports, {
   ArticleCategoryGrid: () => ArticleCategoryGrid,
   ArticleDetailHero: () => ArticleDetailHero,
   ArticleNavigation: () => ArticleNavigation,
+  ArticleSEO: () => ArticleSEO,
   ArticleSchema: () => ArticleSchema,
   ArticleSearchBar: () => ArticleSearchBar,
   ArticleSocialShare: () => ArticleSocialShare,
+  ArticleTOC: () => ArticleTOC,
   ArticlesHero: () => ArticlesHero,
   ArticlesPage: () => ArticlesPage,
   BreadcrumbSchema: () => BreadcrumbSchema,
@@ -88,9 +90,11 @@ __export(src_exports, {
   DEFAULT_CATEGORIES_PAGE_SIZE: () => DEFAULT_CATEGORIES_PAGE_SIZE,
   DEFAULT_LAYOUT: () => DEFAULT_LAYOUT,
   DEFAULT_PAGE_SIZE: () => DEFAULT_PAGE_SIZE,
+  FAQPageSchema: () => FAQPageSchema,
   FeaturedArticle: () => FeaturedArticle,
   LatestArticles: () => LatestArticles,
   LatestArticlesSection: () => LatestArticlesSection,
+  ScrollToTop: () => ScrollToTop,
   useArticles: () => useArticles
 });
 module.exports = __toCommonJS(src_exports);
@@ -186,6 +190,86 @@ function BreadcrumbSchema({ items }) {
     }
   );
 }
+function ArticleSEO({ article, articleUrl, siteName, siteLogo }) {
+  const publishedAt = article.date ? new Date(article.date).toISOString() : void 0;
+  const modifiedAt = article.lastmod ? new Date(article.lastmod).toISOString() : publishedAt;
+  const structuredData = __spreadValues(__spreadProps(__spreadValues(__spreadValues({
+    "@context": "https://schema.org",
+    "@type": article.articleType || "Article",
+    mainEntityOfPage: { "@type": "WebPage", "@id": articleUrl },
+    headline: article.title,
+    image: article.featuredImage ? { "@type": "ImageObject", url: article.featuredImage } : void 0
+  }, publishedAt && { datePublished: publishedAt }), modifiedAt && { dateModified: modifiedAt }), {
+    author: { "@type": "Person", name: article.author },
+    publisher: __spreadValues({
+      "@type": "Organization",
+      name: siteName
+    }, siteLogo && { logo: { "@type": "ImageObject", url: siteLogo } }),
+    description: article.excerpt
+  }), article.series && { isPartOf: { "@type": "Blog", name: article.series } });
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: { __html: JSON.stringify(structuredData) }
+      }
+    ),
+    article.faq && article.faq.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "FAQPage",
+            mainEntity: article.faq.map(({ question, answer }) => ({
+              "@type": "Question",
+              name: question,
+              acceptedAnswer: { "@type": "Answer", text: answer }
+            }))
+          })
+        }
+      }
+    ),
+    article.howTo && article.howTo.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "script",
+      {
+        type: "application/ld+json",
+        dangerouslySetInnerHTML: {
+          __html: JSON.stringify({
+            "@context": "https://schema.org",
+            "@type": "HowTo",
+            name: article.title,
+            step: article.howTo.map(({ name, text }) => ({
+              "@type": "HowToStep",
+              name,
+              text
+            }))
+          })
+        }
+      }
+    )
+  ] });
+}
+function FAQPageSchema({ items }) {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "FAQPage",
+    mainEntity: items.map(({ question, answer }) => ({
+      "@type": "Question",
+      name: question,
+      acceptedAnswer: { "@type": "Answer", text: answer }
+    }))
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: { __html: JSON.stringify(schema) }
+    }
+  );
+}
 function CollectionPageSchema({
   title,
   description,
@@ -908,7 +992,7 @@ function ArticleSocialShare({ title, url, excerpt, shareMessage }) {
     }
   });
   const openShareWindow = (shareUrl) => {
-    window.open(shareUrl, "_blank", "width=600,height=400,scrollbars=yes,resizable=yes");
+    globalThis.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: [
@@ -1004,13 +1088,60 @@ function ArticleNavigation({ previous, next, basePath }) {
   ] }) });
 }
 
+// src/ArticleTOC.tsx
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ArticleTOC({ toc, className }) {
+  if (!toc.length) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "nav",
+    {
+      "aria-label": "Table of contents",
+      className: `mb-8 rounded-lg border border-border bg-muted/40 px-6 py-4 ${className != null ? className : ""}`,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "mb-3 text-sm font-semibold uppercase tracking-wide text-muted-foreground", children: "On this page" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("ul", { className: "space-y-1 text-sm", children: toc.map((item) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("li", { style: { paddingLeft: `${Math.max(0, item.depth - 2) * 1}rem` }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "a",
+          {
+            href: `#${item.id}`,
+            className: "text-muted-foreground hover:text-foreground transition-colors",
+            children: item.text
+          }
+        ) }, item.id)) })
+      ]
+    }
+  );
+}
+
+// src/ScrollToTop.tsx
+var import_react5 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function ScrollToTop() {
+  const [visible, setVisible] = (0, import_react5.useState)(false);
+  (0, import_react5.useEffect)(() => {
+    const onScroll = () => setVisible(globalThis.scrollY > 300);
+    globalThis.addEventListener("scroll", onScroll, { passive: true });
+    return () => globalThis.removeEventListener("scroll", onScroll);
+  }, []);
+  if (!visible) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "button",
+    {
+      "aria-label": "Scroll to top",
+      onClick: () => globalThis.scrollTo({ top: 0, behavior: "smooth" }),
+      className: "fixed bottom-8 right-8 z-50 rounded-full bg-primary p-2 shadow-md text-primary-foreground hover:bg-primary/90 transition-colors",
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_lucide_react8.ArrowUp, { className: "h-5 w-5" })
+    }
+  );
+}
+
 // src/CommentsSection.tsx
-var import_react7 = require("next-auth/react");
-var import_react8 = require("react");
+var import_react8 = require("next-auth/react");
+var import_react9 = require("react");
 
 // src/CommentForm.tsx
-var import_react5 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MAX_LENGTH = 2e3;
 var WARN_THRESHOLD = 1800;
 function submitLabel(submitting, parentId) {
@@ -1018,9 +1149,9 @@ function submitLabel(submitting, parentId) {
   return parentId ? "Reply" : "Post comment";
 }
 function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
-  const [body, setBody] = (0, import_react5.useState)("");
-  const [submitting, setSubmitting] = (0, import_react5.useState)(false);
-  const [error, setError] = (0, import_react5.useState)(null);
+  const [body, setBody] = (0, import_react6.useState)("");
+  const [submitting, setSubmitting] = (0, import_react6.useState)(false);
+  const [error, setError] = (0, import_react6.useState)(null);
   const remaining = MAX_LENGTH - body.length;
   function handleSubmit(e) {
     return __async(this, null, function* () {
@@ -1049,8 +1180,8 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
       }
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "textarea",
       {
         value: body,
@@ -1063,13 +1194,13 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
         "aria-label": parentId ? "Reply text" : "Comment text"
       }
     ),
-    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
+    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
       remaining,
       " characters remaining"
     ] }),
-    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)(
+    error && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "submit",
@@ -1078,7 +1209,7 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
           children: submitLabel(submitting, parentId)
         }
       ),
-      onCancel && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      onCancel && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "button",
         {
           type: "button",
@@ -1092,8 +1223,8 @@ function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
 }
 
 // src/CommentItem.tsx
-var import_react6 = require("react");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function relativeTime(iso) {
   const diff = Date.now() - new Date(iso).getTime();
   const minutes = Math.floor(diff / 6e4);
@@ -1114,8 +1245,8 @@ function CommentItem({
   isReply = false,
   onRefresh
 }) {
-  const [showReplyForm, setShowReplyForm] = (0, import_react6.useState)(false);
-  const [deleting, setDeleting] = (0, import_react6.useState)(false);
+  const [showReplyForm, setShowReplyForm] = (0, import_react7.useState)(false);
+  const [deleting, setDeleting] = (0, import_react7.useState)(false);
   const replies = "replies" in comment ? comment.replies : [];
   const canReply = !isReply && !!currentUserId && !comment.isDeleted;
   const canDelete = !!currentUserId && currentUserId === comment.authorId && !comment.isDeleted;
@@ -1131,15 +1262,15 @@ function CommentItem({
       }
     });
   }
-  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) })
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: `${isReply ? "ml-8 border-l-2 border-border pl-4" : ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "rounded-lg bg-muted/40 p-3 space-y-1", children: comment.isDeleted ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm italic text-muted-foreground", children: "Comment removed" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-sm font-medium text-foreground", children: comment.authorName }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs text-muted-foreground", children: relativeTime(comment.createdAt) })
       ] }),
-      /* @__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)(
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm text-foreground whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-3 pt-1", children: [
+        canReply && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             onClick: () => setShowReplyForm((v) => !v),
@@ -1147,7 +1278,7 @@ function CommentItem({
             children: showReplyForm ? "Cancel" : "Reply"
           }
         ),
-        canDelete && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+        canDelete && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
           "button",
           {
             onClick: handleDelete,
@@ -1158,7 +1289,7 @@ function CommentItem({
         )
       ] })
     ] }) }),
-    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    showReplyForm && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CommentForm,
       {
         articleSlug,
@@ -1170,7 +1301,7 @@ function CommentItem({
         onCancel: () => setShowReplyForm(false)
       }
     ) }),
-    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)(
+    replies.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "mt-2 space-y-2", children: replies.map((reply) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       CommentItem,
       {
         comment: __spreadProps(__spreadValues({}, reply), { replies: [] }),
@@ -1185,7 +1316,7 @@ function CommentItem({
 }
 
 // src/CommentThread.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CommentThread({
   comments,
   articleSlug,
@@ -1193,9 +1324,9 @@ function CommentThread({
   onRefresh
 }) {
   if (comments.length === 0) {
-    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_runtime18.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)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     CommentItem,
     {
       comment,
@@ -1208,17 +1339,17 @@ function CommentThread({
 }
 
 // src/CommentsSection.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CommentsSection({ articleSlug, config }) {
   var _a, _b, _c, _d, _e, _f;
-  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 { data: session, status } = (0, import_react8.useSession)();
+  const [comments, setComments] = (0, import_react9.useState)([]);
+  const [loading, setLoading] = (0, import_react9.useState)(true);
+  const [fetchError, setFetchError] = (0, import_react9.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_react8.useCallback)(() => __async(this, null, function* () {
+  const fetchComments = (0, import_react9.useCallback)(() => __async(this, null, function* () {
     setLoading(true);
     setFetchError(null);
     try {
@@ -1232,7 +1363,7 @@ function CommentsSection({ articleSlug, config }) {
       setLoading(false);
     }
   }), [articleSlug]);
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     if (enabled) {
       fetchComments().catch(() => void 0);
     }
@@ -1240,13 +1371,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_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)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("section", { "aria-label": "Comments", className: "mt-12 pt-8 border-t border-border space-y-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h2", { className: "text-xl font-semibold text-foreground", children: loading ? "Comments" : label }),
+    status === "authenticated" ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CommentForm, { articleSlug, onSuccess: fetchComments }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
-          onClick: () => (0, import_react7.signIn)(),
+          onClick: () => (0, import_react8.signIn)(),
           className: "text-primary underline hover:no-underline focus:outline-none",
           children: "Sign in"
         }
@@ -1254,8 +1385,8 @@ function CommentsSection({ articleSlug, config }) {
       " ",
       "to join the discussion."
     ] }),
-    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)(
+    fetchError && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-destructive", children: fetchError }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm text-muted-foreground", children: "Loading comments\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       CommentThread,
       {
         comments,
@@ -1272,9 +1403,11 @@ function CommentsSection({ articleSlug, config }) {
   ArticleCategoryGrid,
   ArticleDetailHero,
   ArticleNavigation,
+  ArticleSEO,
   ArticleSchema,
   ArticleSearchBar,
   ArticleSocialShare,
+  ArticleTOC,
   ArticlesHero,
   ArticlesPage,
   BreadcrumbSchema,
@@ -1287,9 +1420,11 @@ function CommentsSection({ articleSlug, config }) {
   DEFAULT_CATEGORIES_PAGE_SIZE,
   DEFAULT_LAYOUT,
   DEFAULT_PAGE_SIZE,
+  FAQPageSchema,
   FeaturedArticle,
   LatestArticles,
   LatestArticlesSection,
+  ScrollToTop,
   useArticles
 });
 //# sourceMappingURL=index.cjs.map