revert: revert changes

web/src/app/icons/[icon]/page.tsx

@@ -1,13 +1,22 @@
 import { IconDetails } from "@/components/icon-details"
 import { BASE_URL, WEB_URL } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
+import { formatIconName } from "@/lib/utils"
 import type { Metadata, ResolvingMetadata } from "next"
+import { default as dynamicImport } from "next/dynamic"
 import { notFound } from "next/navigation"
-
 export const dynamicParams = 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,
 	}))
@@ -33,7 +42,6 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 
 	console.debug(`Generated metadata for ${icon} by ${authorName} (${authorData.html_url}) updated at ${updateDate.toLocaleString()}`)
 
-	const iconPreviewImageUrl = `${BASE_URL}/webp/${icon}.webp`
 	const pageUrl = `${WEB_URL}/icons/${icon}`
 	const formattedIconName = icon
 		.split("-")
@@ -61,7 +69,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			"app directory",
 		],
 		icons: {
-			icon: iconPreviewImageUrl,
+			icon: `${BASE_URL}/webp/${icon}.webp`,
 		},
 		abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		openGraph: {
@@ -74,13 +82,11 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			modifiedTime: updateDate.toISOString(),
 			section: "Icons",
 			tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
-			images: [iconPreviewImageUrl],
 		},
 		twitter: {
 			card: "summary_large_image",
 			title: `${formattedIconName} Icon | Dashboard Icons`,
 			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
-			images: [iconPreviewImageUrl],
 		},
 		alternates: {
 			canonical: pageUrl,

web/src/app/icons/opengraph-image.tsx

@@ -10,28 +10,28 @@ export const size = {
 
 // Define a fixed list of representative icons
 const representativeIcons = [
-	"github",
-	"discord",
-	"slack",
-	"docker",
-	"kubernetes",
-	"grafana",
-	"prometheus",
-	"nextcloud",
-	"homeassistant",
+	"homarr",
+	"sonarr",
+	"radarr",
+	"lidarr",
+	"readarr",
+	"prowlarr",
+	"qbittorrent",
+	"home-assistant",
 	"cloudflare",
-	"nginx",
+	"github",
 	"traefik",
 	"portainer",
 	"plex",
 	"jellyfin",
+	"overseerr",
 ]
 
 export default async function Image() {
 	const iconsData = await getAllIcons()
 	const totalIcons = Object.keys(iconsData).length
 	// Round down to the nearest 100
-	const roundedTotalIcons = Math.floor(totalIcons / 100) * 100
+	const roundedTotalIcons = Math.round(totalIcons / 100) * 100
 
 	const iconImages = representativeIcons.map((icon) => ({
 		name: icon

web/src/app/icons/page.tsx

@@ -25,21 +25,11 @@ export async function generateMetadata(): Promise<Metadata> {
 			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 			type: "website",
 			url: `${BASE_URL}/icons`,
-			images: [
-				{
-					url: "/og-image.png",
-					width: 1200,
-					height: 630,
-					alt: "Browse Dashboard Icons Collection",
-					type: "image/png",
-				},
-			],
 		},
 		twitter: {
 			card: "summary_large_image",
 			title: "Browse Icons | Free Dashboard Icons",
 			description: `Search and browse through our collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
-			images: ["/og-image-browse.png"],
 		},
 		alternates: {
 			canonical: `${BASE_URL}/icons`,

web/src/app/layout.tsx

@@ -2,12 +2,12 @@ import { PostHogProvider } from "@/components/PostHogProvider"
 import { Footer } from "@/components/footer"
 import { HeaderWrapper } from "@/components/header-wrapper"
 import { LicenseNotice } from "@/components/license-notice"
+import { BASE_URL, WEB_URL, getDescription, websiteTitle } from "@/constants"
 import { getTotalIcons } from "@/lib/api"
 import type { Metadata, Viewport } from "next"
 import { Inter } from "next/font/google"
 import { Toaster } from "sonner"
 import "./globals.css"
-import { BASE_URL, WEB_URL, getDescription, websiteTitle } from "@/constants"
 import { ThemeProvider } from "./theme-provider"
 
 const inter = Inter({
@@ -82,6 +82,7 @@ export async function generateMetadata(): Promise<Metadata> {
 }
 
 export default function RootLayout({ children }: Readonly<{ children: React.ReactNode }>) {
+
 	return (
 		<html lang="en" suppressHydrationWarning>
 			<body className={`${inter.variable} antialiased bg-background flex flex-col min-h-screen`}>