codercops · anurag629 · Jul 8, 2026 · Jul 8, 2026
diff --git a/app/(tools)/base64/opengraph-image.tsx b/app/(tools)/base64/opengraph-image.tsx
@@ -0,0 +1,12 @@
+import { getTool } from "@/lib/tools";
+import { renderToolOgImage, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
+
+const tool = getTool("base64")!;
+
+export const alt = tool.ogTitle;
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default function Image() {
+  return renderToolOgImage(tool);
+}
diff --git a/app/(tools)/invoice-generator/opengraph-image.tsx b/app/(tools)/invoice-generator/opengraph-image.tsx
@@ -0,0 +1,12 @@
+import { getTool } from "@/lib/tools";
+import { renderToolOgImage, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
+
+const tool = getTool("invoice-generator")!;
+
+export const alt = tool.ogTitle;
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default function Image() {
+  return renderToolOgImage(tool);
+}
diff --git a/app/(tools)/json-formatter/opengraph-image.tsx b/app/(tools)/json-formatter/opengraph-image.tsx
@@ -0,0 +1,12 @@
+import { getTool } from "@/lib/tools";
+import { renderToolOgImage, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
+
+const tool = getTool("json-formatter")!;
+
+export const alt = tool.ogTitle;
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default function Image() {
+  return renderToolOgImage(tool);
+}
diff --git a/app/(tools)/jwt-decoder/opengraph-image.tsx b/app/(tools)/jwt-decoder/opengraph-image.tsx
@@ -0,0 +1,12 @@
+import { getTool } from "@/lib/tools";
+import { renderToolOgImage, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
+
+const tool = getTool("jwt-decoder")!;
+
+export const alt = tool.ogTitle;
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
+
+export default function Image() {
+  return renderToolOgImage(tool);
+}
diff --git a/app/opengraph-image.tsx b/app/opengraph-image.tsx
@@ -1,61 +1,9 @@
-import { ImageResponse } from "next/og";
+import { renderHomeOgImage, OG_SIZE, OG_CONTENT_TYPE } from "@/lib/og";
 
 export const alt = "CODERCOPS Tools — fast, privacy-first developer utilities";
-export const size = { width: 1200, height: 630 };
-export const contentType = "image/png";
+export const size = OG_SIZE;
+export const contentType = OG_CONTENT_TYPE;
 
 export default function OpengraphImage() {
-  return new ImageResponse(
-    (
-      <div
-        style={{
-          width: "100%",
-          height: "100%",
-          display: "flex",
-          flexDirection: "column",
-          justifyContent: "space-between",
-          padding: 72,
-          background: "linear-gradient(135deg, #0E1420 0%, #0A0B0F 55%)",
-          color: "#E8E6E1",
-          fontFamily: "monospace",
-        }}
-      >
-        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
-          <div
-            style={{
-              width: 64,
-              height: 64,
-              borderRadius: 14,
-              border: "1px solid rgba(255,255,255,0.14)",
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "center",
-              color: "#00E5C7",
-              fontSize: 34,
-              fontWeight: 700,
-            }}
-          >
-            {"{}"}
-          </div>
-          <div style={{ fontSize: 26, letterSpacing: 2, color: "#8289A0" }}>CODERCOPS · TOOLS</div>
-        </div>
-
-        <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
-          <div style={{ fontSize: 62, fontWeight: 700, lineHeight: 1.05, maxWidth: 900 }}>
-            Sharp, focused tools for shipping software
-          </div>
-          <div style={{ fontSize: 28, color: "#8289A0", maxWidth: 880 }}>
-            JSON formatter · JWT decoder · Base64 · Invoice generator. Runs entirely in your browser.
-          </div>
-        </div>
-
-        <div style={{ display: "flex", gap: 12 }}>
-          {["#5AB5FF", "#9E7BFF", "#FFB547", "#A6F36B"].map((c) => (
-            <div key={c} style={{ width: 44, height: 6, borderRadius: 3, background: c }} />
-          ))}
-        </div>
-      </div>
-    ),
-    { ...size }
-  );
+  return renderHomeOgImage();
 }
diff --git a/lib/og.tsx b/lib/og.tsx
@@ -0,0 +1,217 @@
+import { readFileSync } from "fs";
+import { join } from "path";
+import { ImageResponse } from "next/og";
+import type { Tool } from "./tools";
+
+// Shared social-card renderer. Every page's opengraph-image route derives its
+// card from here, so the brand, typography, and layout are identical and can
+// never drift between pages. Copy and accent come from the tool registry.
+
+export const OG_SIZE = { width: 1200, height: 630 };
+export const OG_CONTENT_TYPE = "image/png";
+
+// The subset Noto Sans bundled for invoice PDFs (Latin + currency) is reused for
+// every card, so text is real, hinted glyphs rather than the satori fallback.
+// These routes are prerendered at build time, so reading from the working
+// directory is safe (and avoids the edge-only fetch(new URL(import.meta.url))).
+let fonts: { name: string; data: Buffer; weight: 400 | 700; style: "normal" }[] | null = null;
+function ogFonts() {
+  if (!fonts) {
+    const dir = join(process.cwd(), "public", "fonts");
+    fonts = [
+      { name: "Noto Sans", data: readFileSync(join(dir, "NotoSans-Regular.ttf")), weight: 400, style: "normal" },
+      { name: "Noto Sans", data: readFileSync(join(dir, "NotoSans-Bold.ttf")), weight: 700, style: "normal" },
+    ];
+  }
+  return fonts;
+}
+
+const BG = "#0A0B0F";
+const FG = "#E8E6E1";
+const MUTED = "#8A93A8";
+const HAIRLINE = "rgba(255,255,255,0.12)";
+
+// The subset font has no arrow glyph, so keep card text to Latin + punctuation.
+function safe(text: string): string {
+  return text.replace(/\s*(?:→|->)\s*/g, " to ");
+}
+
+interface OgCardProps {
+  badge: string;
+  title: string;
+  description: string;
+  chips: string[];
+  url: string;
+  accent: string;
+  /** Four bars in the footer. Tools pass one accent; the home card passes four. */
+  accentBars: string[];
+}
+
+function OgCard({ badge, title, description, chips, url, accent, accentBars }: OgCardProps) {
+  return (
+    <div
+      style={{
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        position: "relative",
+        padding: 72,
+        background: `linear-gradient(135deg, #0E1420 0%, ${BG} 62%)`,
+        color: FG,
+        fontFamily: "Noto Sans",
+      }}
+    >
+      {/* Faint grid texture */}
+      <div
+        style={{
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          bottom: 0,
+          display: "flex",
+          backgroundImage:
+            "linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px), linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px)",
+          backgroundSize: "48px 48px",
+          opacity: 0.5,
+        }}
+      />
+      {/* Accent glow, top-right */}
+      <div
+        style={{
+          position: "absolute",
+          top: -180,
+          right: -160,
+          width: 620,
+          height: 620,
+          display: "flex",
+          borderRadius: 620,
+          background: `radial-gradient(circle, ${accent}33 0%, transparent 62%)`,
+        }}
+      />
+
+      {/* Header */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: 20 }}>
+          <div
+            style={{
+              width: 64,
+              height: 64,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: 15,
+              border: `1px solid ${accent}66`,
+              background: "rgba(255,255,255,0.03)",
+              color: accent,
+              fontSize: 32,
+              fontWeight: 700,
+            }}
+          >
+            {"{}"}
+          </div>
+          <div style={{ display: "flex", fontSize: 24, letterSpacing: 3, color: MUTED, fontWeight: 700 }}>
+            CODERCOPS · TOOLS
+          </div>
+        </div>
+        <div
+          style={{
+            display: "flex",
+            padding: "10px 22px",
+            borderRadius: 999,
+            border: `1px solid ${accent}59`,
+            background: `${accent}1a`,
+            color: accent,
+            fontSize: 20,
+            fontWeight: 700,
+            letterSpacing: 2,
+          }}
+        >
+          {badge}
+        </div>
+      </div>
+
+      {/* Middle */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 22 }}>
+        <div style={{ display: "flex", width: 68, height: 6, borderRadius: 3, background: accent }} />
+        <div
+          style={{
+            display: "flex",
+            fontSize: 70,
+            fontWeight: 700,
+            lineHeight: 1.03,
+            letterSpacing: -1.5,
+            maxWidth: 1000,
+          }}
+        >
+          {title}
+        </div>
+        <div style={{ display: "flex", fontSize: 28, lineHeight: 1.35, color: MUTED, maxWidth: 900 }}>
+          {description}
+        </div>
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 12, marginTop: 6 }}>
+          {chips.map((c) => (
+            <div
+              key={c}
+              style={{
+                display: "flex",
+                padding: "8px 16px",
+                borderRadius: 999,
+                border: `1px solid ${HAIRLINE}`,
+                background: "rgba(255,255,255,0.02)",
+                color: "#C2C8D6",
+                fontSize: 20,
+              }}
+            >
+              {c}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div style={{ display: "flex", fontSize: 24, fontWeight: 700, color: accent }}>{url}</div>
+        <div style={{ display: "flex", gap: 10 }}>
+          {accentBars.map((c, i) => (
+            <div key={i} style={{ display: "flex", width: 44, height: 6, borderRadius: 3, background: c }} />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function render(props: OgCardProps) {
+  return new ImageResponse(<OgCard {...props} />, { ...OG_SIZE, fonts: ogFonts() });
+}
+
+/** Social card for a tool page, driven entirely by its registry entry. */
+export function renderToolOgImage(tool: Tool) {
+  const a = tool.accentHex;
+  return render({
+    badge: tool.tagline.toUpperCase(),
+    title: tool.title,
+    description: safe(tool.ogDescription),
+    chips: tool.features.map(safe),
+    url: `tools.codercops.com${tool.path}`,
+    accent: a,
+    accentBars: [`${a}ff`, `${a}b3`, `${a}73`, `${a}40`],
+  });
+}
+
+/** Social card for the homepage. */
+export function renderHomeOgImage() {
+  return render({
+    badge: "OPEN SOURCE",
+    title: "Sharp, focused tools for shipping software",
+    description:
+      "Free, privacy-first developer utilities. JSON formatter, JWT decoder, Base64, invoice generator. Everything runs in your browser.",
+    chips: ["No login", "No uploads", "No tracking", "Open source", "MIT"],
+    url: "tools.codercops.com",
+    accent: "#00E5C7",
+    accentBars: ["#5AB5FF", "#9E7BFF", "#FFB547", "#A6F36B"],
+  });
+}