From f7aece07e8f6a540abdf6b91ebfe9b2af788ff38 Mon Sep 17 00:00:00 2001
From: KazooTTT <work@kazoottt.top>
Date: Thu, 6 Feb 2025 14:54:20 +0800
Subject: [PATCH] feat: show og image

---
 src/components/ArticleContainer.astro |  6 +++++-
 src/components/blog/Masthead.astro    | 10 +++++++---
 src/layouts/BlogPost.astro            |  4 +++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/components/ArticleContainer.astro b/src/components/ArticleContainer.astro
index adbb9a7..a272a27 100644
--- a/src/components/ArticleContainer.astro
+++ b/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">
diff --git a/src/components/blog/Masthead.astro b/src/components/blog/Masthead.astro
index 5d6396a..2520527 100644
--- a/src/components/blog/Masthead.astro
+++ b/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>
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index 04d70b1..fa599b3 100644
--- a/src/layouts/BlogPost.astro
+++ b/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