Render upcoming event markdown as HTML

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>

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">
+                            <div className="mt-3" dangerouslySetInnerHTML={{ __html: props.event.description }}>
-                                { props.event.description }
                             </div>
                         </div>
                     </div>

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;
+}