From e7268f644de674984310b288053e47214786aed5 Mon Sep 17 00:00:00 2001 From: RizqiSyahrendra Date: Mon, 3 Feb 2025 09:09:21 +0700 Subject: [PATCH] feat(blog): render blog data from payload --- package-lock.json | 7 ++ package.json | 3 +- src/app/(main)/blog/[slug]/page.tsx | 139 ++++++++++++++-------------- src/utils/datetime.ts | 5 + 4 files changed, 82 insertions(+), 72 deletions(-) create mode 100644 src/utils/datetime.ts diff --git a/package-lock.json b/package-lock.json index 23fbfda..29daaa1 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 4f5014f..5da2985 100644 --- a/package.json +++ b/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" } -} \ No newline at end of file +} diff --git a/src/app/(main)/blog/[slug]/page.tsx b/src/app/(main)/blog/[slug]/page.tsx index 6eb2e9c..08e1ec8 100644 --- a/src/app/(main)/blog/[slug]/page.tsx +++ b/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 = { - title: - "Slick Blogs Single || Resonance — One & Multi Page React Nextjs Creative Template", - description: - "Resonance — One & Multi Page React Nextjs Creative Template", -}; +async function fetchBlog(slug: string) { + const payload = await getPayload({ config: payloadConfig }); + const blogDataQuery = await payload.find({ + collection: "blogs", + 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 { + 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 blogData = await payload.find({ - collection: "blogs", - where: { - slug: { equals: slug }, - }, - pagination: false, - }); - console.log("data", blogData); + const data = await fetchBlog(slug); + + if (!data) return <>; const blog = allBlogs.filter((elm) => elm.id == 34)[0] || allBlogs[0]; return ( @@ -51,8 +97,7 @@ export default async function BlogRead({

- {/* @ts-ignore */} - {blog?.title || blog?.postTitle} + {data.data.title}

{/* Author, Categories, Comments */}
- Date: December 25 + Date:{" "} + {data.createdAt}
@@ -99,65 +145,16 @@ export default async function BlogRead({
Image Description
-

- 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. - 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 dignissim consectetur, nulla - erat ultrices purus, ut 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. -

-
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Integer posuere erat a ante. Vestibulum - pellentesque, purus ut dignissim consectetur, nulla erat - ultrices purus. -

-
- Someone famous in - Source Title -
-
-

- Praesent ultricies ut ipsum non laoreet. Nunc ac - ultricies 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. -

-
    -
  • First item of the list
    • -
  • Second item of the list
    • -
  • Third item of the list
    • -
-

- 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 dignissim consectetur, nulla erat ultrices purus, - ut consequat sem elit non sem. -

+
+ +
{/* End Post */} diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts new file mode 100644 index 0000000..f48879e --- /dev/null +++ b/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); +}