@btst/stack 1.0.1 → 1.1.1

package/src/plugins/blog/client/components/shared/page-layout.tsx

@@ -0,0 +1,23 @@
+import { cn } from "../../../utils";
+
+export function PageLayout({
+	children,
+	className,
+	"data-testid": dataTestId,
+}: {
+	children: React.ReactNode;
+	className?: string;
+	"data-testid"?: string;
+}) {
+	return (
+		<div
+			className={cn(
+				"container mx-auto flex min-h-dvh flex-col items-center gap-12 px-4 py-18 lg:px-16",
+				className,
+			)}
+			data-testid={dataTestId}
+		>
+			{children}
+		</div>
+	);
+}

package/src/plugins/blog/client/components/shared/page-wrapper.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import { usePluginOverrides } from "@btst/stack/context";
+import { BetterBlogAttribution } from "./better-blog-attribution";
+import { PageLayout } from "./page-layout";
+import type { BlogPluginOverrides } from "../../overrides";
+
+export function PageWrapper({
+	children,
+	className,
+	testId,
+}: {
+	children: React.ReactNode;
+	className?: string;
+	testId?: string;
+}) {
+	const { showAttribution } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		showAttribution: true,
+	});
+	return (
+		<>
+			<PageLayout className={className} data-testid={testId}>
+				{children}
+			</PageLayout>
+
+			{showAttribution && <BetterBlogAttribution />}
+		</>
+	);
+}

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

@@ -0,0 +1,308 @@
+"use client";
+import { Badge } from "@workspace/ui/components/badge";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@workspace/ui/components/card";
+import { useBasePath, usePluginOverrides } from "@btst/stack/context";
+import { formatDate } from "date-fns";
+import type { SerializedPost } from "../../../types";
+import { CalendarIcon } from "lucide-react";
+import type { BlogPluginOverrides } from "../../overrides";
+import { BLOG_LOCALIZATION } from "../../localization";
+import { DefaultLink, DefaultImage } from "./defaults";
+
+// Beautiful gradient color combinations
+const GRADIENT_PALETTES = [
+	{
+		from: "from-purple-500",
+		via: "via-pink-500",
+		to: "to-orange-500",
+		overlay: "from-blue-600/50",
+	},
+	{
+		from: "from-blue-500",
+		via: "via-cyan-500",
+		to: "to-teal-500",
+		overlay: "from-indigo-600/50",
+	},
+	{
+		from: "from-pink-500",
+		via: "via-rose-500",
+		to: "to-orange-500",
+		overlay: "from-purple-600/50",
+	},
+	{
+		from: "from-green-500",
+		via: "via-emerald-500",
+		to: "to-teal-500",
+		overlay: "from-cyan-600/50",
+	},
+	{
+		from: "from-indigo-500",
+		via: "via-purple-500",
+		to: "to-pink-500",
+		overlay: "from-violet-600/50",
+	},
+	{
+		from: "from-orange-500",
+		via: "via-amber-500",
+		to: "to-yellow-500",
+		overlay: "from-orange-600/50",
+	},
+	{
+		from: "from-cyan-500",
+		via: "via-blue-500",
+		to: "to-indigo-500",
+		overlay: "from-purple-600/50",
+	},
+	{
+		from: "from-violet-500",
+		via: "via-purple-500",
+		to: "to-fuchsia-500",
+		overlay: "from-pink-600/50",
+	},
+	{
+		from: "from-emerald-500",
+		via: "via-green-500",
+		to: "to-lime-500",
+		overlay: "from-teal-600/50",
+	},
+	{
+		from: "from-rose-500",
+		via: "via-pink-500",
+		to: "to-fuchsia-500",
+		overlay: "from-purple-600/50",
+	},
+	{
+		from: "from-sky-500",
+		via: "via-blue-500",
+		to: "to-indigo-600",
+		overlay: "from-purple-700/40",
+	},
+	{
+		from: "from-fuchsia-600",
+		via: "via-purple-600",
+		to: "to-indigo-600",
+		overlay: "from-pink-700/40",
+	},
+	{
+		from: "from-teal-500",
+		via: "via-emerald-500",
+		to: "to-green-600",
+		overlay: "from-cyan-700/40",
+	},
+	{
+		from: "from-amber-500",
+		via: "via-orange-500",
+		to: "to-pink-500",
+		overlay: "from-yellow-600/40",
+	},
+	{
+		from: "from-indigo-600",
+		via: "via-blue-600",
+		to: "to-purple-600",
+		overlay: "from-violet-700/40",
+	},
+	{
+		from: "from-pink-600",
+		via: "via-rose-600",
+		to: "to-orange-600",
+		overlay: "from-fuchsia-700/40",
+	},
+	{
+		from: "from-cyan-600",
+		via: "via-teal-600",
+		to: "to-emerald-600",
+		overlay: "from-blue-700/40",
+	},
+	{
+		from: "from-purple-600",
+		via: "via-fuchsia-600",
+		to: "to-pink-600",
+		overlay: "from-violet-700/40",
+	},
+	{
+		from: "from-blue-600",
+		via: "via-indigo-600",
+		to: "to-purple-600",
+		overlay: "from-cyan-700/40",
+	},
+	{
+		from: "from-green-600",
+		via: "via-emerald-600",
+		to: "to-teal-600",
+		overlay: "from-lime-700/40",
+	},
+	{
+		from: "from-rose-600",
+		via: "via-pink-600",
+		to: "to-fuchsia-600",
+		overlay: "from-pink-700/40",
+	},
+	{
+		from: "from-orange-600",
+		via: "via-pink-600",
+		to: "to-rose-600",
+		overlay: "from-amber-700/40",
+	},
+	{
+		from: "from-violet-600",
+		via: "via-purple-600",
+		to: "to-fuchsia-600",
+		overlay: "from-indigo-700/40",
+	},
+	{
+		from: "from-teal-600",
+		via: "via-cyan-600",
+		to: "to-blue-600",
+		overlay: "from-emerald-700/40",
+	},
+	{
+		from: "from-emerald-600",
+		via: "via-teal-600",
+		to: "to-cyan-600",
+		overlay: "from-green-700/40",
+	},
+	{
+		from: "from-indigo-700",
+		via: "via-purple-700",
+		to: "to-pink-700",
+		overlay: "from-violet-800/30",
+	},
+	{
+		from: "from-blue-700",
+		via: "via-cyan-700",
+		to: "to-teal-700",
+		overlay: "from-indigo-800/30",
+	},
+	{
+		from: "from-purple-700",
+		via: "via-fuchsia-700",
+		to: "to-pink-700",
+		overlay: "from-violet-800/30",
+	},
+	{
+		from: "from-pink-700",
+		via: "via-rose-700",
+		to: "to-orange-700",
+		overlay: "from-fuchsia-800/30",
+	},
+	{
+		from: "from-cyan-700",
+		via: "via-blue-700",
+		to: "to-indigo-700",
+		overlay: "from-teal-800/30",
+	},
+] as const;
+
+// Simple deterministic hash function
+function hashString(str: string): number {
+	let hash = 0;
+	for (let i = 0; i < str.length; i++) {
+		const char = str.charCodeAt(i);
+		hash = (hash << 5) - hash + char;
+		hash = hash & hash; // Convert to 32-bit integer
+	}
+	return Math.abs(hash);
+}
+
+function getGradientFromTitle(title: string) {
+	const hash = hashString(title);
+	const palette = GRADIENT_PALETTES[hash % GRADIENT_PALETTES.length];
+	return palette;
+}
+
+export function PostCard({ post }: { post: SerializedPost }) {
+	const { Link, Image } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		Link: DefaultLink,
+		Image: DefaultImage,
+	});
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const basePath = useBasePath();
+	const blogPath = `${basePath}/blog/${post.slug}`;
+	const postDate = formatDate(
+		post.publishedAt || post.createdAt,
+		"MMMM d, yyyy",
+	);
+	const gradient = post.image ? null : getGradientFromTitle(post.title);
+
+	return (
+		<Card className="group relative flex h-full flex-col gap-4 pt-0! pb-4! transition-shadow duration-200 hover:shadow-lg">
+			{/* Image or Placeholder */}
+			<Link
+				href={blogPath}
+				className="relative block h-48 w-full overflow-hidden rounded-t-xl bg-muted"
+				aria-label={post.title}
+			>
+				{post.image ? (
+					<Image
+						src={post.image}
+						alt={post.title}
+						className="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105"
+						width={500}
+						height={300}
+					/>
+				) : (
+					<div className="relative h-full w-full overflow-hidden transition-transform duration-200 group-hover:scale-105">
+						<div
+							className={`absolute inset-0 bg-linear-to-br ${gradient!.from} ${gradient!.via} ${gradient!.to}`}
+						/>
+						<div
+							className={`absolute inset-0 bg-linear-to-tr ${gradient!.overlay} via-transparent to-transparent`}
+						/>
+						<div className="relative z-10 flex h-full w-full items-center justify-center p-6">
+							<h3 className="text-center text-xl font-bold leading-tight text-white drop-shadow-lg line-clamp-3">
+								{post.title}
+							</h3>
+						</div>
+					</div>
+				)}
+			</Link>
+
+			{!post.published && (
+				<Badge variant="destructive" className="absolute top-2 left-2 text-xs">
+					{localization.BLOG_CARD_DRAFT_BADGE}
+				</Badge>
+			)}
+
+			<Link
+				href={blogPath}
+				aria-label={`${post.title}`}
+				className="block focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 grow"
+			>
+				<CardHeader className="flex-1">
+					<CardTitle className="line-clamp-3 text-lg leading-tight transition-colors group-hover:underline">
+						{post.title}
+					</CardTitle>
+				</CardHeader>
+
+				<CardContent className="flex flex-1 flex-col gap-2">
+					<div className="flex flex-wrap gap-2">
+						<div className="flex items-center gap-2 text-muted-foreground text-xs">
+							<CalendarIcon className="h-3 w-3" />
+							<time dateTime={postDate}>{postDate}</time>
+						</div>
+						{post.tags &&
+							post.tags.length > 0 &&
+							post.tags.map((tag) => (
+								<Badge key={tag.id} variant="secondary" className="text-xs">
+									{tag.name}
+								</Badge>
+							))}
+					</div>
+				</CardContent>
+			</Link>
+		</Card>
+	);
+}

package/src/plugins/blog/client/components/shared/post-navigation.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import { usePluginOverrides, useBasePath } from "@btst/stack/context";
+import { Button } from "@workspace/ui/components/button";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import type { BlogPluginOverrides } from "../../overrides";
+import { DefaultLink } from "./defaults";
+import type { SerializedPost } from "../../../types";
+
+interface PostNavigationProps {
+	previousPost: SerializedPost | null;
+	nextPost: SerializedPost | null;
+	ref?: (node: Element | null) => void;
+}
+
+export function PostNavigation({
+	previousPost,
+	nextPost,
+	ref,
+}: PostNavigationProps) {
+	const { Link } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		Link: DefaultLink,
+	});
+	const basePath = useBasePath();
+	const blogPath = `${basePath}/blog`;
+
+	return (
+		<>
+			{/* Ref div to trigger intersection observer when scrolled into view */}
+			{ref && <div ref={ref} />}
+
+			{/* Only show navigation buttons if posts are available */}
+			{(previousPost || nextPost) && (
+				<>
+					<div className="border-t mt-4 pt-4 w-full" />
+					<div className="flex flex-col sm:flex-row gap-4 w-full justify-between">
+						{previousPost ? (
+							<Link
+								data-testid="previous-post-link"
+								href={`${blogPath}/${previousPost.slug}`}
+								className="flex-1 sm:max-w-1/3"
+							>
+								<Button
+									variant="outline"
+									className="w-full justify-start py-4 px-4 whitespace-normal! h-full hover:cursor-pointer"
+								>
+									<div className="flex items-center gap-2 w-full min-w-0">
+										<ChevronLeft className="h-4 w-4 shrink-0" />
+										<div className="flex flex-col items-start min-w-0 flex-1">
+											<span className="text-xs text-muted-foreground">
+												Previous
+											</span>
+											<div className="font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start">
+												{previousPost.title}
+											</div>
+										</div>
+									</div>
+								</Button>
+							</Link>
+						) : (
+							<div className="flex-1" />
+						)}
+
+						{nextPost ? (
+							<Link
+								data-testid="next-post-link"
+								href={`${blogPath}/${nextPost.slug}`}
+								className="flex-1 sm:max-w-1/3"
+							>
+								<Button
+									variant="outline"
+									className="w-full justify-end py-4 px-4 whitespace-normal! h-full hover:cursor-pointer"
+								>
+									<div className="flex items-center gap-2 w-full min-w-0">
+										<div className="flex flex-col items-end min-w-0 flex-1">
+											<span className="text-xs text-muted-foreground">
+												Next
+											</span>
+											<div className="font-semibold line-clamp-2 text-sm leading-tight transition-colors text-start">
+												{nextPost.title}
+											</div>
+										</div>
+										<ChevronRight className="h-4 w-4 shrink-0" />
+									</div>
+								</Button>
+							</Link>
+						) : (
+							<div className="flex-1" />
+						)}
+					</div>
+				</>
+			)}
+		</>
+	);
+}

package/src/plugins/blog/client/components/shared/posts-list.tsx

@@ -0,0 +1,67 @@
+import { usePluginOverrides } from "@btst/stack/context";
+import type { SerializedPost } from "../../../types";
+import { Button } from "@workspace/ui/components/button";
+import { EmptyList } from "./empty-list";
+import SearchInput from "./search-input";
+import type { BlogPluginOverrides } from "../../overrides";
+import { PostCard as DefaultPostCard } from "./post-card";
+import { BLOG_LOCALIZATION } from "../../localization";
+
+interface PostsListProps {
+	posts: SerializedPost[];
+	onLoadMore?: () => void;
+	hasMore?: boolean;
+	isLoadingMore?: boolean;
+}
+
+export function PostsList({
+	posts,
+	onLoadMore,
+	hasMore,
+	isLoadingMore,
+}: PostsListProps) {
+	const { localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		localization: BLOG_LOCALIZATION,
+	});
+	const { PostCard } = usePluginOverrides<BlogPluginOverrides>("blog");
+
+	const PostCardComponent = PostCard || DefaultPostCard;
+	if (posts.length === 0) {
+		return <EmptyList message={localization.BLOG_LIST_EMPTY} />;
+	}
+
+	return (
+		<div className="w-full space-y-6">
+			<div className="flex justify-center pb-6">
+				<SearchInput
+					placeholder={localization.BLOG_LIST_SEARCH_PLACEHOLDER}
+					buttonText={localization.BLOG_LIST_SEARCH_BUTTON}
+					emptyMessage={localization.BLOG_LIST_SEARCH_EMPTY}
+				/>
+			</div>
+			<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+				{posts.map((post) => (
+					<PostCardComponent key={post.id} post={post} />
+				))}
+			</div>
+
+			{onLoadMore && hasMore && (
+				<div className="flex justify-center">
+					<Button
+						onClick={onLoadMore}
+						disabled={isLoadingMore}
+						variant="outline"
+						size="lg"
+					>
+						{isLoadingMore
+							? localization.BLOG_LIST_LOADING_MORE
+							: localization.BLOG_LIST_LOAD_MORE}
+					</Button>
+				</div>
+			)}
+		</div>
+	);
+}

package/src/plugins/blog/client/components/shared/recent-posts-carousel.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { useBasePath, usePluginOverrides } from "@btst/stack/context";
+import type { BlogPluginOverrides } from "../../overrides";
+import type { SerializedPost } from "../../../types";
+import {
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselNext,
+	CarouselPrevious,
+} from "@workspace/ui/components/carousel";
+import { PostCard as DefaultPostCard } from "./post-card";
+import { DefaultLink } from "./defaults";
+import { BLOG_LOCALIZATION } from "../../localization";
+
+interface RecentPostsCarouselProps {
+	posts: SerializedPost[];
+	ref?: (node: Element | null) => void;
+}
+
+export function RecentPostsCarousel({ posts, ref }: RecentPostsCarouselProps) {
+	const { PostCard, Link, localization } = usePluginOverrides<
+		BlogPluginOverrides,
+		Partial<BlogPluginOverrides>
+	>("blog", {
+		PostCard: DefaultPostCard,
+		Link: DefaultLink,
+		localization: BLOG_LOCALIZATION,
+	});
+	const PostCardComponent = PostCard || DefaultPostCard;
+	const basePath = useBasePath();
+	return (
+		<div className="w-full">
+			{/* Ref div to trigger intersection observer when scrolled into view */}
+			{ref && <div ref={ref} />}
+
+			{posts && posts.length > 0 && (
+				<>
+					<div className="mt-4 py-4 w-full text-start border-t">
+						<div className="mt-4 flex items-center justify-between">
+							<h2 className="text-xl font-semibold">
+								{localization.BLOG_POST_KEEP_READING}
+							</h2>
+							<Link
+								href={`${basePath}/blog`}
+								className="text-sm text-muted-foreground hover:text-foreground transition-colors"
+							>
+								{localization.BLOG_POST_VIEW_ALL}
+							</Link>
+						</div>
+					</div>
+					<div data-testid="recent-posts-carousel">
+						<Carousel
+							opts={{
+								align: "start",
+								loop: false,
+							}}
+							className="w-full"
+						>
+							<CarouselContent className="-ml-2 md:-ml-4">
+								{posts.map((post) => (
+									<CarouselItem
+										key={post.id}
+										className="pl-2 md:pl-4 md:basis-1/2 lg:basis-1/3"
+									>
+										<PostCardComponent post={post} />
+									</CarouselItem>
+								))}
+							</CarouselContent>
+							<CarouselPrevious className="-left-4 lg:-left-12 hover:cursor-pointer" />
+							<CarouselNext className="-right-4 lg:-right-12 hover:cursor-pointer" />
+						</Carousel>
+					</div>
+				</>
+			)}
+		</div>
+	);
+}