mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 07:20:21 +08:00
Add og image generator
This commit is contained in:
Thomas Camlong
parent
f9563ad359
commit
51e1d1df7b
@ -74,10 +74,15 @@
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"tailwindcss": "^4.1.3",
|
||||
"typescript": "^5.8.3"
|
||||
"typescript": "^5.8.3",
|
||||
"wrangler": "^4.12.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.8.0",
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": ["@biomejs/biome", "core-js", "sharp"]
|
||||
"onlyBuiltDependencies": [
|
||||
"@biomejs/biome",
|
||||
"core-js",
|
||||
"sharp"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
813
web/pnpm-lock.yaml
generated
813
web/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
278
web/src/app/icons/[icon]/opengraph-image.tsx
Normal file
278
web/src/app/icons/[icon]/opengraph-image.tsx
Normal file
@ -0,0 +1,278 @@
|
||||
import { BASE_URL } from "@/constants"
|
||||
import { getAllIcons } from "@/lib/api"
|
||||
import { ImageResponse } from "next/og"
|
||||
|
||||
export const dynamic = "force-static"
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const iconsData = await getAllIcons()
|
||||
return Object.keys(iconsData).map((icon) => ({
|
||||
icon,
|
||||
}))
|
||||
}
|
||||
|
||||
export const size = {
|
||||
width: 1200,
|
||||
height: 630,
|
||||
}
|
||||
export default async function Image({ params }: { params: { icon: string } }) {
|
||||
const { icon } = params
|
||||
const iconsData = await getAllIcons()
|
||||
const totalIcons = Object.keys(iconsData).length
|
||||
const index = Object.keys(iconsData).indexOf(icon)
|
||||
let iconUrl = `${BASE_URL}/png/${icon}.png`
|
||||
console.log(`Generating opengraph image for ${icon} (${index + 1} / ${totalIcons}) with url ${iconUrl}`)
|
||||
|
||||
// Format the icon name for display
|
||||
const formattedIconName = icon
|
||||
.split("-")
|
||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||
.join(" ")
|
||||
|
||||
// Get the icon URL
|
||||
// Check if the image exists if the return type of the image is of image type
|
||||
try {
|
||||
const response = await fetch(iconUrl)
|
||||
if (!response.ok) {
|
||||
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
||||
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
||||
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
||||
}
|
||||
|
||||
|
||||
return new ImageResponse(
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
position: "relative",
|
||||
fontFamily: "Inter, system-ui, sans-serif",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Background with gradient */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
background: "linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%)",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Subtle pattern overlay */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
backgroundImage: "radial-gradient(#e2e8f0 1px, transparent 1px)",
|
||||
backgroundSize: "40px 40px",
|
||||
opacity: 0.3,
|
||||
zIndex: 1,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Decorative elements */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: -100,
|
||||
left: -100,
|
||||
width: 400,
|
||||
height: 400,
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
||||
filter: "blur(80px)",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: -150,
|
||||
right: -150,
|
||||
width: 500,
|
||||
height: 500,
|
||||
borderRadius: "50%",
|
||||
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
||||
filter: "blur(100px)",
|
||||
zIndex: 2,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Content container - horizontal layout */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
padding: "60px",
|
||||
gap: "70px",
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
{/* Left side - Icon container with enhanced styling */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: 320,
|
||||
height: 320,
|
||||
borderRadius: 32,
|
||||
background: "white",
|
||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
||||
padding: 30,
|
||||
flexShrink: 0,
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
{/* Subtle gradient in icon background */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
inset: 0,
|
||||
background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
|
||||
zIndex: 0,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* Icon image */}
|
||||
<img
|
||||
src={iconUrl || "/placeholder.svg"}
|
||||
alt={formattedIconName}
|
||||
width={260}
|
||||
height={260}
|
||||
style={{
|
||||
objectFit: "contain",
|
||||
position: "relative",
|
||||
zIndex: 1,
|
||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Right side - Text content with improved typography */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
gap: 28,
|
||||
maxWidth: 650,
|
||||
}}
|
||||
>
|
||||
{/* Main title with enhanced styling */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 64,
|
||||
fontWeight: 800,
|
||||
color: "#0f172a",
|
||||
lineHeight: 1.1,
|
||||
letterSpacing: "-0.02em",
|
||||
}}
|
||||
>
|
||||
Download {formattedIconName} icon for free
|
||||
</div>
|
||||
|
||||
{/* Subtitle with improved styling */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 32,
|
||||
fontWeight: 500,
|
||||
color: "#64748b",
|
||||
lineHeight: 1.4,
|
||||
position: "relative",
|
||||
paddingLeft: 16,
|
||||
borderLeft: "4px solid #94a3b8",
|
||||
}}
|
||||
>
|
||||
Amongst {totalIcons.toLocaleString()} other high-quality dashboard icons
|
||||
</div>
|
||||
|
||||
{/* Format badges */}
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
gap: 12,
|
||||
marginTop: 8,
|
||||
}}
|
||||
>
|
||||
{["SVG", "PNG", "WEBP"].map((format) => (
|
||||
<div
|
||||
key={format}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
backgroundColor: "#f1f5f9",
|
||||
color: "#475569",
|
||||
borderRadius: 12,
|
||||
padding: "8px 16px",
|
||||
fontSize: 18,
|
||||
fontWeight: 600,
|
||||
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
|
||||
}}
|
||||
>
|
||||
{format}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer with enhanced branding */}
|
||||
<div
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 80,
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
background: "rgba(255, 255, 255, 0.8)",
|
||||
backdropFilter: "blur(10px)",
|
||||
borderTop: "1px solid rgba(0, 0, 0, 0.05)",
|
||||
zIndex: 20,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
display: "flex",
|
||||
fontSize: 24,
|
||||
fontWeight: 600,
|
||||
color: "#334155",
|
||||
alignItems: "center",
|
||||
gap: 10,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={{
|
||||
width: 8,
|
||||
height: 8,
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#3b82f6",
|
||||
marginRight: 4,
|
||||
}}
|
||||
/>
|
||||
dashboardicons.com
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
{
|
||||
...size,
|
||||
},
|
||||
)
|
||||
}
|
||||
@ -67,15 +67,6 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
|
||||
description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
|
||||
type: "article",
|
||||
url: pageUrl,
|
||||
images: [
|
||||
{
|
||||
url: iconImageUrl,
|
||||
width: 512,
|
||||
height: 512,
|
||||
alt: `${formattedIconName} Icon`,
|
||||
type: "image/png",
|
||||
},
|
||||
],
|
||||
authors: [authorName, "homarr"],
|
||||
publishedTime: updateDate.toISOString(),
|
||||
modifiedTime: updateDate.toISOString(),
|
||||
|
||||
2
web/wrangler.toml
Normal file
2
web/wrangler.toml
Normal file
@ -0,0 +1,2 @@
|
||||
name = "dashboard-icons"
|
||||
pages_build_output_dir = "./out"
|
||||
Loading…
x
Reference in New Issue
Block a user