From 4f654abd4992c0d918f85c914c4de338a7fc45c7 Mon Sep 17 00:00:00 2001
From: Youwen Wu <youwenw@gmail.com>
Date: Fri, 12 Apr 2024 22:48:25 -0700
Subject: [PATCH] feat: show post cover on article page

---
 src/globals.d.ts                       | 3 ++-
 src/lib/components/Blog/Article.svelte | 4 ++++
 src/routes/blog/[...slug]/+page.svelte | 3 ++-
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/globals.d.ts b/src/globals.d.ts
index b553086..b1897ac 100644
--- a/src/globals.d.ts
+++ b/src/globals.d.ts
@@ -5,7 +5,7 @@ interface BlogDocument {
 	primaryTags: string[];
 	secondaryTags: string[];
 	blurb: string;
-	image?: string;
+	image: { src: string; alt: string; caption: string };
 	description: string;
 	slug;
 }
@@ -24,5 +24,6 @@ type PostMeta = {
 	cover: {
 		src: string;
 		alt: string;
+		caption: string;
 	};
 };
diff --git a/src/lib/components/Blog/Article.svelte b/src/lib/components/Blog/Article.svelte
index 8ca00f7..ba3ee6a 100644
--- a/src/lib/components/Blog/Article.svelte
+++ b/src/lib/components/Blog/Article.svelte
@@ -23,6 +23,10 @@
 				reverseDateAndRest
 			/>
 		</div>
+		<figure class="w-[80%]">
+			<img src={doc.image.src} alt={doc.image.alt} class="rounded-xl shadow-md" />
+			<figcaption class="mt-2 text-center text-muted-foreground">{doc.image.caption}</figcaption>
+		</figure>
 	</header>
 
 	<div class="markdown-body mb-8 font-serif">
diff --git a/src/routes/blog/[...slug]/+page.svelte b/src/routes/blog/[...slug]/+page.svelte
index c4ec26e..3914641 100644
--- a/src/routes/blog/[...slug]/+page.svelte
+++ b/src/routes/blog/[...slug]/+page.svelte
@@ -19,7 +19,8 @@
 		content: data.content,
 		blurb: data.metadata.manifest.blurb,
 		description: data.metadata.manifest.description,
-		slug: data.slug
+		slug: data.slug,
+		image: data.metadata.cover
 	};
 	// $: doc = data.metadata;
 	// $: componentSource = data.metadata.source?.replace('default', $config.style ?? 'default');