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

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.