@burdenoff/website-sdk 2026.516.13 → 2026.516.15

package/dist/index.mjs

@@ -2758,6 +2758,15 @@ var PUBLIC_CONTENT_PAGES_QUERY = `
         title
         slug
         lastUpdated
+        tags
+        excerpt
+        thumbnail
+        author
+        publishedAt
+        readingTime
+        featured
+        category
+        seoDescription
       }
       total
       hasMore
@@ -2855,7 +2864,347 @@ function ContentRenderer({
   }
   return /* @__PURE__ */ jsx("div", { className, children: /* @__PURE__ */ jsx("pre", { style: { whiteSpace: "pre-wrap", fontFamily: "inherit" }, children: content }) });
 }
+var BLOG_POSTS_QUERY = `
+  query BlogPosts($productId: String!, $limit: Int, $offset: Int) {
+    publicContentPages(productId: $productId, limit: $limit, offset: $offset) {
+      items {
+        id
+        title
+        slug
+        lastUpdated
+        tags
+        excerpt
+        thumbnail
+        author
+        publishedAt
+        readingTime
+        featured
+        category
+        seoDescription
+      }
+      total
+      hasMore
+    }
+  }
+`;
+var BLOG_POST_QUERY = `
+  query BlogPost($slug: String!, $productId: String) {
+    publicContentPage(slug: $slug, productId: $productId) {
+      id
+      title
+      slug
+      content
+      contentFormat
+      seoTitle
+      seoDescription
+      seoKeywords
+      lastUpdated
+      tags
+      excerpt
+      thumbnail
+      author
+      publishedAt
+      readingTime
+      category
+    }
+  }
+`;
+function BlogCard({
+  post,
+  basePath = "/blog"
+}) {
+  const date = post.publishedAt || post.lastUpdated;
+  const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }) : "";
+  return /* @__PURE__ */ jsxs(
+    "a",
+    {
+      href: `${basePath}/${post.slug}`,
+      className: "group block bg-card border rounded-xl overflow-hidden hover:shadow-lg hover:border-primary/30 transition-all duration-300",
+      children: [
+        post.thumbnail ? /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] overflow-hidden", children: /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: post.thumbnail,
+            alt: post.title,
+            className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300",
+            loading: "lazy"
+          }
+        ) }) : /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] bg-muted/50 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            className: "w-12 h-12 text-muted-foreground/20",
+            fill: "none",
+            viewBox: "0 0 24 24",
+            stroke: "currentColor",
+            children: /* @__PURE__ */ jsx(
+              "path",
+              {
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                strokeWidth: 1.5,
+                d: "M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "p-5 sm:p-6", children: [
+          post.category && /* @__PURE__ */ jsx("span", { className: "inline-block text-xs font-medium text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-3", children: post.category }),
+          /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground mb-2 group-hover:text-primary transition-colors line-clamp-2", children: post.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground mb-4 line-clamp-3", children: post.excerpt || post.seoDescription || "" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-xs text-muted-foreground", children: [
+            post.author && /* @__PURE__ */ jsx("span", { className: "font-medium", children: post.author }),
+            post.author && formattedDate && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+            formattedDate && /* @__PURE__ */ jsx("span", { children: formattedDate }),
+            post.readingTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+              /* @__PURE__ */ jsxs("span", { children: [
+                post.readingTime,
+                " min read"
+              ] })
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function BlogListPage(props) {
+  const {
+    productName,
+    heroTitle = "Blog",
+    heroSubtitle = "Latest updates, engineering insights, and product news",
+    blogPostBasePath = "/blog",
+    className = "",
+    seoTitle,
+    seoDescription,
+    seoKeywords
+  } = props;
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const { product } = useProduct();
+  const resolvedProductId = product?.id || config.productId;
+  const [posts, setPosts] = useState([]);
+  const [total, setTotal] = useState(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [offset, setOffset] = useState(0);
+  const limit = 12;
+  const fetchPosts = useCallback(async () => {
+    if (!resolvedProductId) return;
+    setLoading(true);
+    try {
+      const result = await client.query(BLOG_POSTS_QUERY, {
+        productId: resolvedProductId,
+        limit,
+        offset
+      });
+      if (result.errors?.length) {
+        setError(result.errors[0]?.message ?? "Failed to load posts");
+        return;
+      }
+      const blogPosts = (result.data?.publicContentPages?.items || []).filter(
+        (p) => p.tags?.includes("blog")
+      );
+      setPosts(blogPosts);
+      setTotal(result.data?.publicContentPages?.total || 0);
+      setError(null);
+    } catch {
+      setError("Failed to load blog posts");
+    } finally {
+      setLoading(false);
+    }
+  }, [client, resolvedProductId, offset]);
+  useEffect(() => {
+    fetchPosts();
+  }, [fetchPosts]);
+  const featuredPosts = posts.filter((p) => p.featured);
+  const regularPosts = posts.filter((p) => !p.featured);
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
+    seoTitle && /* @__PURE__ */ jsx(
+      PageHead,
+      {
+        title: seoTitle,
+        description: seoDescription || heroSubtitle,
+        productName,
+        keywords: seoKeywords
+      }
+    ),
+    /* @__PURE__ */ jsx("section", { className: "py-16 sm:py-20 md:py-24", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxs("div", { className: "text-center max-w-3xl mx-auto", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground", children: heroTitle }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: heroSubtitle })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("section", { className: "pb-16 sm:pb-20", children: /* @__PURE__ */ jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: loading ? /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "bg-card border rounded-xl overflow-hidden animate-pulse",
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] bg-muted" }),
+          /* @__PURE__ */ jsxs("div", { className: "p-6 space-y-3", children: [
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-1/4" }),
+            /* @__PURE__ */ jsx("div", { className: "h-6 bg-muted rounded w-3/4" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded" }),
+            /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-1/2" })
+          ] })
+        ]
+      },
+      i
+    )) }) : error ? /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: error }) }) : posts.length === 0 ? /* @__PURE__ */ jsx("div", { className: "text-center py-12", children: /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: "No blog posts yet. Check back soon!" }) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+      featuredPosts.length > 0 && /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 gap-6 sm:gap-8 mb-8", children: featuredPosts.map((post) => /* @__PURE__ */ jsx(
+        BlogCard,
+        {
+          post,
+          basePath: blogPostBasePath
+        },
+        post.id
+      )) }),
+      /* @__PURE__ */ jsx("div", { className: "grid md:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8", children: regularPosts.map((post) => /* @__PURE__ */ jsx(
+        BlogCard,
+        {
+          post,
+          basePath: blogPostBasePath
+        },
+        post.id
+      )) }),
+      total > limit && /* @__PURE__ */ jsxs("div", { className: "flex justify-center gap-4 mt-12", children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOffset(Math.max(0, offset - limit)),
+            disabled: offset === 0,
+            className: "px-5 py-2.5 text-sm font-medium border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+            children: "Previous"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => setOffset(offset + limit),
+            disabled: offset + limit >= total,
+            className: "px-5 py-2.5 text-sm font-medium border rounded-lg disabled:opacity-40 hover:bg-muted transition-colors",
+            children: "Next"
+          }
+        )
+      ] })
+    ] }) }) })
+  ] });
+}
+function BlogPostPage(props) {
+  const { productName, blogListUrl = "/blog", className = "" } = props;
+  const client = useWebSDK();
+  const config = useWebSDKConfig();
+  const { product } = useProduct();
+  const resolvedProductId = product?.id || config.productId;
+  const [post, setPost] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const slug = typeof window !== "undefined" ? window.location.pathname.split("/").pop() || "" : "";
+  useEffect(() => {
+    if (!slug || !resolvedProductId) return;
+    async function fetchPost() {
+      setLoading(true);
+      try {
+        const result = await client.query(BLOG_POST_QUERY, {
+          slug,
+          productId: resolvedProductId
+        });
+        if (result.errors?.length) {
+          setError(result.errors[0]?.message ?? "Failed to load post");
+          return;
+        }
+        setPost(result.data?.publicContentPage ?? null);
+        setError(null);
+      } catch {
+        setError("Failed to load blog post");
+      } finally {
+        setLoading(false);
+      }
+    }
+    fetchPost();
+  }, [client, slug, resolvedProductId]);
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsx("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24", children: /* @__PURE__ */ jsxs("div", { className: "animate-pulse space-y-6", children: [
+      /* @__PURE__ */ jsx("div", { className: "h-8 bg-muted rounded w-2/3" }),
+      /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded w-1/3" }),
+      /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] bg-muted rounded-xl" }),
+      /* @__PURE__ */ jsx("div", { className: "space-y-3", children: [1, 2, 3, 4, 5].map((i) => /* @__PURE__ */ jsx("div", { className: "h-4 bg-muted rounded" }, i)) })
+    ] }) }) });
+  }
+  if (error || !post) {
+    return /* @__PURE__ */ jsx("div", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxs("div", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-24 text-center", children: [
+      /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mb-4", children: "Post not found" }),
+      /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: error || "This blog post doesn't exist or has been removed." }),
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: blogListUrl,
+          className: "text-primary hover:underline font-medium",
+          children: "\u2190 Back to Blog"
+        }
+      )
+    ] }) });
+  }
+  const date = post.publishedAt || post.lastUpdated;
+  const formattedDate = date ? new Date(date).toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric"
+  }) : "";
+  return /* @__PURE__ */ jsxs("div", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsx(
+      PageHead,
+      {
+        title: post.seoTitle || post.title,
+        description: post.seoDescription || post.excerpt || "",
+        productName,
+        keywords: post.seoKeywords || ""
+      }
+    ),
+    /* @__PURE__ */ jsxs("article", { className: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 sm:py-20", children: [
+      /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: blogListUrl,
+          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground mb-8 transition-colors",
+          children: "\u2190 Back to Blog"
+        }
+      ),
+      post.category && /* @__PURE__ */ jsx("span", { className: "inline-block text-xs font-medium text-primary bg-primary/10 px-2.5 py-1 rounded-full mb-4", children: post.category }),
+      /* @__PURE__ */ jsx("h1", { className: "text-3xl sm:text-4xl md:text-5xl font-bold tracking-tight text-foreground mb-4", children: post.title }),
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 text-sm text-muted-foreground mb-8", children: [
+        post.author && /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: post.author }),
+        post.author && formattedDate && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+        formattedDate && /* @__PURE__ */ jsx("span", { children: formattedDate }),
+        post.readingTime && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground/40", children: "\xB7" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            post.readingTime,
+            " min read"
+          ] })
+        ] })
+      ] }),
+      post.thumbnail && /* @__PURE__ */ jsx("div", { className: "aspect-[16/9] rounded-xl overflow-hidden mb-10", children: /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: post.thumbnail,
+          alt: post.title,
+          className: "w-full h-full object-cover"
+        }
+      ) }),
+      /* @__PURE__ */ jsx("div", { className: "prose prose-gray dark:prose-invert max-w-none", children: /* @__PURE__ */ jsx(
+        ContentRenderer,
+        {
+          content: post.content,
+          format: post.contentFormat
+        }
+      ) })
+    ] })
+  ] });
+}
 
-export { Button, ContactPage, ContentRenderer, Input, Label, NewsletterForm, NewsletterPage, PageHead, PricingPage, PricingSection, ProductProvider, RybbitAnalytics, Textarea, UnsubscribePage, WaitlistForm, WaitlistPage, WebSDKClient, WebSDKProvider, buttonVariants, cn, useContentPage, useContentPages, useProduct, useProductConfig, useWebSDK, useWebSDKConfig };
+export { BlogListPage, BlogPostPage, Button, ContactPage, ContentRenderer, Input, Label, NewsletterForm, NewsletterPage, PageHead, PricingPage, PricingSection, ProductProvider, RybbitAnalytics, Textarea, UnsubscribePage, WaitlistForm, WaitlistPage, WebSDKClient, WebSDKProvider, buttonVariants, cn, useContentPage, useContentPages, useProduct, useProductConfig, useWebSDK, useWebSDKConfig };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map