mirror/dashboard-icons
1
0
Fork 0
mirror of https://github.com/walkxcode/dashboard-icons.git synced 2025-11-19 01:57:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Try fixing compilation for the nth time

Browse Source
This commit is contained in:
Thomas Camlong
2025-11-17 14:50:38 +01:00
parent 2e20511872
commit 8fc205f5a2
8 changed files with 111 additions and 646 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
web/src/app/community/[icon]/opengraph-image.tsx
View File

@@ -2,26 +2,16 @@ import { permanentRedirect, redirect } from "next/navigation"
import { ImageResponse } from "next/og"
import { getCommunityGalleryRecord, getCommunitySubmissionByName, getCommunitySubmissions } from "@/lib/community"
export const revalidate = 21600 // 6 hours
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 dynamic = "force-dynamic";
export const size = {
width: 1200,
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 }> }) {
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(
<div
@@ -169,7 +161,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
fontSize: 20,
fontWeight: 700,
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,
textTransform: "uppercase",
}}
@@ -184,7 +177,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
width: 400,
height: 400,
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)",
zIndex: 2,
}}
@@ -197,7 +191,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
width: 500,
height: 500,
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)",
zIndex: 2,
}}
@@ -225,7 +220,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
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)",
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",
@@ -240,39 +236,18 @@ export default async function Image({ params }: { params: Promise<{ icon: string
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>
)}
<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>
<div
@@ -381,5 +356,5 @@ export default async function Image({ params }: { params: Promise<{ icon: string
{
...size,
},
)
);
}

2
web/src/app/community/[icon]/page.tsx
View File

@@ -92,6 +92,7 @@ export async function generateMetadata({ params }: Props, _parent: ResolvingMeta
width: 512,
height: 512,
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",
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.`,
images: [mainIconUrl],
},
alternates: {
canonical: `${WEB_URL}/community/${icon}`,

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

@@ -1,32 +1,26 @@
import { ImageResponse } from "next/og"
import { getAllIcons } from "@/lib/api"
import { preloadAllIcons, readIconFile } from "@/lib/icon-cache"
import { readFile } from "node:fs/promises";
import { join } from "node:path";
import { ImageResponse } from "next/og";
import { getAllIcons } from "@/lib/api";
export const revalidate = false
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 dynamic = "force-dynamic";
export const size = {
width: 1200,
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) {
console.error(`[Opengraph Image] Icon not found for ${icon}`)
console.error(`[Opengraph Image] Icon not found for ${icon}`);
return new ImageResponse(
<div
style={{
@@ -44,22 +38,35 @@ export default async function Image({ params }: { params: Promise<{ icon: string
Icon not found
</div>,
{ ...size },
)
);
}
await preloadAllIcons()
const iconsData = await getAllIcons()
const totalIcons = Object.keys(iconsData).length
const index = Object.keys(iconsData).indexOf(icon)
const iconsData = await getAllIcons();
const totalIcons = Object.keys(iconsData).length;
const index = Object.keys(iconsData).indexOf(icon);
// Format the icon name for display
const formattedIconName = icon
.split("-")
.map((word) => word.charAt(0).toUpperCase() + word.slice(1))
.join(" ")
.join(" ");
const iconData = await readIconFile(icon)
const iconUrl = iconData ? `data:image/png;base64,${iconData.toString("base64")}` : null
// Read the icon file from local filesystem
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(
<div
@@ -85,7 +92,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
width: 400,
height: 400,
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)",
zIndex: 2,
}}
@@ -98,7 +106,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
width: 500,
height: 500,
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)",
zIndex: 2,
}}
@@ -128,7 +137,8 @@ export default async function Image({ params }: { params: Promise<{ icon: string
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)",
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",
@@ -143,39 +153,21 @@ export default async function Image({ params }: { params: Promise<{ icon: string
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>
)}
<img
src={
iconUrl ||
`https://placehold.co/600x400?text=${formattedIconName}`
}
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>
{/* Text content */}
@@ -289,5 +281,5 @@ export default async function Image({ params }: { params: Promise<{ icon: string
{
...size,
},
)
);
}

16
web/src/app/icons/[icon]/page.tsx
View File

@@ -79,11 +79,26 @@ export async function generateMetadata({ params, searchParams }: Props, _parent:
url: pageUrl,
siteName: "Dashboard Icons",
images: [
{
url: `${BASE_URL}/png/${icon}.png`,
width: 512,
height: 512,
alt: `${formattedIconName} icon`,
type: "image/png",
},
{
url: `${BASE_URL}/webp/${icon}.webp`,
width: 512,
height: 512,
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",
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.`,
images: [`${BASE_URL}/png/${icon}.png`],
},
alternates: {
canonical: `${WEB_URL}/icons/${icon}`,

32
web/src/lib/api.ts
View File

@@ -1,17 +1,15 @@
import { unstable_cache } from "next/cache";
import { cache } from "react";
import { METADATA_URL } from "@/constants";
import { ApiError } from "@/lib/errors";
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 {
const response = await fetch(METADATA_URL, {
next: { revalidate: 3600 },
});
const response = await fetch(METADATA_URL);
if (!response.ok) {
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.
*/

76
web/src/lib/icon-cache.ts
View File

@@ -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
}
})