64 lines
2.0 KiB
TypeScript
64 lines
2.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
import { notFound } from "next/navigation";
|
|
import { Media } from "@/components/Media";
|
|
import { PageHero } from "@/components/PageHero";
|
|
import { RichContent } from "@/components/RichContent";
|
|
import { getBlog } from "@/lib/api";
|
|
import { formatDate } from "@/lib/format";
|
|
import { PLACEHOLDER } from "@/lib/data";
|
|
import { SITE } from "@/lib/site";
|
|
|
|
type Props = {
|
|
params: Promise<{ slug: string }>;
|
|
};
|
|
|
|
export async function generateMetadata({ params }: Props): Promise<Metadata> {
|
|
const { slug } = await params;
|
|
try {
|
|
const blog = await getBlog(slug);
|
|
if (!blog) return { title: SITE.nameFa };
|
|
return {
|
|
title: `${blog.title} | ${SITE.nameFa}`,
|
|
description: blog.abstract || SITE.aboutShort,
|
|
};
|
|
} catch {
|
|
return { title: SITE.nameFa };
|
|
}
|
|
}
|
|
|
|
export default async function BlogDetailPage({ params }: Props) {
|
|
const { slug } = await params;
|
|
const blog = await getBlog(slug);
|
|
if (!blog) notFound();
|
|
|
|
const author = [blog.author?.firstName, blog.author?.lastName].filter(Boolean).join(" ");
|
|
|
|
return (
|
|
<>
|
|
<PageHero
|
|
title={blog.title}
|
|
english="Blog"
|
|
crumbs={[{ name: "وبلاگ", href: "/blog" }, { name: blog.title }]}
|
|
/>
|
|
<article className="container-site py-10 md:py-14">
|
|
<Media
|
|
src={blog.titleImageUrl || PLACEHOLDER.blog}
|
|
alt={blog.title}
|
|
className="aspect-[16/7] rounded-2xl"
|
|
sizes="1200px"
|
|
priority
|
|
/>
|
|
<div className="mt-6 flex flex-wrap gap-3 text-sm text-zinc-400">
|
|
{blog.publishedAt || blog.createdAt ? <time>{formatDate(blog.publishedAt || blog.createdAt || "")}</time> : null}
|
|
{blog.categoryName ? <span>{blog.categoryName}</span> : null}
|
|
{author ? <span>{author}</span> : null}
|
|
</div>
|
|
{blog.abstract ? <p className="mt-4 text-zinc-600 leading-8">{blog.abstract}</p> : null}
|
|
<div className="mt-8">
|
|
<RichContent html={blog.mainTextHtml} />
|
|
</div>
|
|
</article>
|
|
</>
|
|
);
|
|
}
|