Use Meshkee {id}/{fa-slug} detail URLs for products and blogs.

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>
2026-08-22 23:52:45 +03:30
parent 24b5649abd
commit 0cb9aa57e2
14 changed files with 426 additions and 307 deletions
@@ -0,0 +1,99 @@
+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>
+    </>
+  );
+}