215 lines
6.7 KiB
TypeScript
Raw Normal View History

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";
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";
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,
}: {
params: Promise<{ slug: string }>;
}) {
const slug = (await params).slug;
const data = await fetchBlog(slug);
if (!data) return <></>;
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">
{data.data.title}
</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" />
<span className="visually-hidden">Date:</span>{" "}
{data.createdAt}
</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
src={data.imgUrl}
alt="Image Description"
width={1350}
height={759}
className="round"
/>
</div>
<div>
<RichText data={data.data.content} />
</div>
</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" />
&nbsp;Prev post
</a>
<a href="#" className="blog-item-more circle right">
Next post&nbsp;
<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>
</>
</>
);
}