feat(web): add og image

apps/cli/src/helpers/core/add-addons.ts

@@ -22,14 +22,14 @@ export async function addAddonsToProject(
 		const isBetterTStack = await isBetterTStackProject(projectDir);
 		if (!isBetterTStack) {
 			exitWithError(
-				"This doesn't appear to be a Better-T Stack project. Please run this command from the root of a Better-T Stack project.",
+				"This doesn't appear to be a Better-T-Stack project. Please run this command from the root of a Better-T-Stack project.",
 			);
 		}
 
 		const detectedConfig = await detectProjectConfig(projectDir);
 		if (!detectedConfig) {
 			exitWithError(
-				"Could not detect the project configuration. Please ensure this is a valid Better-T Stack project.",
+				"Could not detect the project configuration. Please ensure this is a valid Better-T-Stack project.",
 			);
 		}
 

apps/cli/src/helpers/core/add-deployment.ts

@@ -31,14 +31,14 @@ export async function addDeploymentToProject(
 		const isBetterTStack = await isBetterTStackProject(projectDir);
 		if (!isBetterTStack) {
 			exitWithError(
-				"This doesn't appear to be a Better-T Stack project. Please run this command from the root of a Better-T Stack project.",
+				"This doesn't appear to be a Better-T-Stack project. Please run this command from the root of a Better-T-Stack project.",
 			);
 		}
 
 		const detectedConfig = await detectProjectConfig(projectDir);
 		if (!detectedConfig) {
 			exitWithError(
-				"Could not detect the project configuration. Please ensure this is a valid Better-T Stack project.",
+				"Could not detect the project configuration. Please ensure this is a valid Better-T-Stack project.",
 			);
 		}
 

apps/cli/src/helpers/core/command-handlers.ts

@@ -47,7 +47,7 @@ export async function createProjectHandler(
 	if (input.renderTitle !== false) {
 		renderTitle();
 	}
-	intro(pc.magenta("Creating a new Better-T Stack project"));
+	intro(pc.magenta("Creating a new Better-T-Stack project"));
 
 	if (input.yolo) {
 		consola.fatal("YOLO mode enabled - skipping checks. Things may break!");
@@ -265,7 +265,7 @@ export async function addAddonsHandler(input: AddInput) {
 
 		if (!detectedConfig) {
 			exitWithError(
-				"Could not detect project configuration. Please ensure this is a valid Better-T Stack project.",
+				"Could not detect project configuration. Please ensure this is a valid Better-T-Stack project.",
 			);
 		}
 

apps/cli/src/helpers/core/post-installation.ts

@@ -187,7 +187,7 @@ export async function displayPostInstallInstructions(
 		tazeCommand,
 	)}\n\n`;
 	output += `${pc.bold(
-		"Like Better-T Stack?",
+		"Like Better-T-Stack?",
 	)} Please consider giving us a star\n   on GitHub:\n`;
 	output += pc.cyan("https://github.com/AmanVarshney01/create-better-t-stack");
 

apps/cli/src/index.ts

@@ -52,7 +52,7 @@ const t = trpcServer.initTRPC.create();
 export const router = t.router({
 	init: t.procedure
 		.meta({
-			description: "Create a new Better-T Stack project",
+			description: "Create a new Better-T-Stack project",
 			default: true,
 			negateBooleans: true,
 		})
@@ -117,7 +117,7 @@ export const router = t.router({
 	add: t.procedure
 		.meta({
 			description:
-				"Add addons or deployment configurations to an existing Better-T Stack project",
+				"Add addons or deployment configurations to an existing Better-T-Stack project",
 		})
 		.input(
 			z.tuple([
@@ -140,11 +140,11 @@ export const router = t.router({
 			await addAddonsHandler(options);
 		}),
 	sponsors: t.procedure
-		.meta({ description: "Show Better-T Stack sponsors" })
+		.meta({ description: "Show Better-T-Stack sponsors" })
 		.mutation(async () => {
 			try {
 				renderTitle();
-				intro(pc.magenta("Better-T Stack Sponsors"));
+				intro(pc.magenta("Better-T-Stack Sponsors"));
 				const sponsors = await fetchSponsors();
 				displaySponsors(sponsors);
 			} catch (error) {
@@ -152,7 +152,7 @@ export const router = t.router({
 			}
 		}),
 	docs: t.procedure
-		.meta({ description: "Open Better-T Stack documentation" })
+		.meta({ description: "Open Better-T-Stack documentation" })
 		.mutation(async () => {
 			const DOCS_URL = "https://better-t-stack.dev/docs";
 			try {
@@ -186,7 +186,7 @@ export function createBtsCli() {
 }
 
 /**
- * Initialize a new Better-T Stack project
+ * Initialize a new Better-T-Stack project
  *
  * @example CLI usage:
  * ```bash

apps/web/content/docs/cli/index.mdx

@@ -5,11 +5,11 @@ description: Complete reference for all CLI commands
 
 ## Overview
 
-The Better-T Stack CLI provides several commands to manage your TypeScript projects.
+The Better-T-Stack CLI provides several commands to manage your TypeScript projects.
 
 ## `init` (Default Command)
 
-Creates a new Better-T Stack project.
+Creates a new Better-T-Stack project.
 
 ```bash
 create-better-t-stack [project-directory] [options]
@@ -59,7 +59,7 @@ create-better-t-stack --database postgres --backend hono --frontend tanstack-rou
 
 ## `add`
 
-Adds addons or deployment configurations to an existing Better-T Stack project.
+Adds addons or deployment configurations to an existing Better-T-Stack project.
 
 ```bash
 create-better-t-stack add [options]
@@ -89,7 +89,7 @@ create-better-t-stack add --web-deploy wrangler
 
 ## `sponsors`
 
-Displays Better-T Stack sponsors.
+Displays Better-T-Stack sponsors.
 
 ```bash
 create-better-t-stack sponsors
@@ -99,7 +99,7 @@ Shows a list of project sponsors and supporters.
 
 ## `docs`
 
-Opens the Better-T Stack documentation in your default browser.
+Opens the Better-T-Stack documentation in your default browser.
 
 ```bash
 create-better-t-stack docs

apps/web/content/docs/cli/options.mdx

@@ -91,7 +91,7 @@ create-better-t-stack --disable-analytics
 create-better-t-stack --no-disable-analytics
 ```
 
-Analytics help improve Better-T Stack by providing insights into usage patterns. When disabled, no data is collected or transmitted.
+Analytics help improve Better-T-Stack by providing insights into usage patterns. When disabled, no data is collected or transmitted.
 
 ## Database Options
 

apps/web/content/docs/cli/programmatic-api.mdx

@@ -1,11 +1,11 @@
 ---
 title: Programmatic API
-description: Use Better-T Stack programmatically in your Node.js applications
+description: Use Better-T-Stack programmatically in your Node.js applications
 ---
 
 ## Overview
 
-The Better-T Stack CLI can be used programmatically in your Node.js applications, allowing you to create projects, add features, and manage configurations through JavaScript/TypeScript code instead of shell commands.
+The Better-T-Stack CLI can be used programmatically in your Node.js applications, allowing you to create projects, add features, and manage configurations through JavaScript/TypeScript code instead of shell commands.
 
 ## Installation
 
@@ -78,13 +78,13 @@ const result = await init("my-private-project", {
 });
 ```
 
-> **Note:** Analytics help improve Better-T Stack by providing insights into usage patterns. When disabled, no data is collected or transmitted.
+> **Note:** Analytics help improve Better-T-Stack by providing insights into usage patterns. When disabled, no data is collected or transmitted.
 
 ## API Reference
 
 ### `init(projectName?, options?)`
 
-Creates a new Better-T Stack project.
+Creates a new Better-T-Stack project.
 
 **Parameters:**
 - `projectName` (string, optional): Project name or directory path
@@ -104,7 +104,7 @@ const result = await init("my-project", {
 
 ### `sponsors()`
 
-Display Better-T Stack sponsors (same as CLI).
+Display Better-T-Stack sponsors (same as CLI).
 
 **Returns:** `Promise<void>`
 

apps/web/content/docs/project-structure.mdx

@@ -1,11 +1,11 @@
 ---
 title: Project Structure
-description: Understanding the structure of projects created by Better-T Stack CLI
+description: Understanding the structure of projects created by Better-T-Stack CLI
 ---
 
 ## Overview
 
-Better-T Stack CLI scaffolds a monorepo with `apps/*` and, when needed, `packages/*`. The exact structure depends on your choices (frontend, backend, API, database/ORM, auth, addons, runtime, deploy). This page mirrors what the CLI actually writes.
+Better-T-Stack CLI scaffolds a monorepo with `apps/*` and, when needed, `packages/*`. The exact structure depends on your choices (frontend, backend, API, database/ORM, auth, addons, runtime, deploy). This page mirrors what the CLI actually writes.
 
 ## Root layout
 
@@ -242,7 +242,7 @@ apps/docs/
 
 ## Configuration Files
 
-### Better-T Stack Config (bts.jsonc)
+### Better-T-Stack Config (bts.jsonc)
 
 ```json
 {

apps/web/src/app/(home)/_components/footer.tsx

@@ -10,7 +10,7 @@ const Footer = () => {
 				<div className="mb-8 grid gap-8 sm:mb-12 sm:grid-cols-2 lg:grid-cols-3 lg:gap-12">
 					<div className="sm:col-span-2 lg:col-span-1">
 						<h3 className="mb-3 flex items-center gap-2 font-semibold text-base text-foreground sm:mb-4">
-							<span>Better-T Stack</span>
+							<span>Better-T-Stack</span>
 						</h3>
 						<p className="mb-4 text-muted-foreground text-sm leading-relaxed sm:mb-6 sm:text-base lg:pr-4">
 							Type-safe, modern TypeScript scaffolding for full-stack web
@@ -94,7 +94,7 @@ const Footer = () => {
 
 				<div className="flex flex-col items-center justify-between gap-4 border-border border-t pt-6 sm:flex-row sm:gap-6 sm:pt-8">
 					<p className="text-center text-muted-foreground text-xs sm:text-left sm:text-sm">
-						© {new Date().getFullYear()} Better-T Stack. All rights reserved.
+						© {new Date().getFullYear()} Better-T-Stack. All rights reserved.
 					</p>
 					<p className="flex items-center gap-1.5 text-muted-foreground text-xs sm:text-sm">
 						Built with

apps/web/src/app/(home)/_components/stats-section.tsx

@@ -73,11 +73,11 @@ export default function StatsSection({
 						</div>
 
 						<div className="border-border/50 border-t pt-3">
-							<div className="flex items-center justify-between text-xs">
+							<div className="flex items-center justify-between gap-2 text-xs">
 								<span className="font-mono text-muted-foreground">
 									Last Updated
 								</span>
-								<span className="font-mono text-accent">
+								<span className="truncate font-mono text-accent">
 									{analyticsData?.lastUpdated ||
 										new Date().toLocaleDateString("en-US", {
 											month: "short",
@@ -134,11 +134,11 @@ export default function StatsSection({
 						</div>
 
 						<div className="border-border/50 border-t pt-3">
-							<div className="flex items-center justify-between text-xs">
+							<div className="flex items-center justify-between gap-2 text-xs">
 								<span className="font-mono text-muted-foreground">
 									Repository
 								</span>
-								<span className="font-mono text-accent">
+								<span className="truncate font-mono text-accent">
 									AmanVarshney01/create-better-t-stack
 								</span>
 							</div>
@@ -196,9 +196,9 @@ export default function StatsSection({
 						</div>
 
 						<div className="border-border/50 border-t pt-3">
-							<div className="flex items-center justify-between text-xs">
+							<div className="flex items-center justify-between gap-2 text-xs">
 								<span className="font-mono text-muted-foreground">Package</span>
-								<span className="font-mono text-accent">
+								<span className="truncate font-mono text-accent">
 									create-better-t-stack
 								</span>
 							</div>

apps/web/src/app/(home)/analytics/page.tsx

@@ -1,5 +1,30 @@
+import type { Metadata } from "next";
 import AnalyticsPage from "./_components/analytics-page";
 
+export const metadata: Metadata = {
+	title: "Analytics - Better-T-Stack",
+	description: "Project creation analytics for Better-T-Stack.",
+	openGraph: {
+		title: "Analytics - Better-T-Stack",
+		description: "Project creation analytics for Better-T-Stack.",
+		url: "https://better-t-stack.dev/analytics",
+		images: [
+			{
+				url: "https://r2.better-t-stack.dev/og.png",
+				width: 1200,
+				height: 630,
+				alt: "Better-T-Stack Analytics",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "Analytics - Better-T-Stack",
+		description: "Project creation analytics for Better-T-Stack.",
+		images: ["https://r2.better-t-stack.dev/og.png"],
+	},
+};
+
 export default async function Analytics() {
 	const response = await fetch(
 		"https://r2.better-t-stack.dev/analytics-data.json",

apps/web/src/app/(home)/new/layout.tsx

@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import type { ReactNode } from "react";
+
+export const metadata: Metadata = {
+	title: "Stack Builder - Better-T-Stack",
+	description: "Interactive Ui to roll your own stack",
+	openGraph: {
+		title: "Stack Builder - Better-T-Stack",
+		description: "Interactive Ui to roll your own stack",
+		url: "https://better-t-stack.dev/new",
+		images: [
+			{
+				url: "https://r2.better-t-stack.dev/og.png",
+				width: 1200,
+				height: 630,
+				alt: "Better-T-Stack Stack Builder",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "Stack Builder - Better-T-Stack",
+		description: "Interactive Ui to roll your own stack",
+		images: ["https://r2.better-t-stack.dev/og.png"],
+	},
+};
+
+export default function NewLayout({ children }: { children: ReactNode }) {
+	return children;
+}

apps/web/src/app/(home)/showcase/page.tsx

@@ -2,8 +2,33 @@ export const dynamic = "force-static";
 
 import { api } from "@better-t-stack/backend/convex/_generated/api";
 import { fetchQuery } from "convex/nextjs";
+import type { Metadata } from "next";
 import ShowcasePage from "./_components/showcase-page";
 
+export const metadata: Metadata = {
+	title: "Showcase - Better-T-Stack",
+	description: "Projects created with Better-T-Stack",
+	openGraph: {
+		title: "Showcase - Better-T-Stack",
+		description: "Projects created with Better-T-Stack",
+		url: "https://better-t-stack.dev/showcase",
+		images: [
+			{
+				url: "https://r2.better-t-stack.dev/og.png",
+				width: 1200,
+				height: 630,
+				alt: "Better-T-Stack Showcase",
+			},
+		],
+	},
+	twitter: {
+		card: "summary_large_image",
+		title: "Showcase - Better-T-Stack",
+		description: "Projects created with Better-T-Stack",
+		images: ["https://r2.better-t-stack.dev/og.png"],
+	},
+};
+
 export default async function Showcase() {
 	const showcaseProjects = await fetchQuery(api.showcase.getShowcaseProjects);
 	return <ShowcasePage showcaseProjects={showcaseProjects} />;

apps/web/src/app/docs-og/[...slug]/route.tsx

@@ -0,0 +1,25 @@
+import { generateOGImage } from "fumadocs-ui/og";
+import { notFound } from "next/navigation";
+import { source } from "@/lib/source";
+
+export async function GET(
+	_req: Request,
+	{ params }: { params: Promise<{ slug: string[] }> },
+) {
+	const { slug } = await params;
+	const page = source.getPage(slug.slice(0, -1));
+	if (!page) notFound();
+
+	return generateOGImage({
+		title: page.data.title,
+		description: page.data.description,
+		site: "Better-T-Stack",
+	});
+}
+
+export function generateStaticParams() {
+	return source.generateParams().map((page) => ({
+		...page,
+		slug: [...page.slug, "image.png"],
+	}));
+}

apps/web/src/app/docs/[[...slug]]/page.tsx

@@ -49,8 +49,17 @@ export async function generateMetadata({
 	const { slug = [] } = await params;
 	const page = source.getPage(slug);
 	if (!page) notFound();
+
+	const image = `/docs-og/${slug.join("/")}/image.png`;
 	return {
 		title: page.data.title,
 		description: page.data.description,
+		openGraph: {
+			images: image,
+		},
+		twitter: {
+			card: "summary_large_image",
+			images: image,
+		},
 	};
 }

apps/web/src/app/layout.tsx

@@ -19,11 +19,10 @@ const geistMono = Geist_Mono({
 	variable: "--font-geist-mono",
 });
 
-const ogImage =
+const ogImage = "https://r2.better-t-stack.dev/og.png";
-	"https://api.screenshothis.com/v1/screenshots/take?api_key=ss_live_NQJgRXqHcKPwnoMTuQmgiwLIGbVfihjpMyQhgsaMyNBHTyesvrxpYNXmdgcnxipc&url=https%3A%2F%2Fbetter-t-stack.dev%2F&width=1200&height=630&block_ads=true&block_cookie_banners=true&block_trackers=true&device_scale_factor=0.65&prefers_color_scheme=dark&is_cached=true&cache_key=cbts2";
 
 export const metadata: Metadata = {
-	title: "Better-T Stack",
+	title: "Better-T-Stack",
 	description:
 		"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
 	keywords: [
@@ -43,12 +42,12 @@ export const metadata: Metadata = {
 		"Better-Auth",
 		"convex",
 		"monorepo",
-		"Better-T Stack",
+		"Better-T-Stack",
 		"create-better-t-stack",
 	],
-	authors: [{ name: "Better-T Stack Team" }],
+	authors: [{ name: "Better-T-Stack Team" }],
-	creator: "Better-T Stack",
+	creator: "Better-T-Stack",
-	publisher: "Better-T Stack",
+	publisher: "Better-T-Stack",
 	formatDetection: {
 		email: false,
 		telephone: false,
@@ -58,17 +57,17 @@ export const metadata: Metadata = {
 		canonical: "/",
 	},
 	openGraph: {
-		title: "Better-T Stack",
+		title: "Better-T-Stack",
 		description:
 			"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
 		url: "https://better-t-stack.dev",
-		siteName: "Better-T Stack",
+		siteName: "Better-T-Stack",
 		images: [
 			{
 				url: ogImage,
 				width: 1200,
 				height: 630,
-				alt: "Better-T Stack",
+				alt: "Better-T-Stack",
 			},
 		],
 		locale: "en_US",
@@ -76,7 +75,7 @@ export const metadata: Metadata = {
 	},
 	twitter: {
 		card: "summary_large_image",
-		title: "Better-T Stack",
+		title: "Better-T-Stack",
 		description:
 			"A modern CLI tool for scaffolding end-to-end type-safe TypeScript projects with best practices and customizable configurations",
 		images: [ogImage],