2025-02-03 03:19:32 +07:00
|
|
|
import BlogComments from "@/components/BlogComments";
|
|
|
|
import BlogWidget from "@/components/BlogWidget";
|
|
|
|
import CommentForm from "@/components/CommentForm";
|
|
|
|
import { allBlogs } from "@/data/blogs";
|
|
|
|
import payloadConfig from "@/payload.config";
|
2025-02-03 09:09:21 +07:00
|
|
|
import { formatDate } from "@/utils/datetime";
|
2025-02-03 03:19:32 +07:00
|
|
|
import Image from "next/image";
|
|
|
|
import { getPayload } from "payload";
|
2025-02-03 09:09:21 +07:00
|
|
|
import { RichText } from "@payloadcms/richtext-lexical/react";
|
|
|
|
import { Metadata } from "next";
|
2025-02-03 03:19:32 +07:00
|
|
|
|
2025-02-03 09:09:21 +07:00
|
|
|
async function fetchBlog(slug: string) {
|
2025-02-03 03:19:32 +07:00
|
|
|
const payload = await getPayload({ config: payloadConfig });
|
2025-02-03 09:09:21 +07:00
|
|
|
const blogDataQuery = await payload.find({
|
2025-02-03 03:19:32 +07:00
|
|
|
collection: "blogs",
|
|
|
|
where: {
|
|
|
|
slug: { equals: slug },
|
|
|
|
},
|
2025-02-03 09:09:21 +07:00
|
|
|
limit: 1,
|
2025-02-03 03:19:32 +07:00
|
|
|
pagination: false,
|
|
|
|
});
|
2025-02-03 09:09:21 +07:00
|
|
|
|
|
|
|
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,
|
|
|
|
}: {
|
|
|
|
params: Promise<{ slug: string }>;
|
|
|
|
}) {
|
|
|
|
const slug = (await params).slug;
|
|
|
|
const data = await fetchBlog(slug);
|
|
|
|
|
|
|
|
if (!data) return <></>;
|
2025-02-03 03:19:32 +07:00
|
|
|
|
|
|
|
const blog = allBlogs.filter((elm) => elm.id == 34)[0] || allBlogs[0];
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<section
|
|
|
|
className="page-section bg-gradient-gray-light-1 bg-scroll overflow-hidden"
|
|
|
|
id="home"
|
|
|
|
>
|
|
|
|
{/* <!-- Background Shape --> */}
|
|
|
|
<div className="bg-shape-1 wow fadeIn">
|
|
|
|
<Image
|
|
|
|
src="/assets/images/demo-fancy/bg-shape-1.svg"
|
|
|
|
width={1443}
|
|
|
|
height={844}
|
|
|
|
alt=""
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{/* <!-- End Background Shape --> */}
|
|
|
|
|
|
|
|
<div className="container position-relative pt-sm-40 text-center">
|
|
|
|
<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">
|
2025-02-03 09:09:21 +07:00
|
|
|
{data.data.title}
|
2025-02-03 03:19:32 +07:00
|
|
|
</h1>
|
|
|
|
{/* Author, Categories, Comments */}
|
|
|
|
<div
|
|
|
|
className="blog-item-data mb-0 wow fadeIn"
|
|
|
|
data-wow-delay="0.2s"
|
|
|
|
>
|
|
|
|
<div className="d-inline-block me-3">
|
|
|
|
<a href="#">
|
|
|
|
<i className="mi-clock size-16" />
|
2025-02-03 09:09:21 +07:00
|
|
|
<span className="visually-hidden">Date:</span>{" "}
|
|
|
|
{data.createdAt}
|
2025-02-03 03:19:32 +07:00
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div className="d-inline-block me-3">
|
|
|
|
<a href="#">
|
|
|
|
<i className="mi-user size-16" />
|
|
|
|
<span className="visually-hidden">Author:</span> John Doe
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div className="d-inline-block me-3">
|
|
|
|
<i className="mi-folder size-16" />
|
|
|
|
<span className="visually-hidden">Categories:</span>
|
|
|
|
<a href="#">Design</a>, <a href="#">Branding</a>
|
|
|
|
</div>
|
|
|
|
<div className="d-inline-block me-3">
|
|
|
|
<a href="#">
|
|
|
|
<i className="mi-message size-16" /> 5 Comments
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* End Author, Categories, Comments */}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
<>
|
|
|
|
{/* Section */}
|
|
|
|
<section className="page-section">
|
|
|
|
<div className="container relative">
|
|
|
|
<div className="row">
|
|
|
|
{/* Content */}
|
|
|
|
<div className="col-md-10 offset-md-1 col-lg-8 offset-lg-2">
|
|
|
|
{/* Post */}
|
|
|
|
<div className="blog-item mb-80 mb-xs-40">
|
|
|
|
<div className="blog-item-body">
|
|
|
|
<div className="mb-40 mb-xs-30">
|
|
|
|
<Image
|
2025-02-03 09:09:21 +07:00
|
|
|
src={data.imgUrl}
|
2025-02-03 03:19:32 +07:00
|
|
|
alt="Image Description"
|
|
|
|
width={1350}
|
|
|
|
height={759}
|
|
|
|
className="round"
|
|
|
|
/>
|
|
|
|
</div>
|
2025-02-03 09:09:21 +07:00
|
|
|
<div>
|
|
|
|
<RichText data={data.data.content} />
|
|
|
|
</div>
|
2025-02-03 03:19:32 +07:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{/* End Post */}
|
|
|
|
{/* Comments */}
|
|
|
|
<div className="mb-80 mb-xs-40">
|
|
|
|
<h4 className="blog-page-title">
|
|
|
|
Comments <small className="number">(3)</small>
|
|
|
|
</h4>
|
|
|
|
<ul className="media-list comment-list clearlist">
|
|
|
|
<BlogComments />
|
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
{/* End Comments */}
|
|
|
|
{/* Add Comment */}
|
|
|
|
<div className="mb-80 mb-xs-40">
|
|
|
|
<h4 className="blog-page-title">Leave a comment</h4>
|
|
|
|
{/* Form */}
|
|
|
|
<CommentForm />
|
|
|
|
{/* End Form */}
|
|
|
|
</div>
|
|
|
|
{/* End Add Comment */}
|
|
|
|
{/* Prev/Next Post */}
|
|
|
|
<div className="clearfix mt-40">
|
|
|
|
<a href="#" className="blog-item-more circle left">
|
|
|
|
<i className="mi-chevron-left" />
|
|
|
|
Prev post
|
|
|
|
</a>
|
|
|
|
<a href="#" className="blog-item-more circle right">
|
|
|
|
Next post
|
|
|
|
<i className="mi-chevron-right" />
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
{/* End Prev/Next Post */}
|
|
|
|
</div>
|
|
|
|
{/* End Content */}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
{/* End Section */}
|
|
|
|
{/* Divider */}
|
|
|
|
<hr className="mt-0 mb-0" />
|
|
|
|
{/* End Divider */}
|
|
|
|
{/* Section */}
|
|
|
|
<section className="page-section">
|
|
|
|
<div className="container relative">
|
|
|
|
<div className="row mt-n60">
|
|
|
|
<BlogWidget
|
|
|
|
inputClass="newsletter-field form-control input-md circle mb-10"
|
|
|
|
btnClass="btn btn-mod btn-color btn-medium btn-circle btn-hover-anim form-control"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
|
|
|
</>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|