Dynamic OpenGraph Snippet

og.js

import { ImageResponse } from '@vercel/og'
export const config = {
  runtime: 'edge',
}

export default async function handler(req) {
  const HOST = 'https://danielkhoo.xyz'
  const { searchParams } = req.nextUrl
  const title = searchParams.get('title') || 'danielkhoo.xyz'
  const description = searchParams.get('description') || `Hello there! I'm Daniel. Welcome to my online home for ideas, writing and side projects.`

  const robotoArrayBuffer = await fetch(`${HOST}/fonts/Roboto-Regular.ttf`).then(res => res.arrayBuffer())
  const robotoBoldArrayBuffer = await fetch(`${HOST}/fonts/Roboto-Bold.ttf`).then(res => res.arrayBuffer())
  const truncatedDescription = description.length > 120 ? description.slice(0, 120) + "..." : description
  return new ImageResponse(
    (
      <div
        style={{
          background: '#fff',
          width: '100%',
          height: '100%',
          padding: 32,
          justifyContent: 'center',
          alignItems: 'center',
          display: 'flex',
        }}
      >
        <div style={{ display: 'flex', flexDirection: 'column', flex: 3, marginRight: 24 }}>
          <p style={{ fontSize: 60, fontWeight: 700 }}>{title}</p>
          <p style={{ fontSize: 32, color: '#777', lineHeight: '50px' }}>{truncatedDescription}</p>
        </div>
        {/* eslint-disable-next-line @next/next/no-img-element */}
        <img
          alt="avatar"
          width="256"
          src={`${HOST}/dp.jpeg`}
          style={{ flex: 1, borderRadius: 32 }}
        />
      </div>
    ),
    {
      width: 1200,
      height: 600,
      fonts: [
        {
          name: 'Roboto',
          data: robotoArrayBuffer,
          weight: 400,
          style: 'normal',
        },
        {
          name: 'Roboto',
          data: robotoBoldArrayBuffer,
          weight: 700,
          style: 'normal',
        },
      ],
    }
  )
}