feat: single page rendering

app/(pages)/[slug]/page.tsx

@@ -0,0 +1,48 @@
+import fjord from "@/fjord.config";
+import { Metadata } from "next";
+import { fetchPageBySlug } from "@/lib/data";
+import CTA from "@/components/sections/cta";
+import * as Craft from "@/components/craft/layout";
+import { notFound } from "next/navigation";
+
+export async function generateStaticParams() {
+  const res = await fetch(`${fjord.wordpress_url}/wp-json/wp/v2/pages?_embed`, {
+    next: { revalidate: 3600 },
+  });
+
+  const data: PageProps[] = await res.json();
+
+  return data.map((page) => ({
+    slug: page?.slug,
+  }));
+}
+
+export default async function Page({ params }: { params: { slug: string } }) {
+  const page: PageProps = await fetchPageBySlug(params?.slug);
+  if (!page) {
+    return notFound();
+  }
+
+  const date = new Date(page.date);
+  const author = page._embedded?.author?.[0] ?? null;
+
+  const metadata: Metadata = {
+    title: `${page.title.rendered} | ${fjord.site_name}`,
+    description: page.excerpt?.rendered,
+  };
+
+  return (
+    <Craft.Main>
+      <Craft.Section>
+        <Craft.Container>
+          <h1 dangerouslySetInnerHTML={{ __html: page.title.rendered }}></h1>
+          <div
+            dangerouslySetInnerHTML={{ __html: page.content.rendered }}
+          ></div>
+        </Craft.Container>
+      </Craft.Section>
+
+      <CTA />
+    </Craft.Main>
+  );
+}

components.json

@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
+}

components/content/page-body.tsx

@@ -2,7 +2,7 @@ import BackButton from "@/components/global/elements/back-button";
 import Image from "next/image";
 import * as Craft from "@/components/craft/layout";
 
-const PageBody = ({ page, date, author }: PageProps) => {
+const PageBody = ({ page, date }: PageProps) => {
   return (
     <Craft.Section>
       <Craft.Container>
@@ -11,10 +11,7 @@ const PageBody = ({ page, date, author }: PageProps) => {
           className="mb-6 text-4xl"
           dangerouslySetInnerHTML={{ __html: page.title.rendered }}
         ></h1>
-        <div className="flex gap-2">
-          <p>{new Date(date).toDateString()}</p> |
-          {author && <p>{author.name}</p>}
-        </div>
+
         {page._embedded?.["wp:featuredmedia"] &&
           page._embedded["wp:featuredmedia"][0]?.media_details?.sizes?.full
             ?.source_url && (
@@ -30,6 +27,7 @@ const PageBody = ({ page, date, author }: PageProps) => {
               layout="responsive"
             />
           )}
+
         <div
           className="prose prose-p:font-light prose-headings:font-normal prose-strong:font-normal lg:prose-lg dark:prose-invert"
           dangerouslySetInnerHTML={{ __html: page.content.rendered }}

lib/data.ts

@@ -106,7 +106,7 @@ export async function fetchAuthors() {
 }
 
 // Fetch a single page by its slug
-export async function fetchPage(slug: string) {
+export async function fetchPageBySlug(slug: string) {
   const res = await fetch(
     `${fjord.wordpress_url}/wp-json/wp/v2/pages?slug=${slug}&_embed`,
     {

lib/types.ts

@@ -207,17 +207,14 @@ type PageProps = {
   title: RenderedContentProps;
   date: string;
   slug: string;
+  content: RenderedContentProps;
   excerpt: RenderedContentProps;
-  _embedded: {
-    "wp:featuredmedia": MediaDetailsProps[];
-    author?: AuthorDetailsProps;
-  };
+  _embedded: EmbeddedMediaProps;
   page: {
     title: RenderedContentProps;
     content: RenderedContentProps;
     _embedded?: EmbeddedMediaProps;
   };
-  author: AuthorProps;
 };
 
 type faqProps = {