spb/internetpressure

1import { ImageResponse } from 'next/og';2import { fmt, fmtDelta } from '@/lib/format';3import { levelById, pressureColor } from '@/lib/pressure';4import { TAGLINE } from '@/lib/site';5import type { GlobalPressure } from '@/lib/types';67export const runtime = 'nodejs';8export const dynamic = 'force-dynamic';9export const alt = 'Global Internet Pressure right now';10export const size = { width: 1200, height: 630 };11export const contentType = 'image/png';1213/** OG image rendered from the live index (real API data, never a fixture). Falls back to an unknown state. */14export default async function OpenGraphImage() {15  let g: GlobalPressure | null = null;16  try {17    const res = await fetch((process.env.API_URL_INTERNAL ?? process.env.API_URL ?? 'http://127.0.0.1:8352') + '/api/v1/pressure/global', { cache: 'no-store' });18    if (res.ok) g = (await res.json()) as GlobalPressure;19  } catch {20    g = null;21  }22  const color = g ? pressureColor(g.level) : '#8B98A5';23  const degraded = !g || g.internal_status !== 'ok' || g.stale;24  return new ImageResponse(25    (26      <div style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', padding: '56px 72px', background: '#070A0F', color: '#E6EDF3', fontFamily: 'sans-serif', position: 'relative' }}>27        <div style={{ position: 'absolute', left: 120, top: 80, width: 700, height: 500, borderRadius: 9999, background: `radial-gradient(circle at 40% 45%, ${color}22, #070A0F00 70%)`, display: 'flex' }} />28        <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>29          <svg width="44" height="44" viewBox="0 0 32 32" fill="none" stroke="#5B8DEF" strokeWidth="1.75" strokeLinecap="round">30            <circle cx="16" cy="16" r="13" />31            <path d="M16 4 L16 6" />32            <path d="M5 16 L7 16" />33            <path d="M27 16 L25 16" />34            <path d="M16 16 L22.5 9.5" strokeWidth="2.25" />35            <circle cx="16" cy="16" r="1.6" fill="#5B8DEF" stroke="none" />36          </svg>37          <div style={{ display: 'flex', fontSize: 30, letterSpacing: -0.5 }}>38            InternetPressure<span style={{ color: '#5B6875' }}>.io</span>39          </div>40        </div>41        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>42          <div style={{ fontSize: 20, letterSpacing: 4, color: '#8B98A5', display: 'flex' }}>GLOBAL INTERNET PRESSURE</div>43          <div style={{ display: 'flex', alignItems: 'baseline', gap: 36 }}>44            <div style={{ fontSize: 220, fontWeight: 600, letterSpacing: -10, lineHeight: 1, color: degraded ? '#8B98A5' : '#E6EDF3', display: 'flex' }}>{g ? fmt(g.pressure) : '—'}</div>45            <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>46              <div style={{ fontSize: 44, letterSpacing: 6, color, display: 'flex' }}>{g ? (levelById(g.level)?.short ?? g.level).toUpperCase() : 'UNAVAILABLE'}</div>47              {g && <div style={{ fontSize: 30, color: '#8B98A5', display: 'flex' }}>{`${g.trend === 'rising' ? '↑' : g.trend === 'falling' ? '↓' : '→'} ${fmtDelta(g.delta_1h)} / 1h`}</div>}48              {degraded && <div style={{ fontSize: 22, color: '#E9C46A', display: 'flex' }}>Instrument degraded — score frozen</div>}49            </div>50          </div>51        </div>52        <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 20, color: '#8B98A5' }}>53          <div style={{ display: 'flex' }}>{TAGLINE}</div>54          {g && <div style={{ display: 'flex' }}>{`${g.coverage.probes_active} probes · ${g.coverage.probe_regions} regions · ${g.coverage.targets} targets · confidence ${Math.round(g.confidence * 100)} %`}</div>}55        </div>56      </div>57    ),58    { ...size },59  );60}61