mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-19 18:11:14 +01:00
chore: Try fixing compilation for the nth time
This commit is contained in:
Thomas Camlong
@@ -13,8 +13,7 @@
|
|||||||
"ci": "biome check --write",
|
"ci": "biome check --write",
|
||||||
"backend:start": "cd backend && ./pocketbase serve",
|
"backend:start": "cd backend && ./pocketbase serve",
|
||||||
"backend:download": "cd backend && curl -L -o pocketbase.zip https://github.com/pocketbase/pocketbase/releases/download/v0.30.0/pocketbase_0.30.0_darwin_arm64.zip && unzip pocketbase.zip && rm pocketbase.zip && rm CHANGELOG.md && rm LICENSE.md",
|
"backend:download": "cd backend && curl -L -o pocketbase.zip https://github.com/pocketbase/pocketbase/releases/download/v0.30.0/pocketbase_0.30.0_darwin_arm64.zip && unzip pocketbase.zip && rm pocketbase.zip && rm CHANGELOG.md && rm LICENSE.md",
|
||||||
"seed": "bun run seed-db.ts",
|
"seed": "bun run seed-db.ts"
|
||||||
"benchmark:og": "bun run scripts/benchmark-og-images.tsx"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@hookform/resolvers": "^5.2.1",
|
"@hookform/resolvers": "^5.2.1",
|
||||||
|
|||||||
@@ -1,419 +0,0 @@
|
|||||||
import { readFile } from "node:fs/promises";
|
|
||||||
import { join } from "node:path";
|
|
||||||
import { ImageResponse } from "next/og";
|
|
||||||
import React from "react";
|
|
||||||
import { METADATA_URL } from "../src/constants";
|
|
||||||
import type { IconFile } from "../src/types/icons";
|
|
||||||
|
|
||||||
// Standalone cached functions for benchmarking (no Next.js dependencies)
|
|
||||||
let iconsDataCache: IconFile | null = null;
|
|
||||||
const iconFileCache = new Map<string, Buffer | null>();
|
|
||||||
let preloadDone = false;
|
|
||||||
|
|
||||||
async function getAllIconsStandalone(): Promise<IconFile> {
|
|
||||||
if (iconsDataCache) {
|
|
||||||
return iconsDataCache;
|
|
||||||
}
|
|
||||||
const response = await fetch(METADATA_URL);
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error(`Failed to fetch icons: ${response.statusText}`);
|
|
||||||
}
|
|
||||||
iconsDataCache = (await response.json()) as IconFile;
|
|
||||||
return iconsDataCache;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function preloadAllIconsStandalone(): Promise<void> {
|
|
||||||
if (preloadDone) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const startTime = Date.now();
|
|
||||||
const iconsData = await getAllIconsStandalone();
|
|
||||||
const iconNames = Object.keys(iconsData);
|
|
||||||
const pngDir = join(process.cwd(), `../png`);
|
|
||||||
|
|
||||||
console.log(`[Preload] Loading ${iconNames.length} icons into memory...`);
|
|
||||||
|
|
||||||
const loadPromises = iconNames.map(async (iconName) => {
|
|
||||||
if (iconFileCache.has(iconName)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const iconPath = join(pngDir, `${iconName}.png`);
|
|
||||||
const buffer = await readFile(iconPath);
|
|
||||||
iconFileCache.set(iconName, buffer);
|
|
||||||
} catch (_error) {
|
|
||||||
iconFileCache.set(iconName, null);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
await Promise.all(loadPromises);
|
|
||||||
const duration = Date.now() - startTime;
|
|
||||||
const loadedCount = Array.from(iconFileCache.values()).filter(
|
|
||||||
(v) => v !== null,
|
|
||||||
).length;
|
|
||||||
console.log(
|
|
||||||
`[Preload] Loaded ${loadedCount}/${iconNames.length} icons in ${duration}ms (${(loadedCount / duration).toFixed(2)} icons/ms)\n`,
|
|
||||||
);
|
|
||||||
preloadDone = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function readIconFileStandalone(
|
|
||||||
iconName: string,
|
|
||||||
): Promise<Buffer | null> {
|
|
||||||
if (iconFileCache.has(iconName)) {
|
|
||||||
return iconFileCache.get(iconName)!;
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const iconPath = join(process.cwd(), `../png/${iconName}.png`);
|
|
||||||
const buffer = await readFile(iconPath);
|
|
||||||
iconFileCache.set(iconName, buffer);
|
|
||||||
return buffer;
|
|
||||||
} catch (_error) {
|
|
||||||
iconFileCache.set(iconName, null);
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const size = {
|
|
||||||
width: 1200,
|
|
||||||
height: 630,
|
|
||||||
};
|
|
||||||
|
|
||||||
async function generateOGImage(
|
|
||||||
icon: string,
|
|
||||||
iconsData: Record<string, unknown>,
|
|
||||||
totalIcons: number,
|
|
||||||
index: number,
|
|
||||||
profileTimings: Map<string, number[]>,
|
|
||||||
) {
|
|
||||||
const stepTimings: Record<string, number> = {};
|
|
||||||
let stepStart: number;
|
|
||||||
|
|
||||||
stepStart = Date.now();
|
|
||||||
const formattedIconName = icon
|
|
||||||
.split("-")
|
|
||||||
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
|
|
||||||
.join(" ");
|
|
||||||
stepTimings.formatName = Date.now() - stepStart;
|
|
||||||
|
|
||||||
stepStart = Date.now();
|
|
||||||
const iconData = await readIconFileStandalone(icon);
|
|
||||||
stepTimings.readFile = Date.now() - stepStart;
|
|
||||||
|
|
||||||
stepStart = Date.now();
|
|
||||||
const iconUrl = iconData
|
|
||||||
? `data:image/png;base64,${iconData.toString("base64")}`
|
|
||||||
: null;
|
|
||||||
stepTimings.base64 = Date.now() - stepStart;
|
|
||||||
|
|
||||||
stepStart = Date.now();
|
|
||||||
const imageResponse = await new ImageResponse(
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
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",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "row",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: "100%",
|
|
||||||
height: "100%",
|
|
||||||
padding: "60px",
|
|
||||||
gap: "70px",
|
|
||||||
zIndex: 10,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<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,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
{iconUrl ? (
|
|
||||||
<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
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 260,
|
|
||||||
height: 260,
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 1,
|
|
||||||
fontSize: 48,
|
|
||||||
fontWeight: 700,
|
|
||||||
color: "#94a3b8",
|
|
||||||
textAlign: "center",
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formattedIconName}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
flexDirection: "column",
|
|
||||||
justifyContent: "center",
|
|
||||||
gap: 28,
|
|
||||||
maxWidth: 650,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
fontSize: 64,
|
|
||||||
fontWeight: 800,
|
|
||||||
color: "#0f172a",
|
|
||||||
lineHeight: 1.1,
|
|
||||||
letterSpacing: "-0.02em",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Download {formattedIconName} icon for free
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
fontSize: 32,
|
|
||||||
fontWeight: 500,
|
|
||||||
color: "#64748b",
|
|
||||||
lineHeight: 1.4,
|
|
||||||
position: "relative",
|
|
||||||
paddingLeft: 16,
|
|
||||||
borderLeft: "4px solid #94a3b8",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Amongst {totalIcons} other high-quality dashboard icons
|
|
||||||
</div>
|
|
||||||
<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",
|
|
||||||
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>
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
position: "absolute",
|
|
||||||
bottom: 0,
|
|
||||||
left: 0,
|
|
||||||
right: 0,
|
|
||||||
height: 80,
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
background: "#ffffff",
|
|
||||||
borderTop: "2px 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,
|
|
||||||
},
|
|
||||||
);
|
|
||||||
stepTimings.imageResponse = Date.now() - stepStart;
|
|
||||||
|
|
||||||
for (const [step, timing] of Object.entries(stepTimings)) {
|
|
||||||
if (!profileTimings.has(step)) {
|
|
||||||
profileTimings.set(step, []);
|
|
||||||
}
|
|
||||||
profileTimings.get(step)!.push(timing);
|
|
||||||
}
|
|
||||||
|
|
||||||
return imageResponse;
|
|
||||||
}
|
|
||||||
|
|
||||||
async function benchmark() {
|
|
||||||
console.log("Starting OG image generation benchmark...\n");
|
|
||||||
|
|
||||||
const startTime = Date.now();
|
|
||||||
|
|
||||||
console.log("Fetching icons data...");
|
|
||||||
const iconsData = await getAllIconsStandalone();
|
|
||||||
const iconNames = Object.keys(iconsData);
|
|
||||||
const totalIcons = iconNames.length;
|
|
||||||
const testIcons = iconNames.slice(0, 100);
|
|
||||||
|
|
||||||
await preloadAllIconsStandalone();
|
|
||||||
|
|
||||||
console.log(`Testing with ${testIcons.length} icons\n`);
|
|
||||||
|
|
||||||
const times: number[] = [];
|
|
||||||
const profileTimings = new Map<string, number[]>();
|
|
||||||
|
|
||||||
for (let i = 0; i < testIcons.length; i++) {
|
|
||||||
const icon = testIcons[i];
|
|
||||||
const iconStartTime = Date.now();
|
|
||||||
|
|
||||||
try {
|
|
||||||
await generateOGImage(icon, iconsData, totalIcons, i, profileTimings);
|
|
||||||
const iconEndTime = Date.now();
|
|
||||||
const duration = iconEndTime - iconStartTime;
|
|
||||||
times.push(duration);
|
|
||||||
|
|
||||||
if ((i + 1) % 10 === 0) {
|
|
||||||
const avgTime = times.slice(-10).reduce((a, b) => a + b, 0) / 10;
|
|
||||||
console.log(
|
|
||||||
`Generated ${i + 1}/${testIcons.length} images (avg: ${avgTime.toFixed(2)}ms per image)`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error(`Failed to generate image for ${icon}:`, error);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const endTime = Date.now();
|
|
||||||
const totalDuration = endTime - startTime;
|
|
||||||
const avgTime = times.reduce((a, b) => a + b, 0) / times.length;
|
|
||||||
const minTime = Math.min(...times);
|
|
||||||
const maxTime = Math.max(...times);
|
|
||||||
|
|
||||||
console.log("\n" + "=".repeat(50));
|
|
||||||
console.log("Benchmark Results");
|
|
||||||
console.log("=".repeat(50));
|
|
||||||
console.log(`Total images generated: ${testIcons.length}`);
|
|
||||||
console.log(`Total time: ${(totalDuration / 1000).toFixed(2)}s`);
|
|
||||||
console.log(`Average time per image: ${avgTime.toFixed(2)}ms`);
|
|
||||||
console.log(`Min time: ${minTime.toFixed(2)}ms`);
|
|
||||||
console.log(`Max time: ${maxTime.toFixed(2)}ms`);
|
|
||||||
console.log(
|
|
||||||
`Images per second: ${((testIcons.length / totalDuration) * 1000).toFixed(2)}`,
|
|
||||||
);
|
|
||||||
console.log("\n" + "-".repeat(50));
|
|
||||||
console.log("Performance Breakdown (per image):");
|
|
||||||
console.log("-".repeat(50));
|
|
||||||
for (const [step, timings] of profileTimings.entries()) {
|
|
||||||
const avg = timings.reduce((a, b) => a + b, 0) / timings.length;
|
|
||||||
const min = Math.min(...timings);
|
|
||||||
const max = Math.max(...timings);
|
|
||||||
const total = timings.reduce((a, b) => a + b, 0);
|
|
||||||
const percentage = (
|
|
||||||
(total / times.reduce((a, b) => a + b, 0)) *
|
|
||||||
100
|
|
||||||
).toFixed(1);
|
|
||||||
console.log(
|
|
||||||
` ${step.padEnd(15)}: avg ${avg.toFixed(2)}ms | min ${min.toFixed(2)}ms | max ${max.toFixed(2)}ms | ${percentage}%`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
console.log("=".repeat(50));
|
|
||||||
}
|
|
||||||
|
|
||||||
benchmark().catch(console.error);
|
|
||||||
@@ -2,26 +2,16 @@ import { permanentRedirect, redirect } from "next/navigation"
|
|||||||
import { ImageResponse } from "next/og"
|
import { ImageResponse } from "next/og"
|
||||||
import { getCommunityGalleryRecord, getCommunitySubmissionByName, getCommunitySubmissions } from "@/lib/community"
|
import { getCommunityGalleryRecord, getCommunitySubmissionByName, getCommunitySubmissions } from "@/lib/community"
|
||||||
|
|
||||||
export const revalidate = 21600 // 6 hours
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
|
||||||
const icons = await getCommunitySubmissions()
|
|
||||||
const validIcons = icons.filter((icon) => icon.name)
|
|
||||||
if (process.env.CI_MODE === "false") {
|
|
||||||
return validIcons.slice(0, 5).map((icon) => ({
|
|
||||||
icon: icon.name,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
return validIcons.map((icon) => ({
|
|
||||||
icon: icon.name,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
export const size = {
|
export const size = {
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 630,
|
height: 630,
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export const alt = "Community Icon Open Graph Image";
|
||||||
|
export const contentType = "image/png";
|
||||||
|
|
||||||
export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
|
export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
|
||||||
const { icon } = await params
|
const { icon } = await params
|
||||||
|
|
||||||
@@ -135,7 +125,9 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const iconUrl = iconDataBuffer ? `data:image/png;base64,${iconDataBuffer.toString("base64")}` : null
|
const iconUrl = iconDataBuffer
|
||||||
|
? `data:image/png;base64,${iconDataBuffer.toString("base64")}`
|
||||||
|
: `https://placehold.co/600x400?text=${formattedIconName}`;
|
||||||
|
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
<div
|
<div
|
||||||
@@ -169,7 +161,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
fontWeight: 700,
|
fontWeight: 700,
|
||||||
letterSpacing: "0.5px",
|
letterSpacing: "0.5px",
|
||||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
boxShadow:
|
||||||
|
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
|
||||||
zIndex: 30,
|
zIndex: 30,
|
||||||
textTransform: "uppercase",
|
textTransform: "uppercase",
|
||||||
}}
|
}}
|
||||||
@@ -184,7 +177,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
width: 400,
|
width: 400,
|
||||||
height: 400,
|
height: 400,
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
||||||
filter: "blur(80px)",
|
filter: "blur(80px)",
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
}}
|
}}
|
||||||
@@ -197,7 +191,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
width: 500,
|
width: 500,
|
||||||
height: 500,
|
height: 500,
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
||||||
filter: "blur(100px)",
|
filter: "blur(100px)",
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
}}
|
}}
|
||||||
@@ -225,7 +220,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
height: 320,
|
height: 320,
|
||||||
borderRadius: 32,
|
borderRadius: 32,
|
||||||
background: "white",
|
background: "white",
|
||||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
boxShadow:
|
||||||
|
"0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
||||||
padding: 30,
|
padding: 30,
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
@@ -240,39 +236,18 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{iconUrl ? (
|
<img
|
||||||
<img
|
src={iconUrl}
|
||||||
src={iconUrl}
|
alt={formattedIconName}
|
||||||
alt={formattedIconName}
|
width={260}
|
||||||
width={260}
|
height={260}
|
||||||
height={260}
|
style={{
|
||||||
style={{
|
objectFit: "contain",
|
||||||
objectFit: "contain",
|
position: "relative",
|
||||||
position: "relative",
|
zIndex: 1,
|
||||||
zIndex: 1,
|
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
}}
|
||||||
}}
|
/>
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 260,
|
|
||||||
height: 260,
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 1,
|
|
||||||
fontSize: 48,
|
|
||||||
fontWeight: 700,
|
|
||||||
color: "#94a3b8",
|
|
||||||
textAlign: "center",
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formattedIconName}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
@@ -381,5 +356,5 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
{
|
{
|
||||||
...size,
|
...size,
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -92,6 +92,7 @@ export async function generateMetadata({ params }: Props, _parent: ResolvingMeta
|
|||||||
width: 512,
|
width: 512,
|
||||||
height: 512,
|
height: 512,
|
||||||
alt: `${formattedIconName} icon`,
|
alt: `${formattedIconName} icon`,
|
||||||
|
type: typeof mainIconUrl === "string" && mainIconUrl.endsWith(".png") ? "image/png" : typeof mainIconUrl === "string" && mainIconUrl.endsWith(".svg") ? "image/svg+xml" : "image/png",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -99,6 +100,7 @@ export async function generateMetadata({ params }: Props, _parent: ResolvingMeta
|
|||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: `${formattedIconName} Icon (Community) | Dashboard Icons`,
|
title: `${formattedIconName} Icon (Community) | Dashboard Icons`,
|
||||||
description: `Download the ${formattedIconName} community-submitted icon. Part of a collection of ${totalIcons} community icons awaiting review and addition to the Dashboard Icons collection.`,
|
description: `Download the ${formattedIconName} community-submitted icon. Part of a collection of ${totalIcons} community icons awaiting review and addition to the Dashboard Icons collection.`,
|
||||||
|
images: [mainIconUrl],
|
||||||
},
|
},
|
||||||
alternates: {
|
alternates: {
|
||||||
canonical: `${WEB_URL}/community/${icon}`,
|
canonical: `${WEB_URL}/community/${icon}`,
|
||||||
|
|||||||
@@ -1,32 +1,26 @@
|
|||||||
import { ImageResponse } from "next/og"
|
import { readFile } from "node:fs/promises";
|
||||||
import { getAllIcons } from "@/lib/api"
|
import { join } from "node:path";
|
||||||
import { preloadAllIcons, readIconFile } from "@/lib/icon-cache"
|
import { ImageResponse } from "next/og";
|
||||||
|
import { getAllIcons } from "@/lib/api";
|
||||||
|
|
||||||
export const revalidate = false
|
export const dynamic = "force-dynamic";
|
||||||
|
|
||||||
export async function generateStaticParams() {
|
|
||||||
const iconsData = await getAllIcons()
|
|
||||||
if (process.env.CI_MODE === "false") {
|
|
||||||
return Object.keys(iconsData)
|
|
||||||
.slice(0, 5)
|
|
||||||
.map((icon) => ({
|
|
||||||
icon,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
return Object.keys(iconsData).map((icon) => ({
|
|
||||||
icon,
|
|
||||||
}))
|
|
||||||
}
|
|
||||||
|
|
||||||
export const size = {
|
export const size = {
|
||||||
width: 1200,
|
width: 1200,
|
||||||
height: 630,
|
height: 630,
|
||||||
}
|
};
|
||||||
export default async function Image({ params }: { params: Promise<{ icon: string }> }) {
|
|
||||||
const { icon } = await params
|
export const alt = "Icon Open Graph Image";
|
||||||
|
export const contentType = "image/png";
|
||||||
|
export default async function Image({
|
||||||
|
params,
|
||||||
|
}: {
|
||||||
|
params: Promise<{ icon: string }>;
|
||||||
|
}) {
|
||||||
|
const { icon } = await params;
|
||||||
|
|
||||||
if (!icon) {
|
if (!icon) {
|
||||||
console.error(`[Opengraph Image] Icon not found for ${icon}`)
|
console.error(`[Opengraph Image] Icon not found for ${icon}`);
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
@@ -44,22 +38,35 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
Icon not found
|
Icon not found
|
||||||
</div>,
|
</div>,
|
||||||
{ ...size },
|
{ ...size },
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
await preloadAllIcons()
|
const iconsData = await getAllIcons();
|
||||||
|
const totalIcons = Object.keys(iconsData).length;
|
||||||
const iconsData = await getAllIcons()
|
const index = Object.keys(iconsData).indexOf(icon);
|
||||||
const totalIcons = Object.keys(iconsData).length
|
|
||||||
const index = Object.keys(iconsData).indexOf(icon)
|
|
||||||
|
|
||||||
|
// 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(" ");
|
||||||
|
|
||||||
const iconData = await readIconFile(icon)
|
// Read the icon file from local filesystem
|
||||||
const iconUrl = iconData ? `data:image/png;base64,${iconData.toString("base64")}` : null
|
let iconData: Buffer | null = null;
|
||||||
|
try {
|
||||||
|
const iconPath = join(process.cwd(), `../png/${icon}.png`);
|
||||||
|
console.log(
|
||||||
|
`Generating opengraph image for ${icon} (${index + 1} / ${totalIcons}) from path ${iconPath}`,
|
||||||
|
);
|
||||||
|
iconData = await readFile(iconPath);
|
||||||
|
} catch (_error) {
|
||||||
|
console.error(`Icon ${icon} was not found locally`);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Convert the image data to a data URL or use placeholder
|
||||||
|
const iconUrl = iconData
|
||||||
|
? `data:image/png;base64,${iconData.toString("base64")}`
|
||||||
|
: null;
|
||||||
|
|
||||||
return new ImageResponse(
|
return new ImageResponse(
|
||||||
<div
|
<div
|
||||||
@@ -85,7 +92,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
width: 400,
|
width: 400,
|
||||||
height: 400,
|
height: 400,
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
background: "linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(56, 189, 248, 0.1) 0%, rgba(59, 130, 246, 0.1) 100%)",
|
||||||
filter: "blur(80px)",
|
filter: "blur(80px)",
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
}}
|
}}
|
||||||
@@ -98,7 +106,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
width: 500,
|
width: 500,
|
||||||
height: 500,
|
height: 500,
|
||||||
borderRadius: "50%",
|
borderRadius: "50%",
|
||||||
background: "linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
background:
|
||||||
|
"linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%)",
|
||||||
filter: "blur(100px)",
|
filter: "blur(100px)",
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
}}
|
}}
|
||||||
@@ -128,7 +137,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
height: 320,
|
height: 320,
|
||||||
borderRadius: 32,
|
borderRadius: 32,
|
||||||
background: "white",
|
background: "white",
|
||||||
boxShadow: "0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
boxShadow:
|
||||||
|
"0 25px 50px -12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)",
|
||||||
padding: 30,
|
padding: 30,
|
||||||
flexShrink: 0,
|
flexShrink: 0,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
@@ -143,39 +153,21 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
zIndex: 0,
|
zIndex: 0,
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{iconUrl ? (
|
<img
|
||||||
<img
|
src={
|
||||||
src={iconUrl}
|
iconUrl ||
|
||||||
alt={formattedIconName}
|
`https://placehold.co/600x400?text=${formattedIconName}`
|
||||||
width={260}
|
}
|
||||||
height={260}
|
alt={formattedIconName}
|
||||||
style={{
|
width={260}
|
||||||
objectFit: "contain",
|
height={260}
|
||||||
position: "relative",
|
style={{
|
||||||
zIndex: 1,
|
objectFit: "contain",
|
||||||
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
position: "relative",
|
||||||
}}
|
zIndex: 1,
|
||||||
/>
|
filter: "drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1))",
|
||||||
) : (
|
}}
|
||||||
<div
|
/>
|
||||||
style={{
|
|
||||||
display: "flex",
|
|
||||||
alignItems: "center",
|
|
||||||
justifyContent: "center",
|
|
||||||
width: 260,
|
|
||||||
height: 260,
|
|
||||||
position: "relative",
|
|
||||||
zIndex: 1,
|
|
||||||
fontSize: 48,
|
|
||||||
fontWeight: 700,
|
|
||||||
color: "#94a3b8",
|
|
||||||
textAlign: "center",
|
|
||||||
wordBreak: "break-word",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{formattedIconName}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Text content */}
|
{/* Text content */}
|
||||||
@@ -289,5 +281,5 @@ export default async function Image({ params }: { params: Promise<{ icon: string
|
|||||||
{
|
{
|
||||||
...size,
|
...size,
|
||||||
},
|
},
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -79,11 +79,26 @@ export async function generateMetadata({ params, searchParams }: Props, _parent:
|
|||||||
url: pageUrl,
|
url: pageUrl,
|
||||||
siteName: "Dashboard Icons",
|
siteName: "Dashboard Icons",
|
||||||
images: [
|
images: [
|
||||||
|
{
|
||||||
|
url: `${BASE_URL}/png/${icon}.png`,
|
||||||
|
width: 512,
|
||||||
|
height: 512,
|
||||||
|
alt: `${formattedIconName} icon`,
|
||||||
|
type: "image/png",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
url: `${BASE_URL}/webp/${icon}.webp`,
|
url: `${BASE_URL}/webp/${icon}.webp`,
|
||||||
width: 512,
|
width: 512,
|
||||||
height: 512,
|
height: 512,
|
||||||
alt: `${formattedIconName} icon`,
|
alt: `${formattedIconName} icon`,
|
||||||
|
type: "image/webp",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
url: `${BASE_URL}/svg/${icon}.svg`,
|
||||||
|
width: 512,
|
||||||
|
height: 512,
|
||||||
|
alt: `${formattedIconName} icon`,
|
||||||
|
type: "image/svg+xml",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
@@ -91,6 +106,7 @@ export async function generateMetadata({ params, searchParams }: Props, _parent:
|
|||||||
card: "summary_large_image",
|
card: "summary_large_image",
|
||||||
title: `${formattedIconName} Icon | Dashboard Icons`,
|
title: `${formattedIconName} Icon | Dashboard Icons`,
|
||||||
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.`,
|
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.`,
|
||||||
|
images: [`${BASE_URL}/png/${icon}.png`],
|
||||||
},
|
},
|
||||||
alternates: {
|
alternates: {
|
||||||
canonical: `${WEB_URL}/icons/${icon}`,
|
canonical: `${WEB_URL}/icons/${icon}`,
|
||||||
|
|||||||
@@ -1,17 +1,15 @@
|
|||||||
import { unstable_cache } from "next/cache";
|
import { unstable_cache } from "next/cache";
|
||||||
import { cache } from "react";
|
|
||||||
import { METADATA_URL } from "@/constants";
|
import { METADATA_URL } from "@/constants";
|
||||||
import { ApiError } from "@/lib/errors";
|
import { ApiError } from "@/lib/errors";
|
||||||
import type { AuthorData, IconFile, IconWithName } from "@/types/icons";
|
import type { AuthorData, IconFile, IconWithName } from "@/types/icons";
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Raw fetch function for icon data (without caching)
|
* Fetches all icon data from the metadata.json file
|
||||||
|
* Uses fetch with revalidate for caching
|
||||||
*/
|
*/
|
||||||
async function fetchAllIconsRaw(): Promise<IconFile> {
|
export async function getAllIcons(): Promise<IconFile> {
|
||||||
try {
|
try {
|
||||||
const response = await fetch(METADATA_URL, {
|
const response = await fetch(METADATA_URL);
|
||||||
next: { revalidate: 3600 },
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
if (!response.ok) {
|
||||||
throw new ApiError(
|
throw new ApiError(
|
||||||
@@ -30,28 +28,6 @@ async function fetchAllIconsRaw(): Promise<IconFile> {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Cached version using unstable_cache for build-time caching
|
|
||||||
* Revalidates every hour (3600 seconds)
|
|
||||||
*/
|
|
||||||
const getAllIconsCached = unstable_cache(
|
|
||||||
async () => fetchAllIconsRaw(),
|
|
||||||
["all-icons"],
|
|
||||||
{
|
|
||||||
revalidate: 3600,
|
|
||||||
tags: ["icons"],
|
|
||||||
},
|
|
||||||
);
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Fetches all icon data from the metadata.json file
|
|
||||||
* Uses React cache() for request-level memoization and unstable_cache for build-level caching
|
|
||||||
* This prevents duplicate fetches within the same request and across builds
|
|
||||||
*/
|
|
||||||
export const getAllIcons = cache(async (): Promise<IconFile> => {
|
|
||||||
return getAllIconsCached();
|
|
||||||
});
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Gets a list of all icon names.
|
* Gets a list of all icon names.
|
||||||
*/
|
*/
|
||||||
|
|||||||
@@ -1,76 +0,0 @@
|
|||||||
import { readFile } from "node:fs/promises"
|
|
||||||
import { join } from "node:path"
|
|
||||||
import { cache } from "react"
|
|
||||||
import { getAllIcons } from "./api"
|
|
||||||
|
|
||||||
/**
|
|
||||||
* In-memory cache for icon files during build/request
|
|
||||||
* This persists across multiple calls within the same build process
|
|
||||||
*/
|
|
||||||
const iconFileCache = new Map<string, Buffer | null>()
|
|
||||||
let preloadPromise: Promise<void> | null = null
|
|
||||||
let isPreloaded = false
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Preloads all icon files into memory
|
|
||||||
* This should be called once at the start of the build process
|
|
||||||
*/
|
|
||||||
export async function preloadAllIcons(): Promise<void> {
|
|
||||||
if (isPreloaded || preloadPromise) {
|
|
||||||
return preloadPromise || Promise.resolve()
|
|
||||||
}
|
|
||||||
|
|
||||||
preloadPromise = (async () => {
|
|
||||||
const startTime = Date.now()
|
|
||||||
const iconsData = await getAllIcons()
|
|
||||||
const iconNames = Object.keys(iconsData)
|
|
||||||
const pngDir = join(process.cwd(), `../png`)
|
|
||||||
|
|
||||||
console.log(`[Icon Cache] Preloading ${iconNames.length} icons into memory...`)
|
|
||||||
|
|
||||||
const loadPromises = iconNames.map(async (iconName) => {
|
|
||||||
if (iconFileCache.has(iconName)) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
try {
|
|
||||||
const iconPath = join(pngDir, `${iconName}.png`)
|
|
||||||
const buffer = await readFile(iconPath)
|
|
||||||
iconFileCache.set(iconName, buffer)
|
|
||||||
} catch (_error) {
|
|
||||||
iconFileCache.set(iconName, null)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
await Promise.all(loadPromises)
|
|
||||||
const duration = Date.now() - startTime
|
|
||||||
const loadedCount = Array.from(iconFileCache.values()).filter((v) => v !== null).length
|
|
||||||
console.log(
|
|
||||||
`[Icon Cache] Preloaded ${loadedCount}/${iconNames.length} icons in ${duration}ms (${(loadedCount / duration).toFixed(2)} icons/ms)`,
|
|
||||||
)
|
|
||||||
isPreloaded = true
|
|
||||||
})()
|
|
||||||
|
|
||||||
return preloadPromise
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Reads an icon PNG file from the filesystem
|
|
||||||
* Uses React cache() for request-level memoization
|
|
||||||
* Uses in-memory Map for build-level caching
|
|
||||||
* If preloaded, returns immediately from cache
|
|
||||||
*/
|
|
||||||
export const readIconFile = cache(async (iconName: string): Promise<Buffer | null> => {
|
|
||||||
if (iconFileCache.has(iconName)) {
|
|
||||||
return iconFileCache.get(iconName)!
|
|
||||||
}
|
|
||||||
|
|
||||||
try {
|
|
||||||
const iconPath = join(process.cwd(), `../png/${iconName}.png`)
|
|
||||||
const buffer = await readFile(iconPath)
|
|
||||||
iconFileCache.set(iconName, buffer)
|
|
||||||
return buffer
|
|
||||||
} catch (_error) {
|
|
||||||
iconFileCache.set(iconName, null)
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
})
|
|
||||||
Reference in New Issue
Block a user