feat(page): merge pages and blogs into one screen

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: [
       {

src/app/(main)/[pageslug]/page.tsx

@@ -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 />
-    </>
-  );
-}

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);
 
+  // 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;
+  }
+
+  // check for page data when blog is not found
   if (!blog) {
-    return {
-      title: name,
-      description: name,
-      openGraph: {
-        title: name,
-        description: name,
-      },
-    };
+    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;
+    }
   }
-
-  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}`;
 
   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>
     </>
   );

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">

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) {

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 (

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: () => {

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",