spb/countryatlas

1import { ImageResponse } from 'next/og';2import { t } from '@/i18n';3import { api, safe } from '@/lib/api';4import { compact, grouped } from '@/lib/format';5import { OG_INK2, OG_INK3, OG_SIZE_H, OG_SIZE_W, OgFigures, OgFrame, OgWordmark } from './og-shared';67export const alt = 'CountryAtlas — Explore the world through data.';8export const size = { width: OG_SIZE_W, height: OG_SIZE_H };9export const contentType = 'image/png';10export const revalidate = 3600;1112/** Default share card: dark editorial "wallpaper" with the world map, wordmark, tagline and the live headline counts. */13export default async function OpenGraphImage() {14  const home = await safe(api.home());15  const s = home?.snapshot;16  const figures = [17    { label: t('og.countries'), value: grouped(s?.n_countries ?? 218) },18    { label: t('og.indicators'), value: `${grouped(s?.n_indicators ?? 260)}+` },19    { label: t('og.observations'), value: s?.n_observations ? compact(s.n_observations, 2) : '2M+' },20    { label: t('og.sources'), value: grouped(s?.n_sources ?? 9) },21  ];22  return new ImageResponse(23    (24      <OgFrame map>25        <OgWordmark size={40} />26        <div style={{ display: 'flex', flexDirection: 'column', marginTop: 'auto', maxWidth: 760 }}>27          <div style={{ fontSize: 66, lineHeight: 1.05, fontWeight: 600, letterSpacing: -1.8, display: 'flex' }}>{t('site.tagline')}</div>28          <div style={{ marginTop: 18, fontSize: 26, color: OG_INK2, lineHeight: 1.35, display: 'flex' }}>{t('og.sub')}</div>29          <div style={{ marginTop: 34, display: 'flex' }}>30            <OgFigures items={figures} />31          </div>32        </div>33        <div style={{ position: 'absolute', left: 64, bottom: 24, fontSize: 20, color: OG_INK3, display: 'flex' }}>{t('og.site')}</div>34      </OgFrame>35    ),36    { ...size },37  );38}39