Make social preview use the same pipeline as hero images

Author: alexp-sssup

packages/astro-theme/layouts/BlogPost.astro

@@ -12,7 +12,7 @@ import BlogPostCardSet from "../components/BlogPostCardSet.astro";
 import { resolveAuthors } from "../lib/blog";
 import LinkButton from "../components/LinkButton.astro";
 import { DISCORD_URL } from "../consts";
-import { Image } from "astro:assets";
+import { Image, getImage } from "astro:assets";
 import { productFromUrl } from "../lib/products";
 import ProductNav from "../components/nav/product/Nav.astro";
 
@@ -33,14 +33,25 @@ let titleAndSubtitle = title;
 if (subtitle) {
 	titleAndSubtitle += `: ${subtitle}`;
 }
+
+// Generate optimized social preview image using the same optimization as the hero image
+const socialImage = heroImage
+	? await getImage({
+			src: heroImage,
+			width: 1232,
+			height: 480,
+			quality: "max",
+			format: "jpg",
+		})
+	: undefined;
 ---
 
 <Shell
 	title={titleAndSubtitle}
 	{description}
-	image={heroImage?.src}
-	imageWidth={heroImage?.width}
-	imageHeight={heroImage?.height}
+	image={socialImage?.src}
+	imageWidth={socialImage?.attributes.width}
+	imageHeight={socialImage?.attributes.height}
 >
 	{product && <ProductNav {product} />}
 	<main class="px-6 py-10 w-full max-w-screen-xl mx-auto">