@fullstackdatasolutions/articles 0.4.3 → 0.5.0

package/README.md

@@ -134,6 +134,8 @@ Article body in Markdown...
 | `categoryDescriptions` | `Record<string, string \| CategoryDescription>` | — | Short/long text per category slug. |
 | `hero` | `HeroConfig` | — | Hero section title and description. Omit to use built-in defaults. |
 | `comments` | `CommentsConfig` | — | Comments feature config. Omit to disable entirely. |
+| `showToc` | `boolean` | `true` | Show the table of contents on article detail pages. Set to `false` to hide on all articles. |
+| `description` | `string` | — | Short description used as the RSS feed channel description. Falls back to `siteName` if omitted. |
 
 **Default layout order:** `['hero', 'search', 'featured', 'latest', 'categories']`
 
@@ -248,6 +250,44 @@ const { previous, next } = await getAdjacentArticles(slug)
 
 ---
 
+## ArticleTOC
+
+`ArticleTOC` renders the article's table of contents as an inline nav block above article content. Server component (no `'use client'`). Returns `null` when the `toc` array is empty, so it is safe to render unconditionally.
+
+```tsx
+import { ArticleTOC } from '@fullstackdatasolutions/articles'
+
+<ArticleTOC toc={article.toc} />
+```
+
+| Prop | Type | Required | Description |
+|---|---|---|---|
+| `toc` | `TocItem[]` | yes | Array of table of contents items from the article |
+| `className` | `string` | no | Optional CSS class to add to the nav wrapper |
+
+- Indentation: h2=0rem, h3=1rem, h4=2rem (based on `item.depth - 2`)
+- Returns `null` when `toc` is empty
+- Gate used in article detail pages: `siteConfig.showToc !== false && article.toc && article.toc.length > 0`
+
+---
+
+## ScrollToTop
+
+`ScrollToTop` is a fixed-position floating button in the bottom-right corner that appears when the user scrolls past 300px, and smooth-scrolls back to the top on click. Client component (`'use client'`). No props required - fully self-contained, safe to place anywhere in your layout.
+
+```tsx
+import { ScrollToTop } from '@fullstackdatasolutions/articles'
+
+<ScrollToTop />
+```
+
+- No props
+- Appears only after 300px of vertical scroll
+- Smooth scroll animation
+- Fixed position, bottom-right corner
+
+---
+
 ## Comments setup
 
 ### 1. Enable in config
@@ -289,8 +329,9 @@ import { generateArticlesIndexMetadata } from '@fullstackdatasolutions/articles/
 import { siteConfig } from '@/config/articles'
 export const metadata: Metadata = generateArticlesIndexMetadata(siteConfig)
 // Produces: title, description, full OpenGraph (type: 'website'), Twitter Card,
-// canonical URL (/articles), and robots directives.
+// canonical URL (/articles), robots directives, and RSS feed alternate link.
 // Description falls back to config.hero?.description when set.
+// Automatically emits <link rel="alternate" type="application/rss+xml"> pointing to /articles/feed.xml
 ```
 
 ### Article and category metadata
@@ -308,6 +349,75 @@ export const generateMetadata = ({ params }) =>
   generateCategoryMetadata(params.category, siteConfig)
 ```
 
+### RSS feed
+
+To enable RSS 2.0 feed generation at `/articles/feed.xml`, copy this route file into your consuming app:
+
+```ts
+// app/articles/feed.xml/route.ts
+import { getAllArticles } from '@fullstackdatasolutions/articles/server'
+import { siteConfig } from '@/config/articles'
+
+export const dynamic = 'force-static'
+
+function escapeXml(str: string): string {
+  return str
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&apos;')
+}
+
+export async function GET() {
+  const siteUrl = siteConfig.siteUrl.replace(/\/$/, '')
+  const articles = await getAllArticles()
+
+  const items = articles
+    .map((article) => {
+      const url = `${siteUrl}/articles/${article.slug}`
+      const pubDate = article.date ? new Date(article.date).toUTCString() : ''
+      return [
+        '    <item>',
+        `      <title><![CDATA[${article.title}]]></title>`,
+        `      <link>${url}</link>`,
+        `      <guid isPermaLink="true">${url}</guid>`,
+        pubDate ? `      <pubDate>${pubDate}</pubDate>` : '',
+        article.excerpt ? `      <description><![CDATA[${article.excerpt}]]></description>` : '',
+        article.author ? `      <author>${escapeXml(article.author)}</author>` : '',
+        '    </item>',
+      ]
+        .filter(Boolean)
+        .join('\n')
+    })
+    .join('\n')
+
+  const description = siteConfig.description ?? `${siteConfig.siteName} articles`
+  const xml = `<?xml version="1.0" encoding="UTF-8" ?>
+<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
+  <channel>
+    <title><![CDATA[${siteConfig.siteName}]]></title>
+    <link>${siteUrl}/articles</link>
+    <description><![CDATA[${description}]]></description>
+    <language>en</language>
+    <atom:link href="${siteUrl}/articles/feed.xml" rel="self" type="application/rss+xml" />
+${items}
+  </channel>
+</rss>`
+
+  return new Response(xml, {
+    headers: {
+      'Content-Type': 'application/xml; charset=utf-8',
+      'Cache-Control': 'public, max-age=3600',
+    },
+  })
+}
+```
+
+- Uses `force-static` for build-time generation
+- Uses `siteConfig.description` for the channel description field (falls back to `siteName` if omitted)
+- The `<link rel="alternate" type="application/rss+xml">` tag is added automatically to the articles index `<head>` via `generateArticlesIndexMetadata`
+
 ### Sitemaps
 
 Use `getArticleSitemapEntries` to generate article and category sitemap entries. Pass your `ArticlesConfig` object (preferred) or a plain URL string.
@@ -408,8 +518,9 @@ Paste this block into your app's `AGENTS.md` so AI assistants know how the libra
 This app uses `@fullstackdatasolutions/articles` for the articles section.
 
 ### Key files
-- `config/articles.ts` — all library behaviour (layout, theme, page size, comments) is controlled here
+- `config/articles.ts` — all library behaviour (layout, theme, page size, comments, TOC, RSS) is controlled here
 - `app/api/articles/` — thin API route wrappers; do not add business logic here
+- `app/articles/feed.xml/route.ts` — RSS 2.0 feed (copy from reference implementation)
 - `public/articles/[slug]/article.md` — one directory per article
 
 ### CSS (Tailwind v4)
@@ -418,6 +529,10 @@ The package ships its source TypeScript files so Tailwind can scan them.
   @source "./node_modules/@fullstackdatasolutions/articles/src";
 If this line is missing, most component classes will not render correctly. Note: `ArticleCategoryGrid` images, `CategoryArticlesPage` hero, and `ArticleDetailHero` image use inline styles for critical layout so they render correctly without this line. All other styling still requires it.
 
+### Components
+- `ArticleTOC` — server component rendering `article.toc[]` as a nav block. Controlled by `siteConfig.showToc` (defaults `true`). Returns `null` when empty.
+- `ScrollToTop` — client component, no props. Fixed-position button appears after 300px scroll.
+
 ### Server utilities
 For sitemaps and metadata: `import { getArticleSitemapEntries, generateArticlesIndexMetadata, generateArticleMetadata, generateCategoryMetadata } from '@fullstackdatasolutions/articles/server'`. See README for usage examples.
 
@@ -426,6 +541,8 @@ For sitemaps and metadata: `import { getArticleSitemapEntries, generateArticlesI
 - When adding a new article: create `public/articles/[slug]/article.md` with title, excerpt, author, tags.
 - API routes are copied from the library — update the package version and re-copy if the library API changes.
 - `hero.title` and `hero.description` in `ArticlesConfig` control the hero heading — pass them to customize per app.
+- `showToc?: boolean` (default `true`) controls TOC visibility on all article detail pages.
+- `description?: string` sets the RSS feed channel description (falls back to `siteName`).
 - Full library docs: `node_modules/@fullstackdatasolutions/articles/README.md`
 ```
 

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