@sonordev/site-kit 1.2.7

package/dist/blog/index.js

@@ -0,0 +1,1578 @@
+'use strict';
+
+require('../chunk-ZSMWDLMK.js');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+async function fetchBlogPost(apiUrl, apiKey, slug) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/posts/${slug}`, {
+      headers: { "x-api-key": apiKey },
+      next: { revalidate: 60 }
+    });
+    if (!response.ok) {
+      if (response.status === 404) return null;
+      console.error("[Blog] Failed to fetch post:", response.statusText);
+      return null;
+    }
+    const data = await response.json();
+    return data.post;
+  } catch (error) {
+    console.error("[Blog] Error fetching post:", error);
+    return null;
+  }
+}
+async function fetchRelatedPosts(apiUrl, apiKey, postId, limit = 3) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/related`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify({ current_post_id: postId, limit }),
+      next: { revalidate: 300 }
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.posts || [];
+  } catch (error) {
+    console.error("[Blog] Error fetching related posts:", error);
+    return [];
+  }
+}
+function generateTableOfContents(html) {
+  const headingRegex = /<h([2-4])[^>]*(?:id="([^"]*)")?[^>]*>(.*?)<\/h[2-4]>/gi;
+  const items = [];
+  let match;
+  while ((match = headingRegex.exec(html)) !== null) {
+    const level = parseInt(match[1]);
+    const existingId = match[2];
+    const text = match[3].replace(/<[^>]*>/g, "");
+    const id = existingId || slugify(text);
+    items.push({ id, text, level });
+  }
+  return items;
+}
+function slugify(text) {
+  return text.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "");
+}
+async function BlogPost({
+  apiUrl = process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.uptrademedia.com",
+  apiKey = process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  slug,
+  showToc = true,
+  showRelated = true,
+  relatedCount = 3,
+  showAuthor = true,
+  basePath = "/blog",
+  className,
+  styles = {},
+  unstyled = false,
+  children
+}) {
+  const inlineStyle = (defaultStyle, classKey) => unstyled || styles[classKey] ? void 0 : defaultStyle;
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured");
+    return null;
+  }
+  const post = await fetchBlogPost(apiUrl, apiKey, slug);
+  if (!post) {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `${styles.notFound || ""} ${className || ""}`.trim() || void 0,
+        style: inlineStyle({ textAlign: "center", padding: 60 }, "notFound"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { style: inlineStyle({ fontSize: 24, marginBottom: 16 }, "notFound"), children: "Post Not Found" }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "#6b7280" }, "notFound"), children: "The blog post you're looking for doesn't exist or has been removed." }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: basePath,
+              style: inlineStyle({
+                display: "inline-block",
+                marginTop: 24,
+                padding: "12px 24px",
+                backgroundColor: "#3b82f6",
+                color: "#fff",
+                borderRadius: 8,
+                textDecoration: "none"
+              }, "notFound"),
+              children: "\u2190 Back to Blog"
+            }
+          )
+        ]
+      }
+    );
+  }
+  const content = post.content_html || post.content || "";
+  const tableOfContents = showToc ? generateTableOfContents(content) : [];
+  const relatedPosts = showRelated ? await fetchRelatedPosts(apiUrl, apiKey, post.id, relatedCount) : [];
+  if (children) {
+    return children({ post, tableOfContents, relatedPosts });
+  }
+  const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }) : null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("article", { className: `${styles.article || ""} ${className || ""}`.trim() || void 0, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "header",
+      {
+        className: styles.header,
+        style: inlineStyle({ marginBottom: 32 }, "header"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "nav",
+            {
+              className: styles.breadcrumb,
+              style: inlineStyle({ marginBottom: 16, fontSize: 14, color: "#6b7280" }, "breadcrumb"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "a",
+                  {
+                    href: basePath,
+                    className: styles.breadcrumbLink,
+                    style: inlineStyle({ color: "#3b82f6", textDecoration: "none" }, "breadcrumbLink"),
+                    children: "Blog"
+                  }
+                ),
+                post.category && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { style: inlineStyle({ margin: "0 8px" }, "breadcrumb"), children: "/" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `${basePath}?category=${post.category}`,
+                      className: styles.breadcrumbLink,
+                      style: inlineStyle({ color: "#3b82f6", textDecoration: "none" }, "breadcrumbLink"),
+                      children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              className: styles.title,
+              style: inlineStyle({ fontSize: 36, fontWeight: 700, lineHeight: 1.2, marginBottom: 16 }, "title"),
+              children: post.title
+            }
+          ),
+          post.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: styles.subtitle,
+              style: inlineStyle({ fontSize: 20, color: "#6b7280", marginBottom: 16 }, "subtitle"),
+              children: post.subtitle
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              className: styles.meta,
+              style: inlineStyle({ display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }, "meta"),
+              children: [
+                post.author && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: styles.metaItem,
+                    style: inlineStyle({ fontSize: 14, color: "#374151" }, "metaItem"),
+                    children: [
+                      "By ",
+                      typeof post.author === "string" ? post.author : post.author.name
+                    ]
+                  }
+                ),
+                date && /* @__PURE__ */ jsxRuntime.jsx(
+                  "span",
+                  {
+                    className: styles.metaItem,
+                    style: inlineStyle({ fontSize: 14, color: "#6b7280" }, "metaItem"),
+                    children: date
+                  }
+                ),
+                post.reading_time_minutes && /* @__PURE__ */ jsxRuntime.jsxs(
+                  "span",
+                  {
+                    className: styles.metaItem,
+                    style: inlineStyle({ fontSize: 14, color: "#9ca3af" }, "metaItem"),
+                    children: [
+                      post.reading_time_minutes,
+                      " min read"
+                    ]
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    post.featured_image && /* @__PURE__ */ jsxRuntime.jsx(
+      "figure",
+      {
+        className: styles.featuredImageWrapper,
+        style: inlineStyle({ margin: "0 0 32px" }, "featuredImageWrapper"),
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: post.featured_image,
+            alt: post.featured_image_alt || post.title,
+            className: styles.featuredImage,
+            style: inlineStyle({
+              width: "100%",
+              maxHeight: 500,
+              objectFit: "cover",
+              borderRadius: 12
+            }, "featuredImage")
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: styles.contentLayout,
+        style: inlineStyle({
+          display: showToc && tableOfContents.length > 0 ? "grid" : "block",
+          gridTemplateColumns: showToc && tableOfContents.length > 0 ? "1fr 250px" : void 0,
+          gap: 48
+        }, "contentLayout"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: `blog-content ${styles.content || ""}`.trim(),
+              style: inlineStyle({
+                fontSize: 17,
+                lineHeight: 1.8,
+                color: "#374151"
+              }, "content"),
+              dangerouslySetInnerHTML: { __html: content }
+            }
+          ),
+          showToc && tableOfContents.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+            "aside",
+            {
+              className: styles.tocSidebar,
+              style: inlineStyle({
+                position: "sticky",
+                top: 100,
+                alignSelf: "start",
+                padding: 20,
+                backgroundColor: "#f9fafb",
+                borderRadius: 12
+              }, "tocSidebar"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "h4",
+                  {
+                    className: styles.tocTitle,
+                    style: inlineStyle({
+                      margin: "0 0 12px",
+                      fontSize: 12,
+                      fontWeight: 600,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.05em",
+                      color: "#6b7280"
+                    }, "tocTitle"),
+                    children: "On This Page"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "ul",
+                  {
+                    className: styles.tocList,
+                    style: inlineStyle({ listStyle: "none", margin: 0, padding: 0 }, "tocList"),
+                    children: tableOfContents.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+                      "li",
+                      {
+                        className: styles.tocItem,
+                        style: inlineStyle({
+                          paddingLeft: (item.level - 2) * 12,
+                          marginBottom: 8
+                        }, "tocItem"),
+                        children: /* @__PURE__ */ jsxRuntime.jsx(
+                          "a",
+                          {
+                            href: `#${item.id}`,
+                            className: styles.tocLink,
+                            style: inlineStyle({
+                              fontSize: 14,
+                              color: "#6b7280",
+                              textDecoration: "none"
+                            }, "tocLink"),
+                            children: item.text
+                          }
+                        )
+                      },
+                      item.id
+                    ))
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: styles.tags,
+        style: inlineStyle({ marginTop: 32, display: "flex", gap: 8, flexWrap: "wrap" }, "tags"),
+        children: post.tags.map((tag, index) => {
+          const tagName = typeof tag === "string" ? tag : tag?.name || "";
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: `${basePath}?tag=${tagName}`,
+              className: styles.tag,
+              style: inlineStyle({
+                padding: "4px 12px",
+                backgroundColor: "#f3f4f6",
+                borderRadius: 9999,
+                fontSize: 13,
+                color: "#374151",
+                textDecoration: "none"
+              }, "tag"),
+              children: [
+                "#",
+                tagName
+              ]
+            },
+            `${tagName}-${index}`
+          );
+        })
+      }
+    ),
+    (post.faq_items ?? post.faqItems) && Array.isArray(post.faq_items ?? post.faqItems) && (post.faq_items ?? post.faqItems).length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        className: styles.faqSection,
+        style: inlineStyle({ marginTop: 48 }, "faqSection"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: styles.faqTitle,
+              style: inlineStyle({ fontSize: 24, fontWeight: 600, marginBottom: 24 }, "faqTitle"),
+              children: "Frequently Asked Questions"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: inlineStyle({ display: "flex", flexDirection: "column", gap: 16 }, "faqSection"), children: (post.faq_items ?? post.faqItems).map((faq, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "details",
+            {
+              className: styles.faqItem,
+              style: inlineStyle({
+                padding: 16,
+                backgroundColor: "#f9fafb",
+                borderRadius: 8
+              }, "faqItem"),
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "summary",
+                  {
+                    className: styles.faqQuestion,
+                    style: inlineStyle({
+                      fontWeight: 500,
+                      cursor: "pointer",
+                      listStyle: "none"
+                    }, "faqQuestion"),
+                    children: faq.question
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "p",
+                  {
+                    className: styles.faqAnswer,
+                    style: inlineStyle({ marginTop: 12, color: "#6b7280" }, "faqAnswer"),
+                    children: faq.answer
+                  }
+                )
+              ]
+            },
+            index
+          )) })
+        ]
+      }
+    ),
+    showAuthor && post.author && typeof post.author === "object" && /* @__PURE__ */ jsxRuntime.jsx(AuthorSection, { author: normalizeAuthorForDisplay(post.author), className: styles.authorCard, unstyled }),
+    showRelated && relatedPosts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        className: styles.relatedSection,
+        style: inlineStyle({ marginTop: 48 }, "relatedSection"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: styles.relatedTitle,
+              style: inlineStyle({ fontSize: 24, fontWeight: 600, marginBottom: 24 }, "relatedTitle"),
+              children: "Related Posts"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: styles.relatedGrid,
+              style: inlineStyle({
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+                gap: 24
+              }, "relatedGrid"),
+              children: relatedPosts.map((relatedPost) => /* @__PURE__ */ jsxRuntime.jsxs(
+                "article",
+                {
+                  className: styles.relatedCard,
+                  style: inlineStyle({
+                    backgroundColor: "#fff",
+                    borderRadius: 12,
+                    overflow: "hidden",
+                    boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+                  }, "relatedCard"),
+                  children: [
+                    relatedPost.featured_image && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${basePath}/${relatedPost.slug}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "img",
+                      {
+                        src: relatedPost.featured_image,
+                        alt: relatedPost.title,
+                        style: inlineStyle({ width: "100%", height: 150, objectFit: "cover" }, "relatedCard")
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: inlineStyle({ padding: 16 }, "relatedCard"), children: [
+                      /* @__PURE__ */ jsxRuntime.jsx("h3", { style: inlineStyle({ fontSize: 16, fontWeight: 600, marginBottom: 8 }, "relatedCard"), children: /* @__PURE__ */ jsxRuntime.jsx(
+                        "a",
+                        {
+                          href: `${basePath}/${relatedPost.slug}`,
+                          style: inlineStyle({ color: "inherit", textDecoration: "none" }, "relatedCard"),
+                          children: relatedPost.title
+                        }
+                      ) }),
+                      relatedPost.excerpt && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: inlineStyle({ fontSize: 14, color: "#6b7280", margin: 0 }, "relatedCard"), children: [
+                        relatedPost.excerpt.slice(0, 100),
+                        "..."
+                      ] })
+                    ] })
+                  ]
+                },
+                relatedPost.id
+              ))
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function normalizeAuthorForDisplay(author) {
+  const a = author;
+  const avatarUrl = a.avatar_url ?? a.image ?? a.image_url;
+  const socialLinks = a.social_links;
+  const socialProfiles = a.socialProfiles;
+  return {
+    id: a.id ?? "author",
+    project_id: a.project_id ?? "",
+    name: a.name ?? "Author",
+    slug: a.slug ?? "author",
+    bio: a.bio ?? void 0,
+    avatar_url: avatarUrl ?? void 0,
+    email: a.email ?? void 0,
+    website: a.website ?? a.url ?? void 0,
+    social_links: socialLinks ?? void 0,
+    is_active: a.is_active ?? true,
+    ...socialProfiles?.length ? { sameAs: socialProfiles } : {},
+    ...a.title ? { title: a.title } : {}
+  };
+}
+function AuthorSection({
+  author,
+  className,
+  unstyled = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className,
+      style: unstyled || className ? void 0 : {
+        marginTop: 48,
+        padding: 24,
+        backgroundColor: "#f9fafb",
+        borderRadius: 12,
+        display: "flex",
+        gap: 20,
+        alignItems: "flex-start"
+      },
+      children: [
+        author.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: author.avatar_url,
+            alt: author.name,
+            style: unstyled || className ? void 0 : {
+              width: 80,
+              height: 80,
+              borderRadius: "50%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { style: unstyled || className ? void 0 : { margin: "0 0 4px", fontSize: 18, fontWeight: 600 }, children: author.name }),
+          "title" in author && author.title && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 4px", fontSize: 14, color: "#6b7280" }, children: author.title }),
+          author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: unstyled || className ? void 0 : { margin: "0 0 12px", color: "#6b7280", fontSize: 14 }, children: author.bio }),
+          author.social_links && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: unstyled || className ? void 0 : { display: "flex", gap: 16 }, children: [
+            author.social_links.twitter && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: `https://twitter.com/${author.social_links.twitter}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: unstyled || className ? void 0 : { color: "#3b82f6", fontSize: 14 },
+                children: "Twitter"
+              }
+            ),
+            author.social_links.linkedin && /* @__PURE__ */ jsxRuntime.jsx(
+              "a",
+              {
+                href: author.social_links.linkedin,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: unstyled || className ? void 0 : { color: "#3b82f6", fontSize: 14 },
+                children: "LinkedIn"
+              }
+            )
+          ] }),
+          "sameAs" in author && author.sameAs && author.sameAs.length > 0 && !author.social_links && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: author.sameAs.map((url, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: url,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: { color: "#3b82f6", fontSize: 14 },
+              children: "Profile"
+            },
+            i
+          )) })
+        ] })
+      ]
+    }
+  );
+}
+async function fetchBlogList(params) {
+  const {
+    apiUrl,
+    apiKey,
+    category,
+    tag,
+    author,
+    featured,
+    search,
+    page = 1,
+    perPage = 12,
+    orderBy = "published_at",
+    order = "desc"
+  } = params;
+  const queryParams = new URLSearchParams();
+  if (category) queryParams.set("category", category);
+  if (tag) queryParams.set("tag", tag);
+  if (author) queryParams.set("author", author);
+  if (featured) queryParams.set("featured", "true");
+  if (search) queryParams.set("search", search);
+  queryParams.set("page", String(page));
+  queryParams.set("per_page", String(perPage));
+  queryParams.set("order_by", orderBy);
+  queryParams.set("order", order);
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/posts?${queryParams}`, {
+      headers: {
+        "x-api-key": apiKey
+      },
+      next: { revalidate: 60 }
+      // Revalidate every 60 seconds
+    });
+    if (!response.ok) {
+      console.error("[Blog] Failed to fetch posts:", response.statusText);
+      return {
+        posts: [],
+        pagination: {
+          page: 1,
+          perPage: 12,
+          total: 0,
+          totalPages: 0,
+          hasNext: false,
+          hasPrev: false
+        }
+      };
+    }
+    const data = await response.json();
+    return {
+      posts: data.posts || [],
+      pagination: {
+        page: data.pagination?.page || 1,
+        perPage: data.pagination?.per_page || 12,
+        total: data.pagination?.total || 0,
+        totalPages: data.pagination?.total_pages || 0,
+        hasNext: data.pagination?.has_next || false,
+        hasPrev: data.pagination?.has_prev || false
+      }
+    };
+  } catch (error) {
+    console.error("[Blog] Error fetching posts:", error);
+    return {
+      posts: [],
+      pagination: {
+        page: 1,
+        perPage: 12,
+        total: 0,
+        totalPages: 0,
+        hasNext: false,
+        hasPrev: false
+      }
+    };
+  }
+}
+async function fetchCategories(apiUrl, apiKey) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/categories`, {
+      headers: { "x-api-key": apiKey },
+      next: { revalidate: 300 }
+      // Cache for 5 minutes
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.categories || [];
+  } catch (error) {
+    console.error("[Blog] Error fetching categories:", error);
+    return [];
+  }
+}
+async function BlogList({
+  apiUrl = process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.uptrademedia.com",
+  apiKey = process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  category,
+  tag,
+  author,
+  featured,
+  search,
+  page = 1,
+  perPage = 12,
+  orderBy = "published_at",
+  order = "desc",
+  showCategoryFilter = false,
+  showPagination = true,
+  className,
+  basePath = "/blog",
+  styles = {},
+  unstyled = false,
+  renderPost,
+  children
+}) {
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured");
+    return null;
+  }
+  const inlineStyle = (defaultStyle, classKey) => unstyled || styles[classKey] ? void 0 : defaultStyle;
+  const [blogData, categories] = await Promise.all([
+    fetchBlogList({
+      apiUrl,
+      apiKey,
+      category,
+      tag,
+      author,
+      featured,
+      search,
+      page,
+      perPage,
+      orderBy,
+      order
+    }),
+    showCategoryFilter ? fetchCategories(apiUrl, apiKey) : Promise.resolve([])
+  ]);
+  if (children) {
+    return children({ posts: blogData.posts, pagination: blogData.pagination, categories });
+  }
+  const { posts, pagination } = blogData;
+  if (posts.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${styles.container || ""} ${styles.emptyState || ""} ${className || ""}`.trim() || void 0,
+        style: inlineStyle({ textAlign: "center", padding: 40 }, "emptyState"),
+        children: /* @__PURE__ */ jsxRuntime.jsx("p", { style: inlineStyle({ color: "#6b7280" }, "emptyState"), children: "No posts found." })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles.container || ""} ${className || ""}`.trim() || void 0, children: [
+    showCategoryFilter && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        className: styles.categoryNav,
+        style: inlineStyle({ marginBottom: 24, display: "flex", gap: 8, flexWrap: "wrap" }, "categoryNav"),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: basePath,
+              className: `${styles.categoryLink || ""} ${!category ? styles.categoryLinkActive || "" : styles.categoryLinkInactive || ""}`.trim() || void 0,
+              style: inlineStyle({
+                padding: "6px 12px",
+                borderRadius: 9999,
+                fontSize: 14,
+                textDecoration: "none",
+                backgroundColor: !category ? "#3b82f6" : "#f3f4f6",
+                color: !category ? "#fff" : "#374151"
+              }, "categoryLink"),
+              children: "All"
+            }
+          ),
+          categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsxs(
+            "a",
+            {
+              href: `${basePath}?category=${cat.slug}`,
+              className: `${styles.categoryLink || ""} ${category === cat.slug ? styles.categoryLinkActive || "" : styles.categoryLinkInactive || ""}`.trim() || void 0,
+              style: inlineStyle({
+                padding: "6px 12px",
+                borderRadius: 9999,
+                fontSize: 14,
+                textDecoration: "none",
+                backgroundColor: category === cat.slug ? "#3b82f6" : "#f3f4f6",
+                color: category === cat.slug ? "#fff" : "#374151"
+              }, "categoryLink"),
+              children: [
+                cat.name,
+                " (",
+                cat.post_count,
+                ")"
+              ]
+            },
+            cat.slug
+          ))
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: styles.grid,
+        style: inlineStyle({
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+          gap: 24
+        }, "grid"),
+        children: posts.map(
+          (post) => renderPost ? /* @__PURE__ */ jsxRuntime.jsx(React__default.default.Fragment, { children: renderPost(post) }, post.id) : /* @__PURE__ */ jsxRuntime.jsx(BlogPostCard, { post, basePath, styles, unstyled }, post.id)
+        )
+      }
+    ),
+    showPagination && pagination.totalPages > 1 && /* @__PURE__ */ jsxRuntime.jsxs(
+      "nav",
+      {
+        className: styles.pagination,
+        style: inlineStyle({
+          marginTop: 40,
+          display: "flex",
+          justifyContent: "center",
+          gap: 8
+        }, "pagination"),
+        children: [
+          pagination.hasPrev && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: buildPaginationUrl(basePath, page - 1, category),
+              className: styles.paginationLink,
+              style: inlineStyle(paginationLinkStyle, "paginationLink"),
+              children: "\u2190 Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "span",
+            {
+              className: styles.paginationInfo,
+              style: inlineStyle({ padding: "8px 16px", color: "#6b7280" }, "paginationInfo"),
+              children: [
+                "Page ",
+                pagination.page,
+                " of ",
+                pagination.totalPages
+              ]
+            }
+          ),
+          pagination.hasNext && /* @__PURE__ */ jsxRuntime.jsx(
+            "a",
+            {
+              href: buildPaginationUrl(basePath, page + 1, category),
+              className: styles.paginationLink,
+              style: inlineStyle(paginationLinkStyle, "paginationLink"),
+              children: "Next \u2192"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function BlogPostCard({ post, basePath, styles = {}, unstyled = false }) {
+  const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }) : null;
+  const inlineStyle = (defaultStyle, classKey) => unstyled || styles[classKey] ? void 0 : defaultStyle;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "article",
+    {
+      className: styles.card,
+      style: inlineStyle({
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        overflow: "hidden",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        transition: "box-shadow 0.2s, transform 0.2s"
+      }, "card"),
+      children: [
+        post.featured_image && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${basePath}/${post.slug}`, className: styles.cardImageWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: post.featured_image,
+            alt: post.featured_image_alt || post.title,
+            className: styles.cardImage,
+            style: inlineStyle({
+              width: "100%",
+              height: 200,
+              objectFit: "cover"
+            }, "cardImage")
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: styles.cardBody,
+            style: inlineStyle({ padding: 20 }, "cardBody"),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: styles.cardMeta,
+                  style: inlineStyle({ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }, "cardMeta"),
+                  children: [
+                    post.category && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: styles.cardCategory,
+                        style: inlineStyle({
+                          padding: "2px 8px",
+                          borderRadius: 4,
+                          fontSize: 12,
+                          fontWeight: 500,
+                          backgroundColor: "#eff6ff",
+                          color: "#3b82f6",
+                          textTransform: "uppercase"
+                        }, "cardCategory"),
+                        children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
+                      }
+                    ),
+                    date && /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        className: styles.cardDate,
+                        style: inlineStyle({ fontSize: 13, color: "#6b7280" }, "cardDate"),
+                        children: date
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: styles.cardTitle,
+                  style: inlineStyle({ margin: "0 0 8px", fontSize: 18, fontWeight: 600, lineHeight: 1.4 }, "cardTitle"),
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "a",
+                    {
+                      href: `${basePath}/${post.slug}`,
+                      className: styles.cardTitleLink,
+                      style: inlineStyle({ color: "inherit", textDecoration: "none" }, "cardTitleLink"),
+                      children: post.title
+                    }
+                  )
+                }
+              ),
+              post.excerpt && /* @__PURE__ */ jsxRuntime.jsx(
+                "p",
+                {
+                  className: styles.cardExcerpt,
+                  style: inlineStyle({
+                    margin: "0 0 16px",
+                    fontSize: 14,
+                    color: "#6b7280",
+                    lineHeight: 1.6,
+                    display: "-webkit-box",
+                    WebkitLineClamp: 3,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  }, "cardExcerpt"),
+                  children: post.excerpt
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "div",
+                {
+                  className: styles.cardFooter,
+                  style: inlineStyle({ display: "flex", justifyContent: "space-between", alignItems: "center" }, "cardFooter"),
+                  children: [
+                    post.author && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: styles.cardAuthor,
+                        style: inlineStyle({ fontSize: 13, color: "#6b7280" }, "cardAuthor"),
+                        children: [
+                          "By ",
+                          typeof post.author === "string" ? post.author : post.author.name
+                        ]
+                      }
+                    ),
+                    post.reading_time_minutes && /* @__PURE__ */ jsxRuntime.jsxs(
+                      "span",
+                      {
+                        className: styles.cardReadingTime,
+                        style: inlineStyle({ fontSize: 13, color: "#9ca3af" }, "cardReadingTime"),
+                        children: [
+                          post.reading_time_minutes,
+                          " min read"
+                        ]
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function buildPaginationUrl(basePath, page, category) {
+  const params = new URLSearchParams();
+  params.set("page", String(page));
+  if (category) params.set("category", category);
+  return `${basePath}?${params}`;
+}
+var paginationLinkStyle = {
+  padding: "8px 16px",
+  borderRadius: 8,
+  backgroundColor: "#3b82f6",
+  color: "#fff",
+  textDecoration: "none",
+  fontSize: 14,
+  fontWeight: 500
+};
+async function fetchRecentPosts(apiUrl, apiKey, limit = 5) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/recent?limit=${limit}`, {
+      headers: { "x-api-key": apiKey },
+      next: { revalidate: 300 }
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.posts || [];
+  } catch (error) {
+    console.error("[Blog] Error fetching recent posts:", error);
+    return [];
+  }
+}
+async function fetchCategories2(apiUrl, apiKey) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/categories`, {
+      headers: { "x-api-key": apiKey },
+      next: { revalidate: 300 }
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.categories || [];
+  } catch (error) {
+    console.error("[Blog] Error fetching categories:", error);
+    return [];
+  }
+}
+async function fetchTags(apiUrl, apiKey) {
+  try {
+    const response = await fetch(`${apiUrl}/public/blog/tags`, {
+      headers: { "x-api-key": apiKey },
+      next: { revalidate: 300 }
+    });
+    if (!response.ok) return [];
+    const data = await response.json();
+    return data.tags || [];
+  } catch (error) {
+    console.error("[Blog] Error fetching tags:", error);
+    return [];
+  }
+}
+async function BlogSidebar({
+  apiUrl = process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.uptrademedia.com",
+  apiKey = process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  showCategories = true,
+  showRecentPosts = true,
+  recentPostsCount = 5,
+  showTags = true,
+  showSearch = true,
+  basePath = "/blog",
+  className,
+  currentCategory,
+  children
+}) {
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured for sidebar");
+    return null;
+  }
+  const [categories, recentPosts, tags] = await Promise.all([
+    showCategories ? fetchCategories2(apiUrl, apiKey) : Promise.resolve([]),
+    showRecentPosts ? fetchRecentPosts(apiUrl, apiKey, recentPostsCount) : Promise.resolve([]),
+    showTags ? fetchTags(apiUrl, apiKey) : Promise.resolve([])
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("aside", { className, style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    showSearch && /* @__PURE__ */ jsxRuntime.jsx(SearchWidget, { basePath }),
+    showCategories && categories.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+      CategoriesWidget,
+      {
+        categories,
+        basePath,
+        currentCategory
+      }
+    ),
+    showRecentPosts && recentPosts.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(RecentPostsWidget, { posts: recentPosts, basePath }),
+    showTags && tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(TagsWidget, { tags, basePath }),
+    children
+  ] });
+}
+function SearchWidget({ basePath }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: widgetTitleStyle, children: "Search" }),
+    /* @__PURE__ */ jsxRuntime.jsx("form", { action: basePath, method: "get", children: /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "search",
+        name: "search",
+        placeholder: "Search posts...",
+        style: {
+          width: "100%",
+          padding: "10px 12px",
+          border: "1px solid #e5e7eb",
+          borderRadius: 8,
+          fontSize: 14
+        }
+      }
+    ) })
+  ] });
+}
+function CategoriesWidget({
+  categories,
+  basePath,
+  currentCategory
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: widgetTitleStyle, children: "Categories" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: basePath,
+          style: {
+            ...categoryLinkStyle,
+            fontWeight: !currentCategory ? 600 : 400,
+            color: !currentCategory ? "#3b82f6" : "#374151"
+          },
+          children: "All Posts"
+        }
+      ) }),
+      categories.map((cat) => /* @__PURE__ */ jsxRuntime.jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        "a",
+        {
+          href: `${basePath}?category=${cat.slug}`,
+          style: {
+            ...categoryLinkStyle,
+            fontWeight: currentCategory === cat.slug ? 600 : 400,
+            color: currentCategory === cat.slug ? "#3b82f6" : "#374151"
+          },
+          children: [
+            cat.name,
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { color: "#9ca3af", marginLeft: 8 }, children: [
+              "(",
+              cat.post_count,
+              ")"
+            ] })
+          ]
+        }
+      ) }, cat.slug))
+    ] })
+  ] });
+}
+function RecentPostsWidget({
+  posts,
+  basePath
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: widgetTitleStyle, children: "Recent Posts" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: posts.map((post) => {
+      const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric"
+      }) : null;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        "li",
+        {
+          style: {
+            marginBottom: 16,
+            paddingBottom: 16,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+            post.featured_image && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `${basePath}/${post.slug}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+              "img",
+              {
+                src: post.featured_image,
+                alt: "",
+                style: {
+                  width: 64,
+                  height: 48,
+                  objectFit: "cover",
+                  borderRadius: 6,
+                  flexShrink: 0
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "a",
+                {
+                  href: `${basePath}/${post.slug}`,
+                  style: {
+                    fontSize: 14,
+                    fontWeight: 500,
+                    color: "#374151",
+                    textDecoration: "none",
+                    display: "-webkit-box",
+                    WebkitLineClamp: 2,
+                    WebkitBoxOrient: "vertical",
+                    overflow: "hidden"
+                  },
+                  children: post.title
+                }
+              ),
+              date && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { fontSize: 12, color: "#9ca3af", display: "block", marginTop: 4 }, children: date })
+            ] })
+          ] })
+        },
+        post.id
+      );
+    }) })
+  ] });
+}
+function TagsWidget({
+  tags,
+  basePath
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: widgetTitleStyle, children: "Popular Tags" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: tags.slice(0, 15).map((tag) => /* @__PURE__ */ jsxRuntime.jsx(
+      "a",
+      {
+        href: `${basePath}?tag=${tag.slug}`,
+        style: {
+          padding: "4px 10px",
+          backgroundColor: "#f3f4f6",
+          borderRadius: 9999,
+          fontSize: 12,
+          color: "#374151",
+          textDecoration: "none",
+          transition: "background-color 0.2s"
+        },
+        children: tag.name
+      },
+      tag.slug
+    )) })
+  ] });
+}
+function NewsletterWidget({
+  title = "Subscribe to Our Newsletter",
+  description = "Get the latest posts delivered straight to your inbox.",
+  buttonText = "Subscribe"
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { ...widgetStyle, backgroundColor: "#eff6ff" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { ...widgetTitleStyle, color: "#1e40af" }, children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { style: { fontSize: 14, color: "#6b7280", marginBottom: 16 }, children: description }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+        },
+        style: { display: "flex", gap: 8 },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "email",
+              name: "email",
+              placeholder: "Enter your email",
+              required: true,
+              style: {
+                flex: 1,
+                padding: "10px 12px",
+                border: "1px solid #bfdbfe",
+                borderRadius: 8,
+                fontSize: 14
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "submit",
+              style: {
+                padding: "10px 16px",
+                backgroundColor: "#3b82f6",
+                color: "#fff",
+                border: "none",
+                borderRadius: 8,
+                fontSize: 14,
+                fontWeight: 500,
+                cursor: "pointer"
+              },
+              children: buttonText
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+var widgetStyle = {
+  padding: 20,
+  backgroundColor: "#f9fafb",
+  borderRadius: 12
+};
+var widgetTitleStyle = {
+  margin: "0 0 16px",
+  fontSize: 16,
+  fontWeight: 600,
+  color: "#111827"
+};
+var categoryLinkStyle = {
+  display: "flex",
+  alignItems: "center",
+  fontSize: 14,
+  textDecoration: "none"
+};
+async function BlogLayout({
+  apiUrl = process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.uptrademedia.com",
+  apiKey = process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  layout = "sidebar-right",
+  showSidebar = true,
+  sidebarProps = {},
+  hero,
+  maxWidth = 1280,
+  basePath = "/blog",
+  className,
+  currentCategory,
+  children
+}) {
+  const hasSidebar = showSidebar && layout !== "full-width";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    hero && /* @__PURE__ */ jsxRuntime.jsx(
+      "section",
+      {
+        style: {
+          padding: "60px 20px",
+          backgroundColor: hero.backgroundColor || "#1e3a5f",
+          backgroundImage: hero.backgroundImage ? `url(${hero.backgroundImage})` : void 0,
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+          color: "#fff",
+          textAlign: "center"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { maxWidth, margin: "0 auto" }, children: [
+          hero.title && /* @__PURE__ */ jsxRuntime.jsx(
+            "h1",
+            {
+              style: {
+                fontSize: "clamp(32px, 5vw, 48px)",
+                fontWeight: 700,
+                marginBottom: 16
+              },
+              children: hero.title
+            }
+          ),
+          hero.subtitle && /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              style: {
+                fontSize: "clamp(16px, 2vw, 20px)",
+                opacity: 0.9,
+                maxWidth: 600,
+                margin: "0 auto"
+              },
+              children: hero.subtitle
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          maxWidth,
+          margin: "0 auto",
+          padding: "40px 20px"
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: hasSidebar ? "grid" : "block",
+              gridTemplateColumns: hasSidebar ? layout === "sidebar-left" ? "300px 1fr" : "1fr 300px" : void 0,
+              gap: 48
+            },
+            children: [
+              hasSidebar && layout === "sidebar-left" && /* @__PURE__ */ jsxRuntime.jsx(
+                BlogSidebar,
+                {
+                  apiUrl,
+                  apiKey,
+                  basePath,
+                  currentCategory,
+                  ...sidebarProps
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("main", { style: { minWidth: 0 }, children }),
+              hasSidebar && layout === "sidebar-right" && /* @__PURE__ */ jsxRuntime.jsx(
+                BlogSidebar,
+                {
+                  apiUrl,
+                  apiKey,
+                  basePath,
+                  currentCategory,
+                  ...sidebarProps
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+async function BlogPage({ listComponent, ...layoutProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(BlogLayout, { ...layoutProps, children: listComponent });
+}
+async function BlogPostPage({ postComponent, ...layoutProps }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(BlogLayout, { ...layoutProps, showSidebar: false, layout: "full-width", children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { maxWidth: 800, margin: "0 auto" }, children: postComponent }) });
+}
+async function CategoryPage({
+  category,
+  categoryName,
+  listComponent,
+  hero,
+  ...layoutProps
+}) {
+  const categoryHero = hero || {
+    title: categoryName || category,
+    subtitle: `Browse all posts in ${categoryName || category}`,
+    backgroundColor: "#1e3a5f"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(BlogLayout, { ...layoutProps, hero: categoryHero, currentCategory: category, children: listComponent });
+}
+function AuthorCard({ author, showBio = true, showSocial = true, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
+    author.avatar_url && /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      {
+        src: author.avatar_url,
+        alt: author.name,
+        style: {
+          width: 64,
+          height: 64,
+          borderRadius: "50%",
+          objectFit: "cover"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: 0 }, children: author.name }),
+      showBio && author.bio && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0", color: "#6b7280", fontSize: 14 }, children: author.bio }),
+      showSocial && author.social_links && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, marginTop: 8 }, children: [
+        author.social_links.twitter && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `https://twitter.com/${author.social_links.twitter}`, target: "_blank", rel: "noopener noreferrer", children: "Twitter" }),
+        author.social_links.linkedin && /* @__PURE__ */ jsxRuntime.jsx("a", { href: author.social_links.linkedin, target: "_blank", rel: "noopener noreferrer", children: "LinkedIn" }),
+        author.social_links.github && /* @__PURE__ */ jsxRuntime.jsx("a", { href: `https://github.com/${author.social_links.github}`, target: "_blank", rel: "noopener noreferrer", children: "GitHub" })
+      ] })
+    ] })
+  ] });
+}
+async function fetchRelatedPosts2(apiUrl, apiKey, currentPostId, limit) {
+  try {
+    const response = await fetch(`${apiUrl}/api/public/blog/related`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        "x-api-key": apiKey
+      },
+      body: JSON.stringify({
+        currentPostId,
+        limit
+      })
+    });
+    if (!response.ok) {
+      console.error("Failed to fetch related posts:", response.statusText);
+      return [];
+    }
+    const data = await response.json();
+    return data.posts || [];
+  } catch (error) {
+    console.error("Failed to fetch related posts:", error);
+    return [];
+  }
+}
+async function RelatedPosts({
+  apiUrl = process.env.NEXT_PUBLIC_UPTRADE_API_URL || "https://api.uptrademedia.com",
+  apiKey = process.env.NEXT_PUBLIC_UPTRADE_API_KEY || "",
+  currentPostId,
+  limit = 3,
+  className,
+  renderItem
+}) {
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured for RelatedPosts");
+    return null;
+  }
+  const posts = await fetchRelatedPosts2(apiUrl, apiKey, currentPostId, limit);
+  if (posts.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { style: { marginBottom: 16 }, children: "Related Posts" }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "grid", gap: 16 }, children: posts.map(
+      (post) => renderItem ? renderItem(post) : /* @__PURE__ */ jsxRuntime.jsxs("article", { style: { borderBottom: "1px solid #e5e7eb", paddingBottom: 16 }, children: [
+        post.featured_image && /* @__PURE__ */ jsxRuntime.jsx(
+          "img",
+          {
+            src: post.featured_image,
+            alt: post.title,
+            style: {
+              width: "100%",
+              height: 120,
+              objectFit: "cover",
+              borderRadius: 8,
+              marginBottom: 8
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("a", { href: `/blog/${post.slug}`, style: { textDecoration: "none" }, children: /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: 0, color: "inherit" }, children: post.title }) }),
+        post.excerpt && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: "4px 0 0", fontSize: 14, color: "#6b7280" }, children: post.excerpt })
+      ] }, post.id)
+    ) })
+  ] });
+}
+function parseHeadings(content) {
+  const headingRegex = /<h([2-4])[^>]*id="([^"]*)"[^>]*>(.*?)<\/h[2-4]>/gi;
+  const items = [];
+  let match;
+  while ((match = headingRegex.exec(content)) !== null) {
+    items.push({
+      level: parseInt(match[1]),
+      id: match[2],
+      text: match[3].replace(/<[^>]*>/g, "")
+      // Strip any nested HTML
+    });
+  }
+  return items;
+}
+function TableOfContents({
+  content,
+  className,
+  maxDepth = 3
+}) {
+  const [activeId, setActiveId] = React.useState("");
+  const items = parseHeadings(content).filter((item) => item.level <= maxDepth);
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            setActiveId(entry.target.id);
+          }
+        });
+      },
+      {
+        rootMargin: "-20% 0% -35% 0%",
+        threshold: 0
+      }
+    );
+    items.forEach((item) => {
+      const element = document.getElementById(item.id);
+      if (element) {
+        observer.observe(element);
+      }
+    });
+    return () => observer.disconnect();
+  }, [items]);
+  if (items.length === 0) return null;
+  const handleClick = (id) => {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: "smooth" });
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { className, "aria-label": "Table of contents", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("h4", { style: { margin: "0 0 12px", fontSize: 14, fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.05em" }, children: "On This Page" }),
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: items.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+      "li",
+      {
+        style: {
+          paddingLeft: (item.level - 2) * 12,
+          marginBottom: 8
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => handleClick(item.id),
+            style: {
+              all: "unset",
+              cursor: "pointer",
+              fontSize: 14,
+              color: activeId === item.id ? "#2563eb" : "#6b7280",
+              fontWeight: activeId === item.id ? 500 : 400,
+              transition: "color 0.2s"
+            },
+            children: item.text
+          }
+        )
+      },
+      item.id
+    )) })
+  ] });
+}
+
+exports.AuthorCard = AuthorCard;
+exports.BlogLayout = BlogLayout;
+exports.BlogList = BlogList;
+exports.BlogPage = BlogPage;
+exports.BlogPost = BlogPost;
+exports.BlogPostPage = BlogPostPage;
+exports.BlogSidebar = BlogSidebar;
+exports.CategoryPage = CategoryPage;
+exports.NewsletterWidget = NewsletterWidget;
+exports.RelatedPosts = RelatedPosts;
+exports.TableOfContents = TableOfContents;
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map