render OG preview at actual platform sizes (Twitter, Slack, iMessage)

Author: adibarra

packages/app/src/app/blog/og-preview/page.tsx

@@ -50,26 +50,42 @@ const VARIANTS = [
   { id: 'v25', name: 'V25: Gold Accent Stripe — Thick gold left stripe, massive title, minimal' },
 ];
 
+// Common platform render sizes for OG images
+const SIZES = [
+  { label: 'Full (1200×630)', w: 1200, h: 630 },
+  { label: 'Twitter/X (~500×262)', w: 500, h: 262 },
+  { label: 'Slack (~360×189)', w: 360, h: 189 },
+  { label: 'iMessage (~300×157)', w: 300, h: 157 },
+];
+
 export default function OgPreviewPage() {
   return (
-    <main className="container mx-auto px-4 py-12 max-w-5xl">
+    <main className="container mx-auto px-4 py-12 max-w-7xl">
       <h1 className="text-3xl font-bold mb-2">OG Image Variants Preview</h1>
-      <p className="text-muted-foreground mb-8">
-        25 variants. V1–V10: generic. V11–V15: brand palette. V16–V20: GSA slide style. V21–V25:
-        optimized for small render size (huge text, no fine details).
+      <p className="text-muted-foreground mb-10">
+        Each variant shown at actual platform render sizes. V1–V10: generic. V11–V15: brand palette.
+        V16–V20: GSA slide style. V21–V25: thumbnail-optimized.
       </p>
-      <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-14">
         {VARIANTS.map((v) => (
-          <div key={v.id} className="flex flex-col gap-2">
+          <div key={v.id} className="flex flex-col gap-3">
             <h2 className="text-lg font-semibold">{v.name}</h2>
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
-              src={`/api/og-preview?slug=hello-world&v=${v.id}`}
-              alt={v.name}
-              width={1200}
-              height={630}
-              className="w-full rounded-lg border border-border"
-            />
+            <div className="flex flex-wrap gap-4 items-end">
+              {SIZES.map((s) => (
+                <div key={s.label} className="flex flex-col gap-1">
+                  <span className="text-xs text-muted-foreground">{s.label}</span>
+                  {/* eslint-disable-next-line @next/next/no-img-element */}
+                  <img
+                    src={`/api/og-preview?slug=hello-world&v=${v.id}`}
+                    alt={`${v.name} at ${s.label}`}
+                    width={s.w}
+                    height={s.h}
+                    style={{ width: s.w, height: s.h }}
+                    className="rounded border border-border"
+                  />
+                </div>
+              ))}
+            </div>
           </div>
         ))}
       </div>