feat(blog): render blog data from payload

package-lock.json

@@ -15,6 +15,7 @@
         "@payloadcms/storage-s3": "^3.20.0",
         "@popperjs/core": "2.11.8",
         "bootstrap": "^5.1.3",
+        "dayjs": "^1.11.13",
         "graphql": "^16.10.0",
         "imagesloaded": "^5.0.0",
         "isotope-layout": "^3.0.6",
@@ -5675,6 +5676,12 @@
         "node": "*"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.4.0",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "@payloadcms/storage-s3": "^3.20.0",
     "@popperjs/core": "2.11.8",
     "bootstrap": "^5.1.3",
+    "dayjs": "^1.11.13",
     "graphql": "^16.10.0",
     "imagesloaded": "^5.0.0",
     "isotope-layout": "^3.0.6",
@@ -58,4 +59,4 @@
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }
-}
+}

src/app/(main)/blog/[slug]/page.tsx

@@ -3,15 +3,67 @@ import BlogWidget from "@/components/BlogWidget";
 import CommentForm from "@/components/CommentForm";
 import { allBlogs } from "@/data/blogs";
 import payloadConfig from "@/payload.config";
+import { formatDate } from "@/utils/datetime";
 import Image from "next/image";
 import { getPayload } from "payload";
+import { RichText } from "@payloadcms/richtext-lexical/react";
+import { Metadata } from "next";
 
-export const metadata = {
+async function fetchBlog(slug: string) {
-  title:
+  const payload = await getPayload({ config: payloadConfig });
-    "Slick Blogs Single || Resonance — One & Multi Page React Nextjs Creative Template",
+  const blogDataQuery = await payload.find({
-  description:
+    collection: "blogs",
-    "Resonance — One & Multi Page React Nextjs Creative Template",
+    where: {
-};
+      slug: { equals: slug },
+    },
+    limit: 1,
+    pagination: false,
+  });
+
+  if (!blogDataQuery?.docs?.[0]) return null;
+
+  const data = blogDataQuery?.docs?.[0];
+  const createdAt = formatDate(data.createdAt);
+  const imgUrl = typeof data.img !== "number" ? (data?.img?.url ?? "") : "";
+
+  return {
+    data,
+    createdAt,
+    imgUrl,
+  };
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string };
+}): Promise<Metadata> {
+  const blog = await fetchBlog(params.slug);
+
+  if (!blog) {
+    return {
+      title: "Cochise Oncology",
+      description: "Cochise Oncology",
+      openGraph: {
+        title: "Cochise Oncology",
+        description: "Cochise Oncology",
+        images: [""],
+      },
+    };
+  }
+
+  const title = `${blog.data.title} - Cochise Oncology`;
+
+  return {
+    title: title,
+    description: title,
+    openGraph: {
+      title: title,
+      description: title,
+      images: [blog.imgUrl || ""],
+    },
+  };
+}
 
 export default async function BlogRead({
   params,
@@ -19,15 +71,9 @@ export default async function BlogRead({
   params: Promise<{ slug: string }>;
 }) {
   const slug = (await params).slug;
-  const payload = await getPayload({ config: payloadConfig });
+  const data = await fetchBlog(slug);
-  const blogData = await payload.find({
+
-    collection: "blogs",
+  if (!data) return <></>;
-    where: {
-      slug: { equals: slug },
-    },
-    pagination: false,
-  });
-  console.log("data", blogData);
 
   const blog = allBlogs.filter((elm) => elm.id == 34)[0] || allBlogs[0];
   return (
@@ -51,8 +97,7 @@ export default async function BlogRead({
           <div className="row">
             <div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
               <h1 className="hs-title-10 mb-10 wow fadeInUp">
-                {/* @ts-ignore */}
+                {data.data.title}
-                {blog?.title || blog?.postTitle}
               </h1>
               {/* Author, Categories, Comments */}
               <div
@@ -62,7 +107,8 @@ export default async function BlogRead({
                 <div className="d-inline-block me-3">
                   <a href="#">
                     <i className="mi-clock size-16" />
-                    <span className="visually-hidden">Date:</span> December 25
+                    <span className="visually-hidden">Date:</span>{" "}
+                    {data.createdAt}
                   </a>
                 </div>
                 <div className="d-inline-block me-3">
@@ -99,65 +145,16 @@ export default async function BlogRead({
                   <div className="blog-item-body">
                     <div className="mb-40 mb-xs-30">
                       <Image
-                        src="/assets/images/demo-fancy/blog/post-prev-3-large.jpg"
+                        src={data.imgUrl}
                         alt="Image Description"
                         width={1350}
                         height={759}
                         className="round"
                       />
                     </div>
-                    <p>
+                    <div>
-                      Morbi lacus massa, euismod ut turpis molestie, tristique
+                      <RichText data={data.data.content} />
-                      sodales est. Integer sit amet mi id sapien tempor molestie
+                    </div>
-                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Mauris non laoreet dui. Morbi lacus massa, euismod ut
-                      turpis molestie, tristique sodales est. Integer sit amet
-                      mi id sapien tempor molestie in nec massa.
-                    </p>
-                    <p>
-                      Fusce non ante sed lorem rutrum feugiat. Vestibulum
-                      pellentesque, purus ut&nbsp;dignissim consectetur, nulla
-                      erat ultrices purus, ut&nbsp;consequat sem elit non sem.
-                      Morbi lacus massa, euismod ut turpis molestie, tristique
-                      sodales est. Integer sit amet mi id sapien tempor molestie
-                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
-                    </p>
-                    <blockquote>
-                      <p>
-                        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                        Integer posuere erat a&nbsp;ante. Vestibulum
-                        pellentesque, purus ut dignissim consectetur, nulla erat
-                        ultrices purus.
-                      </p>
-                      <footer>
-                        Someone famous in
-                        <cite title="Source Title"> Source Title </cite>
-                      </footer>
-                    </blockquote>
-                    <p>
-                      Praesent ultricies ut ipsum non laoreet. Nunc ac
-                      <a href="#">ultricies</a> leo. Nulla ac ultrices arcu.
-                      Nullam adipiscing lacus in consectetur posuere. Nunc
-                      malesuada tellus turpis, ac pretium orci molestie vel.
-                      Morbi lacus massa, euismod ut turpis molestie, tristique
-                      sodales est. Integer sit amet mi id sapien tempor molestie
-                      in nec massa. Fusce non ante sed lorem rutrum feugiat.
-                    </p>
-                    <ul>
-                      <li>First item of the list</li>
-                      <li>Second item of the list</li>
-                      <li>Third item of the list</li>
-                    </ul>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                      Mauris non laoreet dui. Morbi lacus massa, euismod ut
-                      turpis molestie, tristique sodales est. Integer sit amet
-                      mi id sapien tempor molestie in nec massa. Fusce non ante
-                      sed lorem rutrum feugiat. Vestibulum pellentesque, purus
-                      ut&nbsp;dignissim consectetur, nulla erat ultrices purus,
-                      ut&nbsp;consequat sem elit non sem.
-                    </p>
                   </div>
                 </div>
                 {/* End Post */}

src/utils/datetime.ts

@@ -0,0 +1,5 @@
+import dayjs from "dayjs";
+
+export function formatDate(iso: string, format: string = "MMM, D YYYY") {
+  return dayjs(iso).format(format);
+}