From 43223e8cd3bd71037717bf9221b7a5fbad430ec4 Mon Sep 17 00:00:00 2001
From: Bridger Tower <bridgertower@gmail.com>
Date: Tue, 16 Jan 2024 10:59:32 -0700
Subject: [PATCH] feat: single page rendering

---
 app/(pages)/[slug]/page.tsx      | 48 ++++++++++++++++++++++++++++++++
 components.json                  |  2 +-
 components/content/page-body.tsx |  8 ++----
 lib/data.ts                      |  2 +-
 lib/types.ts                     |  7 ++---
 5 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 app/(pages)/[slug]/page.tsx

diff --git a/app/(pages)/[slug]/page.tsx b/app/(pages)/[slug]/page.tsx
new file mode 100644
index 0000000..7f6197e
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/components.json b/components.json
index 15f2b02..fa674c9 100644
--- a/components.json
+++ b/components.json
@@ -14,4 +14,4 @@
     "components": "@/components",
     "utils": "@/lib/utils"
   }
-}
\ No newline at end of file
+}
diff --git a/components/content/page-body.tsx b/components/content/page-body.tsx
index 2cdff1b..f236809 100644
--- a/components/content/page-body.tsx
+++ b/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 }}
diff --git a/lib/data.ts b/lib/data.ts
index e2e087d..bf060a4 100644
--- a/lib/data.ts
+++ b/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`,
     {
diff --git a/lib/types.ts b/lib/types.ts
index 4d31703..3a18a13 100644
--- a/lib/types.ts
+++ b/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 = {