mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 15:30:22 +08:00
refactor(web): restructure JSON-LD use
This commit is contained in:
Bjorn Lammers
parent
cedbca1869
commit
ce16ac85d4
@ -1,4 +1,5 @@
|
||||
import { IconDetails } from "@/components/icon-details"
|
||||
import { StructuredData } from "@/components/structured-data"
|
||||
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"
|
||||
@ -118,9 +119,7 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
|
||||
|
||||
return (
|
||||
<>
|
||||
<Script id="image-schema" type="application/ld+json">
|
||||
{JSON.stringify(imageSchema)}
|
||||
</Script>
|
||||
<StructuredData data={imageSchema} id="image-schema" />
|
||||
<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} />
|
||||
</>
|
||||
)
|
||||
|
||||
@ -2,6 +2,7 @@ import { BASE_URL, BROWSE_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_N
|
||||
import { getIconsArray } from "@/lib/api"
|
||||
import type { Metadata } from "next"
|
||||
import { IconSearch } from "./components/icon-search"
|
||||
import { StructuredData } from "@/components/structured-data"
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const icons = await getIconsArray()
|
||||
@ -41,30 +42,23 @@ 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"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify({
|
||||
"@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
|
||||
}
|
||||
}) }}
|
||||
/>
|
||||
<script
|
||||
id="org-schema"
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(ORGANIZATION_SCHEMA) }}
|
||||
/>
|
||||
<StructuredData data={gallerySchema} id="gallery-schema" />
|
||||
<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">
|
||||
|
||||
@ -2,6 +2,7 @@ import { PostHogProvider } from "@/components/PostHogProvider"
|
||||
import { Footer } from "@/components/footer"
|
||||
import { HeaderWrapper } from "@/components/header-wrapper"
|
||||
import { LicenseNotice } from "@/components/license-notice"
|
||||
import { WebsiteStructuredData } from "@/components/structured-data"
|
||||
import { getTotalIcons } from "@/lib/api"
|
||||
import type { Metadata, Viewport } from "next"
|
||||
import { Inter } from "next/font/google"
|
||||
@ -9,7 +10,6 @@ import { Toaster } from "sonner"
|
||||
import "./globals.css"
|
||||
import { DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, getDescription, getWebsiteSchema, websiteFullTitle, websiteTitle } from "@/constants"
|
||||
import { ThemeProvider } from "./theme-provider"
|
||||
import Script from "next/script"
|
||||
|
||||
const inter = Inter({
|
||||
variable: "--font-inter",
|
||||
@ -98,16 +98,12 @@ export default async function RootLayout({ children }: Readonly<{ children: Reac
|
||||
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<head>
|
||||
<Script id="schema-org" type="application/ld+json">
|
||||
{JSON.stringify(websiteSchema)}
|
||||
</Script>
|
||||
<Script id="org-schema" type="application/ld+json">
|
||||
{JSON.stringify(ORGANIZATION_SCHEMA)}
|
||||
</Script>
|
||||
</head>
|
||||
<body className={`${inter.variable} antialiased bg-background flex flex-col min-h-screen`}>
|
||||
<PostHogProvider>
|
||||
<WebsiteStructuredData
|
||||
websiteSchema={websiteSchema}
|
||||
organizationSchema={ORGANIZATION_SCHEMA}
|
||||
/>
|
||||
<ThemeProvider attribute="class" defaultTheme="system" enableSystem disableTransitionOnChange>
|
||||
<HeaderWrapper />
|
||||
<main className="flex-grow">{children}</main>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
import { HeroSection } from "@/components/hero"
|
||||
import { RecentlyAddedIcons } from "@/components/recently-added-icons"
|
||||
import { StructuredData } from "@/components/structured-data"
|
||||
import { BASE_URL, DEFAULT_KEYWORDS, DEFAULT_OG_IMAGE, GITHUB_URL, ORGANIZATION_NAME, ORGANIZATION_SCHEMA, SITE_NAME, SITE_TAGLINE, WEB_URL, REPO_NAME, getHomeDescription, websiteFullTitle, websiteTitle } from "@/constants"
|
||||
import { getRecentlyAddedIcons, getTotalIcons } from "@/lib/api"
|
||||
import type { Metadata } from "next"
|
||||
import Script from "next/script"
|
||||
|
||||
export async function generateMetadata(): Promise<Metadata> {
|
||||
const { totalIcons } = await getTotalIcons()
|
||||
@ -70,12 +70,7 @@ export default async function Home() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<Script id="collection-schema" type="application/ld+json">
|
||||
{JSON.stringify(collectionSchema)}
|
||||
</Script>
|
||||
<Script id="org-schema" type="application/ld+json">
|
||||
{JSON.stringify(ORGANIZATION_SCHEMA)}
|
||||
</Script>
|
||||
<StructuredData data={collectionSchema} id="collection-schema" />
|
||||
<div className="flex flex-col min-h-screen">
|
||||
<HeroSection totalIcons={totalIcons} stars={stars} />
|
||||
<RecentlyAddedIcons icons={recentIcons} />
|
||||
|
||||
33
web/src/components/structured-data.tsx
Normal file
33
web/src/components/structured-data.tsx
Normal file
@ -0,0 +1,33 @@
|
||||
"use client"
|
||||
|
||||
type StructuredDataProps = {
|
||||
data: any
|
||||
id?: string
|
||||
}
|
||||
|
||||
export const StructuredData = ({ data, id }: StructuredDataProps) => {
|
||||
return (
|
||||
<script
|
||||
id={id}
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(data) }}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
type WebsiteStructuredDataProps = {
|
||||
websiteSchema: any
|
||||
organizationSchema: any
|
||||
}
|
||||
|
||||
export const WebsiteStructuredData = ({
|
||||
websiteSchema,
|
||||
organizationSchema
|
||||
}: WebsiteStructuredDataProps) => {
|
||||
return (
|
||||
<>
|
||||
<StructuredData data={websiteSchema} id="website-schema" />
|
||||
<StructuredData data={organizationSchema} id="organization-schema" />
|
||||
</>
|
||||
)
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user