fix OG preview: use lazy loading, inline width, overflow-x-auto for thumbnails

Author: adibarra

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

@@ -50,54 +50,51 @@ 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 },
-];
+function OgImg({ v, w, label }: { v: string; w: number; label: string }) {
+  const h = Math.round(w * (630 / 1200));
+  return (
+    <div style={{ width: w, flexShrink: 0 }}>
+      <span className="text-xs text-muted-foreground block mb-1">{label}</span>
+      {/* eslint-disable-next-line @next/next/no-img-element */}
+      <img
+        src={`/api/og-preview?slug=hello-world&v=${v}`}
+        alt={`${v} at ${w}px`}
+        width={w}
+        height={h}
+        loading="lazy"
+        style={{ display: 'block', width: w, height: h }}
+        className="rounded border border-border"
+      />
+    </div>
+  );
+}
 
 export default function OgPreviewPage() {
   return (
-    <main className="container mx-auto px-4 py-12 max-w-7xl overflow-hidden">
+    <main className="container mx-auto px-4 py-12 max-w-5xl">
       <h1 className="text-3xl font-bold mb-2">OG Image Variants Preview</h1>
       <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.
+        Each variant at full size, then at Twitter, Slack, and iMessage render sizes.
       </p>
-      <div className="flex flex-col gap-14">
+      <div className="flex flex-col gap-12">
         {VARIANTS.map((v) => (
           <div key={v.id} className="flex flex-col gap-3">
             <h2 className="text-lg font-semibold">{v.name}</h2>
-            {/* Full size */}
-            <div className="flex flex-col gap-1">
-              <span className="text-xs text-muted-foreground">Full (1200×630)</span>
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
-                src={`/api/og-preview?slug=hello-world&v=${v.id}`}
-                alt={`${v.name} full size`}
-                width={1200}
-                height={630}
-                className="w-full rounded border border-border"
-              />
-            </div>
-            {/* Platform sizes */}
-            <div className="flex gap-4 items-end">
-              {SIZES.slice(1).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, maxWidth: 'none' }}
-                    className="rounded border border-border shrink-0"
-                  />
-                </div>
-              ))}
+            {/* Full width */}
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={`/api/og-preview?slug=hello-world&v=${v.id}`}
+              alt={`${v.name} full`}
+              width={1200}
+              height={630}
+              loading="lazy"
+              className="w-full rounded border border-border"
+            />
+            {/* Platform thumbnails */}
+            <div className="flex gap-4 items-start overflow-x-auto">
+              <OgImg v={v.id} w={500} label="Twitter/X" />
+              <OgImg v={v.id} w={360} label="Slack" />
+              <OgImg v={v.id} w={300} label="iMessage" />
             </div>
           </div>
         ))}