mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-06-28 23:40:21 +08:00
update opengraph image generator
This commit is contained in:
Thomas Camlong
parent
874cf07c39
commit
60bd2cce96
@ -25,14 +25,14 @@ export default async function Image({ params }: { params: { icon: string } }) {
|
|||||||
|
|
||||||
// Format the icon name for display
|
// Format the icon name for display
|
||||||
const formattedIconName = icon
|
const formattedIconName = icon
|
||||||
.split("-")
|
.split("-")
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
||||||
.join(" ")
|
.join(" ")
|
||||||
|
|
||||||
// Get the icon URL
|
// Get the icon URL
|
||||||
// Check if the image exists if the return type of the image is of image type
|
// Check if the image exists if the return type of the image is of image type
|
||||||
try {
|
try {
|
||||||
const response = await fetch(iconUrl)
|
const response = await fetch(iconUrl)
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
||||||
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
||||||
@ -41,236 +41,211 @@ export default async function Image({ params }: { params: { icon: string } }) {
|
|||||||
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
console.error(`Icon ${icon} was not found at ${iconUrl}`)
|
||||||
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
iconUrl = `https://placehold.co/600x400?text=${formattedIconName}`
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
position: "relative",
|
position: "relative",
|
||||||
fontFamily: "Inter, system-ui, sans-serif",
|
fontFamily: "Inter, system-ui, sans-serif",
|
||||||
overflow: "hidden",
|
overflow: "hidden",
|
||||||
}}
|
backgroundColor: "white",
|
||||||
>
|
backgroundImage:
|
||||||
{/* Background with gradient */}
|
"radial-gradient(circle at 25px 25px, lightgray 2%, transparent 0%), radial-gradient(circle at 75px 75px, lightgray 2%, transparent 0%)",
|
||||||
<div
|
backgroundSize: "100px 100px",
|
||||||
style={{
|
}}
|
||||||
position: "absolute",
|
>
|
||||||
inset: 0,
|
{/* Background blur blobs */}
|
||||||
background: "linear-gradient(145deg, #f8fafc 0%, #f1f5f9 100%)",
|
<div
|
||||||
zIndex: 0,
|
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,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Subtle pattern overlay */}
|
{/* Main content layout */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
display: "flex",
|
||||||
inset: 0,
|
flexDirection: "row",
|
||||||
backgroundImage: "radial-gradient(#e2e8f0 1px, transparent 1px)",
|
alignItems: "center",
|
||||||
backgroundSize: "40px 40px",
|
justifyContent: "center",
|
||||||
opacity: 0.3,
|
width: "100%",
|
||||||
zIndex: 1,
|
height: "100%",
|
||||||
}}
|
padding: "60px",
|
||||||
/>
|
gap: "70px",
|
||||||
|
zIndex: 10,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{/* Icon container */}
|
||||||
|
<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",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
position: "absolute",
|
||||||
|
inset: 0,
|
||||||
|
background: "linear-gradient(145deg, #ffffff 0%, #f8fafc 100%)",
|
||||||
|
zIndex: 0,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<img
|
||||||
|
src={iconUrl}
|
||||||
|
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>
|
||||||
|
|
||||||
{/* Decorative elements */}
|
{/* Text content */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
position: "absolute",
|
display: "flex",
|
||||||
top: -100,
|
flexDirection: "column",
|
||||||
left: -100,
|
justifyContent: "center",
|
||||||
width: 400,
|
gap: 28,
|
||||||
height: 400,
|
maxWidth: 650,
|
||||||
borderRadius: "50%",
|
}}
|
||||||
background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
>
|
||||||
filter: "blur(80px)",
|
<div
|
||||||
zIndex: 2,
|
style={{
|
||||||
}}
|
display: "flex",
|
||||||
/>
|
fontSize: 64,
|
||||||
<div
|
fontWeight: 800,
|
||||||
style={{
|
color: "#0f172a",
|
||||||
position: "absolute",
|
lineHeight: 1.1,
|
||||||
bottom: -150,
|
letterSpacing: "-0.02em",
|
||||||
right: -150,
|
}}
|
||||||
width: 500,
|
>
|
||||||
height: 500,
|
Download {formattedIconName} icon for free
|
||||||
borderRadius: "50%",
|
</div>
|
||||||
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
|
||||||
<div
|
style={{
|
||||||
style={{
|
display: "flex",
|
||||||
display: "flex",
|
fontSize: 32,
|
||||||
flexDirection: "row",
|
fontWeight: 500,
|
||||||
alignItems: "center",
|
color: "#64748b",
|
||||||
justifyContent: "center",
|
lineHeight: 1.4,
|
||||||
width: "100%",
|
position: "relative",
|
||||||
height: "100%",
|
paddingLeft: 16,
|
||||||
padding: "60px",
|
borderLeft: "4px solid #94a3b8",
|
||||||
gap: "70px",
|
}}
|
||||||
zIndex: 10,
|
>
|
||||||
}}
|
Amongst {totalIcons} other high-quality dashboard icons
|
||||||
>
|
</div>
|
||||||
{/* 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 */}
|
<div
|
||||||
<img
|
style={{
|
||||||
src={iconUrl || "/placeholder.svg"}
|
display: "flex",
|
||||||
alt={formattedIconName}
|
gap: 12,
|
||||||
width={260}
|
marginTop: 8,
|
||||||
height={260}
|
}}
|
||||||
style={{
|
>
|
||||||
objectFit: "contain",
|
{["SVG", "PNG", "WEBP"].map((format) => (
|
||||||
position: "relative",
|
<div
|
||||||
zIndex: 1,
|
key={format}
|
||||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
style={{
|
||||||
}}
|
display: "flex",
|
||||||
/>
|
alignItems: "center",
|
||||||
</div>
|
justifyContent: "center",
|
||||||
|
backgroundColor: "#f1f5f9",
|
||||||
|
color: "#475569",
|
||||||
|
border: "2px solid #e2e8f0",
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: "8px 16px",
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: 600,
|
||||||
|
boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{format}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Right side - Text content with improved typography */}
|
{/* Footer */}
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
display: "flex",
|
position: "absolute",
|
||||||
flexDirection: "column",
|
bottom: 0,
|
||||||
justifyContent: "center",
|
left: 0,
|
||||||
gap: 28,
|
right: 0,
|
||||||
maxWidth: 650,
|
height: 80,
|
||||||
}}
|
display: "flex",
|
||||||
>
|
alignItems: "center",
|
||||||
{/* Main title with enhanced styling */}
|
justifyContent: "center",
|
||||||
<div
|
background: "#ffffff",
|
||||||
style={{
|
borderTop: "2px solid rgba(0, 0, 0, 0.05)",
|
||||||
display: "flex",
|
zIndex: 20,
|
||||||
fontSize: 64,
|
}}
|
||||||
fontWeight: 800,
|
>
|
||||||
color: "#0f172a",
|
<div
|
||||||
lineHeight: 1.1,
|
style={{
|
||||||
letterSpacing: "-0.02em",
|
display: "flex",
|
||||||
}}
|
fontSize: 24,
|
||||||
>
|
fontWeight: 600,
|
||||||
Download {formattedIconName} icon for free
|
color: "#334155",
|
||||||
</div>
|
alignItems: "center",
|
||||||
|
gap: 10,
|
||||||
{/* Subtitle with improved styling */}
|
}}
|
||||||
<div
|
>
|
||||||
style={{
|
<div
|
||||||
display: "flex",
|
style={{
|
||||||
fontSize: 32,
|
width: 8,
|
||||||
fontWeight: 500,
|
height: 8,
|
||||||
color: "#64748b",
|
borderRadius: "50%",
|
||||||
lineHeight: 1.4,
|
backgroundColor: "#3b82f6",
|
||||||
position: "relative",
|
marginRight: 4,
|
||||||
paddingLeft: 16,
|
}}
|
||||||
borderLeft: "4px solid #94a3b8",
|
/>
|
||||||
}}
|
dashboardicons.com
|
||||||
>
|
</div>
|
||||||
Amongst {totalIcons.toLocaleString()} other high-quality dashboard icons
|
</div>
|
||||||
</div>
|
</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,
|
...size,
|
||||||
},
|
},
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user