mc-dashboard/app/opengraph-image.tsx

import { ImageResponse } from "next/og";
import { probeStatus } from "@/lib/server-status";
import { memoAsync } from "@/lib/cache";

export const dynamic = "force-dynamic";
export const size = { width: 1200, height: 630 };
export const contentType = "image/png";
export const alt = "HurkiCorgi MC — modded Minecraft server";

export default async function OGImage() {
  const status = await memoAsync("og-status", 60_000, async () => {
    try {
      return await probeStatus();
    } catch {
      return { online: false, players: { online: 0, max: 0 } };
    }
  });

  const online = status.online;
  const players = status.players;
  const accent = online ? "#4ade80" : "#f87171";
  const statusLabel = online ? "Online" : "Offline";

  return new ImageResponse(
    (
      <div
        style={{
          width: "100%",
          height: "100%",
          display: "flex",
          flexDirection: "column",
          justifyContent: "space-between",
          padding: 72,
          background:
            "linear-gradient(135deg, #0b0b18 0%, #1a1a2e 60%, #2a1f45 100%)",
          color: "#f4f4f5",
          fontFamily: "system-ui, -apple-system, Segoe UI, Roboto",
        }}
      >
        <div style={{ display: "flex", alignItems: "center", gap: 24 }}>
          <div
            style={{
              width: 20,
              height: 20,
              borderRadius: 999,
              background: accent,
              boxShadow: `0 0 28px ${accent}`,
            }}
          />
          <span
            style={{
              fontSize: 28,
              fontWeight: 700,
              letterSpacing: "0.3em",
              textTransform: "uppercase",
              color: accent,
            }}
          >
            {statusLabel}
          </span>
        </div>

        <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
          <div
            style={{
              fontSize: 108,
              fontWeight: 800,
              letterSpacing: "-0.04em",
              lineHeight: 1,
              display: "flex",
            }}
          >
            HurkiCorgi MC
          </div>
          <div
            style={{
              fontSize: 38,
              color: "#a1a1aa",
              display: "flex",
            }}
          >
            Create & Engineering · Raids · Survival
          </div>
        </div>

        <div
          style={{
            display: "flex",
            justifyContent: "space-between",
            alignItems: "flex-end",
            gap: 48,
          }}
        >
          <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
            <span style={{ fontSize: 22, color: "#71717a" }}>Address</span>
            <span style={{ fontSize: 34, fontWeight: 600, fontFamily: "monospace" }}>
              minecraft.hurkicorgi.com
            </span>
          </div>
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "flex-end",
              gap: 4,
            }}
          >
            <span style={{ fontSize: 22, color: "#71717a" }}>Players</span>
            <span
              style={{
                fontSize: 64,
                fontWeight: 800,
                fontVariantNumeric: "tabular-nums",
                color: online ? "#f4f4f5" : "#52525b",
                display: "flex",
              }}
            >
              {online ? `${players.online}/${players.max}` : "—"}
            </span>
          </div>
        </div>
      </div>
    ),
    { ...size }
  );
}