From 65e857c43deaea9151a372888ad5fa6bda6a2c18 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Sun, 6 Jul 2025 17:24:37 -0700
Subject: [PATCH] feat(post): Thumbnail

---
 src/content/post/placeholder2.md     |   1 +
 src/content/post/placeholder3.md     |   5 +-
 src/lib/components/PostHeader.svelte | 105 ++++++++++++++++++---------
 3 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/src/content/post/placeholder2.md b/src/content/post/placeholder2.md
index ad88bb7..107fc8d 100644
--- a/src/content/post/placeholder2.md
+++ b/src/content/post/placeholder2.md
@@ -4,5 +4,6 @@ date: '2024-09-20'
 description: "This is a placeholder description"
 tags: ["a123"]
 series: ["placeholder", "another-series"]
+thumbnail: "/favicon.png"
 ---
 ## Content
diff --git a/src/content/post/placeholder3.md b/src/content/post/placeholder3.md
index c226705..695e93d 100644
--- a/src/content/post/placeholder3.md
+++ b/src/content/post/placeholder3.md
@@ -1,7 +1,10 @@
 ---
 title: Placeholder 3
 date: '2024-09-24'
-tags: []
+tags: ["hi"]
 series: ["placeholder"]
+thumbnail: "https://en.wikipedia.org/static/images/icons/wikipedia.png"
 ---
 ## Content
+
+This post has a thumbnail.
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index ae99921..62bbb97 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -9,47 +9,86 @@
 	const series = post?.series || [];
 </script>
 
-<div id="post-heading">
-	{#if series}
-		<div class="flex flex-row justify-left items-center">
-			{#each series as seriesTag, i}
-				{#if i > 0}
-					<div class="separator text-sm">
-					<Dot />
-					</div>
-				{/if}
-				<p class="series-tag">{seriesTag}</p>
-			{/each}
+<div id="post-header">
+	{#if post.thumbnail}
+		<div id="thumbnail">
+			{#if post.thumbnail.startsWith("<")}
+				{@html post.thumbnail}
+			{:else}
+				<img src={post.thumbnail} alt={post.title} />
+			{/if}
 		</div>
 	{/if}
-	<h2>
-		{#if inactive}
-			<p id="post-title">{post.title}</p>
-		{:else}
-			<a id="post-title" href="/post/{post.slug}">{post.title}</a>
+	<div id="infobox">
+		{#if series}
+			<div class="flex flex-row justify-left items-center">
+				{#each series as seriesTag, i}
+					{#if i > 0}
+						<div class="separator text-sm">
+							<Dot />
+						</div>
+					{/if}
+					<p class="series-tag">{seriesTag}</p>
+				{/each}
+			</div>
 		{/if}
-	</h2>
-	<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
-	<div>
-		<p class="text-gray-500 h-8">{post?.description || ""}</p>
-	</div>
-	<div class="flex flex-row justify-between" style="width: 100%">
-		<p class="text-gray-200 flex justify-center">
-			{#each (post?.tags ?? []) as tag, i}
-				{#if i > 0}
-					<DividerVertical />
-				{/if}
-				<a href="/tag/{tag}">{tag}</a>
-			{/each}
-		</p>
-		<p class="text-l text-gray-500">{date}</p>
+		<h2>
+			{#if inactive}
+				<p id="post-title">{post.title}</p>
+			{:else}
+				<a id="post-title" href="/post/{post.slug}">{post.title}</a>
+			{/if}
+		</h2>
+		<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
+		<div>
+			<p class="text-gray-500 h-8">{post?.description || ""}</p>
+		</div>
+		<div class="flex flex-row justify-between" style="width: 100%">
+			<p class="text-gray-200 flex justify-center">
+				{#each (post?.tags ?? []) as tag, i}
+					{#if i > 0}
+						<DividerVertical />
+					{/if}
+					<a href="/tag/{tag}">{tag}</a>
+				{/each}
+			</p>
+			<p class="text-l text-gray-500">{date}</p>
+		</div>
 	</div>
 </div>
 
 <style>
-	#post-heading {
-		@apply flex flex-col;
+	#post-header {
+		display: flex;
+		flex-direction: row;
 		margin: .5em 1em .5em 1em;
+		align-content: center;
+		align-items: center;
+		justify-content: center;
+	}
+ 	#thumbnail {
+		margin: .3em .8em .3em .3em;
+		border: 1px solid #77777777;
+
+		width: 6em;
+		height: 6em;
+		align-content: center;
+		justify-conent: center;
+	}
+	#thumbnail img {
+		display: block;
+		border: none;
+		margin: 0;
+		padding: 0;
+		max-width: 100%;
+		max-height: 100%;
+		width: auto;
+		height: auto;
+		aspect-ratio: 1;
+	}
+	#infobox {
+		width: 100%;
+		@apply flex flex-col;
 	}
 	#post-title {
 		@apply text-3xl;
-- 
2.44.1