@liria24/og-image 1.0.0

package/nitro.config.ts

@@ -0,0 +1,104 @@
+import { readFileSync, readdirSync } from 'node:fs'
+import { fileURLToPath } from 'node:url'
+
+import { defineConfig } from 'nitro'
+
+export default defineConfig({
+    compatibilityDate: '2026-06-03',
+
+    preset: 'cloudflare_module',
+
+    devServer: {
+        port: 4000,
+    },
+
+    serverDir: true,
+
+    typescript: {
+        generateRuntimeConfigTypes: true,
+        generateTsConfig: true,
+        tsConfig: {
+            compilerOptions: {
+                baseUrl: null,
+                noEmit: true,
+            },
+        },
+    },
+
+    noExternals: ['takumi-js', '@takumi-rs/wasm', '@takumi-rs/helpers'],
+
+    cloudflare: {
+        deployConfig: true,
+        nodeCompat: true,
+        wrangler: {
+            name: 'og-image',
+            observability: {
+                enabled: true,
+                head_sampling_rate: 1,
+            },
+            kv_namespaces: [
+                {
+                    binding: 'OG_IMAGE_CACHE',
+                    id: 'e678f8e834784ea8b457786c695ded19',
+                },
+            ],
+        },
+    },
+
+    storage: {
+        'og-image': {
+            driver: 'cloudflare-kv-binding',
+            binding: 'OG_IMAGE_CACHE',
+        },
+    },
+    devStorage: {
+        'og-image': {
+            driver: 'fs-lite',
+            base: './.data/dev-storage/og-image',
+        },
+    },
+
+    imports: {
+        dirs: ['./server/utils'],
+    },
+
+    alias: {
+        '@src': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+
+    virtual: {
+        '#images': () => {
+            const assetsDir = fileURLToPath(new URL('./server/assets', import.meta.url))
+            const entries = readdirSync(assetsDir)
+                .filter((file) => file.endsWith('.svg'))
+                .map((file) => {
+                    const key = file.replace(/\.svg$/, '')
+                    const svgPath = fileURLToPath(
+                        new URL(`./server/assets/${file}`, import.meta.url),
+                    )
+                    const svg = readFileSync(svgPath, 'utf8')
+                    return [
+                        JSON.stringify(key),
+                        `{ src: ${JSON.stringify(key)}, svg: ${JSON.stringify(svg)} }`,
+                    ].join(': ')
+                })
+            return `export const images = { ${entries.join(', ')} }`
+        },
+        '#presets': () => {
+            const presetsDir = fileURLToPath(new URL('./server/presets', import.meta.url))
+            const names = readdirSync(presetsDir)
+                .filter((f) => f.endsWith('.ts'))
+                .map((f) => f.replace(/\.ts$/, ''))
+            const imports = names
+                .map((name, i) =>
+                    [
+                        `import _preset${i} from '${fileURLToPath(new URL(`./server/presets/${name}.ts`, import.meta.url)).replace(/\\/g, '/')}'`,
+                    ].join('\n'),
+                )
+                .join('\n')
+            const helper = `import { withPresetId as _withPresetId } from '${fileURLToPath(new URL('./server/utils/definePreset.ts', import.meta.url)).replace(/\\/g, '/')}'`
+            const exports = `export const allPresets = [${names.map((name, i) => `_withPresetId(_preset${i}, ${JSON.stringify(name)})`).join(', ')}]`
+            return [helper, imports, exports].join('\n')
+        },
+    },
+})

package/oxfmt.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'oxfmt'
+
+export default defineConfig({
+    tabWidth: 4,
+    semi: false,
+    singleQuote: true,
+    printWidth: 100,
+    sortTailwindcss: {
+        functions: ['cn'],
+    },
+    sortImports: {},
+    sortPackageJson: {},
+    ignorePatterns: [],
+    overrides: [{ files: ['**/*.yml', '**/*.yaml', '**/*.md'], options: { tabWidth: 2 } }],
+})

package/oxlint.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'oxlint'
+
+export default defineConfig({
+    plugins: ['import'],
+    categories: {
+        correctness: 'error',
+    },
+    options: {
+        typeAware: true,
+    },
+})

package/package.json

@@ -0,0 +1,61 @@
+{
+    "name": "@liria24/og-image",
+    "version": "1.0.0",
+    "description": "OG image generation server",
+    "bugs": {
+        "url": "https://github.com/liria24/og-image/issues"
+    },
+    "license": "MIT",
+    "author": "Liria",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/liria24/og-image.git"
+    },
+    "type": "module",
+    "exports": {
+        ".": {
+            "import": "./dist/client.mjs",
+            "types": "./dist/client.d.mts"
+        }
+    },
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "scripts": {
+        "prepare": "nitro prepare",
+        "build:client": "tsdown",
+        "build": "bun run build:client && nitro build",
+        "dev": "nitro dev",
+        "preview": "wrangler --cwd .output dev",
+        "test": "vitest run",
+        "typecheck": "tsc --noEmit",
+        "lint": "oxlint",
+        "lint:fix": "oxlint --fix",
+        "fmt": "oxfmt",
+        "fmt:check": "oxfmt --check",
+        "check": "bun run prepare && bun run typecheck && bun run lint && bun run fmt:check && bun run build && wrangler --cwd .output deploy --dry-run",
+        "deploy": "bun run check && wrangler --cwd .output deploy",
+        "prepublish": "bun run check"
+    },
+    "dependencies": {
+        "ofetch": "^2.0.0-alpha.3"
+    },
+    "devDependencies": {
+        "@cloudflare/workers-types": "^4.20260608.1",
+        "@types/node": "^25.9.2",
+        "bumpp": "^11.1.0",
+        "http-status-codes": "^2.3.0",
+        "nitro": "3.0.260603-beta",
+        "oxfmt": "^0.54.0",
+        "oxlint": "^1.69.0",
+        "oxlint-tsgolint": "^0.23.0",
+        "takumi-js": "^1.7.0",
+        "taze": "^19.14.1",
+        "tsdown": "^0.22.2",
+        "typescript": "6.0.3",
+        "valibot": "^1.4.1",
+        "vitest": "^4.1.8",
+        "wrangler": "^4.98.0"
+    }
+}

package/server/assets/avatio.svg

@@ -0,0 +1,5 @@
+<svg width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg" fill="currentColor" stroke="currentColor">
+    <g transform="matrix(0.0954084,0,0,0.0954084,-22.4782,-27.0578)">
+        <path d="M250.788,674.839C247.64,656.695 246,638.038 246,619C246,439.628 391.628,294 571,294C750.372,294 896,439.628 896,619C896,716.926 852.596,804.795 783.993,864.401L784.337,536.301C784.407,470.062 744.541,410.313 683.35,384.948C622.16,359.583 551.714,373.605 504.9,420.467L250.788,674.839ZM657.735,932.278C630.12,939.917 601.033,944 571,944C459.358,944 360.788,887.586 302.267,801.733L583.769,520.231C596.161,507.839 614.797,504.132 630.988,510.839C647.179,517.545 657.735,533.344 657.735,550.869L657.735,932.278Z" />
+    </g>
+</svg>

package/server/middleware/log.ts

@@ -0,0 +1,9 @@
+import { consola } from 'consola'
+import { defineHandler } from 'nitro'
+
+export default defineHandler((event) => {
+    if (import.meta.dev)
+        consola
+            .withTag(`Request ${new Date().toLocaleTimeString()}`)
+            .info(`${event.req.method.toUpperCase()}: ${event.url.pathname}`)
+})

package/server/presets/avatio.ts

@@ -0,0 +1,97 @@
+import * as v from 'valibot'
+
+import { images } from '#images'
+
+const footerLogo = defineSvgImage(images.avatio!, {
+    src: 'avatio-footer-logo',
+    color: '#18181b',
+    width: 80,
+    height: 80,
+})
+
+export default definePreset({
+    version: 'v1',
+    props: v.object({
+        title: v.pipe(v.string(), v.trim(), v.minLength(1), v.maxLength(120)),
+        description: v.optional(v.pipe(v.string(), v.trim(), v.maxLength(240))),
+    }),
+    fonts: [
+        { family: 'Geist', options: { weight: '100..900' } },
+        { family: 'Noto Sans JP', options: { weight: '100..900' } },
+    ],
+    persistentImages: [footerLogo.image],
+    fontText: ({ title, description }) => [title, description],
+    content: ({ title, description }) => ({
+        type: 'container',
+        style: {
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            padding: '24px',
+            backgroundColor: '#b7b7c0',
+            color: '#18181b',
+            fontFamily: 'Geist, Noto Sans JP',
+        },
+        children: [
+            {
+                type: 'container',
+                style: {
+                    flex: 1,
+                    display: 'flex',
+                    flexDirection: 'column',
+                    justifyContent: 'space-between',
+                    padding: '72px',
+                    borderRadius: '36px',
+                    backgroundColor: '#ffffff',
+                },
+                children: [
+                    {
+                        type: 'container',
+                        style: {
+                            display: 'flex',
+                            flexDirection: 'column',
+                            gap: '24px',
+                        },
+                        children: [
+                            {
+                                type: 'text',
+                                text: title,
+                                style: {
+                                    fontSize: '68px',
+                                    fontWeight: 800,
+                                    lineHeight: 1.12,
+                                    letterSpacing: '0px',
+                                    maxWidth: '960px',
+                                },
+                            },
+                            ...(description
+                                ? [
+                                      {
+                                          type: 'text' as const,
+                                          text: description,
+                                          style: {
+                                              fontSize: '34px',
+                                              fontWeight: 500,
+                                              lineHeight: 1.45,
+                                              color: '#71717b',
+                                              maxWidth: '900px',
+                                          },
+                                      },
+                                  ]
+                                : []),
+                        ],
+                    },
+                    {
+                        type: 'container',
+                        style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'flex-end',
+                        },
+                        children: [footerLogo.node],
+                    },
+                ],
+            },
+        ],
+    }),
+})

package/server/routes/health.get.ts

@@ -0,0 +1,3 @@
+import { defineHandler } from 'nitro'
+
+export default defineHandler(() => 'ok')

package/server/routes/images/[imageId].delete.ts

@@ -0,0 +1,49 @@
+import { defineHandler } from 'nitro'
+import { useStorage } from 'nitro/storage'
+import * as v from 'valibot'
+
+const cleanupKeyPrefixes = ['descriptor:', 'png:', 'failed:'] as const
+
+const request = {
+    params: v.object({
+        imageId: v.pipe(
+            v.string(),
+            v.regex(/^[a-f0-9]{64}\.png$/),
+            v.transform((v) => v.replace(/\.png$/i, '')),
+        ),
+    }),
+    body: v.object({
+        secret: v.literal(process.env.OG_IMAGE_SECRET ?? ''),
+    }),
+}
+
+export default defineHandler(async (event) => {
+    await validateBody(event, request.body)
+    const { imageId } = await validateParams(event, request.params)
+
+    try {
+        const storage = useStorage('og-image')
+        const keys = cleanupKeyPrefixes.map((prefix) => `${prefix}${imageId}`)
+        const existingKeys = (
+            await Promise.all(
+                keys.map(async (key) => ((await storage.hasItem(key)) ? key : undefined)),
+            )
+        ).filter((key): key is string => key !== undefined)
+
+        await Promise.all(existingKeys.map((key) => storage.removeItem(key)))
+
+        console.info('Image cleaned up', { imageId, deleted: existingKeys.length })
+
+        event.res.headers.set('cache-control', 'no-store')
+        return {
+            imageId,
+            deleted: existingKeys.length,
+        }
+    } catch (error: unknown) {
+        console.error('Failed to cleanup image', {
+            imageId,
+            error: error instanceof Error ? error.message : String(error),
+        })
+        throw serverError.internalServerError()
+    }
+})

package/server/routes/images/[imageId].get.ts

@@ -0,0 +1,69 @@
+import { defineHandler } from 'nitro'
+import { useStorage } from 'nitro/storage'
+import * as v from 'valibot'
+
+const PNG_TTL_SECONDS = 60 * 60 * 24 * 30 // 30 days
+const FAILED_TTL_SECONDS = 60 * 5 // 5 minutes
+const SUCCESS_CACHE_CONTROL = 'public, max-age=31536000, immutable'
+
+const request = {
+    params: v.object({
+        imageId: v.pipe(
+            v.string(),
+            v.regex(/^[a-f0-9]{64}\.png$/),
+            v.transform((v) => v.replace(/\.png$/i, '')),
+        ),
+    }),
+}
+
+export default defineHandler(async (event) => {
+    const { imageId } = await validateParams(event, request.params)
+
+    const storage = useStorage('og-image')
+
+    try {
+        const cachedPng = await storage.getItemRaw<ArrayBuffer>(`png:${imageId}`)
+        if (cachedPng) {
+            event.res.headers.set('content-type', 'image/png')
+            event.res.headers.set('cache-control', SUCCESS_CACHE_CONTROL)
+            return Uint8Array.from(pngBytes(cachedPng)).buffer
+        }
+
+        const failed = await storage.getItem(`failed:${imageId}`)
+        if (failed) throw serverError.notFound()
+
+        const d = await storage.getItem(`descriptor:${imageId}`)
+        const parsed = typeof d === 'string' ? JSON.parse(d) : d
+        const result = v.safeParse(ogImageDescriptorBaseSchema, parsed)
+        if (!result.success) throw serverError.notFound()
+
+        const preset = getPreset(result.output)
+
+        const propsResult = v.safeParse(preset.props, result.output.props)
+        if (!propsResult.success) throw serverError.notFound()
+        const descriptor = { ...result.output, props: propsResult.output }
+
+        const renderStart = Date.now()
+        const png = await withRenderTimeout(descriptor, renderDescriptor)
+        await storage.setItemRaw(`png:${imageId}`, pngBytes(png), { ttl: PNG_TTL_SECONDS })
+
+        console.info('Image rendered on demand', {
+            imageId,
+            preset: descriptor.slug,
+            durationMs: Date.now() - renderStart,
+        })
+
+        event.res.headers.set('content-type', 'image/png')
+        event.res.headers.set('cache-control', SUCCESS_CACHE_CONTROL)
+        return Uint8Array.from(pngBytes(png)).buffer
+    } catch (error: unknown) {
+        console.error('On-demand render failed', {
+            imageId,
+            error: error instanceof Error ? error.message : String(error),
+        })
+
+        await storage.setItem(`failed:${imageId}`, '1', { ttl: FAILED_TTL_SECONDS })
+
+        throw serverError.internalServerError()
+    }
+})

package/server/routes/images/[slug]/[version].post.ts

@@ -0,0 +1,136 @@
+import { defineHandler } from 'nitro'
+import { useStorage } from 'nitro/storage'
+import * as v from 'valibot'
+
+import { allPresets } from '#presets'
+
+const PNG_TTL_SECONDS = 60 * 60 * 24 * 30 // 30 days
+const FAILED_TTL_SECONDS = 60 * 5 // 5 minutes
+
+const request = {
+    params: v.object({
+        slug: v.union([...allPresets.map((preset) => v.literal(preset.slug))]),
+        version: v.string(),
+    }),
+    body: v.object({
+        secret: v.literal(process.env.OG_IMAGE_SECRET ?? ''),
+        props: v.object({
+            title: v.string(),
+            description: v.string(),
+        }),
+    }),
+}
+
+type CanonicalValue =
+    | string
+    | number
+    | boolean
+    | null
+    | CanonicalValue[]
+    | { [key: string]: CanonicalValue }
+
+const canonicalize = (value: unknown): CanonicalValue => {
+    if (value === null) return null
+    if (Array.isArray(value)) return value.map((item) => canonicalize(item))
+    if (typeof value === 'object')
+        return Object.fromEntries(
+            Object.entries(value as Record<string, unknown>)
+                .filter(([, entry]) => entry !== undefined)
+                .sort(([a], [b]) => a.localeCompare(b))
+                .map(([key, entry]) => [key, canonicalize(entry)]),
+        )
+    if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean')
+        return value
+    return null
+}
+
+export default defineHandler(async (event) => {
+    const { slug, version } = await validateParams(event, request.params)
+    const { props } = await validateBody(event, request.body)
+
+    const preset = getPreset({ slug, version })
+
+    const propsResult = v.safeParse(preset.props, props)
+    if (!propsResult.success) throw serverError.badRequest()
+
+    const descriptor: OgImageDescriptor = {
+        slug: preset.slug,
+        version: preset.version,
+        props: propsResult.output,
+    }
+    const imageId = await sha256Hex(
+        JSON.stringify(
+            canonicalize({
+                slug: descriptor.slug,
+                version: descriptor.version,
+                props: descriptor.props,
+            }),
+        ),
+    )
+
+    const storage = useStorage('og-image')
+
+    const existingDescriptor = await storage.getItem(`descriptor:${imageId}`)
+
+    if (!existingDescriptor)
+        try {
+            await storage.setItem(
+                `descriptor:${imageId}`,
+                JSON.stringify(
+                    canonicalize({
+                        slug: descriptor.slug,
+                        version: descriptor.version,
+                        props: descriptor.props,
+                    }),
+                ),
+            )
+
+            const start = Date.now()
+            event.waitUntil(
+                (async () => {
+                    try {
+                        const png = await withRenderTimeout(descriptor, renderDescriptor)
+                        await storage.setItemRaw(`png:${imageId}`, pngBytes(png), {
+                            ttl: PNG_TTL_SECONDS,
+                        })
+                        console.info('Image rendered', {
+                            imageId,
+                            preset: descriptor.slug,
+                            durationMs: Date.now() - start,
+                        })
+                    } catch (error: unknown) {
+                        console.error('Background render failed', {
+                            imageId,
+                            preset: descriptor.slug,
+                            durationMs: Date.now() - start,
+                            error: error instanceof Error ? error.message : String(error),
+                        })
+                        await storage.setItem(`failed:${imageId}`, '1', { ttl: FAILED_TTL_SECONDS })
+                    }
+                })(),
+            )
+
+            console.info('Image issued', {
+                imageId,
+                preset: descriptor.slug,
+                props: descriptor.props,
+            })
+        } catch (error: unknown) {
+            console.error('Failed to issue image', {
+                imageId,
+                error: error instanceof Error ? error.message : String(error),
+            })
+            throw serverError.internalServerError()
+        }
+    else {
+        console.info('Image already exists', {
+            imageId,
+            preset: descriptor.slug,
+        })
+    }
+
+    event.res.status = 202
+    return {
+        path: `/images/${imageId}.png`,
+    }
+})

package/server/routes/images/index.delete.ts

@@ -0,0 +1,40 @@
+import { defineHandler } from 'nitro'
+import { useStorage } from 'nitro/storage'
+import * as v from 'valibot'
+
+const cleanupKeyPrefixes = ['descriptor:', 'png:', 'failed:'] as const
+
+const request = {
+    body: v.object({
+        secret: v.literal(process.env.OG_IMAGE_SECRET ?? ''),
+    }),
+}
+
+export default defineHandler(async (event) => {
+    await validateBody(event, request.body)
+
+    try {
+        const storage = useStorage('og-image')
+        const keys = [
+            ...new Set(
+                (
+                    await Promise.all(cleanupKeyPrefixes.map((prefix) => storage.getKeys(prefix)))
+                ).flat(),
+            ),
+        ]
+
+        await Promise.all(keys.map((key) => storage.removeItem(key)))
+
+        console.info('Images cleaned up', { deleted: keys.length })
+
+        event.res.headers.set('cache-control', 'no-store')
+        return {
+            deleted: keys.length,
+        }
+    } catch (error: unknown) {
+        console.error('Failed to cleanup images', {
+            error: error instanceof Error ? error.message : String(error),
+        })
+        throw serverError.internalServerError()
+    }
+})

package/server/routes/index.get.ts

@@ -0,0 +1,5 @@
+import { defineHandler } from 'nitro'
+
+export default defineHandler(async () => {
+    return 'POST to `/images/[preset]/[version]`'
+})