@fullstackdatasolutions/articles 0.1.0

package/dist/index.js

@@ -0,0 +1,974 @@
+"use client"
+"use client";
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+
+// src/ArticleCategoryGrid.tsx
+import Image from "next/image";
+import Link from "next/link";
+import { useState, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function ArticleCategoryGrid({ categories, pageSize = 8 }) {
+  const [visibleCount, setVisibleCount] = useState(pageSize);
+  useEffect(() => {
+    setVisibleCount(pageSize);
+  }, [categories, pageSize]);
+  if (categories.length === 0)
+    return null;
+  const visible = categories.slice(0, visibleCount);
+  const hasMore = visibleCount < categories.length;
+  return /* @__PURE__ */ jsx("section", { className: "py-16 bg-background", children: /* @__PURE__ */ jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold text-foreground mb-4", children: "Browse by Category" }),
+      /* @__PURE__ */ jsx("p", { className: "text-lg text-muted-foreground", children: "Explore our articles by topic to find the insights most relevant to your interests." })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-2 sm:grid-cols-4 gap-6", children: visible.map((cat) => /* @__PURE__ */ jsx(Link, { href: `/articles/category/${cat.slug}`, children: /* @__PURE__ */ 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__ */ jsx("div", { className: "relative h-52 overflow-hidden", children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          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__ */ jsxs("div", { className: "p-4 text-center", children: [
+        /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground text-base", children: cat.name }),
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground mt-1", children: [
+          cat.count,
+          " ",
+          cat.count === 1 ? "article" : "articles"
+        ] })
+      ] })
+    ] }) }, cat.slug)) }),
+    hasMore && /* @__PURE__ */ jsx("div", { className: "mt-10 text-center", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisibleCount((c) => c + pageSize),
+        className: "inline-flex items-center justify-center px-4 py-2 border border-input bg-background hover:bg-accent rounded-md font-medium text-sm transition-colors",
+        children: "Load more categories"
+      }
+    ) })
+  ] }) });
+}
+
+// src/ArticleSchemas.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+function ArticleSchema({ article, articleUrl, siteName }) {
+  const schema = __spreadProps(__spreadValues({
+    "@context": "https://schema.org",
+    "@type": "Article",
+    headline: article.title,
+    description: article.excerpt,
+    image: article.featuredImage
+  }, article.date && { datePublished: new Date(article.date).toISOString() }), {
+    author: { "@type": "Person", name: article.author },
+    publisher: { "@type": "Organization", name: siteName },
+    mainEntityOfPage: { "@type": "WebPage", "@id": articleUrl }
+  });
+  return /* @__PURE__ */ jsx2(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: { __html: JSON.stringify(schema) }
+    }
+  );
+}
+function BreadcrumbSchema({ items }) {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "BreadcrumbList",
+    itemListElement: items.map((item, index) => ({
+      "@type": "ListItem",
+      position: index + 1,
+      name: item.name,
+      item: item.url
+    }))
+  };
+  return /* @__PURE__ */ jsx2(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: { __html: JSON.stringify(schema) }
+    }
+  );
+}
+function CollectionPageSchema({
+  title,
+  description,
+  url,
+  articleCount
+}) {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: title,
+    description,
+    url,
+    numberOfItems: articleCount
+  };
+  return /* @__PURE__ */ jsx2(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: { __html: JSON.stringify(schema) }
+    }
+  );
+}
+
+// src/ArticleSearchBar.tsx
+import { Search, X } from "lucide-react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function ArticleSearchBar({
+  value,
+  onChange,
+  disabled,
+  resultCount
+}) {
+  return /* @__PURE__ */ jsx3("section", { className: "py-8 bg-background border-b border-border", children: /* @__PURE__ */ jsxs2("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx3(Search, { className: "absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground h-5 w-5" }),
+      /* @__PURE__ */ jsx3(
+        "input",
+        {
+          type: "text",
+          placeholder: "Search articles (3+ characters required)...",
+          value,
+          onChange: (e) => onChange(e.target.value),
+          disabled,
+          className: "flex w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 pl-10 pr-10 py-3 text-lg"
+        }
+      ),
+      value && /* @__PURE__ */ jsx3(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(""),
+          "aria-label": "Clear search",
+          className: "absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx3(X, { className: "h-5 w-5" })
+        }
+      )
+    ] }),
+    value && /* @__PURE__ */ jsx3("div", { className: "mt-2 text-sm text-muted-foreground", children: resultCount === 0 ? "No articles found matching your search." : `Found ${resultCount} article${resultCount === 1 ? "" : "s"} matching "${value}"` })
+  ] }) });
+}
+
+// src/ArticlesHero.tsx
+import Link2 from "next/link";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function ArticlesHero() {
+  return /* @__PURE__ */ jsx4("section", { className: "bg-linear-to-r from-gray-50 to-gray-100 py-16 md:py-24", children: /* @__PURE__ */ jsx4("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs3("div", { className: "max-w-3xl mx-auto text-center", children: [
+    /* @__PURE__ */ jsx4("h1", { className: "text-4xl md:text-5xl font-bold text-foreground mb-6", children: "Vox Populus Insights" }),
+    /* @__PURE__ */ jsx4("p", { className: "text-xl text-muted-foreground mb-8", children: "Expert analysis, campaign strategies, and voter engagement insights from the frontlines of democracy." }),
+    /* @__PURE__ */ jsxs3("div", { className: "flex flex-col sm:flex-row gap-4 justify-center", children: [
+      /* @__PURE__ */ jsx4(
+        Link2,
+        {
+          href: "#latest",
+          className: "inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded-md font-medium text-sm transition-colors",
+          children: "Browse Latest Articles"
+        }
+      ),
+      /* @__PURE__ */ jsx4(
+        Link2,
+        {
+          href: "/contact",
+          className: "inline-flex items-center justify-center px-4 py-2 border border-primary text-primary hover:bg-primary/10 rounded-md font-medium text-sm transition-colors",
+          children: "Contact Our Team"
+        }
+      )
+    ] })
+  ] }) }) });
+}
+
+// src/FeaturedArticle.tsx
+import Link3 from "next/link";
+import Image2 from "next/image";
+import { ArrowRight, Calendar, Clock, User } from "lucide-react";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function FeaturedArticle({ article }) {
+  return /* @__PURE__ */ jsx5("section", { className: "py-16 bg-background", children: /* @__PURE__ */ jsx5("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs4("div", { className: "grid lg:grid-cols-2 gap-12 items-center", children: [
+    /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsx5("span", { className: "inline-block bg-primary/10 text-primary text-sm font-medium px-3 py-1 rounded-full mb-4", children: "FEATURED ARTICLE" }),
+      /* @__PURE__ */ jsx5("h2", { className: "text-3xl font-bold text-foreground mb-4", children: article.title }),
+      /* @__PURE__ */ jsx5("p", { className: "text-lg text-muted-foreground mb-6", children: article.excerpt }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-6 text-sm text-muted-foreground mb-6", children: [
+        article.date && /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5(Calendar, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5("span", { children: article.date })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5(Clock, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5("span", { children: article.readTime })
+        ] }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx5(User, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx5("span", { children: article.author })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs4(
+        Link3,
+        {
+          href: `/articles/${article.slug}`,
+          className: "inline-flex items-center justify-center px-4 py-2 bg-primary hover:bg-primary/90 text-primary-foreground rounded-md font-medium text-sm transition-colors",
+          children: [
+            "Read Full Article",
+            /* @__PURE__ */ jsx5(ArrowRight, { className: "ml-2 h-4 w-4" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "bg-card rounded-lg p-8", children: [
+      /* @__PURE__ */ jsx5(
+        Image2,
+        {
+          src: article.featuredImage,
+          alt: article.title,
+          width: 800,
+          height: 450,
+          className: "w-full h-64 object-cover rounded-lg mb-4"
+        }
+      ),
+      /* @__PURE__ */ jsx5("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx5("span", { className: "bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded", children: article.category }) })
+    ] })
+  ] }) }) });
+}
+
+// src/LatestArticlesSection.tsx
+import { Search as Search2 } from "lucide-react";
+
+// src/LatestArticles.tsx
+import { useState as useState2, useEffect as useEffect2 } from "react";
+
+// src/ArticleCard.tsx
+import Image3 from "next/image";
+import Link4 from "next/link";
+import { ArrowRight as ArrowRight2, Calendar as Calendar2, Clock as Clock2 } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function ArticleCard({ article }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-lg border border-border bg-card text-card-foreground shadow-sm hover:shadow-lg transition-shadow duration-300", children: [
+    /* @__PURE__ */ jsx6("div", { className: "p-0", children: /* @__PURE__ */ jsx6(
+      Image3,
+      {
+        src: article.featuredImage,
+        alt: article.title,
+        className: "w-full h-48 object-cover rounded-t-lg",
+        width: 400,
+        height: 200
+      }
+    ) }),
+    /* @__PURE__ */ jsxs5("div", { className: "p-6", children: [
+      /* @__PURE__ */ jsx6("div", { className: "flex gap-2 mb-3", children: /* @__PURE__ */ jsx6("span", { className: "bg-primary/10 text-primary text-xs font-medium px-2 py-1 rounded", children: article.category }) }),
+      /* @__PURE__ */ jsx6("h3", { className: "text-lg font-semibold leading-none tracking-tight mb-2", children: /* @__PURE__ */ jsx6(
+        Link4,
+        {
+          href: `/articles/${article.slug}`,
+          className: "hover:text-indigo-600 transition-colors",
+          children: article.title
+        }
+      ) }),
+      /* @__PURE__ */ jsx6("p", { className: "text-muted-foreground mb-4 line-clamp-3", children: article.excerpt }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between text-sm text-muted-foreground border-t pt-4", children: [
+        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+          article.date && /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(Calendar2, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx6("span", { children: article.date })
+          ] }),
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx6(Clock2, { className: "h-3 w-3" }),
+            /* @__PURE__ */ jsx6("span", { children: article.readTime })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx6(
+          Link4,
+          {
+            href: `/articles/${article.slug}`,
+            className: "inline-flex items-center justify-center h-8 w-8 p-0 rounded-md hover:bg-accent transition-colors",
+            "aria-label": `Read ${article.title}`,
+            children: /* @__PURE__ */ jsx6(ArrowRight2, { className: "h-4 w-4" })
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+
+// src/LatestArticles.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function LatestArticles({ articles, pageSize }) {
+  const [visibleCount, setVisibleCount] = useState2(pageSize);
+  useEffect2(() => {
+    setVisibleCount(pageSize);
+  }, [articles, pageSize]);
+  const visible = articles.slice(0, visibleCount);
+  const hasMore = visibleCount < articles.length;
+  return /* @__PURE__ */ jsxs6("div", { children: [
+    /* @__PURE__ */ jsx7("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-8", children: visible.map((article) => /* @__PURE__ */ jsx7(ArticleCard, { article }, article.slug)) }),
+    hasMore && /* @__PURE__ */ jsx7("div", { className: "mt-10 text-center", children: /* @__PURE__ */ jsx7(
+      "button",
+      {
+        type: "button",
+        onClick: () => setVisibleCount((c) => c + pageSize),
+        className: "inline-flex items-center justify-center px-4 py-2 border border-input bg-background hover:bg-accent rounded-md font-medium text-sm transition-colors",
+        children: "Load more articles"
+      }
+    ) })
+  ] });
+}
+
+// src/LatestArticlesSection.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+function DescriptionText({
+  searchQuery,
+  count
+}) {
+  const pluralSuffix = count === 1 ? "" : "s";
+  const text = searchQuery ? `Found ${count} article${pluralSuffix} matching your search.` : "Stay informed with our latest insights on voter engagement, campaign strategies, and civic technology.";
+  return /* @__PURE__ */ jsx8("p", { className: "text-lg text-muted-foreground", children: text });
+}
+function LatestArticlesSection({
+  articles,
+  searchQuery,
+  onClearSearch,
+  pageSize = 6
+}) {
+  return /* @__PURE__ */ jsx8("section", { id: "latest", className: "py-16 bg-muted/50", children: /* @__PURE__ */ jsxs7("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+    /* @__PURE__ */ jsxs7("div", { className: "text-center mb-12", children: [
+      /* @__PURE__ */ jsx8("h2", { className: "text-3xl font-bold text-foreground mb-4", children: searchQuery ? "Search Results" : "Latest Articles" }),
+      /* @__PURE__ */ jsx8(DescriptionText, { searchQuery, count: articles.length })
+    ] }),
+    articles.length === 0 && searchQuery ? /* @__PURE__ */ jsx8("div", { className: "text-center py-12", children: /* @__PURE__ */ jsxs7("div", { className: "max-w-md mx-auto", children: [
+      /* @__PURE__ */ jsx8(Search2, { className: "h-12 w-12 text-muted-foreground mx-auto mb-4" }),
+      /* @__PURE__ */ jsx8("h3", { className: "text-lg font-semibold text-foreground mb-2", children: "No articles found" }),
+      /* @__PURE__ */ jsxs7("p", { className: "text-muted-foreground mb-4", children: [
+        `We couldn't find any articles matching "`,
+        searchQuery,
+        '". Try adjusting your search terms.'
+      ] }),
+      /* @__PURE__ */ jsx8(
+        "button",
+        {
+          type: "button",
+          onClick: onClearSearch,
+          className: "inline-flex items-center justify-center px-4 py-2 border border-input bg-background hover:bg-accent rounded-md font-medium text-sm transition-colors",
+          children: "Clear search"
+        }
+      )
+    ] }) }) : /* @__PURE__ */ jsx8(LatestArticles, { articles, pageSize }, searchQuery)
+  ] }) });
+}
+
+// src/articlesConfig.ts
+var DEFAULT_PAGE_SIZE = 6;
+var DEFAULT_CATEGORIES_PAGE_SIZE = 8;
+var DEFAULT_LAYOUT = [
+  "hero",
+  "search",
+  "featured",
+  "latest",
+  "categories"
+];
+
+// src/useArticles.ts
+import { useState as useState3, useCallback, useEffect as useEffect3, useRef } from "react";
+function useArticles() {
+  const [searchQuery, setSearchQuery] = useState3("");
+  const debounceRef = useRef(null);
+  const [articles, setArticles] = useState3([]);
+  const [categories, setCategories] = useState3([]);
+  const [loading, setLoading] = useState3(true);
+  const [error, setError] = useState3(null);
+  const fetchArticles = useCallback((query) => __async(this, null, function* () {
+    try {
+      setLoading(true);
+      const url = query ? `/api/articles?q=${encodeURIComponent(query)}` : "/api/articles";
+      const response = yield fetch(url);
+      if (!response.ok)
+        throw new Error("Failed to fetch articles");
+      const data = yield response.json();
+      setArticles(data.articles);
+      if (!(query == null ? void 0 : query.trim())) {
+        const catMap = /* @__PURE__ */ new Map();
+        for (const article of data.articles) {
+          for (const cat of article.categories) {
+            if (!catMap.has(cat)) {
+              catMap.set(cat, { count: 0, featuredImage: article.featuredImage });
+            }
+            catMap.get(cat).count++;
+          }
+        }
+        setCategories(
+          Array.from(catMap.entries()).map(([name, { count, featuredImage }]) => ({
+            name,
+            slug: name.toLowerCase().replaceAll(/\s+/g, "-").replaceAll(/[^a-z0-9-]/g, ""),
+            count,
+            featuredImage
+          })).sort((a, b) => b.count - a.count)
+        );
+      }
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load articles");
+      setArticles([]);
+    } finally {
+      setLoading(false);
+    }
+  }), []);
+  useEffect3(() => {
+    fetchArticles("");
+  }, [fetchArticles]);
+  const handleSearch = useCallback(
+    (query) => {
+      setSearchQuery(query);
+      if (debounceRef.current)
+        clearTimeout(debounceRef.current);
+      if (query === "") {
+        fetchArticles("");
+      } else if (query.length >= 3) {
+        debounceRef.current = setTimeout(() => fetchArticles(query), 1e3);
+      }
+    },
+    [fetchArticles]
+  );
+  useEffect3(
+    () => () => {
+      if (debounceRef.current)
+        clearTimeout(debounceRef.current);
+    },
+    []
+  );
+  return { articles, categories, searchQuery, loading, error, handleSearch };
+}
+
+// src/ArticlesPage.tsx
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function buildThemeVars(theme) {
+  if (!theme)
+    return {};
+  const vars = {};
+  if (theme.fontFamily)
+    vars["--articles-font-family"] = theme.fontFamily;
+  if (theme.headerColor)
+    vars["--articles-header-color"] = theme.headerColor;
+  if (theme.textColor)
+    vars["--articles-text-color"] = theme.textColor;
+  if (theme.backgroundColor)
+    vars["--articles-bg-color"] = theme.backgroundColor;
+  if (theme.linkColor)
+    vars["--articles-link-color"] = theme.linkColor;
+  if (theme.linkHoverColor)
+    vars["--articles-link-hover-color"] = theme.linkHoverColor;
+  if (theme.linkTextDecoration)
+    vars["--articles-link-decoration"] = theme.linkTextDecoration;
+  if (theme.headerFontWeight)
+    vars["--articles-header-font-weight"] = String(theme.headerFontWeight);
+  if (theme.headerFontSize)
+    vars["--articles-header-font-size"] = theme.headerFontSize;
+  if (theme.bodyFontSize)
+    vars["--articles-body-font-size"] = theme.bodyFontSize;
+  if (theme.lineHeight)
+    vars["--articles-line-height"] = theme.lineHeight;
+  if (theme.borderRadius)
+    vars["--articles-border-radius"] = theme.borderRadius;
+  return vars;
+}
+function renderSection(section, ctx) {
+  const {
+    articles,
+    displayedArticles,
+    categories,
+    searchQuery,
+    loading,
+    error,
+    handleSearch,
+    pageSize,
+    categoriesPageSize
+  } = ctx;
+  switch (section) {
+    case "hero":
+      return /* @__PURE__ */ jsx9(ArticlesHero, {}, "hero");
+    case "search":
+      return /* @__PURE__ */ jsx9(
+        ArticleSearchBar,
+        {
+          value: searchQuery,
+          onChange: handleSearch,
+          disabled: loading,
+          resultCount: articles.length
+        },
+        "search"
+      );
+    case "featured":
+      return articles.length > 0 && !searchQuery ? /* @__PURE__ */ jsx9(FeaturedArticle, { article: articles[0] }, "featured") : null;
+    case "latest":
+      if (loading && articles.length === 0) {
+        return /* @__PURE__ */ jsx9("section", { id: "latest", className: "py-16 bg-muted/50 flex-1", children: /* @__PURE__ */ jsx9("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center py-24", children: /* @__PURE__ */ jsxs8("div", { className: "text-center", children: [
+          /* @__PURE__ */ jsx9("div", { className: "animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto mb-4" }),
+          /* @__PURE__ */ jsx9("p", { className: "text-muted-foreground", children: "Loading articles..." })
+        ] }) }) }, "latest");
+      }
+      if (error) {
+        return /* @__PURE__ */ jsx9("section", { id: "latest", className: "py-16 bg-muted/50 flex-1", children: /* @__PURE__ */ jsx9("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-center", children: /* @__PURE__ */ jsxs8("div", { className: "bg-red-50 border border-red-200 rounded-lg p-6 max-w-md text-center", children: [
+          /* @__PURE__ */ jsx9("h3", { className: "text-lg font-semibold text-red-800 mb-2", children: "Error Loading Articles" }),
+          /* @__PURE__ */ jsx9("p", { className: "text-red-600 mb-4", children: error }),
+          /* @__PURE__ */ jsx9(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleSearch(""),
+              className: "inline-flex items-center justify-center px-4 py-2 border border-input bg-background hover:bg-accent rounded-md font-medium text-sm transition-colors",
+              children: "Try again"
+            }
+          )
+        ] }) }) }, "latest");
+      }
+      return /* @__PURE__ */ jsx9(
+        LatestArticlesSection,
+        {
+          articles: displayedArticles,
+          searchQuery,
+          onClearSearch: () => handleSearch(""),
+          pageSize
+        },
+        "latest"
+      );
+    case "categories":
+      return searchQuery ? null : /* @__PURE__ */ jsx9(
+        ArticleCategoryGrid,
+        {
+          categories,
+          pageSize: categoriesPageSize
+        },
+        "categories"
+      );
+    default:
+      return null;
+  }
+}
+function ArticlesPage({ config }) {
+  var _a, _b, _c;
+  const state = useArticles();
+  const layout = (_a = config.layout) != null ? _a : DEFAULT_LAYOUT;
+  const pageSize = (_b = config.pageSize) != null ? _b : DEFAULT_PAGE_SIZE;
+  const categoriesPageSize = (_c = config.categoriesPageSize) != null ? _c : DEFAULT_CATEGORIES_PAGE_SIZE;
+  const themeVars = buildThemeVars(config.theme);
+  const hasFeatured = layout.includes("featured");
+  const articlesWithoutFeatured = hasFeatured ? state.articles.slice(1) : state.articles;
+  const displayedArticles = state.searchQuery ? state.articles : articlesWithoutFeatured;
+  const ctx = __spreadProps(__spreadValues({}, state), { displayedArticles, pageSize, categoriesPageSize });
+  return /* @__PURE__ */ jsxs8("div", { style: themeVars, children: [
+    layout.map((section) => renderSection(section, ctx)),
+    state.articles.length > 0 && /* @__PURE__ */ jsx9(
+      CollectionPageSchema,
+      {
+        title: `Articles | ${config.siteName}`,
+        description: `Browse all ${state.articles.length} articles on ${config.siteName}.`,
+        url: `${config.siteUrl}/articles`,
+        articleCount: state.articles.length
+      }
+    )
+  ] });
+}
+
+// src/CategoryArticlesPage.tsx
+import Image4 from "next/image";
+import Link5 from "next/link";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+function getCategoryDescription(config, slug, categoryName) {
+  var _a;
+  const raw = (_a = config.categoryDescriptions) == null ? void 0 : _a[slug];
+  if (!raw)
+    return { short: `Browse all articles in ${categoryName}.` };
+  if (typeof raw === "string")
+    return { short: raw };
+  return raw;
+}
+function CategoryArticlesPage({ category, articles, config }) {
+  var _a;
+  if (articles.length === 0)
+    return null;
+  const categoryName = articles[0].category;
+  const heroImage = articles[0].featuredImage;
+  const description = getCategoryDescription(config, category, categoryName);
+  const pageSize = (_a = config.pageSize) != null ? _a : DEFAULT_PAGE_SIZE;
+  const siteUrl = config.siteUrl.replace(/\/$/, "");
+  return /* @__PURE__ */ jsxs9("div", { children: [
+    /* @__PURE__ */ jsx10(
+      BreadcrumbSchema,
+      {
+        items: [
+          { name: "Home", url: siteUrl },
+          { name: "Articles", url: `${siteUrl}/articles` },
+          { name: categoryName, url: `${siteUrl}/articles/category/${category}` }
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs9("section", { className: "relative h-72 md:h-96 flex items-center justify-center overflow-hidden", children: [
+      /* @__PURE__ */ jsx10(
+        Image4,
+        {
+          src: heroImage,
+          alt: categoryName,
+          fill: true,
+          sizes: "100vw",
+          className: "object-cover",
+          priority: true
+        }
+      ),
+      /* @__PURE__ */ jsx10("div", { className: "absolute inset-0 bg-black/60" }),
+      /* @__PURE__ */ jsxs9("div", { className: "relative z-10 text-center text-white px-4", children: [
+        /* @__PURE__ */ jsx10("p", { className: "text-sm font-semibold uppercase tracking-widest mb-3 opacity-80", children: "Category" }),
+        /* @__PURE__ */ jsx10("h1", { className: "text-4xl md:text-5xl font-bold mb-3", children: categoryName }),
+        description.long && /* @__PURE__ */ jsx10("p", { className: "text-lg opacity-90 max-w-2xl mx-auto mt-2", children: description.long }),
+        /* @__PURE__ */ jsxs9("p", { className: "text-lg opacity-70 mt-2", children: [
+          articles.length,
+          " article",
+          articles.length === 1 ? "" : "s"
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx10("section", { className: "py-16 bg-muted/50 flex-1", children: /* @__PURE__ */ jsxs9("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: [
+      /* @__PURE__ */ jsxs9("div", { className: "mb-8 flex items-center justify-between", children: [
+        /* @__PURE__ */ jsx10(Link5, { href: "/articles", className: "text-sm text-primary hover:underline", children: "\u2190 All Articles" }),
+        /* @__PURE__ */ jsx10("p", { className: "text-sm text-muted-foreground", children: description.short })
+      ] }),
+      /* @__PURE__ */ jsx10(LatestArticles, { articles, pageSize })
+    ] }) })
+  ] });
+}
+
+// src/CommentsSection.tsx
+import { useSession, signIn } from "next-auth/react";
+import { useCallback as useCallback2, useEffect as useEffect4, useState as useState6 } from "react";
+
+// src/CommentForm.tsx
+import { useState as useState4 } from "react";
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var MAX_LENGTH = 2e3;
+var WARN_THRESHOLD = 1800;
+function submitLabel(submitting, parentId) {
+  if (submitting)
+    return "Posting\u2026";
+  return parentId ? "Reply" : "Post comment";
+}
+function CommentForm({ articleSlug, parentId, onSuccess, onCancel }) {
+  const [body, setBody] = useState4("");
+  const [submitting, setSubmitting] = useState4(false);
+  const [error, setError] = useState4(null);
+  const remaining = MAX_LENGTH - body.length;
+  function handleSubmit(e) {
+    return __async(this, null, function* () {
+      var _a;
+      e.preventDefault();
+      if (!body.trim() || submitting)
+        return;
+      setSubmitting(true);
+      setError(null);
+      try {
+        const res = yield fetch(`/api/articles/${articleSlug}/comments`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ body: body.trim(), parentId: parentId != null ? parentId : null })
+        });
+        if (!res.ok) {
+          const data = yield res.json();
+          setError((_a = data.error) != null ? _a : "Failed to post comment");
+          return;
+        }
+        setBody("");
+        onSuccess();
+      } catch (e2) {
+        setError("Network error \u2014 please try again");
+      } finally {
+        setSubmitting(false);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxs10("form", { onSubmit: handleSubmit, className: "space-y-2", children: [
+    /* @__PURE__ */ jsx11(
+      "textarea",
+      {
+        value: body,
+        onChange: (e) => setBody(e.target.value),
+        maxLength: MAX_LENGTH,
+        rows: parentId ? 3 : 4,
+        placeholder: parentId ? "Write a reply\u2026" : "Join the discussion\u2026",
+        disabled: submitting,
+        className: "w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 resize-none",
+        "aria-label": parentId ? "Reply text" : "Comment text"
+      }
+    ),
+    remaining <= MAX_LENGTH - WARN_THRESHOLD && /* @__PURE__ */ jsxs10("p", { className: `text-xs ${remaining < 0 ? "text-destructive" : "text-muted-foreground"}`, children: [
+      remaining,
+      " characters remaining"
+    ] }),
+    error && /* @__PURE__ */ jsx11("p", { className: "text-xs text-destructive", children: error }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex gap-2", children: [
+      /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "submit",
+          disabled: submitting || body.trim().length === 0 || body.length > MAX_LENGTH,
+          className: "rounded-md bg-primary px-4 py-1.5 text-sm font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed",
+          children: submitLabel(submitting, parentId)
+        }
+      ),
+      onCancel && /* @__PURE__ */ jsx11(
+        "button",
+        {
+          type: "button",
+          onClick: onCancel,
+          className: "rounded-md px-4 py-1.5 text-sm font-medium text-muted-foreground hover:text-foreground",
+          children: "Cancel"
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/CommentItem.tsx
+import { useState as useState5 } from "react";
+import { Fragment, jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+function relativeTime(iso) {
+  const diff = Date.now() - new Date(iso).getTime();
+  const minutes = Math.floor(diff / 6e4);
+  if (minutes < 1)
+    return "just now";
+  if (minutes < 60)
+    return `${minutes}m ago`;
+  const hours = Math.floor(minutes / 60);
+  if (hours < 24)
+    return `${hours}h ago`;
+  const days = Math.floor(hours / 24);
+  if (days < 30)
+    return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12)
+    return `${months}mo ago`;
+  return `${Math.floor(months / 12)}y ago`;
+}
+function CommentItem({
+  comment,
+  articleSlug,
+  currentUserId,
+  isReply = false,
+  onRefresh
+}) {
+  const [showReplyForm, setShowReplyForm] = useState5(false);
+  const [deleting, setDeleting] = useState5(false);
+  const replies = "replies" in comment ? comment.replies : [];
+  const canReply = !isReply && !!currentUserId && !comment.isDeleted;
+  const canDelete = !!currentUserId && currentUserId === comment.authorId && !comment.isDeleted;
+  function handleDelete() {
+    return __async(this, null, function* () {
+      if (deleting)
+        return;
+      setDeleting(true);
+      try {
+        yield fetch(`/api/articles/${articleSlug}/comments/${comment.id}`, { method: "DELETE" });
+        onRefresh();
+      } finally {
+        setDeleting(false);
+      }
+    });
+  }
+  return /* @__PURE__ */ jsxs11("div", { className: `${isReply ? "ml-8 border-l-2 border-border pl-4" : ""}`, children: [
+    /* @__PURE__ */ jsx12("div", { className: "rounded-lg bg-muted/40 p-3 space-y-1", children: comment.isDeleted ? /* @__PURE__ */ jsx12("p", { className: "text-sm italic text-muted-foreground", children: "Comment removed" }) : /* @__PURE__ */ jsxs11(Fragment, { children: [
+      /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between gap-2", children: [
+        /* @__PURE__ */ jsx12("span", { className: "text-sm font-medium text-foreground", children: comment.authorName }),
+        /* @__PURE__ */ jsx12("span", { className: "text-xs text-muted-foreground", children: relativeTime(comment.createdAt) })
+      ] }),
+      /* @__PURE__ */ jsx12("p", { className: "text-sm text-foreground whitespace-pre-wrap break-words", children: comment.body }),
+      /* @__PURE__ */ jsxs11("div", { className: "flex gap-3 pt-1", children: [
+        canReply && /* @__PURE__ */ jsx12(
+          "button",
+          {
+            onClick: () => setShowReplyForm((v) => !v),
+            className: "text-xs text-muted-foreground hover:text-foreground",
+            children: showReplyForm ? "Cancel" : "Reply"
+          }
+        ),
+        canDelete && /* @__PURE__ */ jsx12(
+          "button",
+          {
+            onClick: handleDelete,
+            disabled: deleting,
+            className: "text-xs text-muted-foreground hover:text-destructive disabled:opacity-50",
+            children: deleting ? "Deleting\u2026" : "Delete"
+          }
+        )
+      ] })
+    ] }) }),
+    showReplyForm && /* @__PURE__ */ jsx12("div", { className: "mt-2 ml-2", children: /* @__PURE__ */ jsx12(
+      CommentForm,
+      {
+        articleSlug,
+        parentId: comment.id,
+        onSuccess: () => {
+          setShowReplyForm(false);
+          onRefresh();
+        },
+        onCancel: () => setShowReplyForm(false)
+      }
+    ) }),
+    replies.length > 0 && /* @__PURE__ */ jsx12("div", { className: "mt-2 space-y-2", children: replies.map((reply) => /* @__PURE__ */ jsx12(
+      CommentItem,
+      {
+        comment: __spreadProps(__spreadValues({}, reply), { replies: [] }),
+        articleSlug,
+        currentUserId,
+        isReply: true,
+        onRefresh
+      },
+      reply.id
+    )) })
+  ] });
+}
+
+// src/CommentThread.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+function CommentThread({
+  comments,
+  articleSlug,
+  currentUserId,
+  onRefresh
+}) {
+  if (comments.length === 0) {
+    return /* @__PURE__ */ jsx13("p", { className: "text-sm text-muted-foreground text-center py-6", children: "No comments yet. Be the first to share your thoughts." });
+  }
+  return /* @__PURE__ */ jsx13("div", { className: "space-y-4", children: comments.map((comment) => /* @__PURE__ */ jsx13(
+    CommentItem,
+    {
+      comment,
+      articleSlug,
+      currentUserId,
+      onRefresh
+    },
+    comment.id
+  )) });
+}
+
+// src/CommentsSection.tsx
+import { jsx as jsx14, jsxs as jsxs12 } from "react/jsx-runtime";
+function CommentsSection({ articleSlug, config }) {
+  var _a, _b, _c, _d, _e, _f;
+  const { data: session, status } = useSession();
+  const [comments, setComments] = useState6([]);
+  const [loading, setLoading] = useState6(true);
+  const [fetchError, setFetchError] = useState6(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 = useCallback2(() => __async(this, null, function* () {
+    setLoading(true);
+    setFetchError(null);
+    try {
+      const res = yield fetch(`/api/articles/${articleSlug}/comments`);
+      if (!res.ok)
+        throw new Error("Failed to load comments");
+      const data = yield res.json();
+      setComments(data.comments);
+    } catch (e) {
+      setFetchError("Could not load comments. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }), [articleSlug]);
+  useEffect4(() => {
+    if (enabled) {
+      fetchComments().catch(() => void 0);
+    }
+  }, [fetchComments, enabled]);
+  if (!enabled)
+    return null;
+  const count = comments.length;
+  const label = count === 1 ? "1 comment" : `${count} comments`;
+  return /* @__PURE__ */ jsxs12("section", { "aria-label": "Comments", className: "mt-12 pt-8 border-t border-border space-y-6", children: [
+    /* @__PURE__ */ jsx14("h2", { className: "text-xl font-semibold text-foreground", children: loading ? "Comments" : label }),
+    status === "authenticated" ? /* @__PURE__ */ jsx14(CommentForm, { articleSlug, onSuccess: fetchComments }) : /* @__PURE__ */ jsxs12("p", { className: "text-sm text-muted-foreground", children: [
+      /* @__PURE__ */ jsx14(
+        "button",
+        {
+          onClick: () => signIn(),
+          className: "text-primary underline hover:no-underline focus:outline-none",
+          children: "Sign in"
+        }
+      ),
+      " ",
+      "to join the discussion."
+    ] }),
+    fetchError && /* @__PURE__ */ jsx14("p", { className: "text-sm text-destructive", children: fetchError }),
+    loading ? /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: "Loading comments\u2026" }) : /* @__PURE__ */ jsx14(
+      CommentThread,
+      {
+        comments,
+        articleSlug,
+        currentUserId,
+        onRefresh: fetchComments
+      }
+    )
+  ] });
+}
+export {
+  ArticleCard,
+  ArticleCategoryGrid,
+  ArticleSchema,
+  ArticleSearchBar,
+  ArticlesHero,
+  ArticlesPage,
+  BreadcrumbSchema,
+  CategoryArticlesPage,
+  CollectionPageSchema,
+  CommentForm,
+  CommentItem,
+  CommentThread,
+  CommentsSection,
+  DEFAULT_CATEGORIES_PAGE_SIZE,
+  DEFAULT_LAYOUT,
+  DEFAULT_PAGE_SIZE,
+  FeaturedArticle,
+  LatestArticles,
+  LatestArticlesSection,
+  useArticles
+};
+//# sourceMappingURL=index.js.map