feat: add logos to category header pages

src/components/sections/HeaderSection.astro

@@ -1,23 +1,39 @@
 ---
 import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
+import Logo from '@components/images/Logo.astro';
+import { getDirectusImageURL } from '@/support/url';
 
 interface Props {
   title: string;
   subTitle: string;
+  logoExists?: boolean;
+  logoLight?: string;
+  logoDark?: string;
   btnExists?: boolean;
   btnTitle?: string;
   btnURL?: string;
 }
 
-const { title, subTitle, btnExists, btnTitle, btnURL } = Astro.props;
+const { title, subTitle, logoExists, logoLight, logoDark, btnExists, btnTitle, btnURL } = Astro.props;
 ---
 
 <section class="mx-auto mt-10 px-4 sm:px-6 lg:px-8 lg:pt-10 2xl:max-w-full">
   <div class="flex-wrap md:flex md:items-center md:justify-between">
     <div class="w-full md:w-auto">
-      <h1 class="smooth-reveal card-text-header block lg:text-6xl">
+      <div class="smooth-reveal flex flex-row items-center mb-4">
-        {title}
+        {logoExists ? (
-      </h1>
+        <div class="shrink-0 mr-5">
+          <Logo
+            srcLight={getDirectusImageURL(logoLight!)}
+            srcDark={getDirectusImageURL(logoDark!)}
+            alt={`Logo of ${title}`}
+          />
+        </div>
+        ) : null}
+        <h1 class="card-text-header block lg:text-6xl">
+          {title}
+        </h1>
+      </div>
       <p class="smooth-reveal card-text-header-description mt-4">
         {subTitle}
       </p>

src/pages/categories/[...slug].astro

@@ -1,7 +1,7 @@
 ---
 import { readItems, readSingleton } from '@directus/sdk';
 
-import type { Post, Category } from '@lib/directusTypes';
+import type { Post } from '@lib/directusTypes';
 
 import HeaderSection from '@components/sections/HeaderSection.astro';
 import BlogCard from '@components/cards/BlogCard.astro';
@@ -54,8 +54,11 @@ const categoriesPosts = posts
 >
 
   <HeaderSection
-    title={category.title}
+    title=`${category.title}`
     subTitle={category.description}
+    logoExists
+    logoLight={category.logoLight}
+    logoDark={category.logoDark}
     btnExists
     btnTitle="Back to Categories"
     btnURL="/categories"