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..55dbd45 100644 --- a/src/routes/og/[token_id]/og-token.svelte +++ b/src/routes/og/[token_id]/og-token.svelte @@ -1,8 +1,5 @@
- background + background