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
web/src/app/icons/[icon]/page.tsx
+42 -20
View File
@@ -1,7 +1,8 @@
import { IconDetails } from "@/components/icon-details"
import { BASE_URL, WEB_URL } from "@/constants"
import { BASE_URL, GITHUB_URL, ICON_DETAIL_KEYWORDS, SITE_NAME, SITE_TAGLINE, TITLE_SEPARATOR, WEB_URL, getIconDescription, getIconSchema } from "@/constants"
import { getAllIcons, getAuthorData } from "@/lib/api"
import type { Metadata, ResolvingMetadata } from "next"
import Script from "next/script"
import { notFound } from "next/navigation"
export const dynamicParams = false
@@ -40,43 +41,39 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")
const title = `${formattedIconName} Icon ${TITLE_SEPARATOR} ${SITE_NAME}`
const fullTitle = `${formattedIconName} Icon ${TITLE_SEPARATOR} ${SITE_NAME} ${TITLE_SEPARATOR} ${SITE_TAGLINE}`
const description = getIconDescription(formattedIconName, totalIcons)
return {
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`,
title,
description,
assets: [iconImageUrl],
category: "icons",
keywords: [
`${formattedIconName} icon`,
"dashboard icon",
"service icon",
"application icon",
"tool icon",
"web dashboard",
"app directory",
],
category: "Icons",
keywords: ICON_DETAIL_KEYWORDS(formattedIconName),
icons: {
icon: iconImageUrl,
},
abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`,
abstract: description,
robots: {
index: true,
follow: true,
},
openGraph: {
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`,
title: fullTitle,
description,
type: "article",
url: pageUrl,
authors: [authorName],
publishedTime: updateDate.toISOString(),
modifiedTime: updateDate.toISOString(),
section: "Icons",
tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
tags: [formattedIconName, ...ICON_DETAIL_KEYWORDS(formattedIconName)],
},
twitter: {
card: "summary_large_image",
title: `${formattedIconName} Icon | Dashboard Icons`,
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats. Available for free in our collection of ${totalIcons} icons for dashboards and applications.`,
title: fullTitle,
description,
images: [iconImageUrl],
},
alternates: {
@@ -87,6 +84,9 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
webp: `${BASE_URL}/webp/${icon}.webp`,
},
},
other: {
"revisit-after": "7 days",
}
}
}
@@ -100,6 +100,28 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
}
const authorData = await getAuthorData(originalIconData.update.author.id)
const updateDate = new Date(originalIconData.update.timestamp)
const authorName = authorData.name || authorData.login
const formattedIconName = icon
.split("-")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")
return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
const imageSchema = getIconSchema(
formattedIconName,
icon,
authorName,
authorData.html_url,
updateDate.toISOString(),
Object.keys(iconsData).length
)
return (
<>
<Script id="image-schema" type="application/ld+json">
{JSON.stringify(imageSchema)}
</Script>
<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
</>
)
}