web: move page rendering logic from page.tsx to components

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

@@ -1,24 +1,14 @@
 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 {
+  NewsPageView,
+  newsBySlugQuery,
+} from "@/components/news/NewsPageView";
 import { graphql } from "@/gql";
 import { NewsFragment } from "@/gql/graphql";
-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(`
     query allNewsSlugs {
@@ -79,34 +69,5 @@ export default async function Page({ params }: { params: Params }) {
   }
 
   const news = data?.news as NewsFragment;
-  const featuredImage: any = news.featuredImage;
-  return (
-    <main className="site-main" id="main">
-      <section className="news-header">
-        <Breadcrumb
-          link="/aktuelt"
-          text="Nyhet"
-          date={news.firstPublishedAt ? formatDate(news.firstPublishedAt, "d. MMMM yyyy") : ""}
-        />
-        <h1 className="news-title">{news.title}</h1>
-        {news.lead && (
-          <div
-            className="lead"
-            dangerouslySetInnerHTML={{ __html: news.lead }}
-          />
-        )}
-        {featuredImage && (
-          <ImageFigure
-            src={featuredImage.url}
-            alt={featuredImage.alt ?? ""}
-            width={featuredImage.width}
-            height={featuredImage.height}
-            attribution={featuredImage.attribution}
-            sizes="100vw"
-          />
-        )}
-      </section>
-      <PageContent blocks={news.body} />
-    </main>
-  );
+  return <NewsPageView news={news} />;
 }

web/src/app/aktuelt/page.tsx

@@ -1,7 +1,6 @@
 import { getClient } from "@/app/client";
-import { NewsList } from "@/components/news/NewsList";
+import { NewsIndexView } from "@/components/news/NewsIndexView";
 import { Metadata, ResolvingMetadata } from "next";
-import { PageHeader } from "@/components/general/PageHeader";
 import { newsQuery, NewsFragment, NewsIndexFragment } from "@/lib/news";
 import { getSeoMetadata } from "@/lib/seo";
 
@@ -30,10 +29,5 @@ export default async function Page() {
   const news = (data?.news ?? []) as NewsFragment[];
   const index = data?.index as NewsIndexFragment;
 
-  return (
-    <main className="site-main" id="main">
-      <PageHeader heading={index.title} lead={index.lead} align="left" />
-      <NewsList news={news} />
-    </main>
-  );
+  return <NewsIndexView index={index} news={news} />;
 }