Merge pull request #44 from LayoutitStudio/codex/social-og-image-20260701

Update social preview image

Author: alowpoly

index.html

@@ -50,18 +50,23 @@
       property="og:description"
       content="Play a browser Quake port rendered as inspectable HTML and CSS 3D geometry through PolyCSS, with no WebGL or canvas renderer."
     />
-    <meta property="og:image" content="https://cssquake.com/assets/cssquake-social.webp" />
+    <meta property="og:image" content="https://cssquake.com/assets/cssquake-social-20260701.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="cssQuake gameplay running in the browser with inspectable HTML and CSS geometry." />
+    <meta property="og:image" content="https://cssquake.com/assets/cssquake-social-20260701.webp" />
     <meta property="og:image:type" content="image/webp" />
-    <meta property="og:image:width" content="2075" />
-    <meta property="og:image:height" content="1000" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
     <meta property="og:image:alt" content="cssQuake gameplay running in the browser with inspectable HTML and CSS geometry." />
     <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="cssQuake - Powered by PolyCSS" />
     <meta
       name="twitter:description"
       content="Play a browser Quake port rendered as inspectable HTML and CSS 3D geometry through PolyCSS, with no WebGL or canvas renderer."
     />
-    <meta name="twitter:image" content="https://cssquake.com/assets/cssquake-social.webp" />
+    <meta name="twitter:image" content="https://cssquake.com/assets/cssquake-social-20260701.png" />
     <script type="application/ld+json">
       {
         "@context": "https://schema.org",
@@ -73,7 +78,10 @@
         "gamePlatform": "Web browser",
         "playMode": ["SinglePlayer", "MultiPlayer"],
         "operatingSystem": "Any",
-        "image": "https://cssquake.com/assets/cssquake-social.webp",
+        "image": [
+          "https://cssquake.com/assets/cssquake-social-20260701.png",
+          "https://cssquake.com/assets/cssquake-social-20260701.webp"
+        ],
         "codeRepository": "https://github.com/LayoutitStudio/cssQuake"
       }
     </script>

src/assets/cssquake-social.png

@@ -54,10 +54,19 @@ const quakeAssetOutputDir = quakeUseVersionedAssetRoot
   ? path.join(quakeOutputDir, quakeAssetVersion)
   : quakeOutputDir;
 const legacyQuakeOutputDir = path.join(generatedPublicDir, "local/quake");
-const socialImageSourcePath = path.join(projectRoot, "src/assets/cssquake-social.webp");
-const socialImageOutputPath = path.join(generatedPublicDir, "assets/cssquake-social.webp");
+const socialImageOutputBaseName = "cssquake-social-20260701";
+const socialImageStaticPublicAssets = [
+  [
+    path.join(projectRoot, "src/assets/cssquake-social.png"),
+    path.join(generatedPublicDir, `assets/${socialImageOutputBaseName}.png`),
+  ],
+  [
+    path.join(projectRoot, "src/assets/cssquake-social.webp"),
+    path.join(generatedPublicDir, `assets/${socialImageOutputBaseName}.webp`),
+  ],
+];
 const staticPublicAssets = [
-  [socialImageSourcePath, socialImageOutputPath],
+  ...socialImageStaticPublicAssets,
   [path.join(projectRoot, "src/assets/favicon.ico"), path.join(generatedPublicDir, "favicon.ico")],
   [path.join(projectRoot, "src/site/robots.txt"), path.join(generatedPublicDir, "robots.txt")],
   [path.join(projectRoot, "src/site/sitemap.xml"), path.join(generatedPublicDir, "sitemap.xml")],
@@ -996,7 +1005,9 @@ try {
     console.log(`Wrote ${path.relative(projectRoot, hudNumbersOutputPath)}`);
     console.log(`Wrote ${path.relative(projectRoot, hudDamageNumbersOutputPath)}`);
     console.log(`Wrote ${path.relative(projectRoot, hudOutputPath)}`);
-    console.log(`Wrote ${path.relative(projectRoot, socialImageOutputPath)}`);
+    for (const [, outputPath] of socialImageStaticPublicAssets) {
+      console.log(`Wrote ${path.relative(projectRoot, outputPath)}`);
+    }
     console.log(`Wrote ${path.relative(projectRoot, mainMenuOutputPath)}`);
     console.log(`Wrote ${path.relative(projectRoot, mainMenuPlaqueOutputPath)}`);
     console.log(`Wrote ${path.relative(projectRoot, mainMenuTitleOutputPath)}`);