tmp

package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "clean": "rimraf ./.svelte-kit",
     "dev": "vite dev",
-    "build": "vite build",
+    "build": "pnpm sync && vite build",
     "preview": "vite preview",
     "sync": "svelte-kit sync",
     "validate:svelte": "pnpm sync && svelte-check --tsconfig ./tsconfig.json",
@@ -21,6 +21,7 @@
   "dependencies": {
     "@download/blockies": "^1.0.3",
     "@ensdomains/ensjs": "^3.2.0",
+    "@ethercorps/svelte-h2j": "^4.0.0",
     "@ethercorps/sveltekit-og": "^3.0.0",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/roboto-mono": "^5.0.16",
@@ -30,6 +31,7 @@
     "@urql/svelte": "^4.0.4",
     "date-fns": "^3.3.1",
     "dotenv": "^16.3.2",
+    "satori": "^0.10.13",
     "svelte": "^4.2.7",
     "tailwindcss": "^3.4.1",
     "viem": "^2.5.0"

src/lib/components/Seo/seo.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
   import type { POAPEventMetadata } from '$lib/types/poap'
 
-  const baseUrl = 'https://vpoap.vercel.app'
+  // const baseUrl = 'https://vpoap.vercel.app'
+  const baseUrl = 'https://vpoap-git-opengraph-goldsky.vercel.app'
   const title = 'Visual POAP'
   const description = 'Watch POAP mints live!'
 

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

@@ -1,7 +1,7 @@
 import { ImageResponse } from '@ethercorps/sveltekit-og'
+import { error } from '@sveltejs/kit'
 import { loadTokenData } from '../../token/[id]/data'
 import type { RequestHandler } from './$types'
-import { error } from '@sveltejs/kit'
 import OgToken from './og-token.svelte'
 import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff'
 import inter600 from '@fontsource/inter/files/inter-latin-600-normal.woff'

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

@@ -1,6 +1,6 @@
 <script>
-  import { renderIcon } from '@download/blockies'
-  import { createCanvas } from '@napi-rs/canvas'
+  // import { renderIcon } from '@download/blockies'
+  // import { createCanvas } from '@napi-rs/canvas'
   import { formatDistanceToNow } from 'date-fns'
 
   /**
@@ -16,16 +16,17 @@
    */
   export let ens
 
-  const avatarSrc =
-    ens.avatar ||
-    renderIcon(
-      {
-        seed: token.owner.id,
-        size: 20,
-        scale: 10,
-      },
-      createCanvas(200, 200),
-    ).toDataURL()
+  // const avatarSrc =
+  //   ens.avatar ||
+  //   renderIcon(
+  //     {
+  //       seed: token.owner.id,
+  //       size: 20,
+  //       scale: 10,
+  //     },
+  //     createCanvas(200, 200),
+  //   ).toDataURL()
+  const avatarSrc = ''
 </script>
 
 <div

vite.config.ts

@@ -8,7 +8,7 @@ export default defineConfig({
   },
   build: {
     rollupOptions: {
-      external: ['@resvg/resvg-js'],
+      external: ['@napi-rs/canvas', '@resvg/resvg-js', 'satori', '@ethercorps/svelte-h2j'],
     },
   },
 })