opensource/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-06-28 23:40:21 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

update opengraph image generator

Browse Source
This commit is contained in:
Thomas Camlong 2025-04-18 15:24:05 +02:00
parent 874cf07c39
commit 60bd2cce96
No known key found for this signature in database
GPG Key ID: A678F374F428457B
1 changed files with 203 additions and 228 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
web/src/app/icons/[icon]/opengraph-image.tsx
View File

@ -42,7 +42,6 @@ export default async function Image({ params }: { params: { icon: string } }) {
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}` iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
} }
return new ImageResponse( return new ImageResponse(
<div <div
style={{ style={{
@ -52,31 +51,13 @@ export default async function Image({ params }: { params: { icon: string } }) {
position: "relative", position: "relative",
fontFamily: "Inter, system-ui, sans-serif", fontFamily: "Inter, system-ui, sans-serif",
overflow: "hidden", overflow: "hidden",
backgroundColor: "white",
backgroundImage:
"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
backgroundSize: "100px 100px",
}} }}
> >
{/* Background with gradient */} {/* Background blur blobs */}
<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 <div
style={{ style={{
position: "absolute", position: "absolute",
@ -104,7 +85,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
}} }}
/> />
{/* Content container - horizontal layout */} {/* Main content layout */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -118,7 +99,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
zIndex: 10, zIndex: 10,
}} }}
> >
{/* Left side - Icon container with enhanced styling */} {/* Icon container */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -135,7 +116,6 @@ export default async function Image({ params }: { params: { icon: string } }) {
overflow: "hidden", overflow: "hidden",
}} }}
> >
{/* Subtle gradient in icon background */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@ -144,10 +124,8 @@ export default async function Image({ params }: { params: { icon: string } }) {
zIndex: 0, zIndex: 0,
}} }}
/> />
{/* Icon image */}
<img <img
src={iconUrl || "/placeholder.svg"} src={iconUrl}
alt={formattedIconName} alt={formattedIconName}
width={260} width={260}
height={260} height={260}
@ -160,7 +138,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
/> />
</div> </div>
{/* Right side - Text content with improved typography */} {/* Text content */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -170,7 +148,6 @@ export default async function Image({ params }: { params: { icon: string } }) {
maxWidth: 650, maxWidth: 650,
}} }}
> >
{/* Main title with enhanced styling */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -184,7 +161,6 @@ export default async function Image({ params }: { params: { icon: string } }) {
Download {formattedIconName} icon for free Download {formattedIconName} icon for free
</div> </div>
{/* Subtitle with improved styling */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -197,10 +173,9 @@ export default async function Image({ params }: { params: { icon: string } }) {
borderLeft: "4px solid #94a3b8", borderLeft: "4px solid #94a3b8",
}} }}
> >
Amongst {totalIcons.toLocaleString()} other high-quality dashboard icons Amongst {totalIcons} other high-quality dashboard icons
</div> </div>
{/* Format badges */}
<div <div
style={{ style={{
display: "flex", display: "flex",
@ -217,6 +192,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
justifyContent: "center", justifyContent: "center",
backgroundColor: "#f1f5f9", backgroundColor: "#f1f5f9",
color: "#475569", color: "#475569",
border: "2px solid #e2e8f0",
borderRadius: 12, borderRadius: 12,
padding: "8px 16px", padding: "8px 16px",
fontSize: 18, fontSize: 18,
@ -231,7 +207,7 @@ export default async function Image({ params }: { params: { icon: string } }) {
</div> </div>
</div> </div>
{/* Footer with enhanced branding */} {/* Footer */}
<div <div
style={{ style={{
position: "absolute", position: "absolute",
@ -242,9 +218,8 @@ export default async function Image({ params }: { params: { icon: string } }) {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
background: "rgba(255, 255, 255, 0.8)", background: "#ffffff",
backdropFilter: "blur(10px)", borderTop: "2px solid rgba(0, 0, 0, 0.05)",
borderTop: "1px solid rgba(0, 0, 0, 0.05)",
zIndex: 20, zIndex: 20,
}} }}
> >