feat: event grid

src/components/events/EventsGrid.astro

@@ -0,0 +1,70 @@
+---
+import type { EventCalendarEntry } from '@data';
+
+interface Props {
+  events: EventCalendarEntry[];
+}
+const { events } = Astro.props;
+
+const TODAY = new Date();
+const CURRENT_YEAR = TODAY.getFullYear();
+
+function formatRange(start: Date, end?: Date): string {
+  const startDay = start.getDate();
+  const startMonth = start.toLocaleString('de-DE', { month: 'short' });
+  const startYearStr = String(start.getFullYear()).slice(-2);
+
+  // No end date (or same day): show a single date.
+  if (!end || end.toDateString() === start.toDateString()) {
+    const suffix = start.getFullYear() !== CURRENT_YEAR ? ` ${startYearStr}` : '';
+    return `${startDay}. ${startMonth}${suffix}`;
+  }
+
+  const endDay = end.getDate();
+  const endMonth = end.toLocaleString('de-DE', { month: 'short' });
+  const endYearStr = String(end.getFullYear()).slice(-2);
+
+  const sameYear = start.getFullYear() === end.getFullYear();
+  const showYear = sameYear ? start.getFullYear() !== CURRENT_YEAR : true;
+
+  if (startMonth === endMonth && sameYear) {
+    // 2. - 5. Jun
+    return `${startDay}. - ${endDay}. ${endMonth}${showYear ? ` ${endYearStr}` : ''}`;
+  }
+
+  if (sameYear) {
+    // 30. Mai - 3. Jun [YY]
+    return `${startDay}. ${startMonth} - ${endDay}. ${endMonth}${showYear ? ` ${endYearStr}` : ''}`;
+  }
+
+  // Spans multiple years: include both years.
+  return `${startDay}. ${startMonth} ${startYearStr} - ${endDay}. ${endMonth} ${endYearStr}`;
+}
+---
+
+<div class="mx-auto grid max-w-[80rem] grid-cols-1 gap-4 px-4 lg:grid-cols-3 lg:px-20">
+  {
+    events.map((event) => (
+      <a
+        class={`flex flex-col rounded-lg bg-yellow-700 ${event.date < TODAY && 'grayscale-90'}`}
+        href={event.link}
+      >
+        <img
+          alt={event.image.alt}
+          class={`h-80 rounded-t-lg object-cover`}
+          src={event.image.src.src}
+          srcset={event.image.src.srcSet.attribute}
+          {...event.image.src.attributes}
+        />
+        <div class="flex h-fit flex-1 flex-col justify-between p-4">
+          <h3 class="font-serif text-2xl font-bold">{event.title}</h3>
+          <p>{event.description}</p>
+          <span class="flex flex-wrap items-center justify-between pt-2">
+            <div class="font-serif text-2xl font-bold">{formatRange(event.date, event.end)}</div>
+            {event.link && <div class="hover:underline">Mehr Infos &gt;</div>}
+          </span>
+        </div>
+      </a>
+    ))
+  }
+</div>

src/components/events/NextEvents.astro

@@ -1,29 +1,30 @@
 ---
 import ProjectBackground1 from '@assets/events/projects-bg-lg-1.jpg';
 import ProjectBackground2 from '@assets/events/projects-bg-lg-2.jpg';
-import Calendar from '@components/Calendar.svelte';
 import { eventData } from '@data';
 import { Image } from 'astro:assets';
 
+import EventsGrid from './EventsGrid.astro';
+
 const events = await eventData.get3CalendarEntries();
 ---
 
-<section class="relative mt-14">
+<section class="relative my-14">
   <div class="not-sr-only absolute -z-10 mt-16">
     <Image alt="" src={ProjectBackground1} />
   </div>
-</section>
-<div class="mx-auto mb-10 max-w-[80rem] px-4 lg:mb-16 lg:px-20">
-  <h2 class="font-serif text-2xl font-bold">Unsere nächsten Veranstaltungen</h2>
-  <p class="mt-3 max-w-prose lg:mt-6">
-    Trau dich! Wir wissen, es ist nicht so leicht, an Orte zu kommen, wo du niemanden kennst. Aber
-    auch, wenn du bisher noch keinen Kontakt mit YoungVision hattest, bist du ganz herzlich
-    eingeladen, zu kommen wie du bist. Du kannst dir sicher sein, wir fangen dich auf und halten den
-    Raum für dich und deinen Prozess.
-  </p>
-</div>
-<div class="not-sr-only absolute right-0 -bottom-52 -z-20">
-  <Image alt="" src={ProjectBackground2} />
-</div>
+  <div class="mx-auto mb-10 max-w-[80rem] px-4 lg:mb-16 lg:px-20">
+    <h2 class="font-serif text-2xl font-bold">Unsere nächsten Veranstaltungen</h2>
+    <p class="mt-3 max-w-prose lg:mt-6">
+      Trau dich! Wir wissen, es ist nicht so leicht, an Orte zu kommen, wo du niemanden kennst. Aber
+      auch, wenn du bisher noch keinen Kontakt mit YoungVision hattest, bist du ganz herzlich
+      eingeladen, zu kommen wie du bist. Du kannst dir sicher sein, wir fangen dich auf und halten
+      den Raum für dich und deinen Prozess.
+    </p>
+  </div>
+  <div class="not-sr-only absolute right-0 -bottom-52 -z-20">
+    <Image alt="" src={ProjectBackground2} />
+  </div>
 
-<Calendar client:visible events={events} />
+  <EventsGrid events={events} />
+</section>

src/components/index/Events.astro

@@ -1,6 +1,6 @@
 ---
 import Button from '@components/Button.astro';
-import Calendar from '@components/Calendar.svelte';
+import EventsGrid from '@components/events/EventsGrid.astro';
 import { eventData } from '@data';
 const events = await eventData.get3CalendarEntries();
 ---
@@ -10,7 +10,7 @@ const events = await eventData.get3CalendarEntries();
     <h2 class="font-serif text-3xl font-bold lg:text-4xl">Unsere Events</h2>
   </div>
   <div class="mt-6 lg:mt-14">
-    <Calendar client:load events={events} />
+    <EventsGrid events={events} />
     <div class="mx-auto mt-10 max-w-[80rem] px-5 lg:mt-12 lg:px-20">
       <div class="justify-between gap-x-10 lg:flex">
         <p class="text-justify">

src/data/index.ts

@@ -10,6 +10,7 @@ import { testInstagramData } from './test/instagram.ts';
 export interface EventCalendarEntry {
   date: Date;
   description: string;
+  end?: Date;
   image: { alt: string; src: GetImageResult };
   link?: string;
   title: string;

src/data/real/events.ts

@@ -25,8 +25,11 @@ type EventRequest = {
   sort?: `-${keyof EventCMS}` | keyof EventCMS;
   where: {
     [key in keyof EventCMS]?: {
+      equals?: EventCMS[key];
+      exists?: boolean;
       greater_than?: EventCMS[key];
       less_than?: EventCMS[key];
+      not_equals?: EventCMS[key];
     };
   };
 };
@@ -48,6 +51,11 @@ export async function get3CalendarEntries(): Promise<
       },
     },
   };
+  if (!DRAFT) {
+    request.where._status = {
+      equals: 'published',
+    };
+  }
   console.log(request);
   console.log(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
   const response = await fetch(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
@@ -65,6 +73,11 @@ export async function get3CalendarEntries(): Promise<
         },
       },
     };
+    if (!DRAFT) {
+      request2.where._status = {
+        equals: 'published',
+      };
+    }
     const pastEventsResponse = await fetch(
       `${process.env.CMS_URL}/api/events?${qs.stringify(request2)}`,
     );
@@ -77,6 +90,7 @@ export async function get3CalendarEntries(): Promise<
   const optimizedEvents = events.map(async (event) => ({
     date: new Date(event.start),
     description: event.shortDescription,
+    end: new Date(event.end),
     image: await getEventImage(event.calendarCover.value).then(async (r) => ({
       alt: r!.alt,
       src: await getImage({
@@ -91,11 +105,23 @@ export async function get3CalendarEntries(): Promise<
 }
 
 export async function getAllPages(): Promise<EventPage[]> {
-  const response = await fetch(`${process.env.CMS_URL}/api/events?draft=${DRAFT}`);
+  const request: EventRequest = {
+    draft: DRAFT,
+    where: {
+      slug: {
+        exists: true,
+      },
+    },
+  };
+  if (!DRAFT) {
+    request.where._status = {
+      equals: 'published',
+    };
+  }
+  const response = await fetch(`${process.env.CMS_URL}/api/events?${qs.stringify(request)}`);
   const data = await response.json();
   const events = data.docs as EventCMS[];
-  const eventsWithSlug = events.filter((event) => event.slug);
-  const promises = eventsWithSlug.map(async (event) => ({
+  const promises = events.map(async (event) => ({
     ...event,
     end: new Date(event.end),
     heroImage: await getEventImage(event.heroImage?.value),

src/data/test/events.ts

@@ -36,6 +36,7 @@ export async function get3CalendarEntries(): Promise<
     {
       date: new Date(1999, 6, 10),
       description: 'This event covers the test case for past events',
+      end: new Date(1999, 6, 13),
       image: {
         alt: '',
         src: await getImage({ src: thirdEventImage }),
@@ -46,6 +47,7 @@ export async function get3CalendarEntries(): Promise<
     {
       date: new Date(2999, 10, 2),
       description: 'This event will always (until the year 2999) be in the future.',
+      end: new Date(2999, 10, 5),
       image: {
         alt: '',
         src: await getImage({ src: calendarCoverImage }),
@@ -56,6 +58,7 @@ export async function get3CalendarEntries(): Promise<
     {
       date: new Date(3024, 0, 28),
       description: 'This is test data. Test 1 2 3. Test test.',
+      end: new Date(3024, 1, 3),
       image: {
         alt: '',
         src: await getImage({ src: pastEvent }),

src/pages/datenschutz.astro

@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Datenschutz">
-  <div class="max-w-[80rem] py-8 lg:px-24 lg:py-12">
+  <div class="mx-auto max-w-[80rem] py-8 lg:px-24 lg:py-12">
     <article>
       <h1>Datenschutz&shy;erkl&auml;rung</h1>
       <h2>1. Datenschutz auf einen Blick</h2>

src/pages/events.astro

@@ -1,15 +1,10 @@
 ---
 import Hero from '@components/events/Hero.astro';
 import NextEvents from '@components/events/NextEvents.astro';
-import YearlyEvents from '@components/events/YearlyEvents.svelte';
-import { eventData } from '@data';
 import Layout from '@layouts/Layout.astro';
-
-const yearlyEvents = await eventData.getAllYearlyEvents();
 ---
 
 <Layout title="Events">
   <Hero />
   <NextEvents />
-  <YearlyEvents client:load events={yearlyEvents} />
 </Layout>

src/pages/impressum.astro

@@ -3,7 +3,7 @@ import Layout from '@layouts/Layout.astro';
 ---
 
 <Layout title="YoungVision e.V. - Impressum">
-  <div class="max-w-prose px-4 py-8 lg:px-24 lg:py-12">
+  <div class="mx-auto max-w-[80rem] px-4 py-8 lg:px-24 lg:py-12">
     <h1>Impressum</h1>
     <h2>Angaben gemäß § 5 TMG:</h2>
     <address>YoungVision e.V. Am bhf 4, 16307 Mescherin Deutschland</address>
@@ -31,7 +31,7 @@ import Layout from '@layouts/Layout.astro';
       </dd>
     </dl>
     <h2>Registereintrag</h2>
-    <p>Registergericht: Amtsgericht Charlottenburg Registernummer: VR 32815 B</p>
+    <p>Registergericht: Amtsgericht Neuruppin <br /> Registernummer: VR 5579 NP</p>
     <a
       class="text-gray-800 underline"
       download="YoungVision_Satzung_2023.pdf"