blog.hangerthem.com/lib/og-image.tsx

import fs from 'fs'
import path from 'path'
import { ImageResponse } from 'next/og'
import { SITE_NAME, SITE_URL } from '@/app/metadata'

export const ogImageSize = { width: 1200, height: 630 }

const colors = { bg: '#040404', fg: '#e0e0e0', fgDim: '#b0b0b0', accent: '#ef1f1f' }

function toDataUri(filePath: string, mime: string) {
  return `data:${mime};base64,${fs.readFileSync(filePath).toString('base64')}`
}

const logo = toDataUri(path.join(process.cwd(), 'public/logo.png'), 'image/png')

type OgCardProps = {
  title: string
  description?: string
  eyebrow?: string
}

/** Renders the branded title card used for pages and posts without a cover image. */
export function renderOgCard({ title, description, eyebrow }: OgCardProps) {
  return new ImageResponse(
    <div
      style={{
        width: '100%',
        height: '100%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
        padding: '64px 72px',
        background: colors.bg,
        color: colors.fg,
        borderLeft: `16px solid ${colors.accent}`,
      }}
    >
      <div style={{ display: 'flex', flexDirection: 'column', gap: 20 }}>
        {eyebrow && (
          <div style={{ fontSize: 28, color: colors.accent, textTransform: 'uppercase' }}>
            {eyebrow}
          </div>
        )}
        <div style={{ fontSize: title.length > 50 ? 60 : 76, fontWeight: 700, lineHeight: 1.1 }}>
          {title}
        </div>
        {description && (
          <div style={{ fontSize: 30, color: colors.fgDim, lineHeight: 1.4, maxHeight: 130 }}>
            {description.length > 140 ? description.slice(0, 137).trimEnd() + '…' : description}
          </div>
        )}
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 30 }}>
        {/* oxlint-disable-next-line nextjs/no-img-element -- Satori renders plain <img> only */}
        <img src={logo} width={48} height={48} alt="" />
        <span style={{ fontWeight: 700 }}>{SITE_NAME}</span>
        <span style={{ color: colors.fgDim }}>{SITE_URL.replace(/^https?:\/\//, '')}</span>
      </div>
    </div>,
    ogImageSize,
  )
}

const coverMimeTypes: Record<string, string> = {
  '.png': 'image/png',
  '.jpg': 'image/jpeg',
  '.jpeg': 'image/jpeg',
}

/** Renders a post's cover image at OG size, or null if the format isn't supported by Satori. */
export function renderOgCover(coverImage: string) {
  const mime = coverMimeTypes[path.extname(coverImage).toLowerCase()]
  if (!mime) return null

  const src = toDataUri(path.join(process.cwd(), 'public/posts', coverImage), mime)
  return new ImageResponse(
    // oxlint-disable-next-line nextjs/no-img-element -- Satori renders plain <img> only
    <img src={src} width={ogImageSize.width} height={ogImageSize.height} alt="" />,
    ogImageSize,
  )
}