From 60bd2cce969e1fd68a6b8ed02b17c1472223f5e0 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 18 Apr 2025 15:24:05 +0200
Subject: [PATCH] update opengraph image generator

---
 web/src/app/icons/[icon]/opengraph-image.tsx | 431 +++++++++----------
 1 file changed, 203 insertions(+), 228 deletions(-)

diff --git a/web/src/app/icons/[icon]/opengraph-image.tsx b/web/src/app/icons/[icon]/opengraph-image.tsx
index 6c3f8911..de91a167 100644
--- a/web/src/app/icons/[icon]/opengraph-image.tsx
+++ b/web/src/app/icons/[icon]/opengraph-image.tsx
@@ -25,14 +25,14 @@ export default async function Image({ params }: { params: { icon: string } }) {
 
 	// Format the icon name for display
 	const formattedIconName = icon
-	.split("-")
-	.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-	.join(" ")
-	
+		.split("-")
+		.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+		.join(" ")
+
 	// Get the icon URL
 	// Check if the image exists if the return type of the image is of image type
-  try {
-		const response = await fetch(iconUrl) 
+	try {
+		const response = await fetch(iconUrl)
 		if (!response.ok) {
 			console.error(`Icon ${icon} was not found at ${iconUrl}`)
 			iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
@@ -41,236 +41,211 @@ export default async function Image({ params }: { params: { icon: string } }) {
 		console.error(`Icon ${icon} was not found at ${iconUrl}`)
 		iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
 	}
-	
 
 	return new ImageResponse(
 		<div
-      style={{
-        display: "flex",
-        width: "100%",
-        height: "100%",
-        position: "relative",
-        fontFamily: "Inter, system-ui, sans-serif",
-        overflow: "hidden",
-      }}
-    >
-      {/* Background with gradient */}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          background: "linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%)",
-          zIndex: 0,
-        }}
-      />
+			style={{
+				display: "flex",
+				width: "100%",
+				height: "100%",
+				position: "relative",
+				fontFamily: "Inter, system-ui, sans-serif",
+				overflow: "hidden",
+				backgroundColor: "white",
+				backgroundImage:
+					"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
+				backgroundSize: "100px 100px",
+			}}
+		>
+			{/* Background blur blobs */}
+			<div
+				style={{
+					position: "absolute",
+					top: -100,
+					left: -100,
+					width: 400,
+					height: 400,
+					borderRadius: "50%",
+					background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
+					filter: "blur(80px)",
+					zIndex: 2,
+				}}
+			/>
+			<div
+				style={{
+					position: "absolute",
+					bottom: -150,
+					right: -150,
+					width: 500,
+					height: 500,
+					borderRadius: "50%",
+					background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
+					filter: "blur(100px)",
+					zIndex: 2,
+				}}
+			/>
 
-      {/* Subtle pattern overlay */}
-      <div
-        style={{
-          position: "absolute",
-          inset: 0,
-          backgroundImage: "radial-gradient(#e2e8f0 1px, transparent 1px)",
-          backgroundSize: "40px 40px",
-          opacity: 0.3,
-          zIndex: 1,
-        }}
-      />
+			{/* Main content layout */}
+			<div
+				style={{
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					justifyContent: "center",
+					width: "100%",
+					height: "100%",
+					padding: "60px",
+					gap: "70px",
+					zIndex: 10,
+				}}
+			>
+				{/* Icon container */}
+				<div
+					style={{
+						display: "flex",
+						alignItems: "center",
+						justifyContent: "center",
+						width: 320,
+						height: 320,
+						borderRadius: 32,
+						background: "white",
+						boxShadow: "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",
+						overflow: "hidden",
+					}}
+				>
+					<div
+						style={{
+							position: "absolute",
+							inset: 0,
+							background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
+							zIndex: 0,
+						}}
+					/>
+					<img
+						src={iconUrl}
+						alt={formattedIconName}
+						width={260}
+						height={260}
+						style={{
+							objectFit: "contain",
+							position: "relative",
+							zIndex: 1,
+							filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
+						}}
+					/>
+				</div>
 
-      {/* Decorative elements */}
-      <div
-        style={{
-          position: "absolute",
-          top: -100,
-          left: -100,
-          width: 400,
-          height: 400,
-          borderRadius: "50%",
-          background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
-          filter: "blur(80px)",
-          zIndex: 2,
-        }}
-      />
-      <div
-        style={{
-          position: "absolute",
-          bottom: -150,
-          right: -150,
-          width: 500,
-          height: 500,
-          borderRadius: "50%",
-          background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
-          filter: "blur(100px)",
-          zIndex: 2,
-        }}
-      />
+				{/* Text content */}
+				<div
+					style={{
+						display: "flex",
+						flexDirection: "column",
+						justifyContent: "center",
+						gap: 28,
+						maxWidth: 650,
+					}}
+				>
+					<div
+						style={{
+							display: "flex",
+							fontSize: 64,
+							fontWeight: 800,
+							color: "#0f172a",
+							lineHeight: 1.1,
+							letterSpacing: "-0.02em",
+						}}
+					>
+						Download {formattedIconName} icon for free
+					</div>
 
-      {/* Content container - horizontal layout */}
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "center",
-          width: "100%",
-          height: "100%",
-          padding: "60px",
-          gap: "70px",
-          zIndex: 10,
-        }}
-      >
-        {/* Left side - Icon container with enhanced styling */}
-        <div
-          style={{
-            display: "flex",
-            alignItems: "center",
-            justifyContent: "center",
-            width: 320,
-            height: 320,
-            borderRadius: 32,
-            background: "white",
-            boxShadow: "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",
-            overflow: "hidden",
-          }}
-        >
-          {/* Subtle gradient in icon background */}
-          <div
-            style={{
-              position: "absolute",
-              inset: 0,
-              background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
-              zIndex: 0,
-            }}
-          />
+					<div
+						style={{
+							display: "flex",
+							fontSize: 32,
+							fontWeight: 500,
+							color: "#64748b",
+							lineHeight: 1.4,
+							position: "relative",
+							paddingLeft: 16,
+							borderLeft: "4px solid #94a3b8",
+						}}
+					>
+						Amongst {totalIcons} other high-quality dashboard icons
+					</div>
 
-          {/* Icon image */}
-          <img
-            src={iconUrl || "/placeholder.svg"}
-            alt={formattedIconName}
-            width={260}
-            height={260}
-            style={{
-              objectFit: "contain",
-              position: "relative",
-              zIndex: 1,
-              filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
-            }}
-          />
-        </div>
+					<div
+						style={{
+							display: "flex",
+							gap: 12,
+							marginTop: 8,
+						}}
+					>
+						{["SVG", "PNG", "WEBP"].map((format) => (
+							<div
+								key={format}
+								style={{
+									display: "flex",
+									alignItems: "center",
+									justifyContent: "center",
+									backgroundColor: "#f1f5f9",
+									color: "#475569",
+									border: "2px solid #e2e8f0",
+									borderRadius: 12,
+									padding: "8px 16px",
+									fontSize: 18,
+									fontWeight: 600,
+									boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+								}}
+							>
+								{format}
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
 
-        {/* Right side - Text content with improved typography */}
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            gap: 28,
-            maxWidth: 650,
-          }}
-        >
-          {/* Main title with enhanced styling */}
-          <div
-            style={{
-              display: "flex",
-              fontSize: 64,
-              fontWeight: 800,
-              color: "#0f172a",
-              lineHeight: 1.1,
-              letterSpacing: "-0.02em",
-            }}
-          >
-            Download {formattedIconName} icon for free
-          </div>
-
-          {/* Subtitle with improved styling */}
-          <div
-            style={{
-              display: "flex",
-              fontSize: 32,
-              fontWeight: 500,
-              color: "#64748b",
-              lineHeight: 1.4,
-              position: "relative",
-              paddingLeft: 16,
-              borderLeft: "4px solid #94a3b8",
-            }}
-          >
-            Amongst {totalIcons.toLocaleString()} other high-quality dashboard icons
-          </div>
-
-          {/* Format badges */}
-          <div
-            style={{
-              display: "flex",
-              gap: 12,
-              marginTop: 8,
-            }}
-          >
-            {["SVG", "PNG", "WEBP"].map((format) => (
-              <div
-                key={format}
-                style={{
-                  display: "flex",
-                  alignItems: "center",
-                  justifyContent: "center",
-                  backgroundColor: "#f1f5f9",
-                  color: "#475569",
-                  borderRadius: 12,
-                  padding: "8px 16px",
-                  fontSize: 18,
-                  fontWeight: 600,
-                  boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
-                }}
-              >
-                {format}
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Footer with enhanced branding */}
-      <div
-        style={{
-          position: "absolute",
-          bottom: 0,
-          left: 0,
-          right: 0,
-          height: 80,
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          background: "rgba(255, 255, 255, 0.8)",
-          backdropFilter: "blur(10px)",
-          borderTop: "1px solid rgba(0, 0, 0, 0.05)",
-          zIndex: 20,
-        }}
-      >
-        <div
-          style={{
-            display: "flex",
-            fontSize: 24,
-            fontWeight: 600,
-            color: "#334155",
-            alignItems: "center",
-            gap: 10,
-          }}
-        >
-          <div
-            style={{
-              width: 8,
-              height: 8,
-              borderRadius: "50%",
-              backgroundColor: "#3b82f6",
-              marginRight: 4,
-            }}
-          />
-          dashboardicons.com
-        </div>
-      </div>
-    </div>,
+			{/* Footer */}
+			<div
+				style={{
+					position: "absolute",
+					bottom: 0,
+					left: 0,
+					right: 0,
+					height: 80,
+					display: "flex",
+					alignItems: "center",
+					justifyContent: "center",
+					background: "#ffffff",
+					borderTop: "2px solid rgba(0, 0, 0, 0.05)",
+					zIndex: 20,
+				}}
+			>
+				<div
+					style={{
+						display: "flex",
+						fontSize: 24,
+						fontWeight: 600,
+						color: "#334155",
+						alignItems: "center",
+						gap: 10,
+					}}
+				>
+					<div
+						style={{
+							width: 8,
+							height: 8,
+							borderRadius: "50%",
+							backgroundColor: "#3b82f6",
+							marginRight: 4,
+						}}
+					/>
+					dashboardicons.com
+				</div>
+			</div>
+		</div>,
 		{
 			...size,
 		},