feat(blog): render blog data from payload
This commit is contained in:
parent
3b25223659
commit
e7268f644d
7
package-lock.json
generated
7
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -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<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 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({
|
||||
<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 */}
|
||||
{blog?.title || blog?.postTitle}
|
||||
{data.data.title}
|
||||
</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>
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<blockquote>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
||||
Integer posuere erat a 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 dignissim consectetur, nulla erat ultrices purus,
|
||||
ut consequat sem elit non sem.
|
||||
</p>
|
||||
<div>
|
||||
<RichText data={data.data.content} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* End Post */}
|
||||
|
||||
5
src/utils/datetime.ts
Normal file
5
src/utils/datetime.ts
Normal file
@ -0,0 +1,5 @@
|
||||
import dayjs from "dayjs";
|
||||
|
||||
export function formatDate(iso: string, format: string = "MMM, D YYYY") {
|
||||
return dayjs(iso).format(format);
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user