fix!: use render-local crop ids (#122)

Co-authored-by: Codex <codex@openai.com>
Co-authored-by: Anthony Fu (via agent) <reg-github-bot@antfu.me>

Author: 3 people

src/processing/svg.ts

@@ -1,5 +1,4 @@
 import type { BadgePreset, ImageFormat, Sponsor, SponsorkitRenderOptions, Sponsorship } from '../types.ts'
-import crypto from 'node:crypto'
 import { resizeImage } from './image.ts'
 
 export function genSvgImage(
@@ -9,8 +8,8 @@ export function genSvgImage(
   radius: number,
   base64Image: string,
   imageFormat: ImageFormat,
+  cropId: string,
 ) {
-  const cropId = `c${crypto.createHash('md5').update(base64Image).digest('hex').slice(0, 6)}`
   return `
   <clipPath id="${cropId}">
     <rect x="${x}" y="${y}" width="${size}" height="${size}" rx="${size * radius}" ry="${size * radius}" />
@@ -25,6 +24,7 @@ export async function generateBadge(
   preset: BadgePreset,
   radius: number,
   imageFormat: ImageFormat,
+  cropId: string,
 ) {
   const { login } = sponsor
   let name = (sponsor.name || sponsor.login).trim()
@@ -55,20 +55,25 @@ export async function generateBadge(
   ${preset.name
     ? `<text x="${x + size / 2}" y="${y + size + 18}" text-anchor="middle" class="${preset.name.classes || 'sponsorkit-name'}" fill="${preset.name.color || 'currentColor'}">${encodeHtmlEntities(name)}</text>
   `
-    : ''}${genSvgImage(x, y, size, radius, avatarBase64, imageFormat)}
+    : ''}${genSvgImage(x, y, size, radius, avatarBase64, imageFormat, cropId)}
 </a>`.trim()
 }
 
 export class SvgComposer {
   height = 0
   body = ''
+  private cropId = 0
 
   readonly config: Required<SponsorkitRenderOptions>
 
   constructor(config: Required<SponsorkitRenderOptions>) {
     this.config = config
   }
 
+  getNextCropId() {
+    return `c${this.cropId++}`
+  }
+
   addSpan(height = 0) {
     this.height += height
     return this
@@ -96,7 +101,8 @@ export class SvgComposer {
         const x = offsetX + preset.boxWidth * i
         const y = this.height
         const radius = s.sponsor.type === 'Organization' ? 0.1 : 0.5
-        return await generateBadge(x, y, s.sponsor, preset, radius, this.config.imageFormat)
+        const cropId = this.getNextCropId()
+        return await generateBadge(x, y, s.sponsor, preset, radius, this.config.imageFormat, cropId)
       }))
 
     this.body += sponsorLine.join('\n')

src/renders/circles.ts

@@ -48,6 +48,7 @@ export const circlesRenderer: SponsorkitRenderer = {
         },
         0.5,
         config.imageFormat,
+        composer.getNextCropId(),
       ))
     }