feat: migrate icons to r2 and optimize rendering

2025-10-12 23:52:15 +00:00 · 2025-08-04 21:35:23 +05:30
parent 962c4d33a5
commit f650774042
46 changed files with 112 additions and 272 deletions
--- a/apps/web/src/app/(home)/_components/FeatureCard.tsx
+++ b/apps/web/src/app/(home)/_components/FeatureCard.tsx
@@ -3,7 +3,7 @@
 import { motion } from "motion/react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
-import { useEffect, useState } from "react";
+
 import { ScrollArea } from "@/components/ui/scroll-area";
 import { cn } from "@/lib/utils";

@@ -29,44 +29,46 @@ function TechIcon({
 	name: string;
 	className?: string;
 }) {
-	const [mounted, setMounted] = useState(false);
 	const { theme } = useTheme();

-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (mounted && icon.startsWith("/icon/")) {
-		if (
-			theme === "light" &&
-			(icon.includes("drizzle") ||
-				icon.includes("prisma") ||
-				icon.includes("express"))
-		) {
-			icon = icon.replace(".svg", "-light.svg");
-		}
+	// If no icon, return empty
+	if (!icon) return null;

+	// If it's an emoji or text icon, render as span
+	if (!icon.startsWith("https://")) {
 		return (
-			<Image
-				src={icon}
-				alt={`${name} icon`}
-				width={24}
-				height={24}
-				className={cn("h-6 w-6 object-contain", className)}
-				unoptimized
-			/>
+			<span
+				className={cn(
+					"flex h-6 w-6 items-center justify-center text-2xl",
+					className,
+				)}
+			>
+				{icon}
+			</span>
 		);
 	}

+	// Handle light theme variants
+	let iconSrc = icon;
+	if (
+		theme === "light" &&
+		(icon.includes("drizzle") ||
+			icon.includes("prisma") ||
+			icon.includes("express"))
+	) {
+		iconSrc = icon.replace(".svg", "-light.svg");
+	}
+
+	// Render as image
 	return (
-		<span
-			className={cn(
-				"flex h-6 w-6 items-center justify-center text-2xl",
-				className,
-			)}
-		>
-			{icon}
-		</span>
+		<Image
+			src={iconSrc}
+			alt={`${name} icon`}
+			width={24}
+			height={24}
+			className={cn("h-6 w-6 object-contain", className)}
+			unoptimized
+		/>
 	);
 }

--- a/apps/web/src/app/(home)/_components/footer.tsx
+++ b/apps/web/src/app/(home)/_components/footer.tsx
@@ -1,5 +1,7 @@
 import { Github } from "lucide-react";
+import Image from "next/image";
 import Link from "next/link";
+import npmIcon from "@/public/icon/npm.svg";

 const Footer = () => {
 	return (
@@ -26,18 +28,10 @@ const Footer = () => {
 							<Link
 								href="https://www.npmjs.com/package/create-better-t-stack"
 								target="_blank"
-								className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2"
+								className="inline-flex items-center justify-center rounded-md p-2 text-muted-foreground invert-0 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 dark:invert"
 								aria-label="NPM Package"
 							>
-								<svg
-									viewBox="0 0 24 24"
-									width="20"
-									height="20"
-									fill="currentColor"
-								>
-									<title>NPM</title>
-									<path d="M0 7.334v8h6.666v1.332H12v-1.332h12v-8H0zm6.666 6.664H5.334v-4H3.999v4H1.335V8.667h5.331v5.331zm4 0v1.336H8.001V8.667h5.334v5.332h-2.669v-.001zm12.001 0h-1.33v-4h-1.336v4h-1.335v-4h-1.33v4h-2.671V8.667h8.002v5.331z" />
-								</svg>
+								<Image src={npmIcon} alt="NPM" width={20} height={20} />
 							</Link>
 						</div>
 					</div>
--- a/apps/web/src/app/(home)/_components/stack-builder.tsx
+++ b/apps/web/src/app/(home)/_components/stack-builder.tsx
@@ -138,39 +138,37 @@ function TechIcon({
 	name: string;
 	className?: string;
 }) {
-	const [mounted, setMounted] = useState(false);
 	const { theme } = useTheme();

-	useEffect(() => {
-		setMounted(true);
-	}, []);
-
-	if (mounted && icon.startsWith("/icon/")) {
-		if (
-			theme === "light" &&
-			(icon.includes("drizzle") ||
-				icon.includes("prisma") ||
-				icon.includes("express"))
-		) {
-			icon = icon.replace(".svg", "-light.svg");
-		}
+	if (!icon) return null;

+	if (!icon.startsWith("https://")) {
 		return (
-			<Image
-				src={icon}
-				alt={`${name} icon`}
-				width={20}
-				height={20}
-				className={cn("inline-block", className)}
-				unoptimized
-			/>
+			<span className={cn("inline-flex items-center text-lg", className)}>
+				{icon}
+			</span>
 		);
 	}

+	let iconSrc = icon;
+	if (
+		theme === "light" &&
+		(icon.includes("drizzle") ||
+			icon.includes("prisma") ||
+			icon.includes("express"))
+	) {
+		iconSrc = icon.replace(".svg", "-light.svg");
+	}
+
 	return (
-		<span className={cn("inline-flex items-center text-lg", className)}>
-			{icon}
-		</span>
+		<Image
+			src={iconSrc}
+			alt={`${name} icon`}
+			width={20}
+			height={20}
+			className={cn("inline-block", className)}
+			unoptimized
+		/>
 	);
 }

@@ -1202,12 +1200,7 @@ const StackBuilder = () => {
 									<TechIcon
 										icon={tech.icon}
 										name={tech.name}
-										className={cn(
-											tech.icon.startsWith("/icon/")
-												? "h-3 w-3"
-												: "h-3 w-3 text-xs",
-											tech.className,
-										)}
+										className={cn("h-3 w-3", tech.className)}
 									/>
 								)}
 								{tech.name}
@@ -1236,9 +1229,7 @@ const StackBuilder = () => {
 							getBadgeColors(category),
 						)}
 					>
-						{tech.icon !== "" && (
-							<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
-						)}
+						<TechIcon icon={tech.icon} name={tech.name} className="h-3 w-3" />
 						{tech.name}
 					</span>,
 				);
--- a/apps/web/src/app/(home)/analytics/page.tsx
+++ b/apps/web/src/app/(home)/analytics/page.tsx
@@ -24,7 +24,7 @@ import {
 	ChartTooltip,
 	ChartTooltipContent,
 } from "@/components/ui/chart";
-import discordLogo from "@/public/icon/discord.svg";
+import discordIcon from "@/public/icon/discord.svg";
 import Footer from "../_components/footer";

 interface AggregatedAnalyticsData {
@@ -650,7 +650,7 @@ export default function AnalyticsPage() {
 						<div className="flex items-center justify-between p-3">
 							<div className="flex items-center gap-3">
 								<Image
-									src={discordLogo}
+									src={discordIcon}
 									alt="discord"
 									className="h-4 w-4 invert-0 dark:invert"
 								/>
--- a/apps/web/src/lib/constant.ts
+++ b/apps/web/src/lib/constant.ts
@@ -1,5 +1,7 @@
 import type { TechCategory } from "./types";

+export const ICON_BASE_URL = "https://r2.better-t-stack.dev/icons";
+
 export const TECH_OPTIONS: Record<
 	TechCategory,
 	{
@@ -17,7 +19,7 @@ export const TECH_OPTIONS: Record<
 			id: "trpc",
 			name: "tRPC",
 			description: "End-to-end typesafe APIs",
-			icon: "/icon/trpc.svg",
+			icon: `${ICON_BASE_URL}/trpc.svg`,
 			color: "from-blue-500 to-blue-700",
 			default: true,
 		},
@@ -25,7 +27,7 @@ export const TECH_OPTIONS: Record<
 			id: "orpc",
 			name: "oRPC",
 			description: "Typesafe APIs Made Simple",
-			icon: "/icon/orpc.svg",
+			icon: `${ICON_BASE_URL}/orpc.svg`,
 			color: "from-indigo-400 to-indigo-600",
 		},
 		{
@@ -41,7 +43,7 @@ export const TECH_OPTIONS: Record<
 			id: "tanstack-router",
 			name: "TanStack Router",
 			description: "Modern type-safe router for React",
-			icon: "/icon/tanstack.svg",
+			icon: `${ICON_BASE_URL}/tanstack.svg`,
 			color: "from-blue-400 to-blue-600",
 			default: true,
 		},
@@ -49,7 +51,7 @@ export const TECH_OPTIONS: Record<
 			id: "react-router",
 			name: "React Router",
 			description: "Declarative routing for React",
-			icon: "/icon/react-router.svg",
+			icon: `${ICON_BASE_URL}/react-router.svg`,
 			color: "from-cyan-400 to-cyan-600",
 			default: false,
 		},
@@ -58,7 +60,7 @@ export const TECH_OPTIONS: Record<
 			name: "TanStack Start (vite)",
 			description:
 				"Full-stack React and Solid framework powered by TanStack Router",
-			icon: "/icon/tanstack.svg",
+			icon: `${ICON_BASE_URL}/tanstack.svg`,
 			color: "from-purple-400 to-purple-600",
 			default: false,
 		},
@@ -66,7 +68,7 @@ export const TECH_OPTIONS: Record<
 			id: "next",
 			name: "Next.js",
 			description: "React framework with hybrid rendering",
-			icon: "/icon/nextjs.svg",
+			icon: `${ICON_BASE_URL}/nextjs.svg`,
 			color: "from-gray-700 to-black",
 			default: false,
 		},
@@ -74,7 +76,7 @@ export const TECH_OPTIONS: Record<
 			id: "nuxt",
 			name: "Nuxt",
 			description: "Vue full-stack framework (SSR, SSG, hybrid)",
-			icon: "/icon/nuxt.svg",
+			icon: `${ICON_BASE_URL}/nuxt.svg`,
 			color: "from-green-400 to-green-700",
 			default: false,
 		},
@@ -82,7 +84,7 @@ export const TECH_OPTIONS: Record<
 			id: "svelte",
 			name: "Svelte",
 			description: "Cybernetically enhanced web apps",
-			icon: "/icon/svelte.svg",
+			icon: `${ICON_BASE_URL}/svelte.svg`,
 			color: "from-orange-500 to-orange-700",
 			default: false,
 		},
@@ -90,7 +92,7 @@ export const TECH_OPTIONS: Record<
 			id: "solid",
 			name: "Solid",
 			description: "Simple and performant reactivity for building UIs",
-			icon: "/icon/solid.svg",
+			icon: `${ICON_BASE_URL}/solid.svg`,
 			color: "from-blue-600 to-blue-800",
 			default: false,
 		},
@@ -108,7 +110,7 @@ export const TECH_OPTIONS: Record<
 			id: "native-nativewind",
 			name: "React Native + NativeWind",
 			description: "Expo with NativeWind (Tailwind)",
-			icon: "/icon/expo.svg",
+			icon: `${ICON_BASE_URL}/expo.svg`,
 			color: "from-purple-400 to-purple-600",
 			className: "invert-0 dark:invert",
 			default: false,
@@ -117,7 +119,7 @@ export const TECH_OPTIONS: Record<
 			id: "native-unistyles",
 			name: "React Native + Unistyles",
 			description: "Expo with Unistyles",
-			icon: "/icon/expo.svg",
+			icon: `${ICON_BASE_URL}/expo.svg`,
 			color: "from-pink-400 to-pink-600",
 			className: "invert-0 dark:invert",
 			default: false,
@@ -136,7 +138,7 @@ export const TECH_OPTIONS: Record<
 			id: "bun",
 			name: "Bun",
 			description: "Fast JavaScript runtime & toolkit",
-			icon: "/icon/bun.svg",
+			icon: `${ICON_BASE_URL}/bun.svg`,
 			color: "from-amber-400 to-amber-600",
 			default: true,
 		},
@@ -144,14 +146,14 @@ export const TECH_OPTIONS: Record<
 			id: "node",
 			name: "Node.js",
 			description: "JavaScript runtime environment",
-			icon: "/icon/node.svg",
+			icon: `${ICON_BASE_URL}/node.svg`,
 			color: "from-green-400 to-green-600",
 		},
 		{
 			id: "workers",
 			name: "Cloudflare Workers",
 			description: "Serverless runtime for the edge",
-			icon: "/icon/workers.svg",
+			icon: `${ICON_BASE_URL}/workers.svg`,
 			color: "from-orange-400 to-orange-600",
 		},
 		{
@@ -167,7 +169,7 @@ export const TECH_OPTIONS: Record<
 			id: "hono",
 			name: "Hono",
 			description: "Ultrafast web framework",
-			icon: "/icon/hono.svg",
+			icon: `${ICON_BASE_URL}/hono.svg`,
 			color: "from-blue-500 to-blue-700",
 			default: true,
 		},
@@ -175,35 +177,35 @@ export const TECH_OPTIONS: Record<
 			id: "next",
 			name: "Next.js",
 			description: "App Router and API Routes",
-			icon: "/icon/nextjs.svg",
+			icon: `${ICON_BASE_URL}/nextjs.svg`,
 			color: "from-gray-700 to-black",
 		},
 		{
 			id: "elysia",
 			name: "Elysia",
 			description: "TypeScript web framework",
-			icon: "/icon/elysia.svg",
+			icon: `${ICON_BASE_URL}/elysia.svg`,
 			color: "from-purple-500 to-purple-700",
 		},
 		{
 			id: "express",
 			name: "Express",
 			description: "Popular Node.js framework",
-			icon: "/icon/express.svg",
+			icon: `${ICON_BASE_URL}/express.svg`,
 			color: "from-gray-500 to-gray-700",
 		},
 		{
 			id: "fastify",
 			name: "Fastify",
 			description: "Fast, low-overhead web framework for Node.js",
-			icon: "/icon/fastify.svg",
+			icon: `${ICON_BASE_URL}/fastify.svg`,
 			color: "from-gray-500 to-gray-700",
 		},
 		{
 			id: "convex",
 			name: "Convex",
 			description: "Reactive backend-as-a-service",
-			icon: "/icon/convex.svg",
+			icon: `${ICON_BASE_URL}/convex.svg`,
 			color: "from-pink-500 to-pink-700",
 		},
 		{
@@ -219,7 +221,7 @@ export const TECH_OPTIONS: Record<
 			id: "sqlite",
 			name: "SQLite",
 			description: "File-based SQL database",
-			icon: "/icon/sqlite.svg",
+			icon: `${ICON_BASE_URL}/sqlite.svg`,
 			color: "from-blue-400 to-cyan-500",
 			default: true,
 		},
@@ -227,21 +229,21 @@ export const TECH_OPTIONS: Record<
 			id: "postgres",
 			name: "PostgreSQL",
 			description: "Advanced SQL database",
-			icon: "/icon/postgres.svg",
+			icon: `${ICON_BASE_URL}/postgres.svg`,
 			color: "from-indigo-400 to-indigo-600",
 		},
 		{
 			id: "mysql",
 			name: "MySQL",
 			description: "Popular relational database",
-			icon: "/icon/mysql.svg",
+			icon: `${ICON_BASE_URL}/mysql.svg`,
 			color: "from-blue-500 to-blue-700",
 		},
 		{
 			id: "mongodb",
 			name: "MongoDB",
 			description: "NoSQL document database",
-			icon: "/icon/mongodb.svg",
+			icon: `${ICON_BASE_URL}/mongodb.svg`,
 			color: "from-green-400 to-green-600",
 		},
 		{
@@ -257,7 +259,7 @@ export const TECH_OPTIONS: Record<
 			id: "drizzle",
 			name: "Drizzle",
 			description: "TypeScript ORM",
-			icon: "/icon/drizzle.svg",
+			icon: `${ICON_BASE_URL}/drizzle.svg`,
 			color: "from-cyan-400 to-cyan-600",
 			default: true,
 		},
@@ -265,14 +267,14 @@ export const TECH_OPTIONS: Record<
 			id: "prisma",
 			name: "Prisma",
 			description: "Next-gen ORM",
-			icon: "/icon/prisma.svg",
+			icon: `${ICON_BASE_URL}/prisma.svg`,
 			color: "from-purple-400 to-purple-600",
 		},
 		{
 			id: "mongoose",
 			name: "Mongoose",
 			description: "Elegant object modeling tool",
-			icon: "/icon/mongoose.svg",
+			icon: `${ICON_BASE_URL}/mongoose.svg`,
 			color: "from-blue-400 to-blue-600",
 		},
 		{
@@ -288,49 +290,49 @@ export const TECH_OPTIONS: Record<
 			id: "turso",
 			name: "Turso",
 			description: "SQLite cloud database powered by libSQL",
-			icon: "/icon/turso.svg",
+			icon: `${ICON_BASE_URL}/turso.svg`,
 			color: "from-pink-400 to-pink-600",
 		},
 		{
 			id: "d1",
 			name: "Cloudflare D1",
 			description: "Serverless SQLite database on Cloudflare Workers",
-			icon: "/icon/workers.svg",
+			icon: `${ICON_BASE_URL}/workers.svg`,
 			color: "from-orange-400 to-orange-600",
 		},
 		{
 			id: "neon",
 			name: "Neon Postgres",
 			description: "Serverless PostgreSQL with Neon",
-			icon: "/icon/neon.svg",
+			icon: `${ICON_BASE_URL}/neon.svg`,
 			color: "from-blue-400 to-blue-600",
 		},
 		{
 			id: "prisma-postgres",
 			name: "Prisma PostgreSQL",
 			description: "Set up PostgreSQL with Prisma",
-			icon: "/icon/prisma.svg",
+			icon: `${ICON_BASE_URL}/prisma.svg`,
 			color: "from-indigo-400 to-indigo-600",
 		},
 		{
 			id: "mongodb-atlas",
 			name: "MongoDB Atlas",
 			description: "Cloud MongoDB setup with Atlas",
-			icon: "/icon/mongodb.svg",
+			icon: `${ICON_BASE_URL}/mongodb.svg`,
 			color: "from-green-400 to-green-600",
 		},
 		{
 			id: "supabase",
 			name: "Supabase",
 			description: "Local Supabase stack (requires Docker)",
-			icon: "/icon/supabase.svg",
+			icon: `${ICON_BASE_URL}/supabase.svg`,
 			color: "from-emerald-400 to-emerald-600",
 		},
 		{
 			id: "docker",
 			name: "Docker",
 			description: "Local database with Docker Compose",
-			icon: "/icon/docker.svg",
+			icon: `${ICON_BASE_URL}/docker.svg`,
 			color: "from-blue-500 to-blue-700",
 		},
 		{
@@ -347,7 +349,7 @@ export const TECH_OPTIONS: Record<
 			id: "workers",
 			name: "Cloudflare Workers",
 			description: "Deploy to Cloudflare Workers",
-			icon: "/icon/workers.svg",
+			icon: `${ICON_BASE_URL}/workers.svg`,
 			color: "from-orange-400 to-orange-600",
 		},
 		{
@@ -364,7 +366,7 @@ export const TECH_OPTIONS: Record<
 			id: "true",
 			name: "Better Auth",
 			description: "Simple authentication",
-			icon: "/icon/better-auth.svg",
+			icon: `${ICON_BASE_URL}/better-auth.svg`,
 			color: "from-green-400 to-green-600",
 			default: true,
 		},
@@ -381,7 +383,7 @@ export const TECH_OPTIONS: Record<
 			id: "npm",
 			name: "npm",
 			description: "Default package manager",
-			icon: "/icon/npm.svg",
+			icon: `${ICON_BASE_URL}/npm.svg`,
 			color: "from-red-500 to-red-700",
 			className: "invert-0 dark:invert",
 		},
@@ -389,14 +391,14 @@ export const TECH_OPTIONS: Record<
 			id: "pnpm",
 			name: "pnpm",
 			description: "Fast, disk space efficient",
-			icon: "/icon/pnpm.svg",
+			icon: `${ICON_BASE_URL}/pnpm.svg`,
 			color: "from-orange-500 to-orange-700",
 		},
 		{
 			id: "bun",
 			name: "bun",
 			description: "All-in-one toolkit",
-			icon: "/icon/bun.svg",
+			icon: `${ICON_BASE_URL}/bun.svg`,
 			color: "from-amber-500 to-amber-700",
 			default: true,
 		},
@@ -414,7 +416,7 @@ export const TECH_OPTIONS: Record<
 			id: "tauri",
 			name: "Tauri",
 			description: "Build native desktop apps",
-			icon: "/icon/tauri.svg",
+			icon: `${ICON_BASE_URL}/tauri.svg`,
 			color: "from-amber-500 to-amber-700",
 			default: false,
 		},
@@ -422,7 +424,7 @@ export const TECH_OPTIONS: Record<
 			id: "starlight",
 			name: "Starlight",
 			description: "Build stellar docs with astro",
-			icon: "/icon/starlight.svg",
+			icon: `${ICON_BASE_URL}/starlight.svg`,
 			color: "from-teal-500 to-teal-700",
 			default: false,
 		},
@@ -430,7 +432,7 @@ export const TECH_OPTIONS: Record<
 			id: "biome",
 			name: "Biome",
 			description: "Format, lint, and more",
-			icon: "/icon/biome.svg",
+			icon: `${ICON_BASE_URL}/biome.svg`,
 			color: "from-green-500 to-green-700",
 			default: false,
 		},
@@ -446,7 +448,7 @@ export const TECH_OPTIONS: Record<
 			id: "ultracite",
 			name: "Ultracite",
 			description: "Biome preset with AI integration",
-			icon: "/icon/ultracite.svg",
+			icon: `${ICON_BASE_URL}/ultracite.svg`,
 			color: "from-blue-500 to-blue-700",
 			className: "invert-0 dark:invert",
 			default: false,
@@ -471,7 +473,7 @@ export const TECH_OPTIONS: Record<
 			id: "turborepo",
 			name: "Turborepo",
 			description: "High-performance build system",
-			icon: "/icon/turborepo.svg",
+			icon: `${ICON_BASE_URL}/turborepo.svg`,
 			color: "from-gray-400 to-gray-700",
 			default: true,
 		},
@@ -499,7 +501,7 @@ export const TECH_OPTIONS: Record<
 			id: "true",
 			name: "Git",
 			description: "Initialize Git repository",
-			icon: "/icon/git.svg",
+			icon: `${ICON_BASE_URL}/git.svg`,
 			color: "from-gray-500 to-gray-700",
 			default: true,
 		},