add titles, description and images for seo

web/src/app/arrangementer/page.tsx

@@ -1,17 +1,36 @@
+import { Suspense } from "react";
+import { Metadata, ResolvingMetadata } from "next";
 import { getClient } from "@/app/client";
 import { EventContainer } from "@/components/events/EventContainer";
 import {
-  futureEventsQuery,
+  eventsOverviewQuery,
+  eventIndexMetadataQuery,
   EventFragment,
   EventCategory,
   EventOrganizer,
 } from "@/lib/event";
 import { PageHeader } from "@/components/general/PageHeader";
-import { Suspense } from "react";
-import { VenueFragment } from "@/gql/graphql";
+import { EventIndexFragment, VenueFragment } from "@/gql/graphql";
+import { getSeoMetadata } from "@/lib/seo";
+
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(eventIndexMetadataQuery, {});
+  const index = (data?.index ?? []) as EventIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
 
 export default async function Page() {
-  const { data, error } = await getClient().query(futureEventsQuery, {});
+  const { data, error } = await getClient().query(eventsOverviewQuery, {});
+  const index = (data?.index ?? []) as EventIndexFragment;
   const events = (data?.events?.futureEvents ?? []) as EventFragment[];
   const eventCategories = (data?.eventCategories ?? []) as EventCategory[];
   const eventOrganizers = (data?.eventOrganizers ?? []) as EventOrganizer[];