TypeScript 55.4%
Python 43.2%
SQL 1.2%
1import { ImageResponse } from "next/og";2import { BRAND, Mark, PulseBackdrop } from "@/components/brand";3import { api, type Stats } from "@/lib/api";4import { fmtInt } from "@/lib/format";56export const runtime = "nodejs";7export const alt = "WebSensor — The Web is changing. We are watching.";8export const size = { width: 1200, height: 630 };9export const contentType = "image/png";1011/** Site-wide share image (spec §82–83). Live counters come from the API; nothing is fabricated. */12export default async function OpenGraphImage() {13 const s: Stats = await api.stats().catch(() => ({}) as Stats);14 const facts = [s.sources ? `${fmtInt(s.sources)} sources` : null, s.sensors ? `${fmtInt(s.sensors)} sensors` : null, s.events_24h ? `${fmtInt(s.events_24h)} events / 24 h` : null].filter(Boolean) as string[];15 return new ImageResponse(16 (17 <div style={{ width: "100%", height: "100%", display: "flex", flexDirection: "column", justifyContent: "space-between", padding: 64, background: `linear-gradient(135deg, ${BRAND.bg} 0%, #0f1622 100%)`, color: "#e6e8ee", fontFamily: "Inter, system-ui, sans-serif", position: "relative" }}>18 <PulseBackdrop width={1200} height={630} />19 <div style={{ display: "flex", alignItems: "center", gap: 20 }}>20 <Mark size={72} />21 <div style={{ display: "flex", flexDirection: "column" }}>22 <div style={{ display: "flex", fontSize: 44, fontWeight: 700, letterSpacing: -1 }}>23 Web<span style={{ color: BRAND.signal }}>Sensor</span>24 </div>25 <div style={{ display: "flex", fontSize: 20, color: BRAND.subtle, fontFamily: "monospace", letterSpacing: 3 }}>REAL-TIME INTERNET CHANGE INTELLIGENCE</div>26 </div>27 </div>28 <div style={{ display: "flex", flexDirection: "column", gap: 20, maxWidth: 900 }}>29 <div style={{ display: "flex", flexDirection: "column", fontSize: 80, fontWeight: 700, letterSpacing: -3, lineHeight: 1.02 }}>30 <span>The Web is changing.</span>31 <span style={{ color: BRAND.muted }}>We are watching.</span>32 </div>33 <div style={{ display: "flex", fontSize: 28, color: BRAND.muted, lineHeight: 1.35 }}>What changed, where, when, whether it was silent, how important it is — with immutable evidence.</div>34 </div>35 <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: 24, color: BRAND.subtle, fontFamily: "monospace" }}>36 <div style={{ display: "flex", gap: 28 }}>37 {facts.map((f) => (38 <span key={f} style={{ display: "flex", alignItems: "center", gap: 10 }}>39 <span style={{ width: 8, height: 8, borderRadius: 8, background: BRAND.signal }} />40 {f}41 </span>42 ))}43 </div>44 <span>www.websensor.io</span>45 </div>46 </div>47 ),48 { ...size },49 );50}51