feat: add SocialImage component for dynamic Open Graph image generation in Layout.astro

brylie · brylie · commit 486b76d3c42f · 2025-04-11T15:50:27.000+03:00
diff --git a/src/src/components/SocialImage.astro b/src/src/components/SocialImage.astro
@@ -0,0 +1,43 @@
+---
+// This component creates a properly sized open graph image for social media
+// It maintains the aspect ratio of the image while placing it within
+// the recommended 1200x630 container for social sharing
+
+import { Image } from "astro:assets";
+import type { ImageMetadata } from "astro";
+
+interface Props {
+  image: ImageMetadata;
+  alt: string;
+}
+
+const { image, alt } = Astro.props;
+
+// Social media preview dimensions (1200x630 is standard for FB/Twitter)
+const WIDTH = 1200;
+const HEIGHT = 630;
+---
+
+<div
+  class="social-image-wrapper"
+  style={`width: ${WIDTH}px; height: ${HEIGHT}px;`}
+>
+  <Image
+    src={image}
+    alt={alt}
+    width={WIDTH}
+    height={HEIGHT}
+    style="object-fit: contain; width: 100%; height: 100%;"
+  />
+</div>
+
+<style>
+  .social-image-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #121620; /* Match your site's background color */
+    position: relative;
+    overflow: hidden;
+  }
+</style>
diff --git a/src/src/layouts/Layout.astro b/src/src/layouts/Layout.astro
@@ -2,11 +2,13 @@
 import "../styles/global.css";
 import { ViewTransitions } from "astro:transitions";
 import OwlImage from "../assets/Owl-medium.jpg";
+import { getImage } from "astro:assets";
+import SocialImage from "../components/SocialImage.astro";
 
 interface Props {
   title?: string;
   description?: string;
-  ogImage?: string | ImageMetadata;
+  ogImage?: ImageMetadata;
   canonicalURL?: URL | string;
 }
 
@@ -17,11 +19,19 @@ const {
   canonicalURL = Astro.url,
 } = Astro.props;
 
-// Get the full URL for og:image regardless of whether it's a relative or absolute path
-const ogImageURL =
-  typeof ogImage === "string"
-    ? new URL(ogImage, Astro.site || Astro.url).href
-    : new URL(ogImage.src, Astro.site || Astro.url).href;
+// Generate the social image
+const socialImage = await getImage({
+  src: SocialImage,
+  width: 1200,
+  height: 630,
+  props: {
+    image: ogImage,
+    alt: "OutwardLight Studio - Open Source Development",
+  },
+});
+
+// Use the generated social image URL
+const ogImageURL = socialImage.src;
 ---
 
 <!doctype html>
