Alireza HassaniandCursor
0cb9aa57e2
Resolve pages via by-id APIs, slugify Farsi titles for public paths, and redirect legacy slug-only URLs to the canonical form. Co-authored-by: Cursor <cursoragent@cursor.com>
100 lines
3.6 KiB
TypeScript
100 lines
3.6 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound, redirect } from "next/navigation";
|
|
import { Container } from "@/components/Container";
|
|
import { PageHero } from "@/components/layout/PageHero";
|
|
import { ProductTabs } from "@/components/product/ProductTabs";
|
|
import { Placeholder } from "@/components/Placeholder";
|
|
import { blogHref, blogImage, blogTitleSlug, fetchBlogById } from "@/lib/blog";
|
|
import { fetchComments } from "@/lib/comments";
|
|
import { getBlogPost } from "@/lib/data";
|
|
import { formatFaDate } from "@/lib/format";
|
|
|
|
export const revalidate = 60;
|
|
|
|
export async function generateMetadata({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string; slug: string }>;
|
|
}): Promise<Metadata> {
|
|
const { id } = await params;
|
|
const apiPost = await fetchBlogById(id);
|
|
if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
|
|
const local = getBlogPost(id);
|
|
if (!local) return { title: "مقاله" };
|
|
return { title: local.title, description: local.excerpt };
|
|
}
|
|
|
|
export default async function BlogPostPage({
|
|
params,
|
|
}: {
|
|
params: Promise<{ id: string; slug: string }>;
|
|
}) {
|
|
const { id, slug } = await params;
|
|
const apiPost = await fetchBlogById(id);
|
|
|
|
if (apiPost) {
|
|
const canonical = blogTitleSlug(apiPost.title);
|
|
if (decodeURIComponent(slug) !== canonical) {
|
|
redirect(blogHref(apiPost));
|
|
}
|
|
|
|
const comments = await fetchComments("blog", apiPost.id);
|
|
return (
|
|
<>
|
|
<PageHero kicker="Blog" title={apiPost.title} image={blogImage(apiPost)} />
|
|
<section className="py-16 sm:py-24">
|
|
<Container className="max-w-3xl">
|
|
<p className="text-[13px] text-muted">
|
|
{formatFaDate(apiPost.publishedAt || apiPost.createdAt)}
|
|
</p>
|
|
{apiPost.abstract ? <p className="mt-6 text-[16px] leading-9 text-muted">{apiPost.abstract}</p> : null}
|
|
{apiPost.mainTextHtml ? (
|
|
<div
|
|
className="rich-text mt-8 text-[16px] leading-9 text-muted"
|
|
dangerouslySetInnerHTML={{ __html: apiPost.mainTextHtml }}
|
|
/>
|
|
) : null}
|
|
<ProductTabs showDescription={false} comments={comments} />
|
|
<Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
|
|
بازگشت به مقالات
|
|
<span className="h-px w-10 bg-brand" />
|
|
</Link>
|
|
</Container>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const post = getBlogPost(id);
|
|
if (!post) notFound();
|
|
|
|
const canonical = blogTitleSlug(post.title);
|
|
if (decodeURIComponent(slug) !== canonical) {
|
|
redirect(blogHref({ id: post.slug, title: post.title }));
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageHero kicker="Blog" title={post.title} image={post.image} />
|
|
<section className="py-16 sm:py-24">
|
|
<Container className="max-w-3xl">
|
|
<p className="text-[13px] text-muted">{post.date}</p>
|
|
<div className="mt-8 space-y-5 text-[16px] leading-9 text-muted">
|
|
{post.body.map((paragraph) => (
|
|
<p key={paragraph}>{paragraph}</p>
|
|
))}
|
|
</div>
|
|
<div className="mt-8 overflow-hidden rounded-2xl">
|
|
<Placeholder src={post.image} alt={post.title} className="aspect-[16/9] w-full object-cover" />
|
|
</div>
|
|
<Link href="/blog" className="mt-10 inline-flex items-center gap-3 text-[14px] font-bold text-brand">
|
|
بازگشت به مقالات
|
|
<span className="h-px w-10 bg-brand" />
|
|
</Link>
|
|
</Container>
|
|
</section>
|
|
</>
|
|
);
|
|
}
|