feat: Add event collection and event page structure

- Introduced a new events collection in config.ts with schema validation.
- Created a new event markdown file for the WarGear event.
- Updated German translations to include new event-related strings.
- Modified PageLayout to support a wide layout option.
- Enhanced announcements page to improve tag filtering and post rendering.
- Implemented dynamic event pages with detailed event information and fight plans.
- Added an index page for events to list all upcoming events.

src/pages/events/[slug].astro

@@ -0,0 +1,85 @@
+---
+import type { ExtendedEvent } from "@components/types/event";
+import PageLayout from "@layouts/PageLayout.astro";
+import { astroI18n, createGetStaticPaths } from "astro-i18n";
+import { getCollection, type CollectionEntry } from "astro:content";
+import EventFights from "@components/event/EventFights.svelte";
+
+export const getStaticPaths = createGetStaticPaths(async () => {
+    const events = await Promise.all(
+        (await getCollection("events")).map(async (event) => ({
+            event: (await fetch(import.meta.env.PUBLIC_API_SERVER + "/events/" + event.data.eventId).then((value) => value.json())) as ExtendedEvent,
+            page: event,
+        }))
+    );
+
+    return events.map((event) => ({
+        props: {
+            event: event.event,
+            page: event.page,
+        },
+        params: {
+            slug: event.page.slug,
+        },
+    }));
+});
+
+const { event, page } = Astro.props as { event: ExtendedEvent; page: CollectionEntry<"events"> };
+
+const { Content } = await page.render();
+---
+
+<PageLayout title={event.event.name} wide={true}>
+    <div>
+        <h1 class="text-2xl font-bold">{event.event.name}</h1>
+        <h2 class="text-md text-gray-300 mb-4">
+            {
+                new Date(event.event.start).toLocaleDateString(astroI18n.locale, {
+                    year: "numeric",
+                    month: "numeric",
+                    day: "numeric",
+                })
+            }
+            {
+                new Date(event.event.start).toDateString() !== new Date(event.event.end).toDateString()
+                    ? ` - ${new Date(event.event.end).toLocaleDateString(astroI18n.locale, {
+                          year: "numeric",
+                          month: "numeric",
+                          day: "numeric",
+                      })}`
+                    : ""
+            }
+        </h2>
+    </div>
+    <article>
+        <Content />
+    </article>
+    {
+        page.data.viewConfig && (
+            <div class="py-2 border-t border-t-gray-600">
+                <h1 class="text-2xl font-bold mb-4">Kampfplan</h1>
+                <EventFights viewConfig={page.data.viewConfig} event={event} client:load />
+            </div>
+        )
+    }
+</PageLayout>
+
+<style is:global>
+    article {
+        > * {
+            all: revert;
+        }
+
+        code {
+            @apply dark:text-neutral-400 text-neutral-800;
+        }
+
+        pre.astro-code {
+            @apply w-fit p-4 rounded-md border-2 border-gray-600 my-4;
+        }
+
+        a {
+            @apply text-neutral-800 dark:text-neutral-400 hover:underline;
+        }
+    }
+</style>

src/pages/events/index.astro

@@ -0,0 +1,36 @@
+---
+import type { ExtendedEvent } from "@components/types/event";
+import PageLayout from "@layouts/PageLayout.astro";
+import { getCollection } from "astro:content";
+
+const events = await Promise.all(
+    (await getCollection("events")).map(async (event) => ({
+        ...event,
+        data: {
+            ...event.data,
+            event: (await fetch(import.meta.env.PUBLIC_API_SERVER + "/events/" + event.data.eventId).then((value) => value.json())) as ExtendedEvent,
+        },
+    }))
+);
+---
+
+<PageLayout title="Events">
+    {
+        events.map((event) => (
+            <article class="mb-8">
+                <h2 class="text-2xl font-bold mb-2">
+                    <a href={`/events/${event.slug}/`} class="text-blue-600 hover:underline">
+                        {event.data.event.event.name ?? "Hello, World!"}
+                    </a>
+                </h2>
+                <p class="text-gray-600 mb-1">
+                    {new Date(event.data.event.event.start).toLocaleDateString(undefined, {
+                        year: "numeric",
+                        month: "long",
+                        day: "numeric",
+                    })}
+                </p>
+            </article>
+        ))
+    }
+</PageLayout>