gilles/dashboard-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): improve site metadata structure

Browse Source
This commit is contained in:
Bjorn Lammers
2025-04-23 01:07:45 +02:00
parent df3c53818a
commit b4c4fe2634
5 changed files with 293 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
web/src/app/icons/page.tsx
View File

@@ -1,49 +1,39 @@
import { BASE_URL } from "@/constants"
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: "Browse Icons | Free Dashboard Icons",
description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`,
keywords: [
"browse icons",
"dashboard icons",
"icon search",
"service icons",
"application icons",
"tool icons",
"web dashboard",
"app directory",
],
title,
description,
keywords: BROWSE_KEYWORDS,
openGraph: {
title: "Browse Icons | Free Dashboard Icons",
description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`,
title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
description,
type: "website",
url: `${BASE_URL}/icons`,
images: [
{
url: "/og-image.png",
width: 1200,
height: 630,
alt: "Browse Dashboard Icons Collection",
type: "image/png",
},
],
url: `${WEB_URL}/icons`,
images: [DEFAULT_OG_IMAGE],
},
twitter: {
card: "summary_large_image",
title: "Browse Icons | Free Dashboard Icons",
description: `Browse our collection of ${totalIcons} icons for dashboards and applications. Available in SVG, PNG, and WEBP formats.`,
images: ["/og-image-browse.png"],
title: `Browse Icons ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`,
description,
images: [DEFAULT_OG_IMAGE.url],
},
alternates: {
canonical: `${BASE_URL}/icons`,
canonical: `${WEB_URL}/icons`,
},
other: {
"revisit-after": "3 days",
}
}
}
@@ -51,20 +41,43 @@ export const dynamic = "force-static"
export default async function IconsPage() {
const icons = await getIconsArray()
return (
<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.</p>
</div>
</div>
<IconSearch icons={icons} />
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>
</div>
</>
)
}