add titles, description and images for seo

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

@@ -1,11 +1,23 @@
+import { Metadata, ResolvingMetadata } from "next";
+import { notFound } from "next/navigation";
 import { getClient } from "@/app/client";
 import { Breadcrumb } from "@/components/general/Breadcrumb";
 import { ImageFigure } from "@/components/general/Image";
 import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
-import { formatDate, formatExtendedDateTime } from "@/lib/date";
-import { notFound } from "next/navigation";
+import { formatDate } from "@/lib/date";
+import { getSeoMetadata } from "@/lib/seo";
+
+const newsBySlugQuery = graphql(`
+  query newsBySlug($slug: String!) {
+    news: page(contentType: "news.NewsPage", slug: $slug) {
+      ... on NewsPage {
+        ...News
+      }
+    }
+  }
+`);
 
 export async function generateStaticParams() {
   const allNewsSlugsQuery = graphql(`
@@ -27,17 +39,24 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function Page({ params }: { params: { slug: string } }) {
-  const newsBySlugQuery = graphql(`
-    query newsBySlug($slug: String!) {
-      news: page(contentType: "news.NewsPage", slug: $slug) {
-        ... on NewsPage {
-          ...News
-        }
-      }
-    }
-  `);
+export async function generateMetadata(
+  { params }: { params: { slug: string } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(newsBySlugQuery, {
+    slug: params.slug,
+  });
+  const news = (data?.news ?? []) as NewsFragment[];
 
+  if (!news) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(news, parent);
+  return metadata;
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
   const { data, error } = await getClient().query(newsBySlugQuery, {
     slug: params.slug,
   });
@@ -52,7 +71,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
   return (
     <main className="site-main" id="main">
       <section className="news-header">
-        <Breadcrumb link="/aktuelt" text="Nyhet" date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")} />
+        <Breadcrumb
+          link="/aktuelt"
+          text="Nyhet"
+          date={formatDate(news.firstPublishedAt, "d. MMMM yyyy")}
+        />
         <h1 className="news-title">{news.title}</h1>
         {news.lead && (
           <div

web/src/app/aktuelt/page.tsx

@@ -1,9 +1,24 @@
-import { graphql } from "@/gql";
 import { getClient } from "@/app/client";
 import { NewsList } from "@/components/news/NewsList";
-import Link from "next/link";
+import { Metadata, ResolvingMetadata } from "next";
 import { PageHeader } from "@/components/general/PageHeader";
 import { newsQuery, NewsFragment, NewsIndexFragment } from "@/lib/news";
+import { getSeoMetadata } from "@/lib/seo";
+
+export async function generateMetadata(
+  { params }: { params: { url: string[] } },
+  parent: ResolvingMetadata
+): Promise<Metadata | null> {
+  const { data, error } = await getClient().query(newsQuery, {});
+  const index = (data?.index ?? []) as NewsIndexFragment;
+
+  if (!index) {
+    return null;
+  }
+
+  const metadata = await getSeoMetadata(index, parent);
+  return metadata;
+}
 
 export default async function Page() {
   const { data, error } = await getClient().query(newsQuery, {});