Updates

src/pages/events/[slug].astro

@@ -5,18 +5,46 @@ import { formatDateTime } from '../../lib/format';
 
 type EventItem = Awaited<ReturnType<typeof getEvents>>[number];
 
+declare const process: {
+  env: Record<string, string | undefined>;
+};
+
+function resolveEventImageSource(realimage: EventItem['realimage']): string | null {
+  if (!realimage) return null;
+
+  const candidate = typeof realimage === 'string' ? realimage : realimage.id;
+  if (!candidate) return null;
+
+  if (candidate.startsWith('http://') || candidate.startsWith('https://') || candidate.startsWith('/')) {
+    return candidate;
+  }
+
+  const configuredPublicUrl = process.env.DIRECTUS_PUBLIC_URL;
+  const directusPort = process.env.DIRECTUS_PORT ?? '8066';
+  const localFallbackUrl = `${Astro.url.protocol}//${Astro.url.hostname}:${directusPort}`;
+  const directusBaseUrl =
+    configuredPublicUrl && !configuredPublicUrl.includes('example.com')
+      ? configuredPublicUrl
+      : localFallbackUrl;
+
+  return new URL(`/assets/${candidate}`, directusBaseUrl).toString();
+}
+
 export async function getStaticPaths() {
   const events = await getEvents();
   return events.map((item) => ({ params: { slug: item.slug }, props: { item } }));
 }
 
 const { item } = Astro.props as { item: EventItem };
+const imageSrc = resolveEventImageSource(item.realimage);
+const imageAlt = item.title;
 ---
 
 <BaseLayout title={item.title} description={item.description}>
   <article class="container prose">
     <p class="meta">{formatDateTime(item.start_datetime)}</p>
     <h1 class="section-title">{item.title}</h1>
+    {imageSrc && <p><img src={imageSrc} alt={imageAlt} loading="lazy" /></p>}
     <p>{item.description}</p>
     {item.location_text && <p><strong>Location:</strong> {item.location_text}</p>}
     {item.registration_link && <p><a class="button primary" href={item.registration_link}>Register</a></p>}