feat: extend landing page with shadcn/react

apps/docs/astro.config.mjs

@@ -1,3 +1,4 @@
+import react from "@astrojs/react";
 import starlight from "@astrojs/starlight";
 import tailwind from "@astrojs/tailwind";
 // @ts-check
@@ -50,6 +51,7 @@ const components = await getSidebarComponentsSlugs();
 export default defineConfig({
 	site: PUBLIC_DOC_SITE_URL,
 	integrations: [
+		react(),
 		starlight({
 			title: "dDevKit",
 			social: {

apps/docs/components.json

@@ -0,0 +1,21 @@
+{
+	"$schema": "https://ui.shadcn.com/schema.json",
+	"style": "default",
+	"rsc": false,
+	"tsx": true,
+	"tailwind": {
+		"config": "tailwind.config.mjs",
+		"css": "src/styles/global.css",
+		"baseColor": "neutral",
+		"cssVariables": true,
+		"prefix": ""
+	},
+	"aliases": {
+		"components": "@/components",
+		"utils": "@/lib/utils",
+		"ui": "@/components/ui",
+		"lib": "@/lib",
+		"hooks": "@/hooks"
+	},
+	"iconLibrary": "lucide"
+}

apps/docs/package.json

@@ -11,12 +11,23 @@
 		"deploy:fleek": "fleek --debug sites deploy"
 	},
 	"dependencies": {
-		"@astrojs/cloudflare": "^12.4.0",
+		"@astrojs/cloudflare": "^12.2.1",
+		"@astrojs/react": "^4.2.3",
 		"@astrojs/starlight": "^0.31.1",
 		"@astrojs/starlight-tailwind": "^3.0.1",
 		"@astrojs/tailwind": "^6.0.2",
 		"@fleek-platform/cli": "^3.8.2",
+		"@geist/typescript-config": "workspace:*",
+		"@radix-ui/react-avatar": "^1.1.0",
 		"astro": "^5.1.5",
-		"tailwindcss": "^3.4.13"
+		"avatar": "^0.1.0",
+		"class-variance-authority": "^0.7.0",
+		"clsx": "^2.1.1",
+		"lucide-react": "^0.446.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
+		"tailwind-merge": "^2.5.2",
+		"tailwindcss": "^3.4.13",
+		"tailwindcss-animate": "^1.0.7"
 	}
 }

apps/docs/src/components/footer.astro

@@ -0,0 +1,6 @@
+---
+---
+
+<div class="container text-center">
+    Brought to you by <a href="https://fractalbox.dev/" target="_blank">FractalBox</a>
+</div>

apps/docs/src/components/testimonial-card.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type * as React from "react";
+import { Avatar, AvatarFallback, AvatarImage } from "./ui/avatar";
+import { Card, CardContent } from "./ui/card";
+
+interface TestimonialCardProps {
+	name: string;
+	handle?: string;
+	avatar?: string;
+	xPost?: string;
+	children: React.ReactNode;
+}
+
+export function TestimonialCard({
+	name,
+	handle,
+	avatar,
+	xPost,
+	children,
+}: TestimonialCardProps) {
+	const initials = name
+		.split(" ")
+		.map((n) => n[0])
+		.join("")
+		.toUpperCase();
+
+	return (
+		<Card className="h-full p-4 hover:bg-accent/50 transition-colors min-h-[200px] max-w-[400px]">
+			<CardContent className="p-0">
+				<a
+					href={`${xPost}`}
+					className="no-underline text-white"
+					target="_blank"
+				>
+					<div className="flex items-start gap-3">
+						<Avatar className="h-12 w-12">
+							<AvatarImage src={avatar} alt={name} />
+							<AvatarFallback>{initials}</AvatarFallback>
+						</Avatar>
+						<div className="flex-1">
+							<div className="flex flex-col items-start">
+								<div className="font-semibold">{name}</div>
+								{handle && (
+									<div className="mt-[-5px] text-muted-foreground text-slate-500">
+										@{handle}
+									</div>
+								)}
+							</div>
+							<blockquote className="mt-2 text-foreground">
+								{children}
+							</blockquote>
+						</div>
+					</div>
+				</a>
+			</CardContent>
+		</Card>
+	);
+}

apps/docs/src/components/testimonial-grid.astro

@@ -0,0 +1,92 @@
+---
+import { getCollection } from "astro:content";
+import { TestimonialCard } from "./testimonial-card";
+
+interface Props {
+	title: string;
+}
+
+const { title } = Astro.props;
+
+const testimonials = await getCollection("testimonials");
+---
+
+<div class="testimonial-wrapper not-content" data-pagefind-ignore>
+	<h2 class="testimonial-grid-title">{title}</h2>
+	<div class="testimonial-grid">
+		<div class="testimonial-row">
+			{testimonials.map((testimonial) => (
+				<TestimonialCard 
+					name={testimonial.data.name} 
+					handle={testimonial.data.x} 
+					avatar={testimonial.data.xAvatar} 
+					xPost={testimonial.data.xPost} 
+					client:load
+				>
+					{testimonial.body}
+				</TestimonialCard>
+			))}
+			{/* Duplicate cards for seamless loop */}
+			{testimonials.map((testimonial) => (
+				<TestimonialCard 
+					name={testimonial.data.name} 
+					handle={testimonial.data.x} 
+					avatar={testimonial.data.xAvatar} 
+					xPost={testimonial.data.xPost} 
+					client:load
+				>
+					{testimonial.body}
+				</TestimonialCard>
+			))}
+		</div>
+	</div>
+</div>
+
+<style>
+	.testimonial-wrapper {
+		margin: 4rem 0;
+		overflow: hidden;
+	}
+
+	.testimonial-grid-title {
+		font-size: 1.5rem;
+		font-weight: 600;
+		margin-bottom: 2rem;
+		text-align: center;
+	}
+
+	.testimonial-grid {
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+	}
+
+	.testimonial-row {
+		display: flex;
+		gap: 2rem;
+		animation: scroll 40s linear infinite;
+		width: max-content;
+	}
+
+	@keyframes scroll {
+		0% {
+			transform: translateX(0);
+		}
+		100% {
+			transform: translateX(-50%);
+		}
+	}
+
+	.testimonial-row:hover {
+		animation-play-state: paused;
+	}
+
+	@media (max-width: 768px) {
+		.testimonial-row {
+			animation: none;
+			display: grid;
+			grid-template-columns: 1fr;
+			width: 100%;
+		}
+	}
+</style> 

apps/docs/src/components/ui/avatar.tsx

@@ -0,0 +1,48 @@
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Avatar = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Root
+		ref={ref}
+		className={cn(
+			"relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+			className,
+		)}
+		{...props}
+	/>
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Image>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Image
+		ref={ref}
+		className={cn("aspect-square h-full w-full", className)}
+		{...props}
+	/>
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+	React.ElementRef<typeof AvatarPrimitive.Fallback>,
+	React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+	<AvatarPrimitive.Fallback
+		ref={ref}
+		className={cn(
+			"flex h-full w-full items-center justify-center rounded-full bg-muted",
+			className,
+		)}
+		{...props}
+	/>
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarImage, AvatarFallback };

apps/docs/src/components/ui/card.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Card = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			"rounded-lg border bg-card text-card-foreground shadow-sm",
+			className,
+		)}
+		{...props}
+	/>
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex flex-col space-y-1.5 p-6", className)}
+		{...props}
+	/>
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn(
+			"text-2xl font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		className={cn("flex items-center p-6 pt-0", className)}
+		{...props}
+	/>
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+	Card,
+	CardHeader,
+	CardFooter,
+	CardTitle,
+	CardDescription,
+	CardContent,
+};

apps/docs/src/content.config.ts

@@ -1,11 +1,21 @@
 import { defineCollection, z } from "astro:content";
 import { docsLoader } from "@astrojs/starlight/loaders";
 import { docsSchema } from "@astrojs/starlight/schema";
+import { glob } from "astro/loaders";
 import { storybookLoader } from "./storybook-loader";
 
 // component probably reserved
 export const collections = {
 	docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+	testimonials: defineCollection({
+		loader: glob({ pattern: "**/*.md", base: "./src/content/testimonials" }),
+		schema: z.object({
+			name: z.string(),
+			x: z.string(),
+			xAvatar: z.string().optional(),
+			xPost: z.string(),
+		}),
+	}),
 	components: defineCollection({
 		loader: storybookLoader(),
 		schema: docsSchema({