63 lines
2.4 KiB
TypeScript
63 lines
2.4 KiB
TypeScript
import { articles } from '@/lib/data';// مسیر دیتای خود را تنظیم کنید
|
||
import { notFound } from 'next/navigation';
|
||
import Image from "next/image";
|
||
|
||
// همان تابع استانداردسازی باید اینجا هم باشد تا بتوانیم مقایسه درستی انجام دهیم
|
||
const generateSlug = (text: string) => {
|
||
if (!text) return "";
|
||
return text
|
||
.trim()
|
||
.replace(/[\s\u200c]+/g, '-')
|
||
.replace(/[^\w\u0600-\u06FF0-9\-]/g, '')
|
||
.replace(/\-\-+/g, '-')
|
||
.replace(/^-+|-+$/g, '');
|
||
};
|
||
|
||
interface PageProps {
|
||
params: Promise<{
|
||
slug: string;
|
||
}>;
|
||
}
|
||
|
||
export default async function SingleArticlePage({ params }: PageProps) {
|
||
const resolvedParams = await params;
|
||
|
||
// ۱. مرورگر کاراکترهای فارسی در آدرس را به طور پیشفرض کدگذاری میکند، پس ابتدا آن را دیکد (Decode) میکنیم
|
||
const decodedUrlSlug = decodeURIComponent(resolvedParams.slug);
|
||
|
||
// ۲. جستجو در دیتابیس: عنوان هر مقاله را به همان فرمت تبدیل کرده و با مقدار موجود در آدرس مقایسه میکنیم
|
||
const article = articles.find((a) => generateSlug(a.title) === decodedUrlSlug);
|
||
|
||
// ۳. اگر مقالهای با این عنوان پیدا نشد، ارور ۴۰۴ بده
|
||
if (!article) {
|
||
notFound();
|
||
}
|
||
|
||
return (
|
||
<article className="container mx-auto p-8 max-w-3xl">
|
||
<header className="mb-8">
|
||
<h1 className="text-3xl font-bold mb-4">{article.title}</h1>
|
||
<span className="text-gray-500 text-sm">{article.date}</span>
|
||
</header>
|
||
|
||
<div className="relative w-full h-[400px] mb-8">
|
||
<Image
|
||
src={article.image}
|
||
alt={article.title}
|
||
fill
|
||
className="object-cover rounded-xl"
|
||
/>
|
||
</div>
|
||
|
||
<div className="bg-gray-50 p-4 border-r-4 border-[#ffb900] mb-8 font-medium">
|
||
{article.excerpt}
|
||
</div>
|
||
|
||
{/* بخش نمایش محتوای کامل که درخواست کرده بودید */}
|
||
<div className="prose max-w-none leading-loose">
|
||
{article.content}
|
||
</div>
|
||
</article>
|
||
);
|
||
}
|