feat(web): add community icons browse page

Add new /community page to browse and search community-submitted icons. Implements server-side data fetching with 10-minute revalidation, SEO optimization with dynamic metadata generation, and integration with CommunityIconSearch component for rich filtering and search capabilities
This commit is contained in:
Thomas Camlong
2025-10-01 18:23:22 +02:00
parent 07f196f12f
commit 0a4a4a78f4

View File

@@ -0,0 +1,56 @@
import type { Metadata } from "next"
import { CommunityIconSearch } from "@/components/community-icon-search"
import { BASE_URL } from "@/constants"
import { getCommunitySubmissions } from "@/lib/community"
export async function generateMetadata(): Promise<Metadata> {
const icons = await getCommunitySubmissions()
const totalIcons = icons.length
return {
title: "Browse Community Icons | Dashboard Icons",
description: `Search and browse through ${totalIcons} community-submitted icons awaiting review and addition to the Dashboard Icons collection.`,
keywords: [
"community icons",
"browse community icons",
"icon submissions",
"community contributions",
"pending icons",
"approved icons",
"dashboard icons community",
"user submitted icons",
],
openGraph: {
title: "Browse Community Icons | Dashboard Icons",
description: `Search and browse through ${totalIcons} community-submitted icons awaiting review and addition to the Dashboard Icons collection.`,
type: "website",
url: `${BASE_URL}/community`,
},
twitter: {
card: "summary_large_image",
title: "Browse Community Icons | Dashboard Icons",
description: `Search and browse through ${totalIcons} community-submitted icons awaiting review and addition to the Dashboard Icons collection.`,
},
alternates: {
canonical: `${BASE_URL}/community`,
},
}
}
export const revalidate = 600
export default async function CommunityPage() {
const icons = await getCommunitySubmissions()
return (
<div className="isolate overflow-hidden p-2 mx-auto max-w-7xl">
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
<div>
<h1 className="text-3xl font-bold">Browse community icons</h1>
<p className="text-muted-foreground mb-1">Search through our collection of {icons.length} community-submitted icons.</p>
</div>
</div>
<CommunityIconSearch icons={icons as any} />
</div>
)
}