From babe3229006126cc2db0e7acb73130c5cad0c3d2 Mon Sep 17 00:00:00 2001
From: Pat Sissons <patricksissons@gmail.com>
Date: Sat, 17 Feb 2024 14:18:09 -0800
Subject: [PATCH] tmp

---
 package.json                                  |   5 +-
 pnpm-lock.yaml                                |  24 +--
 src/lib/components/Seo/seo.svelte             |   3 +-
 src/routes/og/[token_id]/+server.ts           |  44 +++---
 .../og/[token_id]/svelte-to-png/index.ts      |  34 +++++
 .../og/[token_id]/svelte-to-png/inlineCSS.ts  |  80 ++++++++++
 .../[token_id]/svelte-to-png/svelteToJsx.ts   |  31 ++++
 .../svelte-to-png/toReactElement.ts           | 139 ++++++++++++++++++
 vite.config.ts                                |   8 +-
 9 files changed, 331 insertions(+), 37 deletions(-)
 create mode 100644 src/routes/og/[token_id]/svelte-to-png/index.ts
 create mode 100644 src/routes/og/[token_id]/svelte-to-png/inlineCSS.ts
 create mode 100644 src/routes/og/[token_id]/svelte-to-png/svelteToJsx.ts
 create mode 100644 src/routes/og/[token_id]/svelte-to-png/toReactElement.ts

diff --git a/package.json b/package.json
index cc9a019..72119cf 100644
--- a/package.json
+++ b/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"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4372f3c..f7b3df3 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,9 +14,9 @@ importers:
       '@ensdomains/ensjs':
         specifier: ^3.2.0
         version: 3.2.0(typescript@5.3.3)(viem@2.5.0)
-      '@ethercorps/sveltekit-og':
-        specifier: ^3.0.0
-        version: 3.0.0(svelte@4.2.9)
+      '@ethercorps/svelte-h2j':
+        specifier: ^0.1.0
+        version: 0.1.0(svelte@4.2.9)
       '@fontsource/inter':
         specifier: ^5.0.16
         version: 5.0.16
@@ -41,6 +41,9 @@ importers:
       dotenv:
         specifier: ^16.3.2
         version: 16.3.2
+      satori:
+        specifier: ^0.10.11
+        version: 0.10.13
       svelte:
         specifier: ^4.2.7
         version: 4.2.9
@@ -539,17 +542,6 @@ packages:
       svelte: 4.2.9
     dev: false
 
-  /@ethercorps/sveltekit-og@3.0.0(svelte@4.2.9):
-    resolution: {integrity: sha512-CQRmcfCPnTEqP+EeHBE7wWp1sNxpBaT4Fb5Js5fGnWEgFFIDbJEEcFiT0Uwc1CteolXY+CyTOg7mokcOtu3d7w==}
-    peerDependencies:
-      svelte: ^4.0.0
-    dependencies:
-      '@ethercorps/svelte-h2j': 0.1.0(svelte@4.2.9)
-      '@resvg/resvg-js': 2.6.0
-      satori: 0.10.13
-      svelte: 4.2.9
-    dev: false
-
   /@ethersproject/abi@5.0.7:
     resolution: {integrity: sha512-Cqktk+hSIckwP/W8O47Eef60VwmoSC/L3lY0+dIBhQPCNn9E4V7rwmm2aFrNRRDJfFlGuZ1khkQUOc3oBX+niw==}
     dependencies:
@@ -1469,14 +1461,14 @@ packages:
     resolution: {integrity: sha512-N1ZhksgwD3OBlwTv3R6KFEcPojl/W4ElJOeCZdi+vuI5QmTFwLq3OFf2zd2ROpKvxFdgZ6hUpb0dx9bVNEwYCA==}
     dependencies:
       '@noble/curves': 1.2.0
-      '@noble/hashes': 1.3.2
+      '@noble/hashes': 1.3.3
       '@scure/base': 1.1.5
     dev: false
 
   /@scure/bip39@1.2.1:
     resolution: {integrity: sha512-Z3/Fsz1yr904dduJD0NpiyRHhRYHdcnyh73FZWiV+/qhWi83wNJ3NWolYqCEN+ZWsUz2TWwajJggcRE9r1zUYg==}
     dependencies:
-      '@noble/hashes': 1.3.2
+      '@noble/hashes': 1.3.3
       '@scure/base': 1.1.5
     dev: false
 
diff --git a/src/lib/components/Seo/seo.svelte b/src/lib/components/Seo/seo.svelte
index 345eef9..3327a16 100644
--- a/src/lib/components/Seo/seo.svelte
+++ b/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!'
 
diff --git a/src/routes/og/[token_id]/+server.ts b/src/routes/og/[token_id]/+server.ts
index fbe43be..8552b23 100644
--- a/src/routes/og/[token_id]/+server.ts
+++ b/src/routes/og/[token_id]/+server.ts
@@ -1,40 +1,50 @@
-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())
+
+    console.log({
+      inter400Data,
+      inter600Data,
+      robotoMono400Data,
+    })
+
+    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')
+  }
 }
diff --git a/src/routes/og/[token_id]/svelte-to-png/index.ts b/src/routes/og/[token_id]/svelte-to-png/index.ts
new file mode 100644
index 0000000..b797176
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/index.ts
@@ -0,0 +1,34 @@
+import { Resvg } from '@resvg/resvg-js'
+import satori, { type SatoriOptions } from 'satori'
+import type { ComponentType, SvelteComponent } from 'svelte'
+import { svelteComponentToJsx } from './svelteToJsx'
+
+// this is all a cleaned up version of https://github.com/etherCorps/svelte-og and https://github.com/etherCorps/svelte-h2j
+
+export async function svelteToPngResponse(
+  component: ComponentType<SvelteComponent>,
+  props: Record<string, unknown>,
+  options: SatoriOptions,
+) {
+  const reactElement = svelteComponentToJsx(component, props)
+  const svg = await satori(reactElement, options)
+  const resvg = new Resvg(svg, {
+    fitTo: {
+      mode: 'width',
+      value: 'width' in options ? options.width : 1200,
+    },
+    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,
+  })
+}
diff --git a/src/routes/og/[token_id]/svelte-to-png/inlineCSS.ts b/src/routes/og/[token_id]/svelte-to-png/inlineCSS.ts
new file mode 100644
index 0000000..3ffcb0e
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/inlineCSS.ts
@@ -0,0 +1,80 @@
+import type { Style } from 'svelte/types/compiler/interfaces'
+
+// 3. Make it better if possible
+export function extractStyles(cssAst: Style) {
+  const styles: Record<string, string> = {}
+  if (Object.hasOwn(cssAst, 'children') && cssAst.children.length) {
+    for (const { prelude, block } of cssAst.children) {
+      if (hasChildren(prelude)) {
+        for (const selector of prelude.children) {
+          if (!hasClassnames(selector)) continue
+
+          const classNames = selector.children
+            .filter((node) => node.type === 'ClassSelector')
+            .map((node) => node.name)
+          for (const className of classNames) {
+            if (!hasDeclarations(block)) continue
+
+            styles[className] = block.children
+              .map((declaration) => {
+                return `${declaration.property}: ${declaration.value.children
+                  .map((identifier) => {
+                    return identifier.name
+                  })
+                  .join(' ')}`
+              })
+              .join('; ')
+          }
+        }
+      }
+    }
+  }
+  return styles
+
+  function hasChildren(node: unknown): node is { children: unknown[] } {
+    return Boolean(
+      node &&
+        typeof node === 'object' &&
+        'children' in node &&
+        Array.isArray(node.children) &&
+        node.children.length > 0,
+    )
+  }
+
+  function hasClassnames(node: unknown): node is { children: { type: string; name: string }[] } {
+    if (!hasChildren(node)) return false
+
+    const [first] = node.children
+
+    return Boolean(
+      first &&
+        typeof first === 'object' &&
+        'type' in first &&
+        typeof first.type === 'string' &&
+        'name' in first &&
+        typeof first.name === 'string',
+    )
+  }
+
+  function hasDeclarations(
+    node: unknown,
+  ): node is { children: { property: string; value: { children: { name: string }[] } }[] } {
+    if (!hasChildren(node)) return false
+
+    const [first] = node.children
+
+    return Boolean(
+      first &&
+        typeof first === 'object' &&
+        'property' in first &&
+        typeof first.property === 'string' &&
+        'value' in first &&
+        typeof first.value === 'object' &&
+        hasChildren(first.value) &&
+        first.value.children[0] &&
+        typeof first.value.children[0] === 'object' &&
+        'name' in first.value.children[0] &&
+        typeof first.value.children[0].name === 'string',
+    )
+  }
+}
diff --git a/src/routes/og/[token_id]/svelte-to-png/svelteToJsx.ts b/src/routes/og/[token_id]/svelte-to-png/svelteToJsx.ts
new file mode 100644
index 0000000..333c307
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/svelteToJsx.ts
@@ -0,0 +1,31 @@
+import type { ComponentType, SvelteComponent } from 'svelte'
+import { toReactElement } from './toReactElement.js'
+
+type SvelteSSRComponent = ComponentType<SvelteComponent> & {
+  render: (props: Record<string, unknown>) => {
+    html: string
+    css: { code: string }
+  }
+}
+
+export function svelteComponentToJsx(
+  component: ComponentType<SvelteComponent>,
+  props: Record<string, unknown>,
+) {
+  if (!isSvelteSSRComponent(component)) throw new Error('Component is not a Svelte SSR component')
+
+  const SvelteRenderedMarkup = component.render(props)
+  let htmlTemplate = SvelteRenderedMarkup.html || ''
+
+  if (SvelteRenderedMarkup.css.code) {
+    htmlTemplate = `${htmlTemplate}<style>${SvelteRenderedMarkup.css.code}</style>`
+  }
+
+  return toReactElement(htmlTemplate)
+
+  function isSvelteSSRComponent(
+    component: ComponentType<SvelteComponent>,
+  ): component is SvelteSSRComponent {
+    return Boolean('render' in component && typeof component.render === 'function')
+  }
+}
diff --git a/src/routes/og/[token_id]/svelte-to-png/toReactElement.ts b/src/routes/og/[token_id]/svelte-to-png/toReactElement.ts
new file mode 100644
index 0000000..5aafb4a
--- /dev/null
+++ b/src/routes/og/[token_id]/svelte-to-png/toReactElement.ts
@@ -0,0 +1,139 @@
+/* eslint-disable @typescript-eslint/no-unsafe-return */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+import { walk, parse } from 'svelte/compiler'
+import type { Ast } from 'svelte/types/compiler/interfaces'
+import { extractStyles } from './inlineCSS.js'
+/* Start of code from satori-html for cssToObject converter*/
+const camelize = (ident: string) =>
+  ident.replace(/-([a-z])/g, (_, char) => String(char).toUpperCase())
+const cssToObject = (str: string) => {
+  const obj: Record<string, string> = {}
+  let t = 0
+  let pair = ['', '']
+  const flags: Record<string, number> = { '(': 0, ')': 0 }
+  for (const c of str) {
+    if (!flags['('] && c === ':') {
+      t = 1
+    } else if (c === ';') {
+      const [decl = '', value = ''] = pair
+      obj[camelize(decl.trim())] = value.trim()
+      t = 0
+      pair = ['', '']
+    } else {
+      pair[t] += c
+      switch (c) {
+        case '(': {
+          flags[c]++
+          break
+        }
+        case ')': {
+          flags['(']--
+          break
+        }
+      }
+    }
+  }
+  const [decl = '', value = ''] = pair
+  if (decl.trim() && value.trim()) {
+    obj[camelize(decl.trim())] = value.trim()
+  }
+
+  return obj
+}
+
+interface VNode {
+  type: string
+  props: {
+    style?: Record<string, unknown>
+    children?: string | VNode | VNode[]
+    [prop: string]: unknown
+  }
+}
+/* End of satori-html */
+
+export function toReactElement(htmlString: string): VNode {
+  const nodeMap = new WeakMap()
+  const root: VNode = {
+    type: 'div',
+    props: {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        width: '100%',
+        height: '100%',
+      },
+      children: [],
+    },
+  }
+  const svelteAST: Ast = parse(htmlString)
+  let styles: Record<string, string> = {}
+  if (svelteAST && svelteAST.css) {
+    styles = extractStyles(svelteAST.css)
+  }
+
+  walk(svelteAST as any, {
+    enter(node: any, parent: any, prop, index) {
+      let newNode: any = {}
+      if (node.type === 'Fragment') {
+        nodeMap.set(node, root)
+      } else if (node.type === 'Element') {
+        newNode.type = node.name
+        let { ...props } = node.attributes
+        if (node.attributes.length > 0) {
+          let classStyles: string | null = null
+          let styleExists = false
+          node.attributes.forEach((attribute: any) => {
+            if (Object.keys(styles).length && attribute.name === 'class') {
+              classStyles = styles[attribute.value[0].data]
+            }
+            if (attribute.name === 'style') {
+              styleExists = true
+              const newRawStyle = classStyles
+                ? attribute.value[0].data + '; ' + classStyles
+                : attribute.value[0].data
+              props['style'] = cssToObject(newRawStyle) as any
+            } else {
+              props[attribute.name] = attribute.value[0].data
+            }
+          })
+          if (Object.keys(styles).length && !styleExists && classStyles) {
+            props['style'] = cssToObject(classStyles)
+          }
+          delete props[0]
+        }
+        // numbered props failing on svgs
+        props = Object.entries(props).reduce((newProps: any, [key, value]) => {
+          if (Number.isNaN(Number(key))) {
+            newProps[key] = value as any
+          }
+          return newProps
+        }, {})
+        props.children = [] as unknown as string
+        Object.assign(newNode, { props })
+        nodeMap.set(node, newNode)
+        if (parent && index != null) {
+          const newParent = nodeMap.get(parent)
+          newParent.props.children[index] = newNode
+        }
+      } else if (node.type === 'Text') {
+        newNode = node.data.trim()
+        if (newNode) {
+          if (parent && parent.type !== 'Attribute') {
+            const newParent = nodeMap.get(parent)
+            if (parent.children.length === 1) {
+              newParent.props.children = newNode
+            } else if (index != null) {
+              newParent.props.children[index] = newNode
+            }
+          }
+        }
+      }
+    },
+  })
+
+  return root
+}
diff --git a/vite.config.ts b/vite.config.ts
index 5b0fa4b..c6ed204 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -8,7 +8,13 @@ export default defineConfig({
   },
   build: {
     rollupOptions: {
-      external: ['@resvg/resvg-js'],
+      external: [
+        '@ethercorps/svelte-h2j',
+        '@napi-rs/canvas',
+        '@resvg/resvg-js',
+        'satori',
+        'svelte/compiler',
+      ],
     },
   },
 })