feat: show og image

src/components/ArticleContainer.astro

@@ -1,6 +1,7 @@
 ---
 import { Icon } from "astro-icon/components";
 import ShareButtons from "./ShareButtons.astro";
+import { cn } from "@/utils/tailwind";
 
 export interface Props {
 	className?: string;
@@ -9,7 +10,10 @@ export interface Props {
 const { className = "", dataPagefindBody = true } = Astro.props;
 ---
 
-<article class="mx-auto max-w-3xl overflow-x-hidden px-4">
+<article
+	class={cn("mx-auto max-w-3xl overflow-x-hidden px-4", className)}
+	data-pagefind-body={dataPagefindBody}
+>
 	<slot />
 
 	<div class="mt-8 border-t pt-4">

src/components/blog/Masthead.astro

@@ -9,27 +9,31 @@ import Label from "../componentsBefore/Label.astro";
 interface Props {
 	content: CollectionEntry<"post">;
 	readingTime: string;
+	ogImage: string;
 }
 
 const {
 	content: { data },
 	readingTime,
+	ogImage,
 } = Astro.props;
 
 const dateTimeOptions: Intl.DateTimeFormatOptions = {
 	month: "long",
 };
+
+const socialImageURL = new URL(ogImage ? ogImage : "/social-card.png", Astro.url).href;
 ---
 
 {
-	data.banner && (
+	socialImageURL && (
 		<div class="mb-6 aspect-video">
 			<Image
-				alt={data.banner}
+				alt={socialImageURL}
 				class="object-cover"
 				fetchpriority="high"
 				loading="eager"
-				src={data.banner}
+				src={socialImageURL}
 				inferSize={true}
 			/>
 		</div>

src/layouts/BlogPost.astro

@@ -38,7 +38,9 @@ const readingTime: string = remarkPluginFrontmatter.readingTime;
 	}}
 >
 	<ArticleContainer className="grow break-words" dataPagefindBody={true}>
-		<div id="blog-hero" class="mb-12"><Masthead content={post} readingTime={readingTime} /></div>
+		<div id="blog-hero" class="mb-12">
+			<Masthead content={post} readingTime={readingTime} ogImage={socialImage} />
+		</div>
 		<div class="flex flex-col gap-10 lg:flex-row lg:items-start">
 			{!!headings.length && <TOC headings={headings} />}
 			<div