first commit

2026-03-21 18:58:07 +03:30
parent 738b02d376
commit 8b733c817c
40 changed files with 3968 additions and 0 deletions
--- a/app/blog/[slug]/page.tsx
+++ b/app/blog/[slug]/page.tsx
@@ -0,0 +1,62 @@
+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>
+    );
+}