Allow passing of size to album-art for smaller images

Author: switz

package.json

@@ -29,6 +29,7 @@
     "lucide-react": "^0.485.0",
     "next": "15.2.4",
     "next-redux-wrapper": "8.1.0",
+    "next-zod-route": "^0.2.5",
     "nextjs-toploader": "^3.7.15",
     "node-device-detector": "^2.1.0",
     "react": "19.0.0",
@@ -38,7 +39,8 @@
     "redux": "^4.2.1",
     "tailwind-merge": "^2.3.0",
     "thenby": "^1.3.4",
-    "ua-parser-js": "^1.0.37"
+    "ua-parser-js": "^1.0.37",
+    "zod": "^3.24.2"
   },
   "devDependencies": {
     "@switz/eslint-config": "^11.0.0",

pnpm-lock.yaml

@@ -5,6 +5,8 @@ import { fetchArtists, fetchShowByUUID } from '@/app/queries';
 import { ImageResponse } from 'next/og';
 import { NextRequest } from 'next/server';
 import { notFound } from 'next/navigation';
+import { createZodRoute } from 'next-zod-route';
+import { z } from 'zod';
 
 export const runtime = 'edge';
 
@@ -75,9 +77,9 @@ const getArtistGradient = (uuid: string) => {
   return gradientString;
 };
 
-const generatePixelatedSVG = (opacity = 0.4) => {
-  // Create a pixelated pattern with large squares
-  const squareSize = 45; // Size of each pixel square
+// Create a pixelated pattern with large squares
+const generatePixelatedSVG = (opacity = 0.4, size: number) => {
+  const squareSize = (size / 1024) * 45; // Size of each pixel square
   const gridSize = 10; // Number of squares in each row/column
   const borderWidth = 1; // Reduced width of the border between pixels
   const borderColor = 'rgba(0, 0, 0, 0.1)'; // More transparent black for subtler borders
@@ -108,16 +110,19 @@ const generatePixelatedSVG = (opacity = 0.4) => {
   return `url("data:image/svg+xml;base64,${Buffer.from(svg).toString('base64')}")`;
 };
 
-export async function GET(request: NextRequest) {
-  try {
-    const { searchParams } = new URL(request.url);
+const querySchema = z.object({
+  showUuid: z.string().uuid(),
+  size: z.coerce.number().gte(256).lte(1024).default(1024),
+});
 
-    const showUuid = searchParams.get('showUuid');
-    if (!showUuid) return notFound();
+export const GET = createZodRoute()
+  .query(querySchema)
+  .handler(async (request, context) => {
+    if (!context.query.showUuid) return notFound();
 
     const [artists, show, fontReg, fontBold, fontMegaBold] = await Promise.all([
       fetchArtists(),
-      fetchShowByUUID(showUuid),
+      fetchShowByUUID(context.query.showUuid),
       fetch(
         new URL('https://cdn.jsdelivr.net/fontsource/fonts/roboto@latest/latin-400-normal.ttf'),
         { next: { revalidate: 60 * 60 * 24 * 30 } } // Cache for 30 days
@@ -141,7 +146,8 @@ export async function GET(request: NextRequest) {
     // Generate dynamic background color and pattern based on artist UUID
     const bgGradient = getArtistGradient(show.artist_uuid || '');
     // Generate pixelated background pattern
-    const pixelatedSVG = generatePixelatedSVG(0.8);
+    const size = context.query.size;
+    const pixelatedSVG = generatePixelatedSVG(0.8, size);
 
     return new ImageResponse(
       (
@@ -153,23 +159,49 @@ export async function GET(request: NextRequest) {
           }}
         >
           <div tw="flex w-full max-w-[800px] flex-col items-center justify-center rounded-2xl bg-black/25 p-12 relative">
-            <div tw="mb-2 text-center text-7xl font-extrabold tracking-tight">{artistName}</div>
-            <div tw="mb-2 text-center text-6xl font-bold">{show.display_date}</div>
+            <div
+              tw="mb-2 text-center font-extrabold tracking-tight"
+              style={{
+                fontSize: (size / 1024) * 72,
+              }}
+            >
+              {artistName}
+            </div>
+            <div
+              tw="mb-2 text-center font-bold"
+              style={{
+                fontSize: (size / 1024) * 60,
+              }}
+            >
+              {show.display_date}
+            </div>
             <div tw="flex items-center justify-center" style={{ gap: 8 }}>
               {show.venue?.name && (
-                <div tw="rounded-xl bg-white/20 px-6 py-3 text-4xl flex text-center">
+                <div
+                  tw="rounded-xl bg-white/20 px-6 py-3 flex text-center"
+                  style={{
+                    fontSize: (size / 1024) * 36,
+                  }}
+                >
                   {show.venue?.name} {show.venue?.location ? `• ${show.venue.location}` : ''}
                 </div>
               )}
             </div>
           </div>
 
-          <div tw="absolute bottom-6 right-6 text-4xl font-bold">Relisten.net</div>
+          <div
+            tw="absolute bottom-6 right-6 font-bold"
+            style={{
+              fontSize: (size / 1024) * 36,
+            }}
+          >
+            Relisten.net
+          </div>
         </div>
       ),
       {
-        width: 1024,
-        height: 1024,
+        width: size,
+        height: size,
         fonts: [
           {
             name: 'Roboto',
@@ -192,8 +224,4 @@ export async function GET(request: NextRequest) {
         ],
       }
     );
-  } catch (error) {
-    console.error('Error generating album art:', error);
-    return new Response('Error generating album art', { status: 500 });
-  }
-}
+  });