From 458b185b83305e488fb413029a8743d119d81626 Mon Sep 17 00:00:00 2001
From: Pat Sissons <patricksissons@gmail.com>
Date: Sun, 18 Feb 2024 10:13:39 -0800
Subject: [PATCH] tmp

---
 src/lib/components/Seo/seo.svelte             |  4 +-
 src/lib/components/Token/token.svelte         |  2 +-
 src/routes/og/[token_id]/+server.ts           | 58 +++++++++++++------
 .../og/[token_id]/debug/+page.server.ts       | 18 ++++++
 src/routes/og/[token_id]/og-token.svelte      | 31 +++++-----
 5 files changed, 72 insertions(+), 41 deletions(-)

diff --git a/src/lib/components/Seo/seo.svelte b/src/lib/components/Seo/seo.svelte
index 3327a16..75acf5f 100644
--- a/src/lib/components/Seo/seo.svelte
+++ b/src/lib/components/Seo/seo.svelte
@@ -13,9 +13,7 @@
   $: ({ ids, image, seoTitle, seoDescription } = hydrate(metadata))
 
   function hydrate(metadata?: POAPEventMetadata | POAPEventMetadata[]) {
-    const image = tokenId
-      ? `https://${baseUrl}/og/${tokenId}`
-      : `https://${baseUrl}/images/twitter-card.png`
+    const image = tokenId ? `${baseUrl}/og/${tokenId}` : `${baseUrl}/images/twitter-card.png`
 
     if (!metadata) {
       return {
diff --git a/src/lib/components/Token/token.svelte b/src/lib/components/Token/token.svelte
index 6c6dfbd..ca942c7 100644
--- a/src/lib/components/Token/token.svelte
+++ b/src/lib/components/Token/token.svelte
@@ -31,7 +31,7 @@
 
   $: if (!ens) {
     fetchENS(token.owner.id)
-      .then((res) => {
+      .then((res: ENSRecords) => {
         ens = res
       })
       .catch(console.error)
diff --git a/src/routes/og/[token_id]/+server.ts b/src/routes/og/[token_id]/+server.ts
index a58ac20..a052d0e 100644
--- a/src/routes/og/[token_id]/+server.ts
+++ b/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')
diff --git a/src/routes/og/[token_id]/debug/+page.server.ts b/src/routes/og/[token_id]/debug/+page.server.ts
index 0f4ed37..f3a463a 100644
--- a/src/routes/og/[token_id]/debug/+page.server.ts
+++ b/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,
   }
 }
diff --git a/src/routes/og/[token_id]/og-token.svelte b/src/routes/og/[token_id]/og-token.svelte
index c062bae..5667f69 100644
--- a/src/routes/og/[token_id]/og-token.svelte
+++ b/src/routes/og/[token_id]/og-token.svelte
@@ -1,8 +1,6 @@
 <script>
-  import { renderIcon } from '@download/blockies'
-  import { createCanvas } from '@napi-rs/canvas'
+  /* eslint-disable @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call */
   import { formatDistanceToNow } from 'date-fns'
-  import background from './og-background.png?arraybuffer'
 
   /**
    * @type {import('$lib/types/poap').POAPToken}
@@ -16,23 +14,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 +35,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 +46,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 +66,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>