Fix dark social card framing for square previews

Author: kvlonge

README.md

@@ -37,8 +37,11 @@ publishing or deployment step.
 
 `favicon.ico` contains 16px, 32px and 48px icons. PNG favicons and a 180px Apple touch icon use the
 original SQLStack mark on white backing for legibility in light and dark browser chrome.
-`assets/og-sqlstack.png` is an opaque 1200 × 630 sharing card using the original SQLStack wordmark
-and the site's Inter typography. These are raster derivatives, not replacement logos or SVG originals.
+`assets/og-sqlstack-dark.png` is an opaque 1200 × 630 sharing card using the original SQLStack
+wordmark and the site's Inter typography on a near-black background. Its branding and text fit
+inside the central 630px square so small thumbnail crops retain the complete message. The previous
+`assets/og-sqlstack.png` remains available for cached metadata. These are raster derivatives, not
+replacement logos or SVG originals.
 
 Canonical and Open Graph/Twitter URLs target `https://sqlstack.io/`. Local previews can verify the
 metadata and assets, but public social-crawler validation requires a separately authorized deployment.

assets/og-sqlstack-dark.png

@@ -12,15 +12,15 @@
   <meta property="og:title" content="SQLStack | Your data stack. Engineered to change.">
   <meta property="og:description" content="Rust-backed SQL and Python tools for data engineers. Compile-time checks, tested behaviour and enforceable architecture.">
   <meta property="og:url" content="https://sqlstack.io/">
-  <meta property="og:image" content="https://sqlstack.io/assets/og-sqlstack.png">
+  <meta property="og:image" content="https://sqlstack.io/assets/og-sqlstack-dark.png">
   <meta property="og:image:type" content="image/png">
   <meta property="og:image:width" content="1200">
   <meta property="og:image:height" content="630">
   <meta property="og:image:alt" content="SQLStack. Your data stack. Engineered to change. Rust-backed SQL and Python tools for data engineers.">
   <meta name="twitter:card" content="summary_large_image">
   <meta name="twitter:title" content="SQLStack | Your data stack. Engineered to change.">
   <meta name="twitter:description" content="Rust-backed SQL and Python tools for data engineers. Compile-time checks, tested behaviour and enforceable architecture.">
-  <meta name="twitter:image" content="https://sqlstack.io/assets/og-sqlstack.png">
+  <meta name="twitter:image" content="https://sqlstack.io/assets/og-sqlstack-dark.png">
   <meta name="twitter:image:alt" content="SQLStack. Your data stack. Engineered to change. Rust-backed SQL and Python tools for data engineers.">
   <link rel="icon" href="favicon.ico" type="image/vnd.microsoft.icon" sizes="16x16 32x32 48x48">
   <link rel="icon" href="assets/favicon-16.png" type="image/png" sizes="16x16">

index.html

@@ -69,10 +69,10 @@ test('approved products, sharing assets and responsive navigation work in both t
   await expect(page.locator('meta[property="og:url"]')).toHaveAttribute('content', 'https://sqlstack.io/');
   await expect(page.locator('meta[name="twitter:card"]')).toHaveAttribute('content', 'summary_large_image');
   for (const selector of ['meta[property="og:image"]', 'meta[name="twitter:image"]']) {
-    await expect(page.locator(selector)).toHaveAttribute('content', 'https://sqlstack.io/assets/og-sqlstack.png');
+    await expect(page.locator(selector)).toHaveAttribute('content', 'https://sqlstack.io/assets/og-sqlstack-dark.png');
   }
   for (const [path, width, height] of [
-    ['/assets/og-sqlstack.png', 1200, 630],
+    ['/assets/og-sqlstack-dark.png', 1200, 630],
     ['/assets/favicon-16.png', 16, 16],
     ['/assets/favicon-32.png', 32, 32],
     ['/assets/apple-touch-icon.png', 180, 180],