@@ -113,7 +113,7 @@ export default function TemplatesPageClient() {
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
- className="block w-full rounded-lg border border-white/20 bg-white/5 pl-10 pr-3 py-3 text-white placeholder:text-zinc-500 focus:border-[#FF4500] focus:outline-none focus:ring-1 focus:ring-[#FF4500] text-base"
+ className="block w-full rounded-lg border border-white/20 bg-white/5 pl-10 pr-3 py-3 text-white placeholder:text-zinc-500 focus:border-white/50 focus:outline-none focus:ring-1 focus:ring-white/50 text-base"
placeholder="Search templates..."
/>
diff --git a/website/src/app/(v2)/(marketing)/templates/[slug]/TemplateDetailClient.tsx b/website/src/app/(v2)/(marketing)/templates/[slug]/TemplateDetailClient.tsx
index e0d09c20e5..529b800a87 100644
--- a/website/src/app/(v2)/(marketing)/templates/[slug]/TemplateDetailClient.tsx
+++ b/website/src/app/(v2)/(marketing)/templates/[slug]/TemplateDetailClient.tsx
@@ -4,8 +4,11 @@ import type { Template } from "@/data/templates/shared";
import { templates, TECHNOLOGIES, TAGS } from "@/data/templates/shared";
import { Markdown } from "@/components/Markdown";
import { TemplateCard } from "../components/TemplateCard";
-import { Icon, faGithub } from "@rivet-gg/icons";
+import { Code } from "@/components/v2/Code";
+import { Icon, faGithub, faVercel, faRailway } from "@rivet-gg/icons";
import Link from "next/link";
+import Image from "next/image";
+import { CodeBlock } from "@/components/CodeBlock";
interface TemplateDetailClientProps {
template: Template;
@@ -33,39 +36,131 @@ export default function TemplateDetailClient({
? relatedTemplates
: templates.filter((t) => t.name !== template.name).slice(0, 3);
- const githubUrl = `https://github.com/rivet-dev/rivetkit/tree/main/examples/${template.name}`;
+ const githubUrl = `https://github.com/rivet-dev/rivet/tree/main/examples/${template.name}`;
+
+ // Strip auto-generated sections from README since they're displayed in the UI
+ const cleanedReadmeContent = readmeContent
+ .replace(/^#\s+.+$/m, '') // Remove first heading
+ .replace(/^\n+/, '') // Remove leading newlines
+ .replace(/^.+?(?=\n\n|\n#)/s, '') // Remove first paragraph
+ .replace(/##\s+Getting Started[\s\S]*?(?=\n##|$)/m, '') // Remove Getting Started section
+ .replace(/##\s+License[\s\S]*$/m, '') // Remove License section
+ .trim();
+
+ // Strip markdown links from description
+ const description = template.description.replace(/\[([^\]]+)\]\([^)]+\)/g, '$1');
+
+ // Construct Vercel deploy URL with demo card parameters
+ const vercelDeployUrl = new URL('https://vercel.com/new/clone');
+ vercelDeployUrl.searchParams.set('repository-url', `https://github.com/rivet-dev/rivet/tree/main/examples/${template.name}`);
+ vercelDeployUrl.searchParams.set('project-name', template.displayName);
+ vercelDeployUrl.searchParams.set('demo-title', template.displayName);
+ vercelDeployUrl.searchParams.set('demo-description', description);
+ vercelDeployUrl.searchParams.set('demo-image', `https://www.rivet.dev/examples/${template.name}/image.png`);
+ vercelDeployUrl.searchParams.set('demo-url', `https://www.rivet.dev/templates/${template.name}`);
return (
-
+
{/* Header with Image */}
-
-
- {/* Placeholder Image */}
-
+
+
+ {!template.noFrontend ? (
+
+ {/* Screenshot on top */}
+
+
+ {/* Linear gradient overlay - darker on bottom */}
+
- {/* Title and Description */}
-
-
- {template.displayName}
-
-
- {template.description}
-
-
+
+ {/* Top Shine Highlight */}
+
+ {/* Window Bar */}
+
+ {/* Content Area - Screenshot */}
+
+
+
+
+
+
+ {/* Text content overlapping bottom */}
+
+
+
+ {template.displayName}
+
+
+ {description}
+
+
+
+
+ Deploy to Vercel
+
+
+
+ Deploy to Railway
+
+
+
+ View on GitHub
+
+
+
+
+
+ ) : (
+
+
+ {template.displayName}
+
+
+ {description}
+
+
+ )}
@@ -75,31 +170,35 @@ export default function TemplateDetailClient({
{/* Left Column - README Content */}
- {readmeContent}
+ {cleanedReadmeContent}
{/* Right Column - Sidebar */}