import cachified, { type CacheEntry, type Cache, totalTtl, } from "@epic-web/cachified"; import { ImageResponse } from "@vercel/og"; import { LRUCache } from "lru-cache"; import { serverDb } from "~/database/.server/db"; import { type PlaygroundId } from "~/database/types"; import { env } from "~/utils/env"; const lruInstance = new LRUCache({ max: 1000 }); const lru: Cache = { set(key, value) { const ttl = totalTtl(value?.metadata); return lruInstance.set(key, value, { ttl: ttl === Infinity ? undefined : ttl, start: value?.metadata?.createdTime, }); }, get(key) { return lruInstance.get(key); }, delete(key) { return lruInstance.delete(key); }, }; export async function loader({ request }: LoaderFunctionArgs) { const url = new URL(request.url); const playgroundId = url.searchParams.get("playgroundId"); const updatedAt = url.searchParams.get("updatedAt"); const origin = (url.searchParams.get("o") as | "visualizer" | "index" | "converter" | "explore") || "index"; const [interMedium, interRegular] = await Promise.all([ cachified({ key: "font-inter-medium", cache: lru, async getFreshValue() { const result = await fetch(`${env.APP_URL}/fonts/Inter-Medium.ttf`); return result.arrayBuffer(); }, }), cachified({ key: "font-inter-regular", cache: lru, async getFreshValue() { const result = await fetch(`${env.APP_URL}/fonts/Inter-Regular.ttf`); return result.arrayBuffer(); }, }), ]); let key = `og-image-${origin}`; if (playgroundId) { key = `og-image-${playgroundId}-${updatedAt || "0"}`; } const response = await cachified({ key, cache: lru, async getFreshValue() { const playground = playgroundId ? await serverDb.query.playground .findFirst({ columns: { name: true, description: true, updatedAt: true, dialect: true, }, with: { creator: { columns: { username: true, avatarUrl: true, }, }, }, where: (Playground, { eq }) => eq(Playground.id, playgroundId as PlaygroundId), }) .catch(() => null) : null; let title = playground?.name || "Play with Drizzle"; title = title.length > 50 ? `${title.slice(0, 50)}...` : title; let description = playground?.description || "Your journey begins here 🚀"; if (origin === "visualizer") { title = `Visualizer`; description = "An other view of your schema"; } if (origin === "converter") { title = `Converter`; description = "From Drizzle to SQL and SQL to Drizzle"; } if (origin === "explore") { title = `Explore`; description = "Explore all Drizzle playgrounds"; } if (description) { description = description.length > 50 ? `${description.slice(0, 50)}...` : description; } return new ImageResponse( (
Run {playground?.dialect && ( • {playground.dialect} )}

{title}

{description}

{playground?.creator?.avatarUrl && ( avatar )} {playground?.creator?.username && ( @{playground?.creator.username} )}
), { width: 1200, height: 630, fonts: [ { name: "Inter", data: interMedium, weight: 400, style: "normal", }, { name: "Inter", data: interRegular, weight: 300, style: "normal", }, ], }, ); }, ttl: updatedAt ? undefined : 1 * 60 * 1000, // 1 minute }); return response.clone(); } function Drizzle() { return ( ); }