tags are now displayed in banner; adjusted sizing of elements in banner

src/lib/banner2.svelte

@@ -6,6 +6,7 @@
         subtitle = "",
         banner = "",
         bannerAlt = "",
+        tags = [],
         pixelated,
     }: {
         title: string;
@@ -14,18 +15,26 @@
         subtitle?: string;
         banner?: string;
         bannerAlt?: string;
+        tags?: string[];
         pixelated?: boolean;
     } = $props();
 
 </script>
 
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
+        <h1 class="title">{title}</h1>
 	<div class="title-container">
         <div class="title-text-container">
-            <h1 class="title">{title}</h1>
             {#if subtitle}
                 <p class="subtitle">[ {subtitle} ]</p>
             {/if}
+            {#if tags}
+                <div class="tag-container">
+                    {#each tags as tag}
+                        <span class="post-tag">{tag}</span>
+                    {/each}
+                </div>
+            {/if}
         </div>
         {#if date}
             <div class="date-container">
@@ -66,17 +75,23 @@
         flex-direction: row;
         /* align-items: flex-end; */
         gap: 16px;
-        margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
+        margin: 8px 0;
-    }
-
-    .title-container + hr {
-        /* Add top margin if no date element exists */
-        margin-top: 16px;
     }
 
     .title-text-container {
         width: fit-content;
+        display: flex;
+        flex-direction: column;
         flex: 1;
+        gap: 8px;
+    }
+
+    .tag-container {
+        display: flex;
+        gap: 4px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 4px;
     }
 
     .date-container {
@@ -84,13 +99,13 @@
         display: flex;
         flex-direction: column;
         align-items: flex-end;
-        margin-bottom: 12px;
     }
 
     .title {
         box-sizing: border-box;
         height: fit-content;
         margin: 0;
+        margin-top: var(--margin-header-top);
     }
 
     .date {
@@ -108,6 +123,7 @@
         /* width: fit-content; */
         font-weight: 500;
         font-size: 1.0rem;
+        line-height: 1.0rem;
         margin: 0;
     }
 

src/routes/blog/[year]/[date]/+page.svelte

@@ -15,10 +15,12 @@
 <Content>
     <Banner2
         title="{data.title}"
+        subtitle="{data.subtitle}"
         date="{data.date}"
         dateUpdated="{data.dateUpdated}"
         banner="{data.banner}"
-        bannerAlt="Banner for blog post '{data.title}'" />
+        bannerAlt="Banner for blog post '{data.title}'"
+        tags={data.tags} />
 
     <TableOfContents />
 

src/routes/blog/[year]/[date]/+page.ts

@@ -1,26 +1,30 @@
-import { posts, type BlogPostLink } from '../../posts';
+import { BlogPostTag, posts, type BlogPostLink } from '../../posts';
 
 export async function load({ params }) {
 	const post = await import(`../../${params.year}/${params.date}.md`);
 
-	const tag: string = `${params.year}/${params.date}`;
+	const tag: string = `${params.year}/${params.date}`; // link to the page. not to be confused with tags. i know it's confusing naming
 	const postValues = posts.find((v: BlogPostLink) => v.key == tag)?.post;
 	const content = post.default;
 	const title: string = postValues?.title ?? "";
+	const subtitle: string = postValues?.subtitle ?? "";
 	const date: string = postValues?.date ?? "";
 	const dateUpdated: string = postValues?.dateUpdated ?? "";
 	const time: string = postValues?.time ?? "";
 	const banner: string = postValues?.banner ?? "";
 	const description: string = postValues?.description ?? "";
+	const tags: BlogPostTag[] = postValues?.tags ?? []; // blog post tags. should be renamed 'keywords'
 
 	return {
 		content,
 		title,
+		subtitle,
 		banner,
 		date,
 		dateUpdated,
 		time,
 		tag,
+		tags,
 		description,
 	};
 }

src/routes/blog/posts.ts

@@ -11,6 +11,7 @@ export interface BlogPostDetails {
 	bannerAlt: string;
 
 	title: string;
+	subtitle?: string;
 
 	/**
 	 * Description to be used in page's metadata.