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