Deno で Open Graph 画像の生成をしてみる

├── deno.json
├── import_map.json
├── handler.tsx
└── main.ts

{
  "tasks": {
    "start": "deno run --allow-env --allow-net=unpkg.com,0.0.0.0:8000,fonts.googleapis.com,fonts.gstatic.com,cdn.jsdelivr.net main.ts",
    "watch": "deno run --allow-env --allow-net --watch main.ts"
  },
  "importMap": "./import_map.json",
  "compilerOptions": {
    "jsx": "react",
    "jsxFactory": "React.createElement",
    "jsxFragmentFactory": "React.Fragment"
  }
}

{
  "imports": {
    "std/": "https://deno.land/std@0.167.0/",
    "react": "https://esm.sh/react@18.2.0",
    "og_edge/": "https://deno.land/x/og_edge@0.0.4/"
  }
}

import React from 'react'
import { ImageResponse } from 'og_edge/mod.ts'

const bg = `<svg xmlns= ...your svg here... </svg>`

async function loadFont(text: string) {
  const css = await (
    await fetch(`https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400&text=${encodeURIComponent(text)}`, {
      headers: {
        // to returns TTF.
        'User-Agent':
          'Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_6_8; de-at) AppleWebKit/533.21.1 (KHTML, like Gecko) Version/5.0.5 Safari/533.21.1',
      },
    })
  ).text()

  const srcIndex = css.indexOf('src: url(')
  if (srcIndex === -1) {
    throw new Error('Failed to load font')
  }
  const urlStart = css.substring(srcIndex + 'src: url('.length)
  const endIndex = urlStart.lastIndexOf(') format(')
  if (endIndex === -1) {
    throw new Error('Failed to load font')
  }

  return await (await fetch(urlStart.substring(0, endIndex))).arrayBuffer()
}

export async function handler(req: Request) {
  const { searchParams, hostname } = new URL(req.url)

  if (!searchParams.has('title')) {
    return new Response(JSON.stringify({ message: `query "title" is required.` }), {
      headers: { 'content-tyle': 'application/json; charset=UTF-8' },
      status: 400,
    })
  }

  const title = Array.from(searchParams.get('title') ?? '')
    .slice(0, 120)
    .join('')
  const fontData = await loadFont(title)

  return new ImageResponse(
    (
      <div
        style={{
          color: 'black',
          width: '100%',
          height: '100%',
          padding: '100px',
          textAlign: 'center',
          justifyContent: 'center',
          alignItems: 'center',
          display: 'flex',
          fontFamily: 'Noto Sans JP',
          fontSize: 60,
        }}
      >
        <img
          width="1200"
          height="630"
          style={{
            position: 'absolute',
          }}
          src={`data:image/svg+xml;base64,${btoa(bg)}`}
        />
        {title}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      emoji: 'blobmoji',
      fonts: [
        {
          name: 'Noto Sans JP',
          data: fontData,
          weight: 400,
          style: 'normal',
        },
      ],
      headers: {
        'cache-control': hostname === 'localhost' ? 'no-cache, no-store' : 'public, max-age=604800, immutable',
      },
    },
  )
}

import { serve } from 'std/http/server.ts'
import { handler } from './handler.tsx'

serve(handler)