From 5b401b7b6e415d60b2bbeb8c71cc309e4979d0a0 Mon Sep 17 00:00:00 2001
From: RizqiSyahrendra <rizqialaudinsyahrendra@gmail.com>
Date: Thu, 13 Feb 2025 09:33:47 +0700
Subject: [PATCH] feat(page): merge pages and blogs into one screen

---
 next.config.ts                            |  1 +
 src/app/(main)/[pageslug]/page.tsx        | 35 -------------------
 src/app/(main)/{blog => }/[slug]/page.tsx | 41 +++++++++++++----------
 src/components/Blogs/BlogCardItem.tsx     |  4 +--
 src/components/Blogs/BlogDetail.tsx       |  2 +-
 src/components/Pages/Page.tsx             | 10 ++++--
 src/payload.config.ts                     |  2 ++
 src/services/payload/blog.ts              |  2 +-
 8 files changed, 39 insertions(+), 58 deletions(-)
 delete mode 100644 src/app/(main)/[pageslug]/page.tsx
 rename src/app/(main)/{blog => }/[slug]/page.tsx (53%)

diff --git a/next.config.ts b/next.config.ts
index 88b9dfc..eb28c9f 100644
--- a/next.config.ts
+++ b/next.config.ts
@@ -2,6 +2,7 @@ import { withPayload } from "@payloadcms/next/withPayload";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
+  trailingSlash: true,
   images: {
     remotePatterns: [
       {
diff --git a/src/app/(main)/[pageslug]/page.tsx b/src/app/(main)/[pageslug]/page.tsx
deleted file mode 100644
index 59623a0..0000000
--- a/src/app/(main)/[pageslug]/page.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
-import Page from "@/components/Pages/Page";
-import Image from "next/image";
-import { Suspense } from "react";
-
-export const metadata = {
-  title: "Cochise Oncology",
-  description: "Cochise Oncology",
-};
-
-export default async function CustomPage({ params }: { params?: Promise<{ pageslug?: string }> }) {
-  const slug = (await params)?.pageslug;
-
-  return (
-    <>
-      <Suspense fallback={<Loading />}>
-        <Page slug={slug} />
-      </Suspense>
-    </>
-  );
-}
-
-function Loading() {
-  return (
-    <>
-      <section className="page-section bg-dark-1 bg-gradient-gray-dark-1 light-content bg-scroll overflow-hidden">
-        <div className="bg-shape-1 opacity-003">
-          <Image src="/assets/images/demo-fancy/bg-shape-1.svg" width={1443} height={844} alt="" />
-        </div>
-      </section>
-
-      <BlogDetailContentSkeleton />
-    </>
-  );
-}
diff --git a/src/app/(main)/blog/[slug]/page.tsx b/src/app/(main)/[slug]/page.tsx
similarity index 53%
rename from src/app/(main)/blog/[slug]/page.tsx
rename to src/app/(main)/[slug]/page.tsx
index 5b76ce0..0529fe7 100644
--- a/src/app/(main)/blog/[slug]/page.tsx
+++ b/src/app/(main)/[slug]/page.tsx
@@ -1,28 +1,36 @@
-import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
-import BlogDetail, { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
+import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
+import Page from "@/components/Pages/Page";
 import { fetchBlogDetail } from "@/services/payload/blog";
+import { fetchPageBySlug } from "@/services/payload/page";
 import { Metadata } from "next";
 import Image from "next/image";
 import { Suspense } from "react";
 
 export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
   const name = "Cochise Oncology";
+  let title = "Page";
+  let description = "Page";
+  let imgUrl = "";
+
   const slug = (await params).slug;
   const blog = await fetchBlogDetail(slug);
 
-  if (!blog) {
-    return {
-      title: name,
-      description: name,
-      openGraph: {
-        title: name,
-        description: name,
-      },
-    };
+  // check for blog data
+  if (!!blog) {
+    title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
+    description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;
+    imgUrl = blog.imgUrl;
   }
 
-  const title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
-  const description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;
+  // check for page data when blog is not found
+  if (!blog) {
+    const page = await fetchPageBySlug({ slug });
+    if (!!page) {
+      title = `${!!page?.meta?.title ? page?.meta?.title : page.title} - ${name}`;
+      description = `${!!page?.meta?.description ? page?.meta?.description : page.title} - ${name}`;
+      imgUrl = page.heroImg?.url;
+    }
+  }
 
   return {
     title: title,
@@ -30,19 +38,18 @@ export async function generateMetadata({ params }: { params: Promise<{ slug: str
     openGraph: {
       title: title,
       description: description,
-      images: [{ url: blog.imgUrl }],
+      images: !!imgUrl ? { url: imgUrl } : undefined,
     },
   };
 }
 
-export default async function SingleBlogPage({ params }: { params: Promise<{ slug: string }> }) {
+export default async function SinglePage({ params }: { params: Promise<{ slug: string }> }) {
   const slug = (await params).slug;
 
   return (
     <>
       <Suspense fallback={<Loading />}>
-        <BlogDetail slug={slug} />
-        <BeforeFooterBlock />
+        <Page slug={slug} />
       </Suspense>
     </>
   );
diff --git a/src/components/Blogs/BlogCardItem.tsx b/src/components/Blogs/BlogCardItem.tsx
index 46d8a13..46b4da6 100644
--- a/src/components/Blogs/BlogCardItem.tsx
+++ b/src/components/Blogs/BlogCardItem.tsx
@@ -22,13 +22,13 @@ export function BlogCardItem({ data }: BlogCardItemProps) {
     <div className="post-prev-3 col-12 col-lg-10 offset-lg-1 col-xl-6 offset-xl-0 mt-50">
       <div className="post-prev-3-container d-block d-sm-flex">
         <div className="post-prev-3-img">
-          <a href={`/blog/${data.slug}`}>
+          <a href={`/${data.slug}`}>
             <Image width={400} height={488} src={data?.img?.url ?? ""} alt={data?.img?.alt ?? ""} />
           </a>
         </div>
         <div className="post-prev-3-intro">
           <h4 className="post-prev-3-title">
-            <a href={`/blog/${data.slug}`}>{data.title}</a>
+            <a href={`/${data.slug}`}>{data.title}</a>
           </h4>
           <div className="post-prev-3-text">{data.contentPreview}</div>
           <div className="post-prev-3-info clearfix">
diff --git a/src/components/Blogs/BlogDetail.tsx b/src/components/Blogs/BlogDetail.tsx
index 745c0a5..164b54e 100644
--- a/src/components/Blogs/BlogDetail.tsx
+++ b/src/components/Blogs/BlogDetail.tsx
@@ -5,7 +5,7 @@ import Image from "next/image";
 import { FaFacebook, FaLinkedin, FaTwitter } from "react-icons/fa";
 
 export interface BlogDetailProps {
-  slug: string;
+  slug: string | undefined;
 }
 
 export default async function BlogDetail({ slug }: BlogDetailProps) {
diff --git a/src/components/Pages/Page.tsx b/src/components/Pages/Page.tsx
index f908cdd..89e0cd2 100644
--- a/src/components/Pages/Page.tsx
+++ b/src/components/Pages/Page.tsx
@@ -1,7 +1,8 @@
+import { BeforeFooterBlock } from "@/components/Blocks/BeforeFooter";
 import { RenderBlocks } from "@/components/Blocks/RenderBlocks";
+import BlogDetail from "@/components/Blogs/BlogDetail";
 import { fetchPageBySlug } from "@/services/payload/page";
 import Image from "next/image";
-import { notFound } from "next/navigation";
 
 export interface PageProps {
   slug: string | undefined;
@@ -11,7 +12,12 @@ export default async function Page({ slug }: PageProps) {
   const page = await fetchPageBySlug({ slug });
 
   if (!page) {
-    return notFound();
+    return (
+      <>
+        <BlogDetail slug={slug} />;
+        <BeforeFooterBlock />
+      </>
+    );
   }
 
   return (
diff --git a/src/payload.config.ts b/src/payload.config.ts
index e242a8b..9c63377 100644
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@@ -7,6 +7,7 @@ import path from "path";
 import { buildConfig } from "payload";
 import sharp from "sharp";
 import { fileURLToPath } from "url";
+import { migrations } from "./migrations";
 
 import { BlogCategories } from "@/collections/BlogCategories";
 import { Blogs } from "@/collections/Blogs";
@@ -58,6 +59,7 @@ export default buildConfig({
     pool: {
       connectionString: process.env.DATABASE_URI || "",
     },
+    prodMigrations: migrations,
   }),
   editor: lexicalEditor({
     features: () => {
diff --git a/src/services/payload/blog.ts b/src/services/payload/blog.ts
index c3269e2..c5fd7a8 100644
--- a/src/services/payload/blog.ts
+++ b/src/services/payload/blog.ts
@@ -30,7 +30,7 @@ export async function fetchBlog(page: number | undefined) {
   };
 }
 
-export async function fetchBlogDetail(slug: string) {
+export async function fetchBlogDetail(slug: string | undefined) {
   const payload = await getPayload({ config: payloadConfig });
   const blogDataQuery = await payload.find({
     collection: "blogs",