WIP checkpoint

src/components/EventsList.astro

@@ -1,7 +1,8 @@
 ---
 import SectionHeading from './SectionHeading.astro';
 import type { EventItem } from '../lib/fallback-data';
-import { formatDateTime } from '../lib/format';
+import { formatDate, formatTime, formatWeekday } from '../lib/format';
+import { normalizeSlug } from '../lib/slug';
 
 type Props = {
   events: EventItem[];
@@ -17,22 +18,25 @@ const { events, title = 'Upcoming events', description = 'A quick scan list for
   <div class="stack">
     {events.length > 0 ? (
       events.map((event) => {
-        const detailHref = event.slug ? `/events/${event.slug}/` : undefined;
+        const normalizedSlug = normalizeSlug(event.slug);
+        const detailHref = normalizedSlug ? `/events/${normalizedSlug}/` : undefined;
+        const summary = event.summary?.trim() || event.description;
 
         return (
-          <article class="card">
-            <div class="split-grid" style="align-items:start;">
-              <div>
-                <p class="pill">{event.is_featured ? 'Featured' : 'Event'}</p>
-                <h3>{detailHref ? <a href={detailHref}>{event.title}</a> : event.title}</h3>
-                <p>{event.description}</p>
+          <article class="card event-card">
+            {detailHref && <a class="stretched-link" href={detailHref} aria-label={`View ${event.title}`} />}
+            <div class="event-layout">
+              <div class="event-date-block">
+                <p class="event-weekday">{formatWeekday(event.start_datetime)}</p>
+                <p class="event-date">{formatDate(event.start_datetime)}</p>
+                <p class="event-time">{formatTime(event.start_datetime)}</p>
               </div>
               <div>
-                <p class="meta">{formatDateTime(event.start_datetime)}</p>
+                <h3>{event.title}</h3>
+                <p>{summary}</p>
                 {event.location_text && <p>{event.location_text}</p>}
-                {detailHref && <p><a class="button primary" href={detailHref}>View event</a></p>}
                 {event.registration_link && (
-                  <p><a class="button secondary" href={event.registration_link}>Register</a></p>
+                  <p class="event-card-actions"><a class="button secondary" href={event.registration_link}>Register</a></p>
                 )}
               </div>
             </div>