revert changes to og-image

web/src/app/community/[icon]/opengraph-image.tsx

@@ -2,9 +2,21 @@ import { permanentRedirect, redirect } from "next/navigation"
 import { ImageResponse } from "next/og"
 import { getCommunityGalleryRecord, getCommunitySubmissionByName, getCommunitySubmissions } from "@/lib/community"
 
-export const runtime = "edge";
 export const revalidate = 21600 // 6 hours
 
+export async function generateStaticParams() {
+	const icons = await getCommunitySubmissions()
+	const validIcons = icons.filter((icon) => icon.name)
+	if (process.env.CI_MODE === "false") {
+		return validIcons.slice(0, 5).map((icon) => ({
+			icon: icon.name,
+		}))
+	}
+	return validIcons.map((icon) => ({
+		icon: icon.name,
+	}))
+}
+
 export const size = {
 	width: 1200,
 	height: 630,

web/src/app/icons/[icon]/opengraph-image.tsx

@@ -1,23 +1,34 @@
-import { ImageResponse } from "next/og";
+import { readFile } from "node:fs/promises"
-import { BASE_URL } from "@/constants";
+import { join } from "node:path"
-import { getAllIcons } from "@/lib/api";
+import { ImageResponse } from "next/og"
+import { getAllIcons } from "@/lib/api"
 
-export const runtime = "edge";
+export const revalidate = false
-export const revalidate = false;
+
+export async function generateStaticParams() {
+	const iconsData = await getAllIcons()
+	if (process.env.CI_MODE === "false") {
+		// This is meant to speed up the build process in local development
+		return Object.keys(iconsData)
+			.slice(0, 5)
+			.map((icon) => ({
+				icon,
+			}))
+	}
+	return Object.keys(iconsData).map((icon) => ({
+		icon,
+	}))
+}
 
 export const size = {
 	width: 1200,
 	height: 630,
-};
+}
-export default async function Image({
+export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
-	params,
+	const { icon } = await params
-}: {
-	params: Promise<{ icon: string }>;
-}) {
-	const { icon } = await params;
 
 	if (!icon) {
-		console.error(`[Opengraph Image] Icon not found for ${icon}`);
+		console.error(`[Opengraph Image] Icon not found for ${icon}`)
 		return new ImageResponse(
 			<div
 				style={{
@@ -35,33 +46,32 @@ export default async function Image({
 				Icon not found
 			</div>,
 			{ ...size },
-		);
+		)
 	}
 
-	const iconsData = await getAllIcons();
+	const iconsData = await getAllIcons()
-	const totalIcons = Object.keys(iconsData).length;
+	const totalIcons = Object.keys(iconsData).length
-	const index = Object.keys(iconsData).indexOf(icon);
+	const index = Object.keys(iconsData).indexOf(icon)
 
 	// Format the icon name for display
 	const formattedIconName = icon
 		.split("-")
 		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-		.join(" ");
+		.join(" ")
 
-	// Fetch the icon from CDN (Edge Runtime compatible)
+	// Read the icon file from local filesystem
-	let iconUrl: string | null = null;
+	let iconData: Buffer | null = null
 	try {
-		const iconCdnUrl = `${BASE_URL}/png/${icon}.png`;
+		const iconPath = join(process.cwd(), `../png/${icon}.png`)
-		const response = await fetch(iconCdnUrl);
+		console.log(`Generating opengraph image for ${icon} (${index + 1} / ${totalIcons}) from path ${iconPath}`)
-		if (response.ok) {
+		iconData = await readFile(iconPath)
-			const arrayBuffer = await response.arrayBuffer();
-			const base64 = Buffer.from(arrayBuffer).toString("base64");
-			iconUrl = `data:image/png;base64,${base64}`;
-		}
 	} catch (_error) {
-		console.error(`Icon ${icon} was not found on CDN`);
+		console.error(`Icon ${icon} was not found locally`)
 	}
 
+	// Convert the image data to a data URL or use placeholder
+	const iconUrl = iconData ? `data:image/png;base64,${iconData.toString("base64")}` : null
+
 	return new ImageResponse(
 		<div
 			style={{
@@ -86,8 +96,7 @@ export default async function Image({
 					width: 400,
 					height: 400,
 					borderRadius: "50%",
-					background:
+					background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
-						"linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
 					filter: "blur(80px)",
 					zIndex: 2,
 				}}
@@ -100,8 +109,7 @@ export default async function Image({
 					width: 500,
 					height: 500,
 					borderRadius: "50%",
-					background:
+					background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
-						"linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
 					filter: "blur(100px)",
 					zIndex: 2,
 				}}
@@ -131,8 +139,7 @@ export default async function Image({
 						height: 320,
 						borderRadius: 32,
 						background: "white",
-						boxShadow:
+						boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
-							"0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
 						padding: 30,
 						flexShrink: 0,
 						position: "relative",
@@ -148,10 +155,7 @@ export default async function Image({
 						}}
 					/>
 					<img
-						src={
+						src={iconUrl || `https://placehold.co/600x400?text=${formattedIconName}`}
-							iconUrl ||
-							`https://placehold.co/600x400?text=${formattedIconName}`
-						}
 						alt={formattedIconName}
 						width={260}
 						height={260}
@@ -275,5 +279,5 @@ export default async function Image({
 		{
 			...size,
 		},
-	);
+	)
 }