feat(post): Thumbnail

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

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.

src/lib/components/PostHeader.svelte

@@ -9,7 +9,17 @@
 	const series = post?.series || [];
 </script>
 
-<div id="post-heading">
+<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}
+	<div id="infobox">
 		{#if series}
 			<div class="flex flex-row justify-left items-center">
 				{#each series as seriesTag, i}
@@ -45,11 +55,40 @@
 			<p class="text-l text-gray-500">{date}</p>
 		</div>
 	</div>
+</div>
 
 <style>
-	#post-heading {
+	#post-header {
-		@apply flex flex-col;
+		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;