spb/satelliteindex

1import { ImageResponse } from 'next/og';2import { SITE_NAME, TAGLINE } from '@/lib/site';34export const runtime = 'nodejs';5export const alt = `${SITE_NAME} — ${TAGLINE}`;6export const size = { width: 1200, height: 630 };7export const contentType = 'image/png';89/** Default Open Graph image: the SatelliteIndex mark (planet + inclined ring + satellite node) on the space plane. */10export default function OpenGraphImage() {11  return new ImageResponse(12    (13      <div14        style={{15          width: '100%',16          height: '100%',17          display: 'flex',18          flexDirection: 'column',19          justifyContent: 'space-between',20          padding: '64px 72px',21          background: 'linear-gradient(135deg, #0b1020 0%, #060912 60%, #060912 100%)',22          color: '#eaf0ff',23          fontFamily: 'sans-serif',24          position: 'relative',25        }}26      >27        <div style={{ position: 'absolute', right: -160, top: -120, width: 620, height: 620, borderRadius: 999, background: 'radial-gradient(circle at 35% 35%, rgba(56,211,255,0.16), rgba(6,9,18,0) 70%)', display: 'flex' }} />28        <div style={{ display: 'flex', alignItems: 'center', gap: 20 }}>29          <svg width="72" height="72" viewBox="0 0 32 32" fill="none">30            <circle cx="16" cy="16" r="7.5" fill="#eaf0ff" opacity="0.92" />31            <ellipse cx="16" cy="16" rx="14" ry="5.2" stroke="#eaf0ff" strokeWidth="1.6" transform="rotate(-24 16 16)" opacity="0.85" />32            <circle cx="27.4" cy="9.6" r="2.3" fill="#38d3ff" />33          </svg>34          <div style={{ display: 'flex', fontSize: 40, fontWeight: 700, letterSpacing: -1 }}>35            <span>Satellite</span>36            <span style={{ color: '#38d3ff' }}>Index</span>37          </div>38        </div>39        <div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>40          <div style={{ fontSize: 66, fontWeight: 700, lineHeight: 1.02, letterSpacing: -2.5, maxWidth: 900, display: 'flex' }}>{TAGLINE}.</div>41          <div style={{ fontSize: 26, color: '#a3aec8', display: 'flex' }}>Satellites · constellations · operators · launches · debris · live SGP4 positions</div>42        </div>43        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', fontSize: 22, color: '#6b7694' }}>44          <span>www.satelliteindex.io</span>45          <div style={{ display: 'flex', gap: 28 }}>46            {[47              ['LEO', '#38d3ff'],48              ['MEO', '#8f7dff'],49              ['GEO', '#f5b544'],50              ['HEO', '#ff7ab6'],51            ].map(([l, c]) => (52              <div key={l} style={{ display: 'flex', alignItems: 'center', gap: 10 }}>53                <div style={{ width: 12, height: 12, borderRadius: 999, background: c, display: 'flex' }} />54                <span>{l}</span>55              </div>56            ))}57          </div>58        </div>59      </div>60    ),61    { ...size },62  );63}64