2025-02-13 09:33:47 +07:00
|
|
|
import { BlogDetailContentSkeleton } from "@/components/Blogs/BlogDetail";
|
2025-02-28 10:15:00 +07:00
|
|
|
import HeroOther from "@/components/HeroOther";
|
2025-02-13 09:33:47 +07:00
|
|
|
import Page from "@/components/Pages/Page";
|
2025-02-03 12:13:56 +07:00
|
|
|
import { fetchBlogDetail } from "@/services/payload/blog";
|
2025-02-13 09:33:47 +07:00
|
|
|
import { fetchPageBySlug } from "@/services/payload/page";
|
2025-03-04 18:30:59 +07:00
|
|
|
import { getDefaultMetadata } from "@/utils/metadata";
|
2025-02-03 09:09:21 +07:00
|
|
|
import { Metadata } from "next";
|
2025-02-05 22:17:43 +07:00
|
|
|
import { Suspense } from "react";
|
2025-02-03 09:09:21 +07:00
|
|
|
|
2025-02-03 15:20:09 +07:00
|
|
|
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
2025-03-04 18:30:59 +07:00
|
|
|
const defaultMetadata = await getDefaultMetadata();
|
|
|
|
const name = defaultMetadata.openGraph?.siteName ?? "";
|
2025-02-13 09:33:47 +07:00
|
|
|
let title = "Page";
|
|
|
|
let description = "Page";
|
2025-03-04 18:30:59 +07:00
|
|
|
let publishedAt = "";
|
|
|
|
let updatedAt = "";
|
2025-02-13 09:33:47 +07:00
|
|
|
let imgUrl = "";
|
|
|
|
|
2025-02-03 15:20:09 +07:00
|
|
|
const slug = (await params).slug;
|
|
|
|
const blog = await fetchBlogDetail(slug);
|
2025-02-03 09:09:21 +07:00
|
|
|
|
2025-02-13 09:33:47 +07:00
|
|
|
if (!!blog) {
|
2025-03-04 18:30:59 +07:00
|
|
|
// check for blog data
|
2025-02-13 09:33:47 +07:00
|
|
|
title = `${!!blog.data?.meta?.title ? blog.data?.meta?.title : blog.data.title} - ${name}`;
|
|
|
|
description = `${!!blog.data?.meta?.description ? blog.data?.meta?.description : blog.data.title} - ${name}`;
|
|
|
|
imgUrl = blog.imgUrl;
|
2025-03-04 18:30:59 +07:00
|
|
|
publishedAt = blog.data.createdAt;
|
|
|
|
updatedAt = blog.data.updatedAt;
|
|
|
|
} else {
|
|
|
|
// check for page data when blog is not found
|
2025-02-13 09:33:47 +07:00
|
|
|
const page = await fetchPageBySlug({ slug });
|
|
|
|
if (!!page) {
|
|
|
|
title = `${!!page?.meta?.title ? page?.meta?.title : page.title} - ${name}`;
|
|
|
|
description = `${!!page?.meta?.description ? page?.meta?.description : page.title} - ${name}`;
|
|
|
|
imgUrl = page.heroImg?.url;
|
2025-03-04 18:30:59 +07:00
|
|
|
publishedAt = page.createdAt;
|
|
|
|
updatedAt = page.updatedAt;
|
2025-02-13 09:33:47 +07:00
|
|
|
}
|
|
|
|
}
|
2025-02-03 09:09:21 +07:00
|
|
|
|
2025-03-04 18:30:59 +07:00
|
|
|
defaultMetadata.title = title;
|
|
|
|
defaultMetadata.description = description;
|
|
|
|
if (!!defaultMetadata.openGraph) {
|
|
|
|
defaultMetadata.openGraph.title = title;
|
|
|
|
// @ts-ignore
|
|
|
|
defaultMetadata.openGraph.type = "article";
|
|
|
|
defaultMetadata.openGraph.description = description;
|
|
|
|
defaultMetadata.openGraph.title = title;
|
|
|
|
defaultMetadata.openGraph.images = !!imgUrl ? { url: imgUrl } : undefined;
|
|
|
|
}
|
|
|
|
defaultMetadata.other = {
|
|
|
|
"article:published_time": publishedAt,
|
|
|
|
"article:modified_time": updatedAt,
|
2025-02-03 09:09:21 +07:00
|
|
|
};
|
2025-03-04 18:30:59 +07:00
|
|
|
|
|
|
|
return defaultMetadata;
|
2025-02-03 09:09:21 +07:00
|
|
|
}
|
|
|
|
|
2025-02-13 09:33:47 +07:00
|
|
|
export default async function SinglePage({ params }: { params: Promise<{ slug: string }> }) {
|
2025-02-03 09:09:21 +07:00
|
|
|
const slug = (await params).slug;
|
|
|
|
|
2025-02-05 22:17:43 +07:00
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<Suspense fallback={<Loading />}>
|
2025-02-13 09:33:47 +07:00
|
|
|
<Page slug={slug} />
|
2025-02-05 22:17:43 +07:00
|
|
|
</Suspense>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
2025-02-03 03:19:32 +07:00
|
|
|
|
2025-02-05 22:17:43 +07:00
|
|
|
function Loading() {
|
2025-02-03 03:19:32 +07:00
|
|
|
return (
|
|
|
|
<>
|
2025-02-28 10:15:00 +07:00
|
|
|
<HeroOther />
|
2025-02-05 22:17:43 +07:00
|
|
|
{/* Section */}
|
|
|
|
<BlogDetailContentSkeleton />
|
|
|
|
{/* End Section */}
|
2025-02-03 03:19:32 +07:00
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|