84 lines
2.4 KiB
TypeScript
84 lines
2.4 KiB
TypeScript
import { BASE_URL, BROWSE_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, TITLE_SEPARATOR, WEB_URL, getBrowseDescription } from "@/constants"
|
|
import { getIconsArray } from "@/lib/api"
|
|
import type { Metadata } from "next"
|
|
import { IconSearch } from "./components/icon-search"
|
|
import Script from "next/script"
|
|
|
|
export async function generateMetadata(): Promise<Metadata> {
|
|
const icons = await getIconsArray()
|
|
const totalIcons = icons.length
|
|
|
|
const title = `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME}`
|
|
const description = getBrowseDescription(totalIcons)
|
|
|
|
return {
|
|
title,
|
|
description,
|
|
keywords: BROWSE_KEYWORDS,
|
|
openGraph: {
|
|
title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
|
|
description,
|
|
type: "website",
|
|
url: `${WEB_URL}/icons`,
|
|
images: [DEFAULT_OG_IMAGE],
|
|
},
|
|
twitter: {
|
|
card: "summary_large_image",
|
|
title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
|
|
description,
|
|
images: [DEFAULT_OG_IMAGE.url],
|
|
},
|
|
alternates: {
|
|
canonical: `${WEB_URL}/icons`,
|
|
},
|
|
other: {
|
|
"revisit-after": "3 days",
|
|
}
|
|
}
|
|
}
|
|
|
|
export const dynamic = "force-static"
|
|
|
|
export default async function IconsPage() {
|
|
const icons = await getIconsArray()
|
|
|
|
const gallerySchema = {
|
|
"@context": "https://schema.org",
|
|
"@type": "ImageGallery",
|
|
"name": `${SITE_NAME} - Browse ${icons.length} Icons - ${SITE_TAGLINE}`,
|
|
"description": getBrowseDescription(icons.length),
|
|
"url": `${WEB_URL}/icons`,
|
|
"numberOfItems": icons.length,
|
|
"creator": {
|
|
"@type": "Organization",
|
|
"name": ORGANIZATION_NAME,
|
|
"url": GITHUB_URL
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Script id="gallery-schema" type="application/ld+json">
|
|
{JSON.stringify(gallerySchema)}
|
|
</Script>
|
|
<Script id="org-schema" type="application/ld+json">
|
|
{JSON.stringify(ORGANIZATION_SCHEMA)}
|
|
</Script>
|
|
<div className="isolate overflow-hidden">
|
|
<div className="py-8">
|
|
<div className="space-y-4 mb-8 mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className="text-3xl font-bold">Icons</h1>
|
|
<p className="text-muted-foreground">Search our collection of {icons.length} icons - {SITE_TAGLINE}.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<IconSearch icons={icons} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|