@btst/stack 1.0.0 → 1.1.0

package/src/plugins/blog/client/components/loading/index.tsx

@@ -0,0 +1,27 @@
+import { FormPageSkeleton } from "./form-page-skeleton";
+import { ListPageSkeleton } from "./list-page-skeleton";
+import { PostPageSkeleton } from "./post-page-skeleton";
+
+export function FormLoading() {
+	return (
+		<div data-testid="form-skeleton">
+			<FormPageSkeleton />
+		</div>
+	);
+}
+
+export function PostsLoading() {
+	return (
+		<div data-testid="posts-skeleton">
+			<ListPageSkeleton />
+		</div>
+	);
+}
+
+export function PostLoading() {
+	return (
+		<div data-testid="post-skeleton">
+			<PostPageSkeleton />
+		</div>
+	);
+}

package/src/plugins/blog/client/components/loading/list-page-skeleton.tsx

@@ -0,0 +1,38 @@
+import { PageHeaderSkeleton } from "./page-header-skeleton";
+import { PageLayout } from "../shared/page-layout";
+import { PostCardSkeleton } from "./post-card-skeleton";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function ListPageSkeleton() {
+	return (
+		<PageLayout>
+			<div className="flex flex-col items-center gap-3">
+				<PageHeaderSkeleton />
+			</div>
+			<PostsListSkeleton count={6} />
+		</PageLayout>
+	);
+}
+
+function PostsListSkeleton({ count = 6 }: { count?: number }) {
+	return (
+		<div className="w-full space-y-6">
+			<div className="flex justify-center pb-6">
+				<div className="flex w-full max-w-md items-center gap-2">
+					<Skeleton className="h-10 grow rounded-md" />
+					<Skeleton className="h-10 w-24 rounded-md" />
+				</div>
+			</div>
+
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{Array.from({ length: count }).map((_, index) => (
+					<PostCardSkeleton key={index} />
+				))}
+			</div>
+
+			<div className="flex justify-center">
+				<Skeleton className="h-10 w-40 rounded-md" />
+			</div>
+		</div>
+	);
+}

package/src/plugins/blog/client/components/loading/page-header-skeleton.tsx

@@ -0,0 +1,10 @@
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function PageHeaderSkeleton() {
+	return (
+		<div className="flex max-w-[600px] flex-col items-center gap-2">
+			<Skeleton className="h-12 w-56" />
+			<Skeleton className="h-4 w-80" />
+		</div>
+	);
+}

package/src/plugins/blog/client/components/loading/post-card-skeleton.tsx

@@ -0,0 +1,30 @@
+import {
+	Card,
+	CardContent,
+	CardFooter,
+	CardHeader,
+} from "@workspace/ui/components/card";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function PostCardSkeleton() {
+	return (
+		<Card className="h-full">
+			<div className="relative h-48 w-full">
+				<Skeleton className="h-full w-full rounded-t-xl" />
+			</div>
+			<CardHeader>
+				<Skeleton className="mb-2 h-4 w-24" />
+				<Skeleton className="mb-2 h-6 w-full" />
+			</CardHeader>
+			<CardContent>
+				<Skeleton className="h-4 w-32" />
+			</CardContent>
+			<CardFooter>
+				<div className="flex w-full items-center justify-between">
+					<Skeleton className="h-5 w-16" />
+					<Skeleton className="h-8 w-20" />
+				</div>
+			</CardFooter>
+		</Card>
+	);
+}

package/src/plugins/blog/client/components/loading/post-page-skeleton.tsx

@@ -0,0 +1,75 @@
+import { PageHeaderSkeleton } from "./page-header-skeleton";
+import { PageLayout } from "../shared/page-layout";
+import { Skeleton } from "@workspace/ui/components/skeleton";
+
+export function PostPageSkeleton() {
+	return (
+		<PageLayout>
+			<div className="flex flex-col items-center gap-3">
+				<PageHeaderSkeleton />
+			</div>
+			<PostSkeleton />
+		</PageLayout>
+	);
+}
+
+function PostSkeleton() {
+	return (
+		<div className="w-full space-y-8">
+			{/* Title + Meta + Tags */}
+			<div className="hidden space-y-4">
+				{/* Title */}
+				<Skeleton className="h-12 w-3/4" />
+
+				{/* Meta: avatar, author, date */}
+				<div className="flex items-center gap-3">
+					<Skeleton className="h-8 w-8 rounded-full" />
+					<Skeleton className="h-4 w-32" />
+					<Skeleton className="h-4 w-24" />
+				</div>
+
+				{/* Tags */}
+				<div className="flex flex-wrap gap-2">
+					<Skeleton className="h-6 w-20 rounded-full" />
+					<Skeleton className="h-6 w-16 rounded-full" />
+					<Skeleton className="h-6 w-24 rounded-full" />
+				</div>
+			</div>
+
+			{/* Hero / Cover image */}
+			<Skeleton className="h-64 w-full rounded-md" />
+
+			{/* Content blocks */}
+			<div className="space-y-10">
+				<ContentBlockSkeleton />
+				<ImageBlockSkeleton />
+				<CodeBlockSkeleton />
+				<ContentBlockSkeleton />
+			</div>
+		</div>
+	);
+}
+
+function ContentBlockSkeleton() {
+	return (
+		<div className="space-y-4">
+			{/* Section heading */}
+			<Skeleton className="h-8 w-1/3" />
+			{/* Paragraph lines */}
+			<div className="space-y-2">
+				<Skeleton className="h-4 w-full" />
+				<Skeleton className="h-4 w-11/12" />
+				<Skeleton className="h-4 w-10/12" />
+				<Skeleton className="h-4 w-9/12" />
+			</div>
+		</div>
+	);
+}
+
+function ImageBlockSkeleton() {
+	return <Skeleton className="h-72 w-full rounded-md" />;
+}
+
+function CodeBlockSkeleton() {
+	return <Skeleton className="h-40 w-full rounded-md" />;
+}

package/src/plugins/blog/client/components/pages/404-page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { usePluginOverrides } from "@btst/stack/context";
+import { ErrorPlaceholder } from "../shared/error-placeholder";
+import { BLOG_LOCALIZATION } from "../../localization";
+import type { BlogPluginOverrides } from "../../overrides";
+import { PageWrapper } from "../shared/page-wrapper";
+
+export function NotFoundPage({ message }: { message: string }) {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const title = localization.BLOG_PAGE_NOT_FOUND_TITLE;
+	const desc = message || localization.BLOG_PAGE_NOT_FOUND_DESCRIPTION;
+	return (
+		<PageWrapper testId="404-page">
+			<ErrorPlaceholder title={title} message={desc} />
+		</PageWrapper>
+	);
+}

package/src/plugins/blog/client/components/pages/edit-post-page.internal.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useBasePath, usePluginOverrides } from "@btst/stack/context";
+import { EditPostForm } from "../forms/post-forms";
+import { PageHeader } from "../shared/page-header";
+import { PageWrapper } from "../shared/page-wrapper";
+import { BLOG_LOCALIZATION } from "../../localization";
+import type { BlogPluginOverrides } from "../../overrides";
+import { useRouteLifecycle } from "../shared/use-route-lifecycle";
+
+// Internal component with actual page content
+export function EditPostPage({ slug }: { slug: string }) {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const basePath = useBasePath();
+	const { navigate } = usePluginOverrides<BlogPluginOverrides>("blog");
+
+	// Call lifecycle hooks
+	useRouteLifecycle({
+		routeName: "editPost",
+		context: {
+			path: `/blog/${slug}/edit`,
+			params: { slug },
+			isSSR: typeof window === "undefined",
+		},
+		beforeRenderHook: (overrides, context) => {
+			if (overrides.onBeforeEditPostPageRendered) {
+				return overrides.onBeforeEditPostPageRendered(slug, context);
+			}
+			return true;
+		},
+	});
+
+	const handleClose = () => {
+		navigate(`${basePath}/blog`);
+	};
+
+	const handleSuccess = (post: { slug: string; published: boolean }) => {
+		// Navigate based on published status
+		navigate(`${basePath}/blog/${post.slug}`);
+	};
+
+	return (
+		<PageWrapper className="gap-6" testId="edit-post-page">
+			<PageHeader
+				title={localization.BLOG_POST_EDIT_TITLE}
+				description={localization.BLOG_POST_EDIT_DESCRIPTION}
+			/>
+			<EditPostForm
+				postSlug={slug}
+				onClose={handleClose}
+				onSuccess={handleSuccess}
+			/>
+		</PageWrapper>
+	);
+}

package/src/plugins/blog/client/components/pages/edit-post-page.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { FormLoading } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+// Lazy load the internal component with actual page content
+const EditPostPage = lazy(() =>
+	import("./edit-post-page.internal").then((m) => ({
+		default: m.EditPostPage,
+	})),
+);
+
+// Exported wrapped component with error and loading boundaries
+export function EditPostPageComponent({ slug }: { slug: string }) {
+	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	return (
+		<ComposedRoute
+			path={`/blog/${slug}/edit`}
+			PageComponent={EditPostPage}
+			ErrorComponent={DefaultError}
+			LoadingComponent={FormLoading}
+			NotFoundComponent={NotFoundPage}
+			props={{ slug }}
+			onError={(error) => {
+				if (onRouteError) {
+					onRouteError("editPost", error, {
+						path: `/blog/${slug}/edit`,
+						isSSR: typeof window === "undefined",
+						slug,
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/blog/client/components/pages/home-page.internal.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import { PageHeader } from "../shared/page-header";
+import { PageWrapper } from "../shared/page-wrapper";
+import { PostsList } from "../shared/posts-list";
+import { TagsList } from "../shared/tags-list";
+
+import { useSuspensePosts } from "../../hooks/blog-hooks";
+import { BLOG_LOCALIZATION } from "../../localization";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { useRouteLifecycle } from "../shared/use-route-lifecycle";
+
+// Internal component with actual page content
+export function HomePage({ published }: { published: boolean }) {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+
+	// Call lifecycle hooks
+	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 (
+		<PageWrapper testId={published ? "home-page" : "drafts-home-page"}>
+			<div className="flex flex-col items-center gap-3">
+				<PageHeader
+					title={
+						published
+							? localization.BLOG_LIST_TITLE
+							: localization.BLOG_LIST_DRAFTS_TITLE
+					}
+					childrenBottom={<TagsList />}
+				/>
+			</div>
+			<Content published={published} />
+		</PageWrapper>
+	);
+}
+
+function Content({ published }: { published: boolean }) {
+	const { posts, loadMore, hasMore, isLoadingMore } = useSuspensePosts({
+		published: published,
+	});
+	return (
+		<PostsList
+			posts={posts}
+			onLoadMore={loadMore}
+			hasMore={hasMore}
+			isLoadingMore={isLoadingMore}
+		/>
+	);
+}

package/src/plugins/blog/client/components/pages/home-page.tsx

@@ -0,0 +1,42 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { PostsLoading } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+// Lazy load the internal component with actual page content
+const HomePage = lazy(() =>
+	import("./home-page.internal").then((m) => ({ default: m.HomePage })),
+);
+
+// Exported wrapped component with error and loading boundaries
+export function HomePageComponent({
+	published = true,
+}: {
+	published?: boolean;
+}) {
+	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	return (
+		<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,
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/blog/client/components/pages/new-post-page.internal.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useBasePath, usePluginOverrides } from "@btst/stack/context";
+import { AddPostForm } from "../forms/post-forms";
+import { PageHeader } from "../shared/page-header";
+import { PageWrapper } from "../shared/page-wrapper";
+import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_LOCALIZATION } from "../../localization";
+import { useRouteLifecycle } from "../shared/use-route-lifecycle";
+
+// Internal component with actual page content
+export function NewPostPage() {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const { navigate } = usePluginOverrides<BlogPluginOverrides>("blog");
+	const basePath = useBasePath();
+
+	// Call lifecycle hooks
+	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: { published: boolean }) => {
+		// Navigate based on published status
+		if (post.published) {
+			navigate(`${basePath}/blog`);
+		} else {
+			navigate(`${basePath}/blog/drafts`);
+		}
+	};
+
+	return (
+		<PageWrapper className="gap-6" testId="new-post-page">
+			<PageHeader
+				title={localization.BLOG_POST_ADD_TITLE}
+				description={localization.BLOG_POST_ADD_DESCRIPTION}
+			/>
+			<AddPostForm onClose={handleClose} onSuccess={handleSuccess} />
+		</PageWrapper>
+	);
+}

package/src/plugins/blog/client/components/pages/new-post-page.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { lazy } from "react";
+import { usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import { ComposedRoute } from "@btst/stack/client/components";
+import { DefaultError } from "../shared/default-error";
+import { FormLoading } from "../loading";
+import { NotFoundPage } from "./404-page";
+
+// Lazy load the internal component with actual page content
+const NewPostPage = lazy(() =>
+	import("./new-post-page.internal").then((m) => ({ default: m.NewPostPage })),
+);
+
+// Exported wrapped component with error and loading boundaries
+export function NewPostPageComponent() {
+	const { onRouteError } = usePluginOverrides<BlogPluginOverrides>("blog");
+	return (
+		<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",
+					});
+				}
+			}}
+		/>
+	);
+}

package/src/plugins/blog/client/components/pages/post-page.internal.tsx

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