tmp

src/routes/og/[token_id]/+server.ts

@@ -1,8 +1,11 @@
+import { renderIcon } from '@download/blockies'
 import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff?arraybuffer'
 import inter600 from '@fontsource/inter/files/inter-latin-600-normal.woff?arraybuffer'
 import robotoMono400 from '@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff?arraybuffer'
 import { error } from '@sveltejs/kit'
+import { createCanvas } from '@napi-rs/canvas'
 import { loadTokenData } from '../../token/[id]/data'
+import backgroundImage from './og-background.png?arraybuffer'
 import OgToken from './og-token.svelte'
 import { svelteToPngResponse } from './svelte-to-png'
 import type { RequestHandler } from './$types'
@@ -12,27 +15,44 @@ export const GET: RequestHandler = async ({ params: { token_id }, fetch }) => {
     const props = await loadTokenData(token_id, fetch)
     if (!props.token) throw error(404, 'Token not found')
 
-    return await svelteToPngResponse(OgToken, props, {
-      width: 1200,
-      height: 630,
-      fonts: [
+    const avatar =
+      props.ens.avatar ||
+      renderIcon(
         {
-          name: 'sans-serif',
-          data: inter400,
-          weight: 400,
+          seed: props.token.owner.id,
+          size: 20,
+          scale: 10,
         },
-        {
-          name: 'sans-serif',
-          data: inter600,
-          weight: 600,
-        },
-        {
-          name: 'monospace',
-          data: robotoMono400,
-          weight: 400,
-        },
-      ],
-    })
+        createCanvas(200, 200),
+      ).toDataURL()
+
+    const background = `data:image/png;base64,${Buffer.from(backgroundImage).toString('base64')}`
+
+    return await svelteToPngResponse(
+      OgToken,
+      { ...props, avatar, background },
+      {
+        width: 1200,
+        height: 630,
+        fonts: [
+          {
+            name: 'sans-serif',
+            data: inter400,
+            weight: 400,
+          },
+          {
+            name: 'sans-serif',
+            data: inter600,
+            weight: 600,
+          },
+          {
+            name: 'monospace',
+            data: robotoMono400,
+            weight: 400,
+          },
+        ],
+      },
+    )
   } catch (err) {
     console.error('error building opengraph image', err)
     throw error(500, err instanceof Error ? err.message : 'Opengraph image error')

src/routes/og/[token_id]/debug/+page.server.ts

@@ -1,5 +1,8 @@
+import { renderIcon } from '@download/blockies'
+import { createCanvas } from '@napi-rs/canvas'
 import { error } from '@sveltejs/kit'
 import { loadTokenData } from '../../../token/[id]/data'
+import backgroundImage from '../og-background.png?arraybuffer'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ fetch, params }) => {
@@ -11,9 +14,24 @@ export const load: PageServerLoad = async ({ fetch, params }) => {
 
   const { token, metadata, ens } = data
 
+  const avatar =
+    ens.avatar ||
+    renderIcon(
+      {
+        seed: token.owner.id,
+        size: 20,
+        scale: 10,
+      },
+      createCanvas(200, 200),
+    ).toDataURL()
+
+  const background = `data:image/png;base64,${Buffer.from(backgroundImage).toString('base64')}`
+
   return {
     token,
     metadata,
     ens,
+    avatar,
+    background,
   }
 }

src/routes/og/[token_id]/og-token.svelte

@@ -1,8 +1,5 @@
 <script>
-  import { renderIcon } from '@download/blockies'
-  import { createCanvas } from '@napi-rs/canvas'
   import { formatDistanceToNow } from 'date-fns'
-  import background from './og-background.png?arraybuffer'
 
   /**
    * @type {import('$lib/types/poap').POAPToken}
@@ -16,23 +13,19 @@
    * @type {import('$lib/types/ens').ENSRecords}
    */
   export let ens
-
-  const avatarSrc =
-    ens.avatar ||
-    renderIcon(
-      {
-        seed: token.owner.id,
-        size: 20,
-        scale: 10,
-      },
-      createCanvas(200, 200),
-    ).toDataURL()
-
-  const backgrondSrc = `data:image/png;base64,${Buffer.from(background).toString('base64')}`
+  /**
+   * @type {string}
+   */
+  export let avatar
+  /**
+   * @type {string}
+   */
+  export let background
 </script>
 
 <div
   style:display="flex"
+  style:position="relative"
   style:align-items="center"
   style:justify-content="center"
   style:width="100%"
@@ -41,7 +34,7 @@
   style:font-weight="400"
 >
   <div style:display="flex" style:position="absolute" style:width="100%" style:height="100%">
-    <img src={backgrondSrc} alt="background" />
+    <img src={background} alt="background" />
   </div>
   <div
     style:display="flex"
@@ -52,6 +45,7 @@
     style:border-color="rgba(0, 0, 0, 0.3)"
     style:border-radius="12px"
     style:overflow="hidden"
+    style:z-index="1"
   >
     <div
       style:display="flex"
@@ -71,7 +65,7 @@
           style:border-radius="4px"
           style:overflow="hidden"
           style:object-fit="scale-down"
-          src={avatarSrc}
+          src={avatar}
           alt="{ens.name || `${token.owner.id.slice(0, 6)}…${token.owner.id.slice(-4)}`} avatar"
         />
       </div>