add association index and subpages

web/src/app/foreninger/[slug]/page.tsx

@@ -0,0 +1,78 @@
+import { graphql } from "@/gql";
+import { AssociationFragment } from "@/gql/graphql";
+import { getClient } from "@/app/client";
+import { Blocks } from "@/components/blocks/Blocks";
+import Image from "@/components/general/Image";
+
+export async function generateStaticParams() {
+  const allAssociationSlugsQuery = graphql(`
+    query allAssociationSlugs {
+      pages(contentType: "associations.AssociationPage") {
+        id
+        slug
+      }
+    }
+  `);
+  const { data, error } = await getClient().query(allAssociationSlugsQuery, {});
+
+  if (data === undefined || error) {
+    throw new Error("failed to generate static params");
+  }
+
+  return data?.pages.map((page: any) => ({
+    slug: page.slug,
+  }));
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const associationBySlugQuery = graphql(`
+    query associationBySlug($slug: String!) {
+      association: page(
+        contentType: "associations.AssociationPage"
+        slug: $slug
+      ) {
+        ... on AssociationPage {
+          ...Association
+        }
+      }
+    }
+  `);
+
+  const { data, error } = await getClient().query(associationBySlugQuery, {
+    slug: params.slug,
+  });
+
+  const association = (data?.association ?? {}) as AssociationFragment;
+
+  return (
+    <main className="site-main" id="main">
+      <section className="page-header">
+        <h1>{association.title}</h1>
+        {association.logo && (
+          <Image
+            src={association.logo.url}
+            alt=""
+            width={association.logo.width}
+            height={association.logo.height}
+            sizes="100vw"
+          />
+        )}
+      </section>
+      <section className="page-content">
+        <Blocks blocks={association.body} />
+        <table>
+          <tr>
+            <th>Type</th>
+            <td>{association.associationType}</td>
+          </tr>
+          {association.websiteUrl && (
+            <tr>
+              <th>Nettside</th>
+              <td>{association.websiteUrl}</td>
+            </tr>
+          )}
+        </table>
+      </section>
+    </main>
+  );
+}