From ff0430e5c221507717be5ce3ea233512f34df960 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Fri, 7 Nov 2025 08:11:22 +0100
Subject: [PATCH] refactor(pages): update page components and metadata

- Update home page, submit page, and icon detail pages
- Improve opengraph image generation for icons
- Enhance page metadata and SEO
---
 web/src/app/icons/[icon]/opengraph-image.tsx | 27 ++++++++++++++++++--
 web/src/app/icons/[icon]/page.tsx            |  1 +
 web/src/app/page.tsx                         |  4 ++-
 web/src/app/submit/page.tsx                  |  5 +---
 4 files changed, 30 insertions(+), 7 deletions(-)

diff --git a/web/src/app/icons/[icon]/opengraph-image.tsx b/web/src/app/icons/[icon]/opengraph-image.tsx
index 67157dec..330b09e3 100644
--- a/web/src/app/icons/[icon]/opengraph-image.tsx
+++ b/web/src/app/icons/[icon]/opengraph-image.tsx
@@ -24,8 +24,31 @@ export const size = {
 	width: 1200,
 	height: 630,
 }
-export default async function Image({ params }: { params: { icon: string } }) {
-	const { icon } = params
+export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
+	const { icon } = await params
+	
+	if (!icon) {
+		console.error(`[Opengraph Image] Icon not found for ${icon}`)
+		return new ImageResponse(
+			<div
+				style={{
+					display: "flex",
+					width: "100%",
+					height: "100%",
+					alignItems: "center",
+					justifyContent: "center",
+					backgroundColor: "white",
+					fontSize: 48,
+					fontWeight: 600,
+					color: "#64748b",
+				}}
+			>
+				Icon not found
+			</div>,
+			{ ...size },
+		)
+	}
+	
 	const iconsData = await getAllIcons()
 	const totalIcons = Object.keys(iconsData).length
 	const index = Object.keys(iconsData).indexOf(icon)
diff --git a/web/src/app/icons/[icon]/page.tsx b/web/src/app/icons/[icon]/page.tsx
index 6f5884fc..f436e112 100644
--- a/web/src/app/icons/[icon]/page.tsx
+++ b/web/src/app/icons/[icon]/page.tsx
@@ -3,6 +3,7 @@ import { notFound } from "next/navigation"
 import { IconDetails } from "@/components/icon-details"
 import { BASE_URL, WEB_URL } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
+import { AuthorData } from "@/types"
 export const dynamicParams = false
 
 export async function generateStaticParams() {
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 93afb8fa..3b57bf5f 100644
--- a/web/src/app/page.tsx
+++ b/web/src/app/page.tsx
@@ -4,7 +4,9 @@ import { REPO_NAME } from "@/constants"
 import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
 
 async function getGitHubStars() {
-	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`)
+	const response = await fetch(`https://api.github.com/repos/${REPO_NAME}`, {
+		next: { revalidate: 3600 },
+	})
 	const data = await response.json()
 	console.log(`GitHub stars: ${data.stargazers_count}`)
 	return data.stargazers_count
diff --git a/web/src/app/submit/page.tsx b/web/src/app/submit/page.tsx
index 4a6f231d..7f564d77 100644
--- a/web/src/app/submit/page.tsx
+++ b/web/src/app/submit/page.tsx
@@ -44,9 +44,7 @@ export default function SubmitPage() {
 						<Card>
 							<CardHeader className="text-center space-y-4">
 								<CardTitle className="text-3xl">Submit an Icon</CardTitle>
-								<CardDescription className="text-base">
-									Share your icons with the community and help expand our collection
-								</CardDescription>
+								<CardDescription className="text-base">Share your icons with the community and help expand our collection</CardDescription>
 							</CardHeader>
 							<CardContent className="space-y-6">
 								<div className="bg-muted/50 p-6 rounded-lg space-y-4">
@@ -87,4 +85,3 @@ export default function SubmitPage() {
 		</div>
 	)
 }
-