@btst/stack 1.0.1 → 1.1.1

package/dist/plugins/blog/client/components/pages/home-page.cjs

@@ -0,0 +1,41 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const index = require('../loading/index.cjs');
+const _404Page = require('./404-page.cjs');
+
+const HomePage = React.lazy(
+  () => import('./home-page.internal.cjs').then((m) => ({ default: m.HomePage }))
+);
+function HomePageComponent({
+  published = true
+}) {
+  const { onRouteError } = context.usePluginOverrides("blog");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: published ? "/blog" : "/blog/drafts",
+      PageComponent: HomePage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: index.PostsLoading,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { published },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("posts", error, {
+            path: published ? "/blog" : "/blog/drafts",
+            isSSR: typeof window === "undefined",
+            published
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.HomePageComponent = HomePageComponent;

package/dist/plugins/blog/client/components/pages/home-page.internal.cjs

@@ -0,0 +1,61 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const pageHeader = require('../shared/page-header.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const postsList = require('../shared/posts-list.cjs');
+const tagsList = require('../shared/tags-list.cjs');
+const blogHooks = require('../../hooks/blog-hooks.cjs');
+const index = require('../../localization/index.cjs');
+const context = require('@btst/stack/context');
+const useRouteLifecycle = require('../shared/use-route-lifecycle.cjs');
+
+function HomePage({ published }) {
+  const { localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: published ? "posts" : "drafts",
+    context: {
+      path: published ? "/blog" : "/blog/drafts",
+      isSSR: typeof window === "undefined",
+      published
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (published && overrides.onBeforePostsPageRendered) {
+        return overrides.onBeforePostsPageRendered(context);
+      }
+      if (!published && overrides.onBeforeDraftsPageRendered) {
+        return overrides.onBeforeDraftsPageRendered(context);
+      }
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { testId: published ? "home-page" : "drafts-home-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col items-center gap-3", children: /* @__PURE__ */ jsxRuntime.jsx(
+      pageHeader.PageHeader,
+      {
+        title: published ? localization.BLOG_LIST_TITLE : localization.BLOG_LIST_DRAFTS_TITLE,
+        childrenBottom: /* @__PURE__ */ jsxRuntime.jsx(tagsList.TagsList, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Content, { published })
+  ] });
+}
+function Content({ published }) {
+  const { posts, loadMore, hasMore, isLoadingMore } = blogHooks.useSuspensePosts({
+    published
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    postsList.PostsList,
+    {
+      posts,
+      onLoadMore: loadMore,
+      hasMore,
+      isLoadingMore
+    }
+  );
+}
+
+exports.HomePage = HomePage;

package/dist/plugins/blog/client/components/pages/home-page.internal.mjs

@@ -0,0 +1,59 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PageHeader } from '../shared/page-header.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { PostsList } from '../shared/posts-list.mjs';
+import { TagsList } from '../shared/tags-list.mjs';
+import { useSuspensePosts } from '../../hooks/blog-hooks.mjs';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { usePluginOverrides } from '@btst/stack/context';
+import { useRouteLifecycle } from '../shared/use-route-lifecycle.mjs';
+
+function HomePage({ published }) {
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  useRouteLifecycle({
+    routeName: published ? "posts" : "drafts",
+    context: {
+      path: published ? "/blog" : "/blog/drafts",
+      isSSR: typeof window === "undefined",
+      published
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (published && overrides.onBeforePostsPageRendered) {
+        return overrides.onBeforePostsPageRendered(context);
+      }
+      if (!published && overrides.onBeforeDraftsPageRendered) {
+        return overrides.onBeforeDraftsPageRendered(context);
+      }
+      return true;
+    }
+  });
+  return /* @__PURE__ */ jsxs(PageWrapper, { testId: published ? "home-page" : "drafts-home-page", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex flex-col items-center gap-3", children: /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: published ? localization.BLOG_LIST_TITLE : localization.BLOG_LIST_DRAFTS_TITLE,
+        childrenBottom: /* @__PURE__ */ jsx(TagsList, {})
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Content, { published })
+  ] });
+}
+function Content({ published }) {
+  const { posts, loadMore, hasMore, isLoadingMore } = useSuspensePosts({
+    published
+  });
+  return /* @__PURE__ */ jsx(
+    PostsList,
+    {
+      posts,
+      onLoadMore: loadMore,
+      hasMore,
+      isLoadingMore
+    }
+  );
+}
+
+export { HomePage };

package/dist/plugins/blog/client/components/pages/home-page.mjs

@@ -0,0 +1,39 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { PostsLoading } from '../loading/index.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const HomePage = lazy(
+  () => import('./home-page.internal.mjs').then((m) => ({ default: m.HomePage }))
+);
+function HomePageComponent({
+  published = true
+}) {
+  const { onRouteError } = usePluginOverrides("blog");
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: published ? "/blog" : "/blog/drafts",
+      PageComponent: HomePage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: PostsLoading,
+      NotFoundComponent: NotFoundPage,
+      props: { published },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("posts", error, {
+            path: published ? "/blog" : "/blog/drafts",
+            isSSR: typeof window === "undefined",
+            published
+          });
+        }
+      }
+    }
+  );
+}
+
+export { HomePageComponent };

package/dist/plugins/blog/client/components/pages/new-post-page.cjs

@@ -0,0 +1,37 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const index = require('../loading/index.cjs');
+const _404Page = require('./404-page.cjs');
+
+const NewPostPage = React.lazy(
+  () => import('./new-post-page.internal.cjs').then((m) => ({ default: m.NewPostPage }))
+);
+function NewPostPageComponent() {
+  const { onRouteError } = context.usePluginOverrides("blog");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: "/blog/new",
+      PageComponent: NewPostPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: index.FormLoading,
+      NotFoundComponent: _404Page.NotFoundPage,
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("newPost", error, {
+            path: `/blog/new`,
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.NewPostPageComponent = NewPostPageComponent;

package/dist/plugins/blog/client/components/pages/new-post-page.internal.cjs

@@ -0,0 +1,53 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const postForms = require('../forms/post-forms.cjs');
+const pageHeader = require('../shared/page-header.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const index = require('../../localization/index.cjs');
+const useRouteLifecycle = require('../shared/use-route-lifecycle.cjs');
+
+function NewPostPage() {
+  const { localization } = context.usePluginOverrides("blog", {
+    localization: index.BLOG_LOCALIZATION
+  });
+  const { navigate } = context.usePluginOverrides("blog");
+  const basePath = context.useBasePath();
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "newPost",
+    context: {
+      path: "/blog/new",
+      isSSR: typeof window === "undefined"
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (overrides.onBeforeNewPostPageRendered) {
+        return overrides.onBeforeNewPostPageRendered(context);
+      }
+      return true;
+    }
+  });
+  const handleClose = () => {
+    navigate(`${basePath}/blog`);
+  };
+  const handleSuccess = (post) => {
+    if (post.published) {
+      navigate(`${basePath}/blog`);
+    } else {
+      navigate(`${basePath}/blog/drafts`);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(pageWrapper.PageWrapper, { className: "gap-6", testId: "new-post-page", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      pageHeader.PageHeader,
+      {
+        title: localization.BLOG_POST_ADD_TITLE,
+        description: localization.BLOG_POST_ADD_DESCRIPTION
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(postForms.AddPostForm, { onClose: handleClose, onSuccess: handleSuccess })
+  ] });
+}
+
+exports.NewPostPage = NewPostPage;

package/dist/plugins/blog/client/components/pages/new-post-page.internal.mjs

@@ -0,0 +1,51 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { AddPostForm } from '../forms/post-forms.mjs';
+import { PageHeader } from '../shared/page-header.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { useRouteLifecycle } from '../shared/use-route-lifecycle.mjs';
+
+function NewPostPage() {
+  const { localization } = usePluginOverrides("blog", {
+    localization: BLOG_LOCALIZATION
+  });
+  const { navigate } = usePluginOverrides("blog");
+  const basePath = useBasePath();
+  useRouteLifecycle({
+    routeName: "newPost",
+    context: {
+      path: "/blog/new",
+      isSSR: typeof window === "undefined"
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (overrides.onBeforeNewPostPageRendered) {
+        return overrides.onBeforeNewPostPageRendered(context);
+      }
+      return true;
+    }
+  });
+  const handleClose = () => {
+    navigate(`${basePath}/blog`);
+  };
+  const handleSuccess = (post) => {
+    if (post.published) {
+      navigate(`${basePath}/blog`);
+    } else {
+      navigate(`${basePath}/blog/drafts`);
+    }
+  };
+  return /* @__PURE__ */ jsxs(PageWrapper, { className: "gap-6", testId: "new-post-page", children: [
+    /* @__PURE__ */ jsx(
+      PageHeader,
+      {
+        title: localization.BLOG_POST_ADD_TITLE,
+        description: localization.BLOG_POST_ADD_DESCRIPTION
+      }
+    ),
+    /* @__PURE__ */ jsx(AddPostForm, { onClose: handleClose, onSuccess: handleSuccess })
+  ] });
+}
+
+export { NewPostPage };

package/dist/plugins/blog/client/components/pages/new-post-page.mjs

@@ -0,0 +1,35 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { FormLoading } from '../loading/index.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const NewPostPage = lazy(
+  () => import('./new-post-page.internal.mjs').then((m) => ({ default: m.NewPostPage }))
+);
+function NewPostPageComponent() {
+  const { onRouteError } = usePluginOverrides("blog");
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: "/blog/new",
+      PageComponent: NewPostPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: FormLoading,
+      NotFoundComponent: NotFoundPage,
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("newPost", error, {
+            path: `/blog/new`,
+            isSSR: typeof window === "undefined"
+          });
+        }
+      }
+    }
+  );
+}
+
+export { NewPostPageComponent };

package/dist/plugins/blog/client/components/pages/post-page.cjs

@@ -0,0 +1,39 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const React = require('react');
+const context = require('@btst/stack/context');
+const components = require('@btst/stack/client/components');
+const defaultError = require('../shared/default-error.cjs');
+const index = require('../loading/index.cjs');
+const _404Page = require('./404-page.cjs');
+
+const PostPage = React.lazy(
+  () => import('./post-page.internal.cjs').then((m) => ({ default: m.PostPage }))
+);
+function PostPageComponent({ slug }) {
+  const { onRouteError } = context.usePluginOverrides("blog");
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    components.ComposedRoute,
+    {
+      path: `/blog/${slug}`,
+      PageComponent: PostPage,
+      ErrorComponent: defaultError.DefaultError,
+      LoadingComponent: index.PostLoading,
+      NotFoundComponent: _404Page.NotFoundPage,
+      props: { slug },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("post", error, {
+            path: `/blog/${slug}`,
+            isSSR: typeof window === "undefined",
+            slug
+          });
+        }
+      }
+    }
+  );
+}
+
+exports.PostPageComponent = PostPageComponent;

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

@@ -0,0 +1,101 @@
+"use client";
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const context = require('@btst/stack/context');
+const dateFns = require('date-fns');
+const blogHooks = require('../../hooks/blog-hooks.cjs');
+const emptyList = require('../shared/empty-list.cjs');
+const markdownContent = require('../shared/markdown-content.cjs');
+const pageHeader = require('../shared/page-header.cjs');
+const pageWrapper = require('../shared/page-wrapper.cjs');
+const defaults = require('../shared/defaults.cjs');
+const index = require('../../localization/index.cjs');
+const postNavigation = require('../shared/post-navigation.cjs');
+const recentPostsCarousel = require('../shared/recent-posts-carousel.cjs');
+const badge = require('@workspace/ui/components/badge');
+const useRouteLifecycle = require('../shared/use-route-lifecycle.cjs');
+const onThisPage = require('../shared/on-this-page.cjs');
+
+function PostPage({ slug }) {
+  const { Image, localization } = context.usePluginOverrides("blog", {
+    Image: defaults.DefaultImage,
+    localization: index.BLOG_LOCALIZATION
+  });
+  useRouteLifecycle.useRouteLifecycle({
+    routeName: "post",
+    context: {
+      path: `/blog/${slug}`,
+      params: { slug },
+      isSSR: typeof window === "undefined"
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (overrides.onBeforePostPageRendered) {
+        return overrides.onBeforePostPageRendered(slug, context);
+      }
+      return true;
+    }
+  });
+  const { post } = blogHooks.useSuspensePost(slug ?? "");
+  const { previousPost, nextPost, ref } = blogHooks.useNextPreviousPosts(
+    post?.createdAt ?? /* @__PURE__ */ new Date(),
+    {
+      enabled: !!post
+    }
+  );
+  const { recentPosts, ref: recentPostsRef } = blogHooks.useRecentPosts({
+    limit: 5,
+    excludeSlug: slug,
+    enabled: !!post
+  });
+  if (!slug || !post) {
+    return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(emptyList.EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(pageWrapper.PageWrapper, { className: "gap-0 px-4 lg:px-4 py-0 pb-18", testId: "post-page", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start w-full", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-44 shrink-0 hidden xl:flex mr-auto" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center flex-1 mx-auto w-full max-w-4xl min-w-0", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(onThisPage.OnThisPageSelect, { markdown: post.content }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        pageHeader.PageHeader,
+        {
+          title: post.title,
+          description: post.excerpt,
+          childrenTop: /* @__PURE__ */ jsxRuntime.jsx(PostHeaderTop, { post })
+        }
+      ),
+      post.image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-2 mt-6 aspect-video w-full relative", children: /* @__PURE__ */ jsxRuntime.jsx(
+        Image,
+        {
+          src: post.image,
+          alt: post.title,
+          className: "object-cover transition-transform duration-200"
+        }
+      ) }),
+      /* @__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,
+          {
+            previousPost,
+            nextPost,
+            ref
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(recentPostsCarousel.RecentPostsCarousel, { posts: recentPosts, ref: recentPostsRef })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(onThisPage.OnThisPage, { markdown: post.content })
+  ] }) });
+}
+function PostHeaderTop({ post }) {
+  const { Link } = context.usePluginOverrides("blog", {
+    Link: defaults.DefaultLink
+  });
+  const basePath = context.useBasePath();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-row items-center gap-2 flex-wrap mt-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-light text-muted-foreground text-sm", children: dateFns.formatDate(post.createdAt, "MMMM d, yyyy") }),
+    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap gap-2", children: post.tags.map((tag) => /* @__PURE__ */ jsxRuntime.jsx(Link, { href: `${basePath}/blog/tag/${tag.slug}`, children: /* @__PURE__ */ jsxRuntime.jsx(badge.Badge, { variant: "secondary", className: "text-xs", children: tag.name }) }, tag.id)) })
+  ] });
+}
+
+exports.PostPage = PostPage;

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

@@ -0,0 +1,99 @@
+"use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { usePluginOverrides, useBasePath } from '@btst/stack/context';
+import { formatDate } from 'date-fns';
+import { useSuspensePost, useNextPreviousPosts, useRecentPosts } from '../../hooks/blog-hooks.mjs';
+import { EmptyList } from '../shared/empty-list.mjs';
+import { MarkdownContent } from '../shared/markdown-content.mjs';
+import { PageHeader } from '../shared/page-header.mjs';
+import { PageWrapper } from '../shared/page-wrapper.mjs';
+import { DefaultImage, DefaultLink } from '../shared/defaults.mjs';
+import { BLOG_LOCALIZATION } from '../../localization/index.mjs';
+import { PostNavigation } from '../shared/post-navigation.mjs';
+import { RecentPostsCarousel } from '../shared/recent-posts-carousel.mjs';
+import { Badge } from '@workspace/ui/components/badge';
+import { useRouteLifecycle } from '../shared/use-route-lifecycle.mjs';
+import { OnThisPageSelect, OnThisPage } from '../shared/on-this-page.mjs';
+
+function PostPage({ slug }) {
+  const { Image, localization } = usePluginOverrides("blog", {
+    Image: DefaultImage,
+    localization: BLOG_LOCALIZATION
+  });
+  useRouteLifecycle({
+    routeName: "post",
+    context: {
+      path: `/blog/${slug}`,
+      params: { slug },
+      isSSR: typeof window === "undefined"
+    },
+    beforeRenderHook: (overrides, context) => {
+      if (overrides.onBeforePostPageRendered) {
+        return overrides.onBeforePostPageRendered(slug, context);
+      }
+      return true;
+    }
+  });
+  const { post } = useSuspensePost(slug ?? "");
+  const { previousPost, nextPost, ref } = useNextPreviousPosts(
+    post?.createdAt ?? /* @__PURE__ */ new Date(),
+    {
+      enabled: !!post
+    }
+  );
+  const { recentPosts, ref: recentPostsRef } = useRecentPosts({
+    limit: 5,
+    excludeSlug: slug,
+    enabled: !!post
+  });
+  if (!slug || !post) {
+    return /* @__PURE__ */ jsx(PageWrapper, { children: /* @__PURE__ */ jsx(EmptyList, { message: localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION }) });
+  }
+  return /* @__PURE__ */ jsx(PageWrapper, { className: "gap-0 px-4 lg:px-4 py-0 pb-18", testId: "post-page", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start w-full", children: [
+    /* @__PURE__ */ jsx("div", { className: "w-44 shrink-0 hidden xl:flex mr-auto" }),
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center flex-1 mx-auto w-full max-w-4xl min-w-0", children: [
+      /* @__PURE__ */ jsx(OnThisPageSelect, { markdown: post.content }),
+      /* @__PURE__ */ jsx(
+        PageHeader,
+        {
+          title: post.title,
+          description: post.excerpt,
+          childrenTop: /* @__PURE__ */ jsx(PostHeaderTop, { post })
+        }
+      ),
+      post.image && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2 mt-6 aspect-video w-full relative", children: /* @__PURE__ */ jsx(
+        Image,
+        {
+          src: post.image,
+          alt: post.title,
+          className: "object-cover transition-transform duration-200"
+        }
+      ) }),
+      /* @__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,
+          {
+            previousPost,
+            nextPost,
+            ref
+          }
+        ),
+        /* @__PURE__ */ jsx(RecentPostsCarousel, { posts: recentPosts, ref: recentPostsRef })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(OnThisPage, { markdown: post.content })
+  ] }) });
+}
+function PostHeaderTop({ post }) {
+  const { Link } = usePluginOverrides("blog", {
+    Link: DefaultLink
+  });
+  const basePath = useBasePath();
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-row items-center gap-2 flex-wrap mt-8", children: [
+    /* @__PURE__ */ jsx("span", { className: "font-light text-muted-foreground text-sm", children: formatDate(post.createdAt, "MMMM d, yyyy") }),
+    post.tags && post.tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: post.tags.map((tag) => /* @__PURE__ */ jsx(Link, { href: `${basePath}/blog/tag/${tag.slug}`, children: /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag.name }) }, tag.id)) })
+  ] });
+}
+
+export { PostPage };

package/dist/plugins/blog/client/components/pages/post-page.mjs

@@ -0,0 +1,37 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { lazy } from 'react';
+import { usePluginOverrides } from '@btst/stack/context';
+import { ComposedRoute } from '@btst/stack/client/components';
+import { DefaultError } from '../shared/default-error.mjs';
+import { PostLoading } from '../loading/index.mjs';
+import { NotFoundPage } from './404-page.mjs';
+
+const PostPage = lazy(
+  () => import('./post-page.internal.mjs').then((m) => ({ default: m.PostPage }))
+);
+function PostPageComponent({ slug }) {
+  const { onRouteError } = usePluginOverrides("blog");
+  return /* @__PURE__ */ jsx(
+    ComposedRoute,
+    {
+      path: `/blog/${slug}`,
+      PageComponent: PostPage,
+      ErrorComponent: DefaultError,
+      LoadingComponent: PostLoading,
+      NotFoundComponent: NotFoundPage,
+      props: { slug },
+      onError: (error) => {
+        if (onRouteError) {
+          onRouteError("post", error, {
+            path: `/blog/${slug}`,
+            isSSR: typeof window === "undefined",
+            slug
+          });
+        }
+      }
+    }
+  );
+}
+
+export { PostPageComponent };