From dbb8d84143fa1f580ef345c767367b6e7890c466 Mon Sep 17 00:00:00 2001
From: itsfinniii <102350242+itsfinniii@users.noreply.github.com>
Date: Mon, 23 Mar 2026 19:42:31 +0100
Subject: [PATCH] Render upcoming event markdown as HTML

---
 astro/src/components/web/UpcomingEvents.astro         | 11 ++++++++++-
 .../components/web/subcomponents/UpcomingEvent.tsx    |  5 ++---
 astro/src/types/components/events.d.ts                | 10 +++++++++-
 3 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/astro/src/components/web/UpcomingEvents.astro b/astro/src/components/web/UpcomingEvents.astro
index 0b1f6c7..c91d62f 100644
--- a/astro/src/components/web/UpcomingEvents.astro
+++ b/astro/src/components/web/UpcomingEvents.astro
@@ -2,6 +2,7 @@
 import CalendarIcon from '@/icons/CalendarIcon.astro';
 import { Image } from 'astro:assets';
 import { upcomingEvent as UpcomingEvent } from './subcomponents/UpcomingEvent';
+import { markdownToHtml } from '@/lib/markdown';
 
 interface Props {
     upcomingEvents: UpcomingEventsComponent;
@@ -36,7 +37,15 @@ const upcomingEvents = Astro.props.upcomingEvents;
                         ) }
                     </div>
                     <div class="mt-3.5">
-                        <UpcomingEvent event={event} client:load />
+                        <UpcomingEvent
+                            client:load
+                            event={{
+                                title: event.title,
+                                description: markdownToHtml(event.description),
+                                startDate: event.startDate,
+                                endDate: event.endDate
+                            }} 
+                        />
                     </div>
                 </div>
             </div>
diff --git a/astro/src/components/web/subcomponents/UpcomingEvent.tsx b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
index 88098cd..3151017 100644
--- a/astro/src/components/web/subcomponents/UpcomingEvent.tsx
+++ b/astro/src/components/web/subcomponents/UpcomingEvent.tsx
@@ -1,7 +1,7 @@
 import { CalendarIcon } from "@/icons/jsx/calendarIcon";
 import { useState } from "preact/hooks"
 
-export function upcomingEvent(props: { event: UpcomingEvent }) {
+export function upcomingEvent(props: { event: UpcomingEventProps }) {
     const [ isOpen, setIsOpen ] = useState<boolean>(false);
     const [ isVisible, setIsVisible ] = useState<boolean>(false);
 
@@ -40,8 +40,7 @@ export function upcomingEvent(props: { event: UpcomingEvent }) {
                                 ) }
                             </div>
 
-                            <div className="mt-3">
-                                { props.event.description }
+                            <div className="mt-3" dangerouslySetInnerHTML={{ __html: props.event.description }}>
                             </div>
                         </div>
                     </div>
diff --git a/astro/src/types/components/events.d.ts b/astro/src/types/components/events.d.ts
index 5bbf1c8..586f078 100644
--- a/astro/src/types/components/events.d.ts
+++ b/astro/src/types/components/events.d.ts
@@ -14,6 +14,14 @@ type UpcomingEvent = {
     location: string;
     mapLocation: [number, number];
     startDate: Date;
-    endDate: Date;
+    endDate: Date | null;
     thumbnail: PhotoProps; 
 }
+
+type UpcomingEventProps = {
+    title: string;
+    description: string;
+    
+    startDate: Date;
+    endDate: Date | null;
+}