@uptrademedia/site-kit 1.0.4 → 1.0.7

package/dist/blog/index.mjs

@@ -1,25 +1,1163 @@
-import '../chunk-NYKRE2FL.mjs';
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
+import '../chunk-4XPGGLVP.mjs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useState, useEffect } from 'react';
 
-async function BlogPost({ projectId, slug, children }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("p", { children: [
-      "Blog post: ",
-      slug
+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,
+  children
+}) {
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured");
+    return null;
+  }
+  const post = await fetchBlogPost(apiUrl, apiKey, slug);
+  if (!post) {
+    return /* @__PURE__ */ jsxs("div", { className, style: { textAlign: "center", padding: 60 }, children: [
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 24, marginBottom: 16 }, children: "Post Not Found" }),
+      /* @__PURE__ */ jsx("p", { style: { color: "#6b7280" }, children: "The blog post you're looking for doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: basePath,
+          style: {
+            display: "inline-block",
+            marginTop: 24,
+            padding: "12px 24px",
+            backgroundColor: "#3b82f6",
+            color: "#fff",
+            borderRadius: 8,
+            textDecoration: "none"
+          },
+          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__ */ jsxs("article", { className, children: [
+    /* @__PURE__ */ jsxs("header", { style: { marginBottom: 32 }, children: [
+      /* @__PURE__ */ jsxs("nav", { style: { marginBottom: 16, fontSize: 14, color: "#6b7280" }, children: [
+        /* @__PURE__ */ jsx("a", { href: basePath, style: { color: "#3b82f6", textDecoration: "none" }, children: "Blog" }),
+        post.category && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { style: { margin: "0 8px" }, children: "/" }),
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `${basePath}?category=${post.category}`,
+              style: { color: "#3b82f6", textDecoration: "none" },
+              children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("h1", { style: { fontSize: 36, fontWeight: 700, lineHeight: 1.2, marginBottom: 16 }, children: post.title }),
+      post.subtitle && /* @__PURE__ */ jsx("p", { style: { fontSize: 20, color: "#6b7280", marginBottom: 16 }, children: post.subtitle }),
+      /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }, children: [
+        post.author && /* @__PURE__ */ jsxs("span", { style: { fontSize: 14, color: "#374151" }, children: [
+          "By ",
+          typeof post.author === "string" ? post.author : post.author.name
+        ] }),
+        date && /* @__PURE__ */ jsx("span", { style: { fontSize: 14, color: "#6b7280" }, children: date }),
+        post.reading_time_minutes && /* @__PURE__ */ jsxs("span", { style: { fontSize: 14, color: "#9ca3af" }, children: [
+          post.reading_time_minutes,
+          " min read"
+        ] })
+      ] })
+    ] }),
+    post.featured_image && /* @__PURE__ */ jsx("figure", { style: { margin: "0 0 32px" }, children: /* @__PURE__ */ jsx(
+      "img",
+      {
+        src: post.featured_image,
+        alt: post.featured_image_alt || post.title,
+        style: {
+          width: "100%",
+          maxHeight: 500,
+          objectFit: "cover",
+          borderRadius: 12
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: showToc && tableOfContents.length > 0 ? "grid" : "block",
+          gridTemplateColumns: showToc && tableOfContents.length > 0 ? "1fr 250px" : void 0,
+          gap: 48
+        },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "blog-content",
+              style: {
+                fontSize: 17,
+                lineHeight: 1.8,
+                color: "#374151"
+              },
+              dangerouslySetInnerHTML: { __html: content }
+            }
+          ),
+          showToc && tableOfContents.length > 0 && /* @__PURE__ */ jsxs(
+            "aside",
+            {
+              style: {
+                position: "sticky",
+                top: 100,
+                alignSelf: "start",
+                padding: 20,
+                backgroundColor: "#f9fafb",
+                borderRadius: 12
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "h4",
+                  {
+                    style: {
+                      margin: "0 0 12px",
+                      fontSize: 12,
+                      fontWeight: 600,
+                      textTransform: "uppercase",
+                      letterSpacing: "0.05em",
+                      color: "#6b7280"
+                    },
+                    children: "On This Page"
+                  }
+                ),
+                /* @__PURE__ */ jsx("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: tableOfContents.map((item) => /* @__PURE__ */ jsx(
+                  "li",
+                  {
+                    style: {
+                      paddingLeft: (item.level - 2) * 12,
+                      marginBottom: 8
+                    },
+                    children: /* @__PURE__ */ jsx(
+                      "a",
+                      {
+                        href: `#${item.id}`,
+                        style: {
+                          fontSize: 14,
+                          color: "#6b7280",
+                          textDecoration: "none"
+                        },
+                        children: item.text
+                      }
+                    )
+                  },
+                  item.id
+                )) })
+              ]
+            }
+          )
+        ]
+      }
+    ),
+    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsx("div", { style: { marginTop: 32, display: "flex", gap: 8, flexWrap: "wrap" }, children: post.tags.map((tag, index) => {
+      const tagName = typeof tag === "string" ? tag : tag?.name || "";
+      return /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `${basePath}?tag=${tagName}`,
+          style: {
+            padding: "4px 12px",
+            backgroundColor: "#f3f4f6",
+            borderRadius: 9999,
+            fontSize: 13,
+            color: "#374151",
+            textDecoration: "none"
+          },
+          children: [
+            "#",
+            tagName
+          ]
+        },
+        `${tagName}-${index}`
+      );
+    }) }),
+    (post.faq_items ?? post.faqItems) && Array.isArray(post.faq_items ?? post.faqItems) && (post.faq_items ?? post.faqItems).length > 0 && /* @__PURE__ */ jsxs("section", { style: { marginTop: 48 }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { fontSize: 24, fontWeight: 600, marginBottom: 24 }, children: "Frequently Asked Questions" }),
+      /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 16 }, children: (post.faq_items ?? post.faqItems).map((faq, index) => /* @__PURE__ */ jsxs(
+        "details",
+        {
+          style: {
+            padding: 16,
+            backgroundColor: "#f9fafb",
+            borderRadius: 8
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              "summary",
+              {
+                style: {
+                  fontWeight: 500,
+                  cursor: "pointer",
+                  listStyle: "none"
+                },
+                children: faq.question
+              }
+            ),
+            /* @__PURE__ */ jsx("p", { style: { marginTop: 12, color: "#6b7280" }, children: faq.answer })
+          ]
+        },
+        index
+      )) })
     ] }),
-    /* @__PURE__ */ jsx("p", { children: "Coming soon..." })
+    showAuthor && post.author && typeof post.author === "object" && /* @__PURE__ */ jsx(AuthorSection, { author: normalizeAuthorForDisplay(post.author) }),
+    showRelated && relatedPosts.length > 0 && /* @__PURE__ */ jsxs("section", { style: { marginTop: 48 }, children: [
+      /* @__PURE__ */ jsx("h2", { style: { fontSize: 24, fontWeight: 600, marginBottom: 24 }, children: "Related Posts" }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: "repeat(auto-fill, minmax(280px, 1fr))",
+            gap: 24
+          },
+          children: relatedPosts.map((relatedPost) => /* @__PURE__ */ jsxs(
+            "article",
+            {
+              style: {
+                backgroundColor: "#fff",
+                borderRadius: 12,
+                overflow: "hidden",
+                boxShadow: "0 1px 3px rgba(0,0,0,0.1)"
+              },
+              children: [
+                relatedPost.featured_image && /* @__PURE__ */ jsx("a", { href: `${basePath}/${relatedPost.slug}`, children: /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: relatedPost.featured_image,
+                    alt: relatedPost.title,
+                    style: { width: "100%", height: 150, objectFit: "cover" }
+                  }
+                ) }),
+                /* @__PURE__ */ jsxs("div", { style: { padding: 16 }, children: [
+                  /* @__PURE__ */ jsx("h3", { style: { fontSize: 16, fontWeight: 600, marginBottom: 8 }, children: /* @__PURE__ */ jsx(
+                    "a",
+                    {
+                      href: `${basePath}/${relatedPost.slug}`,
+                      style: { color: "inherit", textDecoration: "none" },
+                      children: relatedPost.title
+                    }
+                  ) }),
+                  relatedPost.excerpt && /* @__PURE__ */ jsxs("p", { style: { fontSize: 14, color: "#6b7280", margin: 0 }, children: [
+                    relatedPost.excerpt.slice(0, 100),
+                    "..."
+                  ] })
+                ] })
+              ]
+            },
+            relatedPost.id
+          ))
+        }
+      )
+    ] })
   ] });
 }
-async function BlogList({ projectId, options, children }) {
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs("p", { children: [
-      "Blog list for project: ",
-      projectId
+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
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      style: {
+        marginTop: 48,
+        padding: 24,
+        backgroundColor: "#f9fafb",
+        borderRadius: 12,
+        display: "flex",
+        gap: 20,
+        alignItems: "flex-start"
+      },
+      children: [
+        author.avatar_url && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: author.avatar_url,
+            alt: author.name,
+            style: {
+              width: 80,
+              height: 80,
+              borderRadius: "50%",
+              objectFit: "cover"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 4px", fontSize: 18, fontWeight: 600 }, children: author.name }),
+          "title" in author && author.title && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 4px", fontSize: 14, color: "#6b7280" }, children: author.title }),
+          author.bio && /* @__PURE__ */ jsx("p", { style: { margin: "0 0 12px", color: "#6b7280", fontSize: 14 }, children: author.bio }),
+          author.social_links && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 16 }, children: [
+            author.social_links.twitter && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `https://twitter.com/${author.social_links.twitter}`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "#3b82f6", fontSize: 14 },
+                children: "Twitter"
+              }
+            ),
+            author.social_links.linkedin && /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: author.social_links.linkedin,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                style: { color: "#3b82f6", fontSize: 14 },
+                children: "LinkedIn"
+              }
+            )
+          ] }),
+          "sameAs" in author && author.sameAs && author.sameAs.length > 0 && !author.social_links && /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 16, flexWrap: "wrap" }, children: author.sameAs.map((url, i) => /* @__PURE__ */ 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",
+  renderPost,
+  children
+}) {
+  if (!apiKey) {
+    console.warn("[Blog] No API key configured");
+    return null;
+  }
+  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__ */ jsx("div", { className, style: { textAlign: "center", padding: 40 }, children: /* @__PURE__ */ jsx("p", { style: { color: "#6b7280" }, children: "No posts found." }) });
+  }
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    showCategoryFilter && categories.length > 0 && /* @__PURE__ */ jsxs("nav", { style: { marginBottom: 24, display: "flex", gap: 8, flexWrap: "wrap" }, children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: basePath,
+          style: {
+            padding: "6px 12px",
+            borderRadius: 9999,
+            fontSize: 14,
+            textDecoration: "none",
+            backgroundColor: !category ? "#3b82f6" : "#f3f4f6",
+            color: !category ? "#fff" : "#374151"
+          },
+          children: "All"
+        }
+      ),
+      categories.map((cat) => /* @__PURE__ */ jsxs(
+        "a",
+        {
+          href: `${basePath}?category=${cat.slug}`,
+          style: {
+            padding: "6px 12px",
+            borderRadius: 9999,
+            fontSize: 14,
+            textDecoration: "none",
+            backgroundColor: category === cat.slug ? "#3b82f6" : "#f3f4f6",
+            color: category === cat.slug ? "#fff" : "#374151"
+          },
+          children: [
+            cat.name,
+            " (",
+            cat.post_count,
+            ")"
+          ]
+        },
+        cat.slug
+      ))
     ] }),
-    /* @__PURE__ */ jsx("p", { children: "Coming soon..." })
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+          gap: 24
+        },
+        children: posts.map(
+          (post) => renderPost ? /* @__PURE__ */ jsx(React.Fragment, { children: renderPost(post) }, post.id) : /* @__PURE__ */ jsx(BlogPostCard, { post, basePath }, post.id)
+        )
+      }
+    ),
+    showPagination && pagination.totalPages > 1 && /* @__PURE__ */ jsxs(
+      "nav",
+      {
+        style: {
+          marginTop: 40,
+          display: "flex",
+          justifyContent: "center",
+          gap: 8
+        },
+        children: [
+          pagination.hasPrev && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: buildPaginationUrl(basePath, page - 1, category),
+              style: paginationLinkStyle,
+              children: "\u2190 Previous"
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { style: { padding: "8px 16px", color: "#6b7280" }, children: [
+            "Page ",
+            pagination.page,
+            " of ",
+            pagination.totalPages
+          ] }),
+          pagination.hasNext && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: buildPaginationUrl(basePath, page + 1, category),
+              style: paginationLinkStyle,
+              children: "Next \u2192"
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function BlogPostCard({ post, basePath }) {
+  const date = post.published_at ? new Date(post.published_at).toLocaleDateString("en-US", {
+    month: "long",
+    day: "numeric",
+    year: "numeric"
+  }) : null;
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      style: {
+        backgroundColor: "#fff",
+        borderRadius: 12,
+        overflow: "hidden",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        transition: "box-shadow 0.2s, transform 0.2s"
+      },
+      children: [
+        post.featured_image && /* @__PURE__ */ jsx("a", { href: `${basePath}/${post.slug}`, children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: post.featured_image,
+            alt: post.featured_image_alt || post.title,
+            style: {
+              width: "100%",
+              height: 200,
+              objectFit: "cover"
+            }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: 20 }, children: [
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }, children: [
+            post.category && /* @__PURE__ */ jsx(
+              "span",
+              {
+                style: {
+                  padding: "2px 8px",
+                  borderRadius: 4,
+                  fontSize: 12,
+                  fontWeight: 500,
+                  backgroundColor: "#eff6ff",
+                  color: "#3b82f6",
+                  textTransform: "uppercase"
+                },
+                children: typeof post.category === "string" ? post.category : post.category?.name || "Uncategorized"
+              }
+            ),
+            date && /* @__PURE__ */ jsx("span", { style: { fontSize: 13, color: "#6b7280" }, children: date })
+          ] }),
+          /* @__PURE__ */ jsx("h3", { style: { margin: "0 0 8px", fontSize: 18, fontWeight: 600, lineHeight: 1.4 }, children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `${basePath}/${post.slug}`,
+              style: { color: "inherit", textDecoration: "none" },
+              children: post.title
+            }
+          ) }),
+          post.excerpt && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                margin: "0 0 16px",
+                fontSize: 14,
+                color: "#6b7280",
+                lineHeight: 1.6,
+                display: "-webkit-box",
+                WebkitLineClamp: 3,
+                WebkitBoxOrient: "vertical",
+                overflow: "hidden"
+              },
+              children: post.excerpt
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+            post.author && /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: "#6b7280" }, children: [
+              "By ",
+              typeof post.author === "string" ? post.author : post.author.name
+            ] }),
+            post.reading_time_minutes && /* @__PURE__ */ jsxs("span", { style: { fontSize: 13, color: "#9ca3af" }, 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__ */ jsxs("aside", { className, style: { display: "flex", flexDirection: "column", gap: 32 }, children: [
+    showSearch && /* @__PURE__ */ jsx(SearchWidget, { basePath }),
+    showCategories && categories.length > 0 && /* @__PURE__ */ jsx(
+      CategoriesWidget,
+      {
+        categories,
+        basePath,
+        currentCategory
+      }
+    ),
+    showRecentPosts && recentPosts.length > 0 && /* @__PURE__ */ jsx(RecentPostsWidget, { posts: recentPosts, basePath }),
+    showTags && tags.length > 0 && /* @__PURE__ */ jsx(TagsWidget, { tags, basePath }),
+    children
   ] });
 }
+function SearchWidget({ basePath }) {
+  return /* @__PURE__ */ jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsx("h4", { style: widgetTitleStyle, children: "Search" }),
+    /* @__PURE__ */ jsx("form", { action: basePath, method: "get", children: /* @__PURE__ */ 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__ */ jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsx("h4", { style: widgetTitleStyle, children: "Categories" }),
+    /* @__PURE__ */ jsxs("ul", { style: { listStyle: "none", margin: 0, padding: 0 }, children: [
+      /* @__PURE__ */ jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: basePath,
+          style: {
+            ...categoryLinkStyle,
+            fontWeight: !currentCategory ? 600 : 400,
+            color: !currentCategory ? "#3b82f6" : "#374151"
+          },
+          children: "All Posts"
+        }
+      ) }),
+      categories.map((cat) => /* @__PURE__ */ jsx("li", { style: { marginBottom: 8 }, children: /* @__PURE__ */ 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__ */ jsxs("span", { style: { color: "#9ca3af", marginLeft: 8 }, children: [
+              "(",
+              cat.post_count,
+              ")"
+            ] })
+          ]
+        }
+      ) }, cat.slug))
+    ] })
+  ] });
+}
+function RecentPostsWidget({
+  posts,
+  basePath
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsx("h4", { style: widgetTitleStyle, children: "Recent Posts" }),
+    /* @__PURE__ */ 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__ */ jsx(
+        "li",
+        {
+          style: {
+            marginBottom: 16,
+            paddingBottom: 16,
+            borderBottom: "1px solid #e5e7eb"
+          },
+          children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+            post.featured_image && /* @__PURE__ */ jsx("a", { href: `${basePath}/${post.slug}`, children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: post.featured_image,
+                alt: "",
+                style: {
+                  width: 64,
+                  height: 48,
+                  objectFit: "cover",
+                  borderRadius: 6,
+                  flexShrink: 0
+                }
+              }
+            ) }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
+              /* @__PURE__ */ 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__ */ jsx("span", { style: { fontSize: 12, color: "#9ca3af", display: "block", marginTop: 4 }, children: date })
+            ] })
+          ] })
+        },
+        post.id
+      );
+    }) })
+  ] });
+}
+function TagsWidget({
+  tags,
+  basePath
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: widgetStyle, children: [
+    /* @__PURE__ */ jsx("h4", { style: widgetTitleStyle, children: "Popular Tags" }),
+    /* @__PURE__ */ jsx("div", { style: { display: "flex", flexWrap: "wrap", gap: 8 }, children: tags.slice(0, 15).map((tag) => /* @__PURE__ */ 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__ */ jsxs("div", { style: { ...widgetStyle, backgroundColor: "#eff6ff" }, children: [
+    /* @__PURE__ */ jsx("h4", { style: { ...widgetTitleStyle, color: "#1e40af" }, children: title }),
+    /* @__PURE__ */ jsx("p", { style: { fontSize: 14, color: "#6b7280", marginBottom: 16 }, children: description }),
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: (e) => {
+          e.preventDefault();
+        },
+        style: { display: "flex", gap: 8 },
+        children: [
+          /* @__PURE__ */ 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__ */ 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__ */ jsxs("div", { className, children: [
+    hero && /* @__PURE__ */ 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__ */ jsxs("div", { style: { maxWidth, margin: "0 auto" }, children: [
+          hero.title && /* @__PURE__ */ jsx(
+            "h1",
+            {
+              style: {
+                fontSize: "clamp(32px, 5vw, 48px)",
+                fontWeight: 700,
+                marginBottom: 16
+              },
+              children: hero.title
+            }
+          ),
+          hero.subtitle && /* @__PURE__ */ jsx(
+            "p",
+            {
+              style: {
+                fontSize: "clamp(16px, 2vw, 20px)",
+                opacity: 0.9,
+                maxWidth: 600,
+                margin: "0 auto"
+              },
+              children: hero.subtitle
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          maxWidth,
+          margin: "0 auto",
+          padding: "40px 20px"
+        },
+        children: /* @__PURE__ */ 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__ */ jsx(
+                BlogSidebar,
+                {
+                  apiUrl,
+                  apiKey,
+                  basePath,
+                  currentCategory,
+                  ...sidebarProps
+                }
+              ),
+              /* @__PURE__ */ jsx("main", { style: { minWidth: 0 }, children }),
+              hasSidebar && layout === "sidebar-right" && /* @__PURE__ */ jsx(
+                BlogSidebar,
+                {
+                  apiUrl,
+                  apiKey,
+                  basePath,
+                  currentCategory,
+                  ...sidebarProps
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+async function BlogPage({ listComponent, ...layoutProps }) {
+  return /* @__PURE__ */ jsx(BlogLayout, { ...layoutProps, children: listComponent });
+}
+async function BlogPostPage({ postComponent, ...layoutProps }) {
+  return /* @__PURE__ */ jsx(BlogLayout, { ...layoutProps, showSidebar: false, layout: "full-width", children: /* @__PURE__ */ 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__ */ jsx(BlogLayout, { ...layoutProps, hero: categoryHero, currentCategory: category, children: listComponent });
+}
 function AuthorCard({ author, showBio = true, showSocial = true, className }) {
   return /* @__PURE__ */ jsxs("div", { className, style: { display: "flex", gap: 16, alignItems: "flex-start" }, children: [
     author.avatar_url && /* @__PURE__ */ jsx(
@@ -46,7 +1184,7 @@ function AuthorCard({ author, showBio = true, showSocial = true, className }) {
     ] })
   ] });
 }
-async function fetchRelatedPosts(apiUrl, apiKey, currentPostId, limit) {
+async function fetchRelatedPosts2(apiUrl, apiKey, currentPostId, limit) {
   try {
     const response = await fetch(`${apiUrl}/api/public/blog/related`, {
       method: "POST",
@@ -82,7 +1220,7 @@ async function RelatedPosts({
     console.warn("[Blog] No API key configured for RelatedPosts");
     return null;
   }
-  const posts = await fetchRelatedPosts(apiUrl, apiKey, currentPostId, limit);
+  const posts = await fetchRelatedPosts2(apiUrl, apiKey, currentPostId, limit);
   if (posts.length === 0) return null;
   return /* @__PURE__ */ jsxs("section", { className, children: [
     /* @__PURE__ */ jsx("h3", { style: { marginBottom: 16 }, children: "Related Posts" }),
@@ -189,6 +1327,6 @@ function TableOfContents({
   ] });
 }
 
-export { AuthorCard, BlogList, BlogPost, RelatedPosts, TableOfContents };
+export { AuthorCard, BlogLayout, BlogList, BlogPage, BlogPost, BlogPostPage, BlogSidebar, CategoryPage, NewsletterWidget, RelatedPosts, TableOfContents };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map