`src/app/address/[slug]/opengraph-image.tsx`

84 lines
import { ImageResponse } from 'next/og';
import { headers } from 'next/headers';
import { getListingBySlug } from '@/lib/db';
import { siteForHost } from '@/lib/site';

export const runtime = 'nodejs';
export const size = { width: 1200, height: 630 };
export const contentType = 'image/png';

export default async function og({ params }: { params: { slug: string } }) {
  const h = await headers();
  const surface = siteForHost(h.get('x-pastdoor-host') || h.get('host'));
  const listing = await getListingBySlug(params.slug);
  const title = listing?.title ?? 'Address';
  const place = listing
    ? `${listing.city ?? ''}${listing.city && listing.state ? ', ' : ''}${listing.state ?? ''}`.trim()
    : '';

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'space-between',
          padding: '64px',
          background: '#f6f1e8',
          color: '#1a1410',
          fontFamily: 'Georgia, serif',
        }}
      >
        <div style={{ display: 'flex', alignItems: 'baseline', gap: 12, fontSize: 24 }}>
          <span style={{ fontFamily: 'Georgia, serif', fontWeight: 400 }}>{surface.brandName}</span>
          <span style={{ color: '#d4664a' }}>·</span>
          <span style={{ fontSize: 16, letterSpacing: 2, textTransform: 'uppercase', color: 'rgba(26,20,16,0.6)' }}>
            address record
          </span>
        </div>
        <div style={{ display: 'flex', flexDirection: 'column' }}>
          <div
            style={{
              fontSize: place ? 32 : 28,
              letterSpacing: 4,
              textTransform: 'uppercase',
              color: 'rgba(26,20,16,0.55)',
              marginBottom: 24,
            }}
          >
            {place || 'Archive entry'}
          </div>
          <div
            style={{
              fontSize: 96,
              lineHeight: 1.02,
              letterSpacing: '-0.02em',
              color: '#1a1410',
              maxWidth: '90%',
            }}
          >
            {title}
          </div>
        </div>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'baseline',
            fontSize: 18,
            color: 'rgba(26,20,16,0.55)',
          }}
        >
          <span>Where the house is history.</span>
          <span style={{ fontFamily: 'Menlo, monospace', fontSize: 14, letterSpacing: 1 }}>
            {surface.domain}
          </span>
        </div>
      </div>
    ),
    { ...size }
  );
}