feat(blog): redesign post detail experience

feat(blog): redesign post list cards
feat(blog): add copyable highlighted code blocks
2026-06-10 11:56:21 +03:30 · 2026-06-10 11:56:09 +03:30 · 2026-06-10 11:55:56 +03:30
11 changed files with 822 additions and 263 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -55,6 +55,7 @@
        "react-markdown": "^9.0.3",
        "react-qr-code": "^2.0.11",
        "react-resizable-panels": "^2.1.9",
+        "react-syntax-highlighter": "^16.1.1",
        "recharts": "^2.15.4",
        "rehype-raw": "^7.0.0",
        "rehype-sanitize": "^6.0.0",
@@ -72,6 +73,7 @@
        "@types/node": "^22.16.5",
        "@types/react": "^18.3.26",
        "@types/react-dom": "^18.3.7",
+        "@types/react-syntax-highlighter": "^15.5.13",
        "autoprefixer": "^10.4.21",
        "eslint": "^9.32.0",
        "eslint-plugin-react-hooks": "^5.2.0",
@@ -96,9 +98,9 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.28.2",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.2.tgz",
-      "integrity": "sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==",
+      "version": "7.29.7",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
      "license": "MIT",
      "engines": {
        "node": ">=6.9.0"
@@ -2663,6 +2665,12 @@
        "undici-types": "~6.21.0"
      }
    },
+    "node_modules/@types/prismjs": {
+      "version": "1.26.6",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/prismjs/-/prismjs-1.26.6.tgz",
+      "integrity": "sha512-vqlvI7qlMvcCBbVe0AKAb4f97//Hy0EBTaiW8AalRnG/xAN5zOiWWyrNqNXeq8+KAuvRewjCVY1+IPxk4RdNYw==",
+      "license": "MIT"
+    },
    "node_modules/@types/prop-types": {
      "version": "15.7.13",
      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
@@ -2694,6 +2702,16 @@
        "@types/react": "^18.0.0"
      }
    },
+    "node_modules/@types/react-syntax-highlighter": {
+      "version": "15.5.13",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/@types/react-syntax-highlighter/-/react-syntax-highlighter-15.5.13.tgz",
+      "integrity": "sha512-uLGJ87j6Sz8UaBAooU0T6lWJ0dBmjZgN1PZTrj05TNql2/XpC6+4HhMT5syIdFUUt+FASfCeLLv4kBygNU+8qA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
    "node_modules/@types/unist": {
      "version": "3.0.3",
      "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
@@ -4098,6 +4116,19 @@
        "reusify": "^1.0.4"
      }
    },
+    "node_modules/fault": {
+      "version": "1.0.4",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/fault/-/fault-1.0.4.tgz",
+      "integrity": "sha512-CJ0HCB5tL5fYTEA7ToAq5+kTwd++Borf1/bifxd9iT70QcXr4MRrO3Llf8Ifs70q+SJcGHFtnIE/Nw6giCtECA==",
+      "license": "MIT",
+      "dependencies": {
+        "format": "^0.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/fflate": {
      "version": "0.8.2",
      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.2.tgz",
@@ -4182,6 +4213,14 @@
        "url": "https://github.com/sponsors/isaacs"
      }
    },
+    "node_modules/format": {
+      "version": "0.2.2",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/format/-/format-0.2.2.tgz",
+      "integrity": "sha512-wzsgA6WOq+09wrU1tsJ09udeR/YZRaeArL9e1wPbFg3GG2yDnC2ldKpxs4xunpFF9DgqCqOIra3bc1HWrJ37Ww==",
+      "engines": {
+        "node": ">=0.4.x"
+      }
+    },
    "node_modules/fraction.js": {
      "version": "4.3.7",
      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -4476,6 +4515,21 @@
        "url": "https://opencollective.com/unified"
      }
    },
+    "node_modules/highlight.js": {
+      "version": "10.7.3",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlight.js/-/highlight.js-10.7.3.tgz",
+      "integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/highlightjs-vue": {
+      "version": "1.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/highlightjs-vue/-/highlightjs-vue-1.0.0.tgz",
+      "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
+      "license": "CC0-1.0"
+    },
    "node_modules/html-url-attributes": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -4875,6 +4929,20 @@
        "loose-envify": "cli.js"
      }
    },
+    "node_modules/lowlight": {
+      "version": "1.20.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/lowlight/-/lowlight-1.20.0.tgz",
+      "integrity": "sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==",
+      "license": "MIT",
+      "dependencies": {
+        "fault": "^1.0.0",
+        "highlight.js": "~10.7.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/lru-cache": {
      "version": "10.4.3",
      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.4.3.tgz",
@@ -6267,6 +6335,15 @@
        "node": ">= 0.8.0"
      }
    },
+    "node_modules/prismjs": {
+      "version": "1.30.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/prismjs/-/prismjs-1.30.0.tgz",
+      "integrity": "sha512-DEvV2ZF2r2/63V+tK8hQvrR2ZGn10srHbXviTlcv7Kpzw8jWiNTqbVgjO3IY8RxrrOUF8VPMQQFysYYYv0YZxw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
    "node_modules/prop-types": {
      "version": "15.8.1",
      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
@@ -6530,6 +6607,26 @@
        }
      }
    },
+    "node_modules/react-syntax-highlighter": {
+      "version": "16.1.1",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/react-syntax-highlighter/-/react-syntax-highlighter-16.1.1.tgz",
+      "integrity": "sha512-PjVawBGy80C6YbC5DDZJeUjBmC7skaoEUdvfFQediQHgCL7aKyVHe57SaJGfQsloGDac+gCpTfRdtxzWWKmCXA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "highlight.js": "^10.4.1",
+        "highlightjs-vue": "^1.0.0",
+        "lowlight": "^1.17.0",
+        "prismjs": "^1.30.0",
+        "refractor": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 16.20.2"
+      },
+      "peerDependencies": {
+        "react": ">= 0.14.0"
+      }
+    },
    "node_modules/react-transition-group": {
      "version": "4.4.5",
      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
@@ -6599,6 +6696,22 @@
        "decimal.js-light": "^2.4.1"
      }
    },
+    "node_modules/refractor": {
+      "version": "5.0.0",
+      "resolved": "https://package-mirror.liara.ir/repository/npm/refractor/-/refractor-5.0.0.tgz",
+      "integrity": "sha512-QXOrHQF5jOpjjLfiNk5GFnWhRXvxjUVnlFxkeDmewR5sXkr3iM46Zo+CnRR8B+MDVqkULW4EcLVcRBNOPXHosw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/prismjs": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "parse-entities": "^4.0.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.11",
      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
    "react-markdown": "^9.0.3",
    "react-qr-code": "^2.0.11",
    "react-resizable-panels": "^2.1.9",
+    "react-syntax-highlighter": "^16.1.1",
    "recharts": "^2.15.4",
    "rehype-raw": "^7.0.0",
    "rehype-sanitize": "^6.0.0",
@@ -74,6 +75,7 @@
    "@types/node": "^22.16.5",
    "@types/react": "^18.3.26",
    "@types/react-dom": "^18.3.7",
+    "@types/react-syntax-highlighter": "^15.5.13",
    "autoprefixer": "^10.4.21",
    "eslint": "^9.32.0",
    "eslint-plugin-react-hooks": "^5.2.0",
--- a/src/app/blog/[slug]/page.tsx
+++ b/src/app/blog/[slug]/page.tsx
@@ -1,15 +1,18 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import Markdown from "@/components/Markdown";
+import BlogPostActions from "@/components/BlogPostActions";
 import BlogPostInteractions from "@/components/BlogPostInteractions";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import Markdown from "@/components/Markdown";
 import { Badge } from "@/components/ui/badge";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Link } from "@/lib/router";
-import { PublicApiError, getPublicPost } from "@/lib/public-api";
-import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
 import { blogPostPath, blogPostUrl, normalizeBlogSlugParam } from "@/lib/blog-routes";
-import { formatJalali } from "@/lib/utils";
+import { extractMarkdownHeadings, type MarkdownHeading } from "@/lib/markdown-headings";
+import { PublicApiError, getPublicPost, getRecommendedPosts } from "@/lib/public-api";
+import { apiBaseUrl, siteUrl, toAbsoluteUrl } from "@/lib/site";
+import type * as Types from "@/lib/types";
+import { formatJalaliDate, getBlogCardImageUrl, getBlogHeroImageUrl } from "@/lib/utils";

 type Params = Promise<{ slug: string }>;

@@ -20,6 +23,10 @@ function cleanText(value?: string | null) {
  return value.replace(/<[^>]*>/g, " ").replace(/\s+/g, " ").trim();
 }

+function authorName(post: Types.PostListSchema) {
+  return [post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username;
+}
+
 async function loadPost(slug: string) {
  try {
    return await getPublicPost(slug);
@@ -31,6 +38,85 @@ async function loadPost(slug: string) {
  }
 }

+async function loadRecommended(slug: string) {
+  try {
+    return await getRecommendedPosts(slug, 3);
+  } catch {
+    return [];
+  }
+}
+
+function TableOfContents({ headings }: { headings: MarkdownHeading[] }) {
+  if (!headings.length) {
+    return <p className="text-sm leading-7 text-muted-foreground">برای این نوشته فهرست تیترها ثبت نشده است.</p>;
+  }
+
+  return (
+    <nav className="space-y-1 text-sm">
+      {headings.map((heading) => (
+        <a
+          key={heading.id}
+          href={`#${heading.id}`}
+          className="block rounded-2xl px-3 py-2 leading-6 text-muted-foreground transition hover:bg-primary/10 hover:text-primary"
+          style={{ paddingRight: `${(heading.level - 1) * 0.85 + 0.75}rem` }}
+        >
+          {heading.text}
+        </a>
+      ))}
+    </nav>
+  );
+}
+
+function HashTags({ tags }: { tags: Types.PostListSchema["tags"] }) {
+  if (!tags.length) {
+    return <p className="text-sm text-muted-foreground">هشتگی برای این نوشته ثبت نشده است.</p>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {tags.map((tag) => (
+        <Badge key={tag.id} variant="outline" className="rounded-full px-3 py-1">
+          #{tag.name}
+        </Badge>
+      ))}
+    </div>
+  );
+}
+
+function RecommendedPosts({ posts }: { posts: Types.PostListSchema[] }) {
+  if (!posts.length) return null;
+
+  return (
+    <section className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 p-5 shadow-sm">
+      <div className="mb-5 text-right">
+        <p className="text-sm font-medium text-primary">ادامه مطالعه</p>
+        <h2 className="mt-1 text-2xl font-bold">نوشته‌های پیشنهادی</h2>
+      </div>
+      <div className="grid gap-4 md:grid-cols-3">
+        {posts.map((post) => (
+          <Link
+            key={post.id}
+            to={blogPostPath(post.slug)}
+            className="group overflow-hidden rounded-3xl border border-border/70 bg-background transition hover:-translate-y-1 hover:shadow-lg"
+          >
+            <BlogThumbnail
+              post={post}
+              imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+              className="aspect-[16/10]"
+            />
+            <div className="space-y-2 p-4 text-right">
+              <h3 className="line-clamp-2 font-semibold leading-7 group-hover:text-primary">{post.title}</h3>
+              <time className="text-xs text-muted-foreground" dateTime={post.published_at || post.created_at}>
+                {formatJalaliDate(post.published_at || post.created_at)}
+              </time>
+            </div>
+          </Link>
+        ))}
+      </div>
+    </section>
+  );
+}
+
 export async function generateMetadata({
  params,
 }: {
@@ -43,7 +129,7 @@ export async function generateMetadata({
  const metaDescription = post.seo_description || post.og_description || description;
  const canonical = post.canonical_url || blogPostPath(post.slug);
  const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
+    post.og_image_url || getBlogHeroImageUrl(post),
    apiBaseUrl,
  ) ?? `${siteUrl}/favicon.ico`;

@@ -56,7 +142,7 @@ export async function generateMetadata({
      title: post.og_title || metaTitle,
      description: post.og_description || metaDescription,
      url: blogPostUrl(siteUrl, post.slug),
-      siteName: "انجمن علمی کامپیوتر شرق گیلان",
+      siteName: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
      type: "article",
      images: [image],
      locale: "fa_IR",
@@ -79,92 +165,126 @@ export default async function BlogDetailPage({
 }) {
  const { slug } = await params;
  const post = await loadPost(normalizeBlogSlugParam(slug));
+  const recommendedPosts = await loadRecommended(post.slug);
+  const headings = extractMarkdownHeadings(post.content);
  const description = cleanText(post.excerpt || post.content).slice(0, 160);
  const metaDescription = post.seo_description || post.og_description || description;
-  const image = toAbsoluteUrl(
-    post.og_image_url || post.absolute_featured_image_url || post.featured_image,
-    apiBaseUrl,
-  ) ?? `${siteUrl}/favicon.ico`;
+  const coverImage = toAbsoluteUrl(getBlogHeroImageUrl(post), apiBaseUrl);
+  const seoImage = toAbsoluteUrl(post.og_image_url || getBlogHeroImageUrl(post), apiBaseUrl) ?? `${siteUrl}/favicon.ico`;

  const structuredData = {
    "@context": "https://schema.org",
    "@type": "BlogPosting",
    headline: post.title,
    description: metaDescription,
-    image: [image],
+    image: [seoImage],
    datePublished: post.published_at || post.created_at,
    dateModified: post.updated_at,
    url: blogPostUrl(siteUrl, post.slug),
    author: {
      "@type": "Person",
-      name: [post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username,
+      name: authorName(post),
    },
    publisher: {
      "@type": "Organization",
-      name: "انجمن علمی کامپیوتر شرق گیلان",
+      name: "انجمن علمی مهندسی کامپیوتر شرق گیلان",
      logo: {
        "@type": "ImageObject",
        url: `${siteUrl}/favicon.ico`,
      },
    },
+    keywords: post.tags.map((tag) => tag.name).join(", "),
  };

  return (
-    <div className="min-h-screen bg-background" dir="rtl">
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.28))]" dir="rtl">
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(structuredData) }}
      />
      <div className="container mx-auto px-4 py-8">
-        <div className="mb-6 flex items-center justify-between gap-3">
-          <Button variant="outline" asChild>
-            <Link to="/blog">بازگشت به وبلاگ</Link>
+        <div className="mb-6 flex justify-start">
+          <Button variant="outline" asChild className="rounded-full">
+            <Link to="/blog">بازگشت به بلاگ</Link>
          </Button>
-          <div className="text-sm text-muted-foreground">
-            {formatJalali(post.published_at || post.created_at, false)}
-          </div>
        </div>

-        <Card>
-          {image && (
-            <div className="w-full aspect-video overflow-hidden rounded-t-lg bg-muted">
-              <img
-                src={image}
-                alt={post.title}
-                className="h-full w-full object-cover"
-                loading="eager"
-              />
+        <div className="gap-8 xl:flex xl:items-start">
+          <aside className="hidden w-72 shrink-0 xl:block">
+            <div className="sticky top-24 space-y-4">
+              <section className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm backdrop-blur">
+                <h2 className="mb-3 text-right font-bold">فهرست نوشته</h2>
+                <TableOfContents headings={headings} />
+              </section>
+              <section className="rounded-[1.75rem] border border-border/70 bg-card/90 p-4 shadow-sm backdrop-blur">
+                <h2 className="mb-3 text-right font-bold">هشتگ‌ها</h2>
+                <HashTags tags={post.tags} />
+              </section>
            </div>
-          )}
-          <CardHeader>
-            <div className="flex flex-wrap gap-2">
-              {post.category?.name ? <Badge variant="secondary">{post.category.name}</Badge> : null}
-              {post.tags.map((tag) => (
-                <Badge key={tag.id} variant="outline">
-                  {tag.name}
-                </Badge>
-              ))}
-            </div>
-            <CardTitle className="text-3xl leading-relaxed">{post.title}</CardTitle>
-            <CardDescription className="text-sm">
-              نویسنده: {[post.author.first_name, post.author.last_name].filter(Boolean).join(" ") || post.author.username}
-            </CardDescription>
-          </CardHeader>
-          <CardContent className="space-y-6">
-            {post.excerpt ? (
-              <p className="rounded-lg border bg-muted/30 p-4 text-sm leading-7 text-muted-foreground">
-                {post.excerpt}
-              </p>
-            ) : null}
-            <Markdown content={post.content} justify size="base" />
-          </CardContent>
-        </Card>
-        <BlogPostInteractions
-          slug={post.slug}
-          initialLikes={post.likes_count ?? 0}
-          initialSaves={post.saves_count ?? 0}
-          initialComments={post.comments_count ?? 0}
-        />
+          </aside>
+
+          <main className="min-w-0 flex-1">
+            <article className="overflow-hidden rounded-[2.5rem] border border-border/70 bg-card/95 shadow-xl shadow-primary/5">
+              <header className="space-y-6 p-5 text-right md:p-8">
+                <div className="flex flex-wrap gap-2">
+                  {post.category?.name ? <Badge className="rounded-full">{post.category.name}</Badge> : null}
+                  <Badge variant="outline" className="rounded-full">
+                    {formatJalaliDate(post.published_at || post.created_at)}
+                  </Badge>
+                </div>
+                <div className="max-w-4xl space-y-4">
+                  <h1 className="text-3xl font-black leading-[1.7] tracking-tight md:text-5xl">
+                    {post.title}
+                  </h1>
+                  <p className="text-sm text-muted-foreground">
+                    نوشته {authorName(post)}
+                  </p>
+                  {post.excerpt ? (
+                    <p className="max-w-3xl text-base leading-8 text-muted-foreground md:text-lg">
+                      {post.excerpt}
+                    </p>
+                  ) : null}
+                </div>
+              </header>
+
+              <div className="px-5 md:px-8">
+                <BlogThumbnail
+                  post={post}
+                  imageUrl={coverImage}
+                  className="aspect-[16/9] rounded-[2rem]"
+                  priority
+                />
+                <BlogPostActions
+                  slug={post.slug}
+                  initialLikes={post.likes_count ?? 0}
+                  initialSaves={post.saves_count ?? 0}
+                  initialComments={post.comments_count ?? 0}
+                />
+              </div>
+
+              <div className="space-y-5 p-5 md:p-8 xl:hidden">
+                <section className="rounded-[1.5rem] border border-border/70 bg-muted/20 p-4">
+                  <h2 className="mb-3 text-right font-bold">فهرست نوشته</h2>
+                  <TableOfContents headings={headings} />
+                </section>
+                <section className="rounded-[1.5rem] border border-border/70 bg-muted/20 p-4">
+                  <h2 className="mb-3 text-right font-bold">هشتگ‌ها</h2>
+                  <HashTags tags={post.tags} />
+                </section>
+              </div>
+
+              <div className="px-5 pb-8 pt-4 md:px-8 md:pb-10">
+                <Markdown content={post.content} justify size="base" className="mx-auto max-w-4xl" />
+              </div>
+            </article>
+
+            <RecommendedPosts posts={recommendedPosts} />
+            <BlogPostInteractions
+              slug={post.slug}
+              initialComments={post.comments_count ?? 0}
+            />
+          </main>
+        </div>
      </div>
    </div>
  );
--- a/src/components/BlogPostActions.tsx
+++ b/src/components/BlogPostActions.tsx
@@ -0,0 +1,120 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Bookmark, Heart, Loader2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useAuth } from "@/contexts/AuthContext";
+import { api } from "@/lib/api";
+import type * as Types from "@/lib/types";
+import { cn, toPersianDigits } from "@/lib/utils";
+
+type BlogPostActionsProps = {
+  slug: string;
+  initialLikes: number;
+  initialSaves: number;
+  initialComments: number;
+};
+
+export default function BlogPostActions({
+  slug,
+  initialLikes,
+  initialSaves,
+  initialComments,
+}: BlogPostActionsProps) {
+  const { isAuthenticated } = useAuth();
+  const [loadingAction, setLoadingAction] = useState<"like" | "save" | null>(null);
+  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
+    liked: false,
+    saved: false,
+    likes_count: initialLikes,
+    saves_count: initialSaves,
+    comments_count: initialComments,
+  });
+
+  useEffect(() => {
+    let mounted = true;
+    if (!isAuthenticated) return;
+
+    api.getBlogInteraction(slug)
+      .then((data) => {
+        if (mounted) setInteraction(data);
+      })
+      .catch(() => undefined);
+
+    return () => {
+      mounted = false;
+    };
+  }, [isAuthenticated, slug]);
+
+  const toggleLike = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("like");
+    try {
+      setInteraction(await api.toggleLike(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  const toggleSave = async () => {
+    if (!isAuthenticated || loadingAction) return;
+    setLoadingAction("save");
+    try {
+      setInteraction(await api.toggleSave(slug));
+    } finally {
+      setLoadingAction(null);
+    }
+  };
+
+  return (
+    <div className="flex flex-wrap items-center justify-center gap-3 pt-4" dir="rtl">
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        onClick={toggleLike}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="gap-2 rounded-full border border-border/60 bg-background/80 px-5 shadow-sm backdrop-blur hover:bg-rose-50 hover:text-rose-600 dark:hover:bg-rose-950/30"
+        aria-label="پسندیدن نوشته"
+      >
+        {loadingAction === "like" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Heart
+            className={cn(
+              "h-5 w-5",
+              interaction.liked && "fill-rose-500 text-rose-500",
+            )}
+          />
+        )}
+        <span>{toPersianDigits(interaction.likes_count)}</span>
+      </Button>
+      <Button
+        type="button"
+        variant="ghost"
+        size="lg"
+        onClick={toggleSave}
+        disabled={!isAuthenticated || Boolean(loadingAction)}
+        className="gap-2 rounded-full border border-border/60 bg-background/80 px-5 shadow-sm backdrop-blur hover:bg-amber-50 hover:text-amber-600 dark:hover:bg-amber-950/30"
+        aria-label="ذخیره نوشته"
+      >
+        {loadingAction === "save" ? (
+          <Loader2 className="h-5 w-5 animate-spin" />
+        ) : (
+          <Bookmark
+            className={cn(
+              "h-5 w-5",
+              interaction.saved && "fill-amber-500 text-amber-500",
+            )}
+          />
+        )}
+        <span>ذخیره</span>
+      </Button>
+      {!isAuthenticated ? (
+        <span className="basis-full text-center text-xs text-muted-foreground">
+          برای پسندیدن یا ذخیره کردن وارد حساب کاربری شوید.
+        </span>
+      ) : null}
+    </div>
+  );
+}
--- a/src/components/BlogPostInteractions.tsx
+++ b/src/components/BlogPostInteractions.tsx
@@ -1,22 +1,19 @@
 "use client";

 import { useEffect, useMemo, useState } from "react";
-import { Bookmark, Heart, Loader2, MessageSquare, Send, Trash2 } from "lucide-react";
+import { Loader2, MessageSquare, Reply, Send, Trash2 } from "lucide-react";
 import { useAuth } from "@/contexts/AuthContext";
 import { api } from "@/lib/api";
 import type * as Types from "@/lib/types";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Textarea } from "@/components/ui/textarea";
-import { Badge } from "@/components/ui/badge";
 import { Link } from "@/lib/router";
-import { formatJalali, resolveErrorMessage } from "@/lib/utils";
+import { formatJalaliDate, resolveErrorMessage, toPersianDigits } from "@/lib/utils";
 import { useToast } from "@/hooks/use-toast";

 type Props = {
  slug: string;
-  initialLikes: number;
-  initialSaves: number;
  initialComments: number;
 };

@@ -24,22 +21,35 @@ function displayName(author: Types.CommentSchema["author"]) {
  return [author.first_name, author.last_name].filter(Boolean).join(" ") || author.username;
 }

+function avatarInitial(author: Types.CommentSchema["author"]) {
+  return displayName(author).trim()[0] || "ک";
+}
+
+function countComments(comments: Types.CommentSchema[]) {
+  return comments.reduce(
+    (total, comment) => total + 1 + countComments(comment.replies || []),
+    0,
+  );
+}
+
+function findComment(comments: Types.CommentSchema[], id: number | null): Types.CommentSchema | undefined {
+  if (!id) return undefined;
+  for (const comment of comments) {
+    if (comment.id === id) return comment;
+    const reply = findComment(comment.replies || [], id);
+    if (reply) return reply;
+  }
+  return undefined;
+}
+
 export default function BlogPostInteractions({
  slug,
-  initialLikes,
-  initialSaves,
  initialComments,
 }: Props) {
  const { user, isAuthenticated } = useAuth();
  const { toast } = useToast();
  const [comments, setComments] = useState<Types.CommentSchema[]>([]);
-  const [interaction, setInteraction] = useState<Types.BlogInteractionSchema>({
-    liked: false,
-    saved: false,
-    likes_count: initialLikes,
-    saves_count: initialSaves,
-    comments_count: initialComments,
-  });
+  const [commentCount, setCommentCount] = useState(initialComments);
  const [content, setContent] = useState("");
  const [replyTo, setReplyTo] = useState<number | null>(null);
  const [loading, setLoading] = useState(true);
@@ -48,30 +58,23 @@ export default function BlogPostInteractions({
  const canModerate = Boolean(user?.is_staff || user?.is_superuser || user?.can_review_blog_posts);

  const replyTarget = useMemo(
-    () => comments.find((comment) => comment.id === replyTo),
+    () => findComment(comments, replyTo),
    [comments, replyTo],
  );

  const loadComments = async () => {
    const data = await api.getComments(slug);
    setComments(data);
-    setInteraction((prev) => ({ ...prev, comments_count: data.length }));
+    setCommentCount(countComments(data));
  };

  useEffect(() => {
    let mounted = true;
-    Promise.all([
-      api.getComments(slug),
-      isAuthenticated ? api.getBlogInteraction(slug).catch(() => null) : Promise.resolve(null),
-    ])
-      .then(([commentData, interactionData]) => {
+    api.getComments(slug)
+      .then((data) => {
        if (!mounted) return;
-        setComments(commentData);
-        if (interactionData) {
-          setInteraction(interactionData);
-        } else {
-          setInteraction((prev) => ({ ...prev, comments_count: commentData.length }));
-        }
+        setComments(data);
+        setCommentCount(countComments(data));
      })
      .finally(() => {
        if (mounted) setLoading(false);
@@ -79,17 +82,7 @@ export default function BlogPostInteractions({
    return () => {
      mounted = false;
    };
-  }, [isAuthenticated, slug]);
-
-  const toggleLike = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleLike(slug));
-  };
-
-  const toggleSave = async () => {
-    if (!isAuthenticated) return;
-    setInteraction(await api.toggleSave(slug));
-  };
+  }, [slug]);

  const submitComment = async () => {
    const trimmed = content.trim();
@@ -100,10 +93,10 @@ export default function BlogPostInteractions({
      setContent("");
      setReplyTo(null);
      await loadComments();
-      toast({ title: "نظر ثبت شد", variant: "success" });
+      toast({ title: "کامنت ثبت شد", variant: "success" });
    } catch (error) {
      toast({
-        title: "ثبت نظر ناموفق بود",
+        title: "ثبت کامنت ناموفق بود",
        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
        variant: "destructive",
      });
@@ -116,10 +109,10 @@ export default function BlogPostInteractions({
    try {
      await api.hideComment(commentId);
      await loadComments();
-      toast({ title: "نظر مخفی شد", variant: "success" });
+      toast({ title: "کامنت مخفی شد", variant: "success" });
    } catch (error) {
      toast({
-        title: "حذف نظر ناموفق بود",
+        title: "حذف کامنت ناموفق بود",
        description: resolveErrorMessage(error, "دوباره تلاش کنید"),
        variant: "destructive",
      });
@@ -127,30 +120,50 @@ export default function BlogPostInteractions({
  };

  const renderComment = (comment: Types.CommentSchema, nested = false) => (
-    <div key={comment.id} className={nested ? "mr-6 border-r pr-4" : ""}>
-      <div className="rounded-2xl border border-border/70 bg-background/80 p-4 text-right">
-        <div className="flex flex-wrap items-center justify-between gap-3">
-          <div className="flex items-center gap-2">
-            {canModerate ? (
-              <Button variant="ghost" size="sm" onClick={() => hideComment(comment.id)}>
-                <Trash2 className="h-4 w-4" />
-              </Button>
-            ) : null}
+    <div
+      key={comment.id}
+      className={nested ? "relative mr-7 border-r-2 border-primary/20 pr-5" : ""}
+    >
+      <div className="flex items-start gap-3 text-right">
+        <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl bg-primary/12 text-lg font-black text-primary shadow-inner">
+          {avatarInitial(comment.author)}
+        </div>
+        <div className="min-w-0 flex-1">
+          <div className="mb-1 flex flex-wrap items-center gap-2 text-sm">
+            <span className="font-semibold">{displayName(comment.author)}</span>
+            <span className="text-xs text-muted-foreground">{formatJalaliDate(comment.created_at)}</span>
+          </div>
+          <div className="rounded-bl-3xl rounded-br-md rounded-tl-3xl rounded-tr-3xl border border-border/70 bg-muted/35 px-4 py-3 shadow-sm">
+            <p className="whitespace-pre-wrap text-sm leading-7">{comment.content}</p>
+          </div>
+          <div className="mt-2 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
            {isAuthenticated ? (
-              <Button variant="ghost" size="sm" onClick={() => setReplyTo(comment.id)}>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 gap-1 rounded-full px-3 text-xs"
+                onClick={() => setReplyTo(comment.id)}
+              >
+                <Reply className="h-3.5 w-3.5" />
                پاسخ
              </Button>
            ) : null}
-          </div>
-          <div>
-            <p className="font-medium">{displayName(comment.author)}</p>
-            <p className="text-xs text-muted-foreground">{formatJalali(comment.created_at, false)}</p>
+            {canModerate ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 gap-1 rounded-full px-3 text-xs text-destructive hover:text-destructive"
+                onClick={() => hideComment(comment.id)}
+              >
+                <Trash2 className="h-3.5 w-3.5" />
+                مخفی‌کردن
+              </Button>
+            ) : null}
          </div>
        </div>
-        <p className="mt-3 whitespace-pre-wrap leading-7 text-sm">{comment.content}</p>
      </div>
      {comment.replies?.length ? (
-        <div className="mt-3 space-y-3">
+        <div className="mt-4 space-y-4">
          {comment.replies.map((reply) => renderComment(reply, true))}
        </div>
      ) : null}
@@ -158,52 +171,28 @@ export default function BlogPostInteractions({
  );

  return (
-    <Card className="mt-8 rounded-[1.75rem] border border-border/70 shadow-sm" dir="rtl">
+    <Card className="mt-10 rounded-[2rem] border border-border/70 bg-card/90 shadow-sm" dir="rtl">
      <CardHeader className="text-right">
-        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-          <div className="flex items-center gap-2">
-            <Button
-              variant={interaction.saved ? "default" : "outline"}
-              onClick={toggleSave}
-              disabled={!isAuthenticated}
-            >
-              <Bookmark className="ml-2 h-4 w-4" />
-              ذخیره
-              <Badge className="mr-2" variant="secondary">{interaction.saves_count}</Badge>
-            </Button>
-            <Button
-              variant={interaction.liked ? "default" : "outline"}
-              onClick={toggleLike}
-              disabled={!isAuthenticated}
-            >
-              <Heart className="ml-2 h-4 w-4" />
-              پسندیدن
-              <Badge className="mr-2" variant="secondary">{interaction.likes_count}</Badge>
-            </Button>
-          </div>
-          <div>
-            <CardTitle className="flex items-center justify-end gap-2">
-              دیدگاه‌ها
-              <MessageSquare className="h-5 w-5 text-primary" />
-            </CardTitle>
-            <CardDescription className="mt-2">
-              {interaction.comments_count} نظر برای این نوشته ثبت شده است.
-            </CardDescription>
-          </div>
-        </div>
+        <CardTitle className="flex items-center justify-end gap-2 text-2xl">
+          کامنت‌ها
+          <MessageSquare className="h-5 w-5 text-primary" />
+        </CardTitle>
+        <CardDescription>
+          {toPersianDigits(commentCount)} کامنت برای این نوشته ثبت شده است.
+        </CardDescription>
      </CardHeader>
-      <CardContent className="space-y-5">
+      <CardContent className="space-y-6">
        {!isAuthenticated ? (
-          <div className="rounded-2xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm text-muted-foreground">
-            برای پسندیدن، ذخیره‌کردن یا ثبت نظر باید وارد حساب شوید.
+          <div className="rounded-3xl border border-dashed border-border/70 bg-muted/20 p-5 text-center text-sm leading-7 text-muted-foreground">
+            برای ثبت کامنت باید وارد حساب کاربری شوید.
            <Button asChild className="mr-3" size="sm">
              <Link to="/auth">ورود / ثبت‌نام</Link>
            </Button>
          </div>
        ) : (
-          <div className="rounded-2xl border border-border/70 bg-muted/20 p-4">
+          <div className="rounded-3xl border border-border/70 bg-muted/20 p-4">
            {replyTarget ? (
-              <div className="mb-3 flex items-center justify-between rounded-xl bg-background px-3 py-2 text-sm">
+              <div className="mb-3 flex items-center justify-between rounded-2xl bg-background px-3 py-2 text-sm">
                <Button variant="ghost" size="sm" onClick={() => setReplyTo(null)}>
                  لغو پاسخ
                </Button>
@@ -213,13 +202,13 @@ export default function BlogPostInteractions({
            <Textarea
              value={content}
              onChange={(event) => setContent(event.target.value)}
-              placeholder="نظر خود را بنویسید..."
-              className="min-h-28 text-right"
+              placeholder="کامنت خود را بنویسید..."
+              className="min-h-28 rounded-2xl bg-background text-right"
            />
            <div className="mt-3 flex justify-end">
-              <Button onClick={submitComment} disabled={submitting || !content.trim()}>
-                {submitting ? <Loader2 className="ml-2 h-4 w-4 animate-spin" /> : <Send className="ml-2 h-4 w-4" />}
-                ثبت نظر
+              <Button onClick={submitComment} disabled={submitting || !content.trim()} className="gap-2 rounded-full">
+                {submitting ? <Loader2 className="h-4 w-4 animate-spin" /> : <Send className="h-4 w-4" />}
+                ثبت کامنت
              </Button>
            </div>
          </div>
@@ -230,10 +219,10 @@ export default function BlogPostInteractions({
            <Loader2 className="h-5 w-5 animate-spin" />
          </div>
        ) : comments.length ? (
-          <div className="space-y-4">{comments.map((comment) => renderComment(comment))}</div>
+          <div className="space-y-5">{comments.map((comment) => renderComment(comment))}</div>
        ) : (
-          <div className="rounded-2xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
-            هنوز نظری ثبت نشده است.
+          <div className="rounded-3xl border border-dashed border-border/70 p-8 text-center text-sm text-muted-foreground">
+            هنوز کامنتی ثبت نشده است.
          </div>
        )}
      </CardContent>
--- a/src/components/BlogThumbnail.tsx
+++ b/src/components/BlogThumbnail.tsx
@@ -0,0 +1,58 @@
+import type * as Types from "@/lib/types";
+import { cn } from "@/lib/utils";
+
+type BlogThumbnailProps = {
+  post: Pick<Types.PostListSchema, "title" | "category" | "absolute_featured_image_thumbnail_url" | "absolute_featured_image_preview_url" | "absolute_featured_image_url" | "featured_image">;
+  imageUrl?: string | null;
+  className?: string;
+  imageClassName?: string;
+  priority?: boolean;
+};
+
+function initials(title: string) {
+  return title
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part[0])
+    .join("");
+}
+
+export default function BlogThumbnail({
+  post,
+  imageUrl,
+  className,
+  imageClassName,
+  priority = false,
+}: BlogThumbnailProps) {
+  if (imageUrl) {
+    return (
+      <div className={cn("overflow-hidden bg-muted", className)}>
+        <img
+          src={imageUrl}
+          alt={post.title}
+          className={cn("h-full w-full object-cover transition duration-500 group-hover:scale-[1.03]", imageClassName)}
+          loading={priority ? "eager" : "lazy"}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden bg-[radial-gradient(circle_at_20%_20%,rgba(34,197,94,0.28),transparent_32%),linear-gradient(135deg,#0f3d2e,#163f59_52%,#111827)] text-white",
+        className,
+      )}
+    >
+      <div className="absolute inset-0 bg-[linear-gradient(45deg,rgba(255,255,255,0.08)_25%,transparent_25%,transparent_50%,rgba(255,255,255,0.08)_50%,rgba(255,255,255,0.08)_75%,transparent_75%,transparent)] bg-[length:28px_28px] opacity-25" />
+      <div className="relative flex h-full flex-col items-center justify-center gap-3 p-6 text-center">
+        <span className="rounded-full border border-white/25 bg-white/15 px-3 py-1 text-xs backdrop-blur">
+          {post.category?.name || "بلاگ"}
+        </span>
+        <span className="text-5xl font-black tracking-tight">{initials(post.title) || "گـ"}</span>
+      </div>
+    </div>
+  );
+}
--- a/src/components/Markdown.tsx
+++ b/src/components/Markdown.tsx
@@ -1,101 +1,164 @@
-import React from 'react';
-import ReactMarkdown from 'react-markdown';
-import type { PluggableList } from 'unified';
-import remarkGfm from 'remark-gfm';
-import rehypeRaw from 'rehype-raw';
-import rehypeSanitize from 'rehype-sanitize';
+"use client";

-type MarkdownSize = 'sm' | 'base' | 'lg';
+import React, { useState } from "react";
+import { Check, Copy } from "lucide-react";
+import ReactMarkdown from "react-markdown";
+import type { PluggableList } from "unified";
+import remarkGfm from "remark-gfm";
+import rehypeRaw from "rehype-raw";
+import rehypeSanitize from "rehype-sanitize";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { extractMarkdownHeadings } from "@/lib/markdown-headings";
+import { cn } from "@/lib/utils";
+
+type MarkdownSize = "sm" | "base" | "lg";

 type MarkdownProps = {
  content?: string;
  allowHtml?: boolean;
  className?: string;
-  dir?: 'rtl' | 'ltr';
+  dir?: "rtl" | "ltr";
  justify?: boolean;
  size?: MarkdownSize;
 };

+function CodeBlock({
+  className,
+  children,
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) {
+  const [copied, setCopied] = useState(false);
+  const language = /language-([\w-]+)/.exec(className || "")?.[1] || "text";
+  const code = String(children).replace(/\n$/, "");
+
+  const copyCode = async () => {
+    if (!navigator.clipboard) return;
+    await navigator.clipboard.writeText(code);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1600);
+  };
+
+  return (
+    <div
+      dir="ltr"
+      className="my-5 overflow-hidden rounded-2xl border border-slate-700/70 bg-[#0f172a] text-left shadow-xl shadow-slate-950/10"
+    >
+      <div className="flex items-center justify-between border-b border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-300">
+        <span className="font-mono uppercase tracking-wide">{language}</span>
+        <button
+          type="button"
+          onClick={copyCode}
+          className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-slate-300 transition hover:bg-white/10 hover:text-white"
+        >
+          {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+          {copied ? "Copied" : "Copy"}
+        </button>
+      </div>
+      <SyntaxHighlighter
+        language={language}
+        style={oneDark}
+        PreTag="div"
+        customStyle={{
+          margin: 0,
+          background: "transparent",
+          direction: "ltr",
+          padding: "1rem",
+        }}
+        codeTagProps={{
+          dir: "ltr",
+          style: {
+            direction: "ltr",
+            textAlign: "left",
+            fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          },
+        }}
+      >
+        {code}
+      </SyntaxHighlighter>
+    </div>
+  );
+}
+
 export default function Markdown({
-  content = '',
+  content = "",
  allowHtml = false,
-  className = '',
-  dir = 'rtl',
+  className = "",
+  dir = "rtl",
  justify = false,
-  size = 'sm',
+  size = "sm",
 }: MarkdownProps) {
  const rehypePlugins: PluggableList | undefined = allowHtml ? [rehypeRaw, rehypeSanitize] : undefined;
+  const headings = extractMarkdownHeadings(content);
+  let headingIndex = 0;

  const baseSizeClass =
-    size === 'sm' ? 'text-sm' : size === 'lg' ? 'text-lg' : 'text-base';
+    size === "sm" ? "text-sm" : size === "lg" ? "text-lg" : "text-base";

  const hScale =
-    size === 'sm'
-      ? { h1: 'text-xl', h2: 'text-lg', h3: 'text-base', h4: 'text-base' }
-      : size === 'base'
-      ? { h1: 'text-3xl', h2: 'text-2xl', h3: 'text-xl', h4: 'text-lg' }
-      : { h1: 'text-4xl', h2: 'text-3xl', h3: 'text-2xl', h4: 'text-xl' };
+    size === "sm"
+      ? { h1: "text-xl", h2: "text-lg", h3: "text-base", h4: "text-base" }
+      : size === "base"
+      ? { h1: "text-3xl", h2: "text-2xl", h3: "text-xl", h4: "text-lg" }
+      : { h1: "text-4xl", h2: "text-3xl", h3: "text-2xl", h4: "text-xl" };

  const justifyStyle: React.CSSProperties | undefined = justify
-    ? { textAlign: 'justify', textJustify: 'inter-word' }
+    ? { textAlign: "justify", textJustify: "inter-word" }
    : undefined;

+  const nextHeadingId = (level: 1 | 2 | 3) => {
+    while (headingIndex < headings.length) {
+      const heading = headings[headingIndex];
+      headingIndex += 1;
+      if (heading.level === level) return heading.id;
+    }
+    return undefined;
+  };
+
  return (
    <div
      dir={dir}
-      className={`markdown-body ${baseSizeClass} text-right leading-7 break-words ${className}`}
+      className={cn("markdown-body break-words text-right leading-8", baseSizeClass, className)}
      style={justifyStyle}
    >
      <ReactMarkdown
        remarkPlugins={[remarkGfm]}
        rehypePlugins={rehypePlugins}
        components={{
-          h1: (p) => <h1 className={`mt-6 font-bold ${hScale.h1}`} {...p} />,
-          h2: (p) => <h2 className={`mt-6 font-bold ${hScale.h2}`} {...p} />,
-          h3: (p) => <h3 className={`mt-5 font-semibold ${hScale.h3}`} {...p} />,
-          h4: (p) => <h4 className={`mt-4 font-semibold ${hScale.h4}`} {...p} />,
-          p:  (p) => <p className="my-3" {...p} />,
-          a:  (p) => <a className="underline decoration-primary hover:opacity-90 break-all" target="_blank" rel="noopener noreferrer" {...p} />,
-          ul: (p) => <ul className="my-3 list-disc ps-6 space-y-1.5" {...p} />,
-          ol: (p) => <ol className="my-3 list-decimal ps-6 space-y-1.5" {...p} />,
-          li: (p) => <li className="[&>ul]:my-1.5 [&>ol]:my-1.5" {...p} />,
-          hr: (p) => <hr className="my-5 border-muted" {...p} />,
+          h1: (p) => <h1 id={nextHeadingId(1)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h1)} {...p} />,
+          h2: (p) => <h2 id={nextHeadingId(2)} className={cn("scroll-mt-28 pt-2 font-bold", hScale.h2)} {...p} />,
+          h3: (p) => <h3 id={nextHeadingId(3)} className={cn("scroll-mt-28 pt-2 font-semibold", hScale.h3)} {...p} />,
+          h4: (p) => <h4 className={cn("mt-4 font-semibold", hScale.h4)} {...p} />,
+          p: (p) => <p className="my-4" {...p} />,
+          a: (p) => <a className="break-all underline decoration-primary hover:opacity-90" target="_blank" rel="noopener noreferrer" {...p} />,
+          ul: (p) => <ul className="my-4 list-disc space-y-1.5 pe-0 ps-6" {...p} />,
+          ol: (p) => <ol className="my-4 list-decimal space-y-1.5 pe-0 ps-6" {...p} />,
+          li: (p) => <li className="[&>ol]:my-1.5 [&>ul]:my-1.5" {...p} />,
+          hr: (p) => <hr className="my-6 border-muted" {...p} />,
          blockquote: (p) => (
-            <blockquote className="my-3 border-r-4 pr-4 italic text-muted-foreground" {...p} />
+            <blockquote className="my-4 rounded-2xl border-r-4 border-primary bg-muted/40 py-3 pr-4 italic text-muted-foreground" {...p} />
          ),
          code: ({ className, children, node, ...p }) => {
            const isInline =
-              node?.tagName === 'code' &&
-              !/language-/.test(className || '') &&
-              !String(children).includes('\n');
+              node?.tagName === "code" &&
+              !/language-/.test(className || "") &&
+              !String(children).includes("\n");

            if (isInline) {
              return (
-                <code className="rounded bg-muted px-1 py-0.5 text-[0.9em]" {...p}>
+                <code dir="ltr" className="rounded bg-muted px-1.5 py-0.5 text-[0.9em]" {...p}>
                  {children}
                </code>
              );
            }

-            return (
-              <code className={className} {...p}>
-                {children}
-              </code>
-            );
+            return <CodeBlock className={className}>{children}</CodeBlock>;
          },
-          pre: ({ className = '', children, ...p }) => (
-            <pre
-              className={[
-                "my-4 overflow-x-auto rounded-md bg-muted p-4 text-[0.9em]",
-                className,
-              ].filter(Boolean).join(" ")}
-              {...p}
-            >
-              {children}
-            </pre>
-          ),
+          pre: ({ children }) => <>{children}</>,
          table: (p) => (
-            <div className="my-3 overflow-x-auto">
+            <div className="my-4 overflow-x-auto">
              <table className="w-full border-collapse" {...p} />
            </div>
          ),
--- a/src/lib/markdown-headings.ts
+++ b/src/lib/markdown-headings.ts
@@ -0,0 +1,52 @@
+export type MarkdownHeading = {
+  id: string;
+  level: 1 | 2 | 3;
+  text: string;
+};
+
+function plainHeadingText(value: string) {
+  return value
+    .replace(/`([^`]+)`/g, "$1")
+    .replace(/\*\*([^*]+)\*\*/g, "$1")
+    .replace(/\*([^*]+)\*/g, "$1")
+    .replace(/\[([^\]]+)\]\([^)]+\)/g, "$1")
+    .replace(/<[^>]*>/g, " ")
+    .replace(/\s+/g, " ")
+    .trim();
+}
+
+function headingIdBase(text: string) {
+  const normalized = text
+    .normalize("NFKC")
+    .toLowerCase()
+    .replace(/[^\p{L}\p{N}\s_-]/gu, "")
+    .trim()
+    .replace(/\s+/g, "-")
+    .slice(0, 80);
+
+  return normalized || "section";
+}
+
+export function extractMarkdownHeadings(content?: string): MarkdownHeading[] {
+  const counters = new Map<string, number>();
+
+  return (content || "")
+    .split(/\r?\n/)
+    .map((line) => {
+      const match = /^(#{1,3})\s+(.+?)\s*#*$/.exec(line.trim());
+      if (!match) return null;
+
+      const level = match[1].length as 1 | 2 | 3;
+      const text = plainHeadingText(match[2]);
+      const base = headingIdBase(text);
+      const nextCount = (counters.get(base) || 0) + 1;
+      counters.set(base, nextCount);
+
+      return {
+        id: nextCount === 1 ? base : `${base}-${nextCount}`,
+        level,
+        text,
+      };
+    })
+    .filter(Boolean) as MarkdownHeading[];
+}
--- a/src/lib/public-api.ts
+++ b/src/lib/public-api.ts
@@ -89,6 +89,16 @@ export async function getPublicPost(slug: string) {
  });
 }

+export async function getRecommendedPosts(slug: string, limit = 3) {
+  return requestJson<Types.PostListSchema[]>(
+    `/api/blog/posts/${encodeURIComponent(slug)}/recommended`,
+    {
+      params: { limit },
+      revalidate: DEFAULT_REVALIDATE_SECONDS,
+    },
+  );
+}
+
 export async function getPublicEvents(options?: { search?: string; limit?: number }) {
  const search = options?.search?.trim();

--- a/src/lib/utils.ts
+++ b/src/lib/utils.ts
@@ -35,6 +35,24 @@ export function formatJalali(iso?: string, withTime: boolean = true): string {
  }
 }

+export function formatJalaliDate(iso?: string): string {
+  if (!iso) return '—';
+  try {
+    const date = new Date(iso);
+    const locale = Intl.DateTimeFormat.supportedLocalesOf(['fa-IR-u-ca-persian']).length > 0
+      ? 'fa-IR-u-ca-persian'
+      : 'fa-IR';
+
+    return new Intl.DateTimeFormat(locale, {
+      day: 'numeric',
+      month: 'long',
+      year: 'numeric',
+    }).format(date);
+  } catch {
+    return '—';
+  }
+}
+
 const DEFAULT_THUMB = "/placeholder.svg";

 const pickFirstUrl = (...values: Array<string | null | undefined>) =>
@@ -66,6 +84,22 @@ export const getEventSeoImageUrl = (event: Types.EventListItemSchema) =>

 export const getThumbUrl = getEventCardImageUrl;

+export const getBlogCardImageUrl = (post: Types.PostListSchema) =>
+  [
+    post.absolute_featured_image_thumbnail_url,
+    post.absolute_featured_image_preview_url,
+    post.absolute_featured_image_url,
+    post.featured_image,
+  ].find((value) => Boolean(value));
+
+export const getBlogHeroImageUrl = (post: Types.PostListSchema) =>
+  [
+    post.absolute_featured_image_preview_url,
+    post.absolute_featured_image_url,
+    post.absolute_featured_image_thumbnail_url,
+    post.featured_image,
+  ].find((value) => Boolean(value));
+
 export const getGalleryImagePreviewUrl = (
  image:
    | Types.EventGalleryItem
--- a/src/views/Blog.tsx
+++ b/src/views/Blog.tsx
@@ -1,12 +1,14 @@
 "use client";

 import { useCallback, useEffect, useState } from "react";
+import BlogThumbnail from "@/components/BlogThumbnail";
+import { Input } from "@/components/ui/input";
 import { Link, useLocation, useNavigate } from "@/lib/router";
 import { api } from "@/lib/api";
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Input } from "@/components/ui/input";
-import type * as Types from "@/lib/types";
 import { blogPostPath } from "@/lib/blog-routes";
+import { apiBaseUrl, toAbsoluteUrl } from "@/lib/site";
+import type * as Types from "@/lib/types";
+import { formatJalaliDate, getBlogCardImageUrl } from "@/lib/utils";

 type BlogProps = {
  initialPosts?: Types.PostListSchema[];
@@ -60,59 +62,55 @@ export default function Blog({
  }, [location.pathname, navigate, search]);

  return (
-    <div className="min-h-screen bg-background">
-      <div className="container mx-auto px-4 py-8">
-        <h1 className="text-4xl font-bold mb-8">وبلاگ</h1>
-
-        <div className="mb-8">
+    <div className="min-h-screen bg-[linear-gradient(180deg,hsl(var(--background)),hsl(var(--muted)/0.32))]" dir="rtl">
+      <div className="container mx-auto px-4 py-10">
+        <div className="mb-8 flex flex-col gap-5 md:flex-row md:items-end md:justify-between">
+          <div className="text-right">
+            <p className="mb-2 text-sm font-medium text-primary">خواندنی‌های انجمن</p>
+            <h1 className="text-4xl font-black tracking-tight">بلاگ</h1>
+            <p className="mt-3 max-w-2xl text-sm leading-7 text-muted-foreground">
+              نوشته‌های آموزشی، تجربه‌های دانشجویی و یادداشت‌های تخصصی اعضای انجمن علمی.
+            </p>
+          </div>
          <Input
            type="text"
-            placeholder="جستجو در مقالات..."
+            placeholder="جستجو در نوشته‌ها..."
            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            className="max-w-md"
+            onChange={(event) => setSearch(event.target.value)}
+            className="max-w-md rounded-full bg-background/80 text-right shadow-sm backdrop-blur"
          />
        </div>

        {loading ? (
          <p className="text-center text-muted-foreground">در حال بارگذاری...</p>
        ) : posts.length === 0 ? (
-          <p className="text-center text-muted-foreground">مقاله‌ای یافت نشد</p>
+          <p className="rounded-3xl border border-dashed bg-background/70 p-10 text-center text-muted-foreground">
+            نوشته‌ای پیدا نشد.
+          </p>
        ) : (
-          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
            {posts.map((post) => (
-              <Link key={post.id} to={blogPostPath(post.slug)}>
-                <Card className="h-full hover:shadow-lg transition-shadow">
-                  {(post.absolute_featured_image_thumbnail_url || post.absolute_featured_image_preview_url || post.absolute_featured_image_url || post.featured_image) ? (
-                    <div className="aspect-video overflow-hidden rounded-t-lg bg-muted">
-                      <img
-                        src={post.absolute_featured_image_thumbnail_url || post.absolute_featured_image_preview_url || post.absolute_featured_image_url || post.featured_image}
-                        alt={post.title}
-                        className="h-full w-full object-cover transition duration-300 group-hover:scale-[1.02]"
-                        loading="lazy"
-                      />
-                    </div>
-                  ) : null}
-                  <CardHeader>
-                    <CardTitle className="line-clamp-2">{post.title}</CardTitle>
-                    <CardDescription>
-                      {post.category?.name && (
-                        <span className="text-primary ml-2">{post.category.name}</span>
-                      )}
-                      {new Date(post.created_at).toLocaleDateString("fa-IR")}
-                    </CardDescription>
-                  </CardHeader>
-                  <CardContent>
-                    {post.excerpt && (
-                      <p className="text-muted-foreground line-clamp-3 mb-4">
-                        {post.excerpt}
-                      </p>
-                    )}
-                    <p className="text-sm">
-                      نویسنده: {post.author.first_name} {post.author.last_name}
-                    </p>
-                  </CardContent>
-                </Card>
+              <Link
+                key={post.id}
+                to={blogPostPath(post.slug)}
+                className="group overflow-hidden rounded-[2rem] border border-border/70 bg-card/85 shadow-sm transition duration-300 hover:-translate-y-1 hover:shadow-xl hover:shadow-primary/10"
+              >
+                <BlogThumbnail
+                  post={post}
+                  imageUrl={toAbsoluteUrl(getBlogCardImageUrl(post), apiBaseUrl)}
+                  className="aspect-[16/10] rounded-t-[2rem]"
+                />
+                <article className="space-y-4 p-5 text-right">
+                  <h2 className="line-clamp-2 text-xl font-bold leading-9 transition group-hover:text-primary">
+                    {post.title}
+                  </h2>
+                  <p className="line-clamp-3 min-h-[5.25rem] text-sm leading-7 text-muted-foreground">
+                    {post.excerpt || post.seo_description || "خلاصه‌ای برای این نوشته ثبت نشده است."}
+                  </p>
+                  <time className="block text-xs font-medium text-primary/80" dateTime={post.published_at || post.created_at}>
+                    {formatJalaliDate(post.published_at || post.created_at)}
+                  </time>
+                </article>
              </Link>
            ))}
          </div>
Author	SHA1	Message	Date
Amirhossein Khalili	7ddc6b158d	feat(blog): redesign post detail experience Some checks failed Frontend CI/CD / build (push) Has been cancelled Details Frontend CI/CD / deploy (push) Has been cancelled Details	2026-06-10 11:56:21 +03:30
Amirhossein Khalili	0d01933f9d	feat(blog): redesign post list cards	2026-06-10 11:56:09 +03:30
Amirhossein Khalili	039158e0c4	feat(blog): add copyable highlighted code blocks	2026-06-10 11:55:56 +03:30