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,7 +21,7 @@
   "dependencies": {
     "@download/blockies": "^1.0.3",
     "@ensdomains/ensjs": "^3.2.0",
-    "@ethercorps/sveltekit-og": "^3.0.0",
+    "@ethercorps/svelte-h2j": "^0.1.0",
     "@fontsource/inter": "^5.0.16",
     "@fontsource/roboto-mono": "^5.0.16",
     "@napi-rs/canvas": "^0.1.45",
@@ -30,6 +30,7 @@
     "@urql/svelte": "^4.0.4",
     "date-fns": "^3.3.1",
     "dotenv": "^16.3.2",
+    "satori": "^0.10.11",
     "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,40 +1,44 @@
-import { ImageResponse } from '@ethercorps/sveltekit-og'
-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'
 import robotoMono400 from '@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff'
+import { error } from '@sveltejs/kit'
+import { loadTokenData } from '../../token/[id]/data'
+import OgToken from './og-token.svelte'
+import { svelteToPngResponse } from './svelte-to-png'
+import type { RequestHandler } from './$types'
 
 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')
+  try {
+    const inter400Data = await fetch(inter400).then((res) => res.arrayBuffer())
+    const inter600Data = await fetch(inter600).then((res) => res.arrayBuffer())
+    const robotoMono400Data = await fetch(robotoMono400).then((res) => res.arrayBuffer())
+
+    const props = await loadTokenData(token_id, fetch)
+    if (!props.token) throw error(404, 'Token not found')
 
-  return new ImageResponse(
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any
-    OgToken as any,
-    {
+    return await svelteToPngResponse(OgToken, props, {
       width: 1200,
       height: 630,
       fonts: [
         {
           name: 'sans-serif',
-          data: await fetch(inter400).then((res) => res.arrayBuffer()),
+          data: inter400Data,
           weight: 400,
         },
         {
           name: 'sans-serif',
-          data: await fetch(inter600).then((res) => res.arrayBuffer()),
+          data: inter600Data,
           weight: 600,
         },
         {
           name: 'monospace',
-          data: await fetch(robotoMono400).then((res) => res.arrayBuffer()),
+          data: robotoMono400Data,
           weight: 400,
         },
       ],
-    },
-    props,
-  )
+    })
+  } 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]/svelte-to-png/index.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType, SvelteComponent } from 'svelte'
+import type { SatoriOptions } from 'satori'
+
+export function svelteToPngResponse(
+  component: ComponentType<SvelteComponent>,
+  props: Record<string, unknown>,
+  options: SatoriOptions,
+): Promise<Response>

src/routes/og/[token_id]/svelte-to-png/index.js

@@ -0,0 +1,43 @@
+import satori from 'satori'
+import { Resvg } from '@resvg/resvg-js'
+
+export async function svelteToPngResponse(component, props, options) {
+  let toReactElement
+  // ugh, this is ugly
+  await import('@ethercorps/svelte-h2j').then((module) => {
+    toReactElement = module.toReactElement
+  })
+
+  const reactElement = svelteComponentToJsx(component, props)
+  const svg = await satori(reactElement, options)
+
+  const resvg = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: options.width,
+    },
+    font: {
+      // It will be faster to disable loading system fonts.
+      loadSystemFonts: false,
+    },
+  })
+  const pngData = resvg.render()
+  const pngBuffer = pngData.asPng()
+
+  return new Response(pngBuffer, {
+    headers: {
+      'Content-Type': 'image/png',
+      'Cache-Control': 'public, immutable, no-transform, max-age=31536000',
+    },
+    status: 200,
+  })
+
+  function svelteComponentToJsx(component, props) {
+    const SvelteRenderedMarkup = component.render(props)
+    let htmlTemplate = SvelteRenderedMarkup.html || ''
+    if (SvelteRenderedMarkup.css.code) {
+      htmlTemplate = `${htmlTemplate}<style>${SvelteRenderedMarkup.css.code}</style>`
+    }
+    return toReactElement(htmlTemplate)
+  }
+}

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'],
     },
   },
 })