From 81d01f8bba38984e744888995471e737d96e8627 Mon Sep 17 00:00:00 2001 From: Thomas Camlong Date: Mon, 17 Nov 2025 11:10:16 +0100 Subject: [PATCH] chore: try fixing compilation on cf --- .../app/community/[icon]/opengraph-image.tsx | 14 +--- web/src/app/icons/[icon]/opengraph-image.tsx | 82 +++++++++---------- web/src/lib/api.ts | 13 ++- 3 files changed, 49 insertions(+), 60 deletions(-) diff --git a/web/src/app/community/[icon]/opengraph-image.tsx b/web/src/app/community/[icon]/opengraph-image.tsx index 61da7c4c..3b922545 100644 --- a/web/src/app/community/[icon]/opengraph-image.tsx +++ b/web/src/app/community/[icon]/opengraph-image.tsx @@ -2,21 +2,9 @@ import { permanentRedirect, redirect } from "next/navigation" import { ImageResponse } from "next/og" import { getCommunityGalleryRecord, getCommunitySubmissionByName, getCommunitySubmissions } from "@/lib/community" +export const runtime = "edge"; 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 size = { width: 1200, height: 630, diff --git a/web/src/app/icons/[icon]/opengraph-image.tsx b/web/src/app/icons/[icon]/opengraph-image.tsx index e490b39d..742e6f46 100644 --- a/web/src/app/icons/[icon]/opengraph-image.tsx +++ b/web/src/app/icons/[icon]/opengraph-image.tsx @@ -1,34 +1,23 @@ -import { readFile } from "node:fs/promises" -import { join } from "node:path" -import { ImageResponse } from "next/og" -import { getAllIcons } from "@/lib/api" +import { ImageResponse } from "next/og"; +import { BASE_URL } from "@/constants"; +import { getAllIcons } from "@/lib/api"; -export const revalidate = false - -export async function generateStaticParams() { - const iconsData = await getAllIcons() - if (process.env.CI_MODE === "false") { - // This is meant to speed up the build process in local development - return Object.keys(iconsData) - .slice(0, 5) - .map((icon) => ({ - icon, - })) - } - return Object.keys(iconsData).map((icon) => ({ - icon, - })) -} +export const runtime = "edge"; +export const revalidate = false; export const size = { width: 1200, height: 630, -} -export default async function Image({ params }: { params: Promise<{ icon: string }> }) { - const { icon } = await params +}; +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(
, { ...size }, - ) + ); } - 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(" "); - // Read the icon file from local filesystem - let iconData: Buffer | null = null + // Fetch the icon from CDN (Edge Runtime compatible) + let iconUrl: string | 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) + const iconCdnUrl = `${BASE_URL}/png/${icon}.png`; + const response = await fetch(iconCdnUrl); + if (response.ok) { + const arrayBuffer = await response.arrayBuffer(); + const base64 = Buffer.from(arrayBuffer).toString("base64"); + iconUrl = `data:image/png;base64,${base64}`; + } } catch (_error) { - console.error(`Icon ${icon} was not found locally`) + console.error(`Icon ${icon} was not found on CDN`); } - // 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(
{formattedIconName} = {}; + /** * Cached version of fetchAuthorData * Uses unstable_cache with tags for on-demand revalidation @@ -132,10 +134,13 @@ async function fetchAuthorData(authorId: number) { * across multiple page builds and requests. */ export async function getAuthorData(authorId: number): Promise { - return unstable_cache(async () => await fetchAuthorData(authorId), [`author-${authorId}`], { - revalidate: 86400, - tags: ["authors", `author-${authorId}`], - })() + if (authorDataCache[authorId]) { + return authorDataCache[authorId]; + } + + const data = await fetchAuthorData(authorId); + authorDataCache[authorId] = data; + return data; } /**