feat: blog section

app/blog/[slug]/page.tsx

@@ -0,0 +1,133 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import Image from "next/image";
+import { notFound } from "next/navigation";
+import { getPostBySlug, getFeaturedImageUrl } from "@/lib/wp-api";
+import { formatDateShamsi } from "@/lib/format-date";
+import { ChevronRight } from "lucide-react";
+import { parseContentHeadings, getReadingTimeMinutes } from "@/lib/blog-utils";
+import { BlogToc } from "@/components/blog-toc";
+import { BlogPostMeta } from "@/components/blog-post-meta";
+import { BlogCollapseSection } from "@/components/blog-collapse-section";
+import { ScrollToTop } from "@/components/scroll-to-top";
+
+interface BlogPostPageProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({
+  params,
+}: BlogPostPageProps): Promise<Metadata> {
+  const { slug } = await params;
+  const post = await getPostBySlug(slug);
+  if (!post) return { title: "پست یافت نشد" };
+  const title = post.title?.rendered ?? "پست";
+  const excerpt = post.excerpt?.rendered?.replace(/<[^>]*>/g, "").trim().slice(0, 160) ?? "";
+  return {
+    title,
+    description: excerpt,
+  };
+}
+
+export default async function BlogPostPage({ params }: BlogPostPageProps) {
+  const { slug } = await params;
+  let post;
+  try {
+    post = await getPostBySlug(slug);
+  } catch {
+    notFound();
+  }
+  if (!post) notFound();
+
+  const date = post.date ? formatDateShamsi(post.date) : null;
+  const modifiedDate = post.modified
+    ? formatDateShamsi(post.modified)
+    : null;
+  const authorName = post._embedded?.author?.[0]?.name ?? null;
+  const thumbnailUrl = getFeaturedImageUrl(post, "full");
+  const media = post._embedded?.["wp:featuredmedia"]?.[0];
+  const altText = media?.alt_text || post.title?.rendered?.replace(/<[^>]*>/g, "") || "";
+
+  const { toc, segments } = parseContentHeadings(post.content.rendered);
+  const readingTimeMinutes = getReadingTimeMinutes(post.content.rendered);
+  const postTitle = post.title?.rendered?.replace(/<[^>]*>/g, "") ?? "";
+  const postPath = `/blog/${slug}`;
+
+  return (
+    <>
+      {/* تصویر شاخص تمام‌عرض بالای صفحه */}
+      {thumbnailUrl && (
+        <div className="pt-28 md:pt-36">
+          <div className="relative w-full aspect-[21/5] min-h-[10rem] md:min-h-[10rem] bg-muted">
+            <Image
+              src={thumbnailUrl}
+              alt={altText}
+              fill
+              className="object-cover"
+              sizes="100vw"
+              priority
+            />
+          </div>
+        </div>
+      )}
+
+      <section className="bg-background pt-8 pb-20 md:pt-12 md:pb-28">
+        <div className="mx-auto max-w-6xl px-6">
+          {/* Single grid so sticky TOC stays for whole page scroll */}
+          <div className="lg:grid lg:grid-cols-[16rem_1fr] lg:gap-10">
+            <BlogToc items={toc} className="mb-6 lg:mb-0" />
+
+            <div className="min-w-0 max-w-3xl space-y-0">
+              <div className="pb-8 md:pb-12">
+                <nav className="mb-6" aria-label="مسیر">
+                  <Link
+                    href="/blog"
+                    className="text-muted-foreground hover:text-foreground text-sm inline-flex items-center gap-1 transition-colors"
+                  >
+                    <ChevronRight className="size-4" aria-hidden />
+                    بلاگ
+                  </Link>
+                </nav>
+                <h1
+                  className="text-2xl font-bold md:text-3xl leading-tight tracking-normal"
+                  dangerouslySetInnerHTML={{ __html: post.title.rendered }}
+                />
+                <BlogPostMeta
+                  url={postPath}
+                  title={postTitle}
+                  readingTimeMinutes={readingTimeMinutes}
+                  date={date}
+                  dateTime={post.date}
+                  modifiedDate={modifiedDate}
+                  authorName={authorName}
+                  className="mt-4"
+                />
+              </div>
+
+              <article className="blog-content text-justify space-y-6 text-foreground [&_h2]:text-2xl [&_h2]:font-bold [&_h2]:mt-8 [&_h2]:mb-4 [&_h3]:text-xl [&_h3]:font-bold [&_h3]:mt-6 [&_h3]:mb-3 [&_p]:leading-relaxed [&_p]:text-muted-foreground [&_a]:text-primary [&_a]:no-underline hover:[&_a]:underline [&_ul]:list-disc [&_ul]:pr-6 [&_ol]:list-decimal [&_ol]:pr-6 [&_li]:my-1 [&_h2]:scroll-mt-24 [&_h3]:scroll-mt-24 [&_h4]:scroll-mt-24">
+                {segments.map((seg, i) =>
+                  seg.type === "html" ? (
+                    <div
+                      key={i}
+                      dangerouslySetInnerHTML={{ __html: seg.content }}
+                    />
+                  ) : seg.blockType === "collapse" ? (
+                    <BlogCollapseSection
+                      key={i}
+                      section={seg.payload}
+                      idPrefix={`blog-${slug}-${i}`}
+                    />
+                  ) : (
+                    /* سایر بلاک‌ها (blockquote, code, ...) بعداً با کامپوننت خودشان رندر می‌شوند */
+                    null
+                  )
+                )}
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+      <ScrollToTop />
+    </>
+  );
+}

app/blog/page.tsx

@@ -0,0 +1,202 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { getPosts, getCategories } from "@/lib/wp-api";
+import { BlogPostCard } from "@/components/blog-post-card";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { ChevronRight, ChevronLeft } from "lucide-react";
+
+const PER_PAGE = 9;
+
+export const metadata: Metadata = {
+  title: "بلاگ",
+  description: "مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.",
+};
+
+interface BlogPageProps {
+  searchParams: Promise<{ search?: string; category?: string; page?: string }>;
+}
+
+export default async function BlogPage({ searchParams }: BlogPageProps) {
+  const params = await searchParams;
+  const search = params.search ?? "";
+  const categoryId = params.category ? parseInt(params.category, 10) : undefined;
+  const page = Math.max(1, parseInt(params.page ?? "1", 10) || 1);
+
+  let postsResult;
+  let categories: Awaited<ReturnType<typeof getCategories>> = [];
+
+  try {
+    [postsResult, categories] = await Promise.all([
+      getPosts({
+        page,
+        perPage: PER_PAGE,
+        search: search || undefined,
+        categoryId: Number.isFinite(categoryId) ? categoryId : undefined,
+      }),
+      getCategories(),
+    ]);
+  } catch (e) {
+    console.log(e)
+    return (
+      <section className="bg-background pt-32 pb-20 md:pt-40 md:pb-28">
+        <div className="mx-auto max-w-4xl px-6 text-center">
+          <h1 className="text-4xl font-bold md:text-5xl">بلاگ</h1>
+          <p className="mt-4 text-muted-foreground">
+            در حال حاضر امکان بارگذاری مطالب وجود ندارد. لطفاً بعداً تلاش کنید.
+          </p>
+        </div>
+      </section>
+    );
+  }
+
+  const { posts, total, totalPages } = postsResult;
+  const hasFilters = search || categoryId;
+
+  function buildQuery(updates: { search?: string; category?: string; page?: number }) {
+    const q = new URLSearchParams();
+    if (updates.search !== undefined && updates.search !== "") q.set("search", updates.search);
+    if (updates.category !== undefined && updates.category !== "") q.set("category", updates.category);
+    if (updates.page !== undefined && updates.page > 1) q.set("page", String(updates.page));
+    const s = q.toString();
+    return s ? `?${s}` : "";
+  }
+
+  return (
+    <>
+      {/* Hero + search & filters in one section */}
+      <section className="bg-background pt-32 pb-10 md:pt-40 md:pb-14">
+        <div className="mx-auto max-w-6xl px-6">
+          <div className="text-center space-y-8">
+            <div className="space-y-3">
+              <h1 className="text-4xl font-bold md:text-5xl lg:text-6xl leading-tight tracking-normal">
+                بلاگ
+              </h1>
+              <p className="text-lg md:text-xl leading-relaxed text-muted-foreground max-w-2xl mx-auto">
+                مقالات و مطالب فیپ در زمینه یکپارچه‌سازی، اتوماسیون و بهره‌وری سازمانی.
+              </p>
+            </div>
+
+            <div className="flex flex-col gap-5 max-w-2xl mx-auto">
+              <form
+                method="get"
+                action="/blog"
+                className="flex flex-col sm:flex-row gap-2 sm:gap-2 w-full"
+              >
+                <input type="hidden" name="category" value={categoryId ?? ""} />
+                <Input
+                  type="search"
+                  name="search"
+                  placeholder="جستجو در مطالب..."
+                  defaultValue={search}
+                  className="flex-1 w-full sm:min-w-[14rem] text-base"
+                  aria-label="جستجو در مطالب"
+                />
+                <div className="flex gap-2 flex-shrink-0">
+                  <Button type="submit" size="default" className="flex-1 sm:flex-none">
+                    جستجو
+                  </Button>
+                  {hasFilters && (
+                    <Link href="/blog" className="flex-1 sm:flex-none">
+                      <Button type="button" variant="outline" size="default" className="w-full">
+                        پاک کردن فیلتر
+                      </Button>
+                    </Link>
+                  )}
+                </div>
+              </form>
+
+              {categories.length > 0 && (
+                <div className="flex flex-wrap items-center justify-center gap-2">
+                  <Link
+                    href="/blog"
+                    className={`text-sm rounded-full px-4 py-2 transition-colors ${!categoryId
+                        ? "bg-primary text-primary-foreground shadow-sm"
+                        : "bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground"
+                      }`}
+                  >
+                    همه
+                  </Link>
+                  {categories.map((cat) => (
+                    <Link
+                      key={cat.id}
+                      href={`/blog${buildQuery({ search, category: String(cat.id), page: 1 })}`}
+                      className={`text-sm rounded-full px-4 py-2 transition-colors ${categoryId === cat.id
+                          ? "bg-primary text-primary-foreground shadow-sm"
+                          : "bg-muted/80 hover:bg-muted text-muted-foreground hover:text-foreground"
+                        }`}
+                    >
+                      {cat.name}
+                    </Link>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section className="bg-background pb-20 md:pb-28">
+        <div className="mx-auto max-w-6xl px-6 pt-2">
+          {posts.length === 0 ? (
+            <div className="text-center py-16 text-muted-foreground">
+              <p>مطلبی یافت نشد.</p>
+              <Link href="/blog" className="mt-4 inline-block">
+                <Button variant="outline" size="sm">
+                  نمایش همه مطالب
+                </Button>
+              </Link>
+            </div>
+          ) : (
+            <>
+              <ul className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+                {posts.map((post) => (
+                  <li key={post.id}>
+                    <BlogPostCard post={post} />
+                  </li>
+                ))}
+              </ul>
+
+              {totalPages > 1 && (
+                <nav
+                  className="mt-12 flex flex-wrap items-center justify-center gap-2"
+                  aria-label="صفحه‌بندی"
+                >
+                  {page > 1 && (
+                    <Link
+                      href={`/blog${buildQuery({
+                        search,
+                        category: categoryId ? String(categoryId) : undefined,
+                        page: page - 1,
+                      })}`}
+                    >
+                      <Button variant="outline" size="icon" aria-label="صفحه قبل">
+                        <ChevronRight className="size-4" />
+                      </Button>
+                    </Link>
+                  )}
+                  <span className="text-muted-foreground text-sm px-2">
+                    صفحه {page} از {totalPages} ({total} مطلب)
+                  </span>
+                  {page < totalPages && (
+                    <Link
+                      href={`/blog${buildQuery({
+                        search,
+                        category: categoryId ? String(categoryId) : undefined,
+                        page: page + 1,
+                      })}`}
+                    >
+                      <Button variant="outline" size="icon" aria-label="صفحه بعد">
+                        <ChevronLeft className="size-4" />
+                      </Button>
+                    </Link>
+                  )}
+                </nav>
+              )}
+            </>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}

app/globals.css

@@ -190,6 +190,9 @@
 }
 
 @layer base {
+  html {
+    scroll-behavior: smooth;
+  }
   * {
     @apply border-border outline-ring/50;
   }