Merge pull request #416 from ourzora/fix-svg-rendering

Fix svgs and dashboard image

apps/web/src/modules/dashboard/DaoAuctionCard.tsx

@@ -95,6 +95,7 @@ export const DaoAuctionCard = (props: DaoAuctionCardProps) => {
           <Image
             className={daoAvatar}
             src={currentAuction?.token?.image}
+            unoptimized
             layout="fixed"
             alt=""
           />

apps/web/src/pages/api/renderer/stack-images.ts

@@ -5,38 +5,41 @@ import sharp from 'sharp'
 
 import { CACHE_TIMES } from 'src/constants/cacheTimes'
 
+const SVG_DEFAULT_SIZE = 1080
+
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
-  const images = req.query.images
+  let images = req.query.images
 
   if (!images || !images.length)
     return res.status(400).json({ error: 'No images provided' })
 
   const { maxAge, swr } = CACHE_TIMES.DAO_FEED
 
-  // Handle single image
-  if (typeof images === 'string') {
-    const data = await getImageData(images)
-    const convertedImage = await sharp(data).webp({ quality: 100 }).toBuffer()
+  if (typeof images === 'string') images = [images]
+
+  let imageData: Buffer[] = await Promise.all(
+    images.map((imageUrl) => getImageData(imageUrl))
+  )
 
-    res.setHeader(
-      'Cache-Control',
-      `public, s-maxage=${maxAge}, stale-while-revalidate=${swr}`
+  const isSvg = images[0].includes('.svg')
+
+  // Resize all SVGs to a default size
+  if (isSvg) {
+    imageData = await Promise.all(
+      imageData.map(async (x) =>
+        sharp(x).resize(SVG_DEFAULT_SIZE, SVG_DEFAULT_SIZE, { fit: 'inside' }).toBuffer()
+      )
     )
-    res.setHeader('Content-Type', 'image/webp')
-    return res.send(convertedImage)
   }
 
-  // Handle multiple images
-  const imageData = await Promise.all(images.map((imageUrl) => getImageData(imageUrl)))
-
   const compositeParams = imageData.slice(1).map((x) => ({
     input: x,
     gravity: 'center',
   }))
 
   const compositeRes = await sharp(imageData[0])
     .composite(compositeParams)
-    .webp({ quality: 100 })
+    .webp({ quality: 75 })
     .toBuffer()
 
   res.setHeader(