@btst/stack 2.7.0 → 2.8.0

package/README.md

@@ -40,6 +40,7 @@ Enable the features you need and keep building your product.
 | **OpenAPI** | Auto-generated API documentation with interactive Scalar UI |
 | **Route Docs** | Auto-generated client route documentation with interactive navigation |
 | **Better Auth UI** | Beautiful shadcn/ui authentication components for better-auth |
+| **Comments** | Commenting system with moderation, likes, and nested replies |
 
 Each plugin ships **frontend + backend together**:
 routes, APIs, database models, React components, SSR, and SEO — already wired.

package/dist/packages/stack/src/plugins/blog/client/components/loading/post-navigation-skeleton.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+
+function PostNavigationSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-t mt-4 pt-4 w-full flex flex-col sm:flex-row gap-4", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-14 flex-1 rounded-md" }),
+    /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-14 flex-1 rounded-md" })
+  ] });
+}
+
+exports.PostNavigationSkeleton = PostNavigationSkeleton;

package/dist/packages/stack/src/plugins/blog/client/components/loading/post-navigation-skeleton.mjs

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+
+function PostNavigationSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "border-t mt-4 pt-4 w-full flex flex-col sm:flex-row gap-4", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-14 flex-1 rounded-md" }),
+    /* @__PURE__ */ jsx(Skeleton, { className: "h-14 flex-1 rounded-md" })
+  ] });
+}
+
+export { PostNavigationSkeleton };

package/dist/packages/stack/src/plugins/blog/client/components/loading/recent-posts-carousel-skeleton.cjs

@@ -0,0 +1,17 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const skeleton = require('../../../../../../../ui/src/components/skeleton.cjs');
+const postCardSkeleton = require('./post-card-skeleton.cjs');
+
+function RecentPostsCarouselSkeleton() {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full mt-4 py-4 border-t", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-7 w-36" }),
+      /* @__PURE__ */ jsxRuntime.jsx(skeleton.Skeleton, { className: "h-4 w-16" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsxRuntime.jsx(postCardSkeleton.PostCardSkeleton, {}, i)) })
+  ] });
+}
+
+exports.RecentPostsCarouselSkeleton = RecentPostsCarouselSkeleton;

package/dist/packages/stack/src/plugins/blog/client/components/loading/recent-posts-carousel-skeleton.mjs

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Skeleton } from '../../../../../../../ui/src/components/skeleton.mjs';
+import { PostCardSkeleton } from './post-card-skeleton.mjs';
+
+function RecentPostsCarouselSkeleton() {
+  return /* @__PURE__ */ jsxs("div", { className: "w-full mt-4 py-4 border-t", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between mb-4", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-7 w-36" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-16" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx(PostCardSkeleton, {}, i)) })
+  ] });
+}
+
+export { RecentPostsCarouselSkeleton };

package/dist/packages/stack/src/plugins/blog/client/components/pages/post-page.internal.cjs

@@ -17,6 +17,9 @@ const badge = require('../../../../../../../ui/src/components/badge.cjs');
 const useRouteLifecycle = require('../../../../../../../ui/src/hooks/use-route-lifecycle.cjs');
 const onThisPage = require('../shared/on-this-page.cjs');
 const context$1 = require('@btst/stack/plugins/ai-chat/client/context');
+const whenVisible = require('../../../../../../../ui/src/components/when-visible.cjs');
+const postNavigationSkeleton = require('../loading/post-navigation-skeleton.cjs');
+const recentPostsCarouselSkeleton = require('../loading/recent-posts-carousel-skeleton.cjs');
 
 function PostPage({ slug }) {
   const overrides = context.usePluginOverrides("blog", {
@@ -40,13 +43,13 @@ function PostPage({ slug }) {
     }
   });
   const { post } = blogHooks.useSuspensePost(slug ?? "");
-  const { previousPost, nextPost, ref } = blogHooks.useNextPreviousPosts(
+  const { previousPost, nextPost } = blogHooks.useNextPreviousPosts(
     post?.createdAt ?? /* @__PURE__ */ new Date(),
     {
       enabled: !!post
     }
   );
-  const { recentPosts, ref: recentPostsRef } = blogHooks.useRecentPosts({
+  const { recentPosts } = blogHooks.useRecentPosts({
     limit: 5,
     excludeSlug: slug,
     enabled: !!post
@@ -94,14 +97,22 @@ ${post.content ?? ""}`.slice(
       /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full px-3", children: /* @__PURE__ */ jsxRuntime.jsx(markdownContent.MarkdownContent, { markdown: post.content }) }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-4 w-full", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          postNavigation.PostNavigation,
+          whenVisible.WhenVisible,
           {
-            previousPost,
-            nextPost,
-            ref
+            rootMargin: "200px",
+            fallback: /* @__PURE__ */ jsxRuntime.jsx(postNavigationSkeleton.PostNavigationSkeleton, {}),
+            children: /* @__PURE__ */ jsxRuntime.jsx(postNavigation.PostNavigation, { previousPost, nextPost })
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(recentPostsCarousel.RecentPostsCarousel, { posts: recentPosts, ref: recentPostsRef })
+        /* @__PURE__ */ jsxRuntime.jsx(
+          whenVisible.WhenVisible,
+          {
+            rootMargin: "200px",
+            fallback: /* @__PURE__ */ jsxRuntime.jsx(recentPostsCarouselSkeleton.RecentPostsCarouselSkeleton, {}),
+            children: /* @__PURE__ */ jsxRuntime.jsx(recentPostsCarousel.RecentPostsCarousel, { posts: recentPosts })
+          }
+        ),
+        overrides.postBottomSlot && /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "post-bottom-slot", children: overrides.postBottomSlot(post) })
       ] })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(onThisPage.OnThisPage, { markdown: post.content })

package/dist/packages/stack/src/plugins/blog/client/components/pages/post-page.internal.mjs

@@ -15,6 +15,9 @@ import { Badge } from '../../../../../../../ui/src/components/badge.mjs';
 import { useRouteLifecycle } from '../../../../../../../ui/src/hooks/use-route-lifecycle.mjs';
 import { OnThisPageSelect, OnThisPage } from '../shared/on-this-page.mjs';
 import { useRegisterPageAIContext } from '@btst/stack/plugins/ai-chat/client/context';
+import { WhenVisible } from '../../../../../../../ui/src/components/when-visible.mjs';
+import { PostNavigationSkeleton } from '../loading/post-navigation-skeleton.mjs';
+import { RecentPostsCarouselSkeleton } from '../loading/recent-posts-carousel-skeleton.mjs';
 
 function PostPage({ slug }) {
   const overrides = usePluginOverrides("blog", {
@@ -38,13 +41,13 @@ function PostPage({ slug }) {
     }
   });
   const { post } = useSuspensePost(slug ?? "");
-  const { previousPost, nextPost, ref } = useNextPreviousPosts(
+  const { previousPost, nextPost } = useNextPreviousPosts(
     post?.createdAt ?? /* @__PURE__ */ new Date(),
     {
       enabled: !!post
     }
   );
-  const { recentPosts, ref: recentPostsRef } = useRecentPosts({
+  const { recentPosts } = useRecentPosts({
     limit: 5,
     excludeSlug: slug,
     enabled: !!post
@@ -92,14 +95,22 @@ ${post.content ?? ""}`.slice(
       /* @__PURE__ */ jsx("div", { className: "w-full px-3", children: /* @__PURE__ */ jsx(MarkdownContent, { markdown: post.content }) }),
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 w-full", children: [
         /* @__PURE__ */ jsx(
-          PostNavigation,
+          WhenVisible,
           {
-            previousPost,
-            nextPost,
-            ref
+            rootMargin: "200px",
+            fallback: /* @__PURE__ */ jsx(PostNavigationSkeleton, {}),
+            children: /* @__PURE__ */ jsx(PostNavigation, { previousPost, nextPost })
           }
         ),
-        /* @__PURE__ */ jsx(RecentPostsCarousel, { posts: recentPosts, ref: recentPostsRef })
+        /* @__PURE__ */ jsx(
+          WhenVisible,
+          {
+            rootMargin: "200px",
+            fallback: /* @__PURE__ */ jsx(RecentPostsCarouselSkeleton, {}),
+            children: /* @__PURE__ */ jsx(RecentPostsCarousel, { posts: recentPosts })
+          }
+        ),
+        overrides.postBottomSlot && /* @__PURE__ */ jsx("div", { "data-testid": "post-bottom-slot", children: overrides.postBottomSlot(post) })
       ] })
     ] }),
     /* @__PURE__ */ jsx(OnThisPage, { markdown: post.content })

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-navigation.cjs

@@ -9,66 +9,62 @@ const defaults = require('./defaults.cjs');
 
 function PostNavigation({
   previousPost,
-  nextPost,
-  ref
+  nextPost
 }) {
   const { Link } = context.usePluginOverrides("blog", {
     Link: defaults.DefaultLink
   });
   const basePath = context.useBasePath();
   const blogPath = `${basePath}/blog`;
-  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    ref && /* @__PURE__ */ jsxRuntime.jsx("div", { ref }),
-    (previousPost || nextPost) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t mt-4 pt-4 w-full" }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 w-full justify-between", children: [
-        previousPost ? /* @__PURE__ */ jsxRuntime.jsx(
-          Link,
-          {
-            "data-testid": "previous-post-link",
-            href: `${blogPath}/${previousPost.slug}`,
-            className: "flex-1 sm:max-w-1/3",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                variant: "outline",
-                className: "w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-4 w-4 shrink-0" }),
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
-                  ] })
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: (previousPost || nextPost) && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-t mt-4 pt-4 w-full" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col sm:flex-row gap-4 w-full justify-between", children: [
+      previousPost ? /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          "data-testid": "previous-post-link",
+          href: `${blogPath}/${previousPost.slug}`,
+          className: "flex-1 sm:max-w-1/3",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              className: "w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronLeft, { className: "h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
                 ] })
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-        nextPost ? /* @__PURE__ */ jsxRuntime.jsx(
-          Link,
-          {
-            "data-testid": "next-post-link",
-            href: `${blogPath}/${nextPost.slug}`,
-            className: "flex-1 sm:max-w-1/3",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              button.Button,
-              {
-                variant: "outline",
-                className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
-                children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-                  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
-                    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "h-4 w-4 shrink-0" })
-                ] })
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
-      ] })
+              ] })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+      nextPost ? /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
+        {
+          "data-testid": "next-post-link",
+          href: `${blogPath}/${nextPost.slug}`,
+          className: "flex-1 sm:max-w-1/3",
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            button.Button,
+            {
+              variant: "outline",
+              className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
+              children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+                /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
+                ] }),
+                /* @__PURE__ */ jsxRuntime.jsx(LucideIcons.ChevronRight, { className: "h-4 w-4 shrink-0" })
+              ] })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" })
     ] })
-  ] });
+  ] }) });
 }
 
 exports.PostNavigation = PostNavigation;

package/dist/packages/stack/src/plugins/blog/client/components/shared/post-navigation.mjs

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { usePluginOverrides, useBasePath } from '@btst/stack/context';
 import { Button } from '../../../../../../../ui/src/components/button.mjs';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
@@ -7,66 +7,62 @@ import { DefaultLink } from './defaults.mjs';
 
 function PostNavigation({
   previousPost,
-  nextPost,
-  ref
+  nextPost
 }) {
   const { Link } = usePluginOverrides("blog", {
     Link: DefaultLink
   });
   const basePath = useBasePath();
   const blogPath = `${basePath}/blog`;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
-    ref && /* @__PURE__ */ jsx("div", { ref }),
-    (previousPost || nextPost) && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "border-t mt-4 pt-4 w-full" }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 w-full justify-between", children: [
-        previousPost ? /* @__PURE__ */ jsx(
-          Link,
-          {
-            "data-testid": "previous-post-link",
-            href: `${blogPath}/${previousPost.slug}`,
-            className: "flex-1 sm:max-w-1/3",
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                className: "w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-                  /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 shrink-0" }),
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
-                    /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
-                  ] })
+  return /* @__PURE__ */ jsx(Fragment, { children: (previousPost || nextPost) && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "border-t mt-4 pt-4 w-full" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col sm:flex-row gap-4 w-full justify-between", children: [
+      previousPost ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          "data-testid": "previous-post-link",
+          href: `${blogPath}/${previousPost.slug}`,
+          className: "flex-1 sm:max-w-1/3",
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+                /* @__PURE__ */ jsx(ChevronLeft, { className: "h-4 w-4 shrink-0" }),
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-start min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Previous" }),
+                  /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: previousPost.title })
                 ] })
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        nextPost ? /* @__PURE__ */ jsx(
-          Link,
-          {
-            "data-testid": "next-post-link",
-            href: `${blogPath}/${nextPost.slug}`,
-            className: "flex-1 sm:max-w-1/3",
-            children: /* @__PURE__ */ jsx(
-              Button,
-              {
-                variant: "outline",
-                className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
-                children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
-                  /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
-                    /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
-                  ] }),
-                  /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })
-                ] })
-              }
-            )
-          }
-        ) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
-      ] })
+              ] })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+      nextPost ? /* @__PURE__ */ jsx(
+        Link,
+        {
+          "data-testid": "next-post-link",
+          href: `${blogPath}/${nextPost.slug}`,
+          className: "flex-1 sm:max-w-1/3",
+          children: /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              className: "w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer",
+              children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 w-full min-w-0", children: [
+                /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-end min-w-0 flex-1", children: [
+                  /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: "Next" }),
+                  /* @__PURE__ */ jsx("div", { className: "font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start", children: nextPost.title })
+                ] }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 shrink-0" })
+              ] })
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "flex-1" })
     ] })
-  ] });
+  ] }) });
 }
 
 export { PostNavigation };

package/dist/packages/stack/src/plugins/blog/client/components/shared/recent-posts-carousel.cjs

@@ -8,7 +8,7 @@ const postCard = require('./post-card.cjs');
 const defaults = require('./defaults.cjs');
 const index = require('../../localization/index.cjs');
 
-function RecentPostsCarousel({ posts, ref }) {
+function RecentPostsCarousel({ posts }) {
   const { PostCard, Link, localization } = context.usePluginOverrides("blog", {
     PostCard: postCard.PostCard,
     Link: defaults.DefaultLink,
@@ -16,44 +16,41 @@ function RecentPostsCarousel({ posts, ref }) {
   });
   const PostCardComponent = PostCard || postCard.PostCard;
   const basePath = context.useBasePath();
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-full", children: [
-    ref && /* @__PURE__ */ jsxRuntime.jsx("div", { ref }),
-    posts && posts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Link,
-          {
-            href: `${basePath}/blog`,
-            className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-            children: localization.BLOG_POST_VIEW_ALL
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "recent-posts-carousel", children: /* @__PURE__ */ jsxRuntime.jsxs(
-        carousel.Carousel,
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: posts && posts.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Link,
         {
-          opts: {
-            align: "start",
-            loop: false
-          },
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselContent, { className: "-ml-2 md:-ml-4", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
-              carousel.CarouselItem,
-              {
-                className: "pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3",
-                children: /* @__PURE__ */ jsxRuntime.jsx(PostCardComponent, { post })
-              },
-              post.id
-            )) }),
-            /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselPrevious, { className: "-left-4 z-50 hover:cursor-pointer" }),
-            /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselNext, { className: "-right-4 z-50 hover:cursor-pointer" })
-          ]
+          href: `${basePath}/blog`,
+          className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: localization.BLOG_POST_VIEW_ALL
         }
-      ) })
-    ] })
-  ] });
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-testid": "recent-posts-carousel", children: /* @__PURE__ */ jsxRuntime.jsxs(
+      carousel.Carousel,
+      {
+        opts: {
+          align: "start",
+          loop: false
+        },
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselContent, { className: "-ml-2 md:-ml-4", children: posts.map((post) => /* @__PURE__ */ jsxRuntime.jsx(
+            carousel.CarouselItem,
+            {
+              className: "pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3",
+              children: /* @__PURE__ */ jsxRuntime.jsx(PostCardComponent, { post })
+            },
+            post.id
+          )) }),
+          /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselPrevious, { className: "-left-4 z-50 hover:cursor-pointer" }),
+          /* @__PURE__ */ jsxRuntime.jsx(carousel.CarouselNext, { className: "-right-4 z-50 hover:cursor-pointer" })
+        ]
+      }
+    ) })
+  ] }) });
 }
 
 exports.RecentPostsCarousel = RecentPostsCarousel;

package/dist/packages/stack/src/plugins/blog/client/components/shared/recent-posts-carousel.mjs

@@ -1,12 +1,12 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { usePluginOverrides, useBasePath } from '@btst/stack/context';
 import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from '../../../../../../../ui/src/components/carousel.mjs';
 import { PostCard } from './post-card.mjs';
 import { DefaultLink } from './defaults.mjs';
 import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
 
-function RecentPostsCarousel({ posts, ref }) {
+function RecentPostsCarousel({ posts }) {
   const { PostCard: PostCard$1, Link, localization } = usePluginOverrides("blog", {
     PostCard: PostCard,
     Link: DefaultLink,
@@ -14,44 +14,41 @@ function RecentPostsCarousel({ posts, ref }) {
   });
   const PostCardComponent = PostCard$1 || PostCard;
   const basePath = useBasePath();
-  return /* @__PURE__ */ jsxs("div", { className: "w-full", children: [
-    ref && /* @__PURE__ */ jsx("div", { ref }),
-    posts && posts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
-        /* @__PURE__ */ jsx(
-          Link,
-          {
-            href: `${basePath}/blog`,
-            className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
-            children: localization.BLOG_POST_VIEW_ALL
-          }
-        )
-      ] }) }),
-      /* @__PURE__ */ jsx("div", { "data-testid": "recent-posts-carousel", children: /* @__PURE__ */ jsxs(
-        Carousel,
+  return /* @__PURE__ */ jsx("div", { className: "w-full", children: posts && posts.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mt-4 py-4 w-full text-start border-t", children: /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold", children: localization.BLOG_POST_KEEP_READING }),
+      /* @__PURE__ */ jsx(
+        Link,
         {
-          opts: {
-            align: "start",
-            loop: false
-          },
-          className: "w-full",
-          children: [
-            /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: posts.map((post) => /* @__PURE__ */ jsx(
-              CarouselItem,
-              {
-                className: "pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3",
-                children: /* @__PURE__ */ jsx(PostCardComponent, { post })
-              },
-              post.id
-            )) }),
-            /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-4 z-50 hover:cursor-pointer" }),
-            /* @__PURE__ */ jsx(CarouselNext, { className: "-right-4 z-50 hover:cursor-pointer" })
-          ]
+          href: `${basePath}/blog`,
+          className: "text-sm text-muted-foreground hover:text-foreground transition-colors",
+          children: localization.BLOG_POST_VIEW_ALL
         }
-      ) })
-    ] })
-  ] });
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { "data-testid": "recent-posts-carousel", children: /* @__PURE__ */ jsxs(
+      Carousel,
+      {
+        opts: {
+          align: "start",
+          loop: false
+        },
+        className: "w-full",
+        children: [
+          /* @__PURE__ */ jsx(CarouselContent, { className: "-ml-2 md:-ml-4", children: posts.map((post) => /* @__PURE__ */ jsx(
+            CarouselItem,
+            {
+              className: "pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3",
+              children: /* @__PURE__ */ jsx(PostCardComponent, { post })
+            },
+            post.id
+          )) }),
+          /* @__PURE__ */ jsx(CarouselPrevious, { className: "-left-4 z-50 hover:cursor-pointer" }),
+          /* @__PURE__ */ jsx(CarouselNext, { className: "-right-4 z-50 hover:cursor-pointer" })
+        ]
+      }
+    ) })
+  ] }) });
 }
 
 export { RecentPostsCarousel };