banner now controlled by Content and ContentSidebar components

src/lib/banner2.svelte

@@ -1,57 +1,43 @@
 <script lang="ts">
+    import { type BannerContent } from './components/banner-content';
+
     let {
-        title,
-        date = "", // date posted
-        dateUpdated = "",
-        dateIndeterminate = "", // raw date without an explanation marker next to it
-        subtitle = "",
-        banner = "",
-        bannerAlt = "",
-        tags = [],
-        pixelated,
+        content,
     }: {
-        title: string;
-        date?: string;
-        dateUpdated?: string;
-        dateIndeterminate?: string;
-        subtitle?: string;
-        banner?: string;
-        bannerAlt?: string;
-        tags?: string[];
-        pixelated?: boolean;
+        content: BannerContent;
     } = $props();
 
 </script>
 
-{#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
+{#snippet titles()}
 	<div class="title-container">
         <div class="title-text-container">
-            <h1 class="title">{title}</h1>
+            <h1 class="title">{content.title}</h1>
 
-            {#if subtitle}
-                <p class="subtitle">[ {subtitle} ]</p>
+            {#if content.subtitle}
+                <p class="subtitle">[ {content.subtitle} ]</p>
             {/if}
 
-            {#if tags.length}
+            {#if content.tags && content.tags.length > 0}
                 <div class="tag-container">
-                    {#each tags as tag}
+                    {#each content.tags as tag}
                         <span class="post-tag">{tag}</span>
                     {/each}
                 </div>
             {/if}
         </div>
-        {#if date || dateUpdated || dateIndeterminate}
+        {#if content.date || content.dateUpdated || content.dateIndeterminate}
             <div class="date-container">
-                {#if dateIndeterminate}
-                    <p class="date">:: {dateIndeterminate}</p>
+                {#if content.dateIndeterminate && content.dateIndeterminate != "undefined"}
+                    <p class="date">:: {content.dateIndeterminate}</p>
                 {/if}
 
-                {#if date}
-                    <p class="date">posted :: {date}</p>
+                {#if content.date && content.date != "undefined"}
+                    <p class="date">posted :: {content.date}</p>
                 {/if}
 
-                {#if dateUpdated}
-                    <p class="date">last updated :: {dateUpdated}</p>
+                {#if content.dateUpdated && content.dateUpdated != "undefined"}
+                    <p class="date">last updated :: {content.dateUpdated}</p>
                 {/if}
             </div>
         {/if}
@@ -59,13 +45,13 @@
 {/snippet}
 
 <div class="container">
-    {#if banner && banner !== ""}
-        <a class="banner-container" href={banner}>
-            <img class="banner {pixelated ? "pixelated-img" : ""}" src={banner} alt={bannerAlt}>
+    {#if content.banner && content.banner !== ""}
+        <a class="banner-container" href={content.banner}>
+            <img class="banner {content.pixelated ? "pixelated-img" : ""}" src={content.banner} alt={content.bannerAlt}>
         </a>
     {/if}
     
-    {@render titles({title, subtitle, date})}
+    {@render titles()}
     <hr>
 </div>