Wire Meshkee catalog: products, blog, mega menu, and product search.
Catalog-only (no cart); search targets store items and products pages. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
co-authored by
Cursor
Cursor
parent
cfa21cbee9
commit
8e14748b48
@@ -3,11 +3,14 @@ import Link from "next/link";
|
||||
import { notFound } from "next/navigation";
|
||||
import { Container } from "@/components/Container";
|
||||
import { PageHero } from "@/components/layout/PageHero";
|
||||
import { blogPosts, getBlogPost } from "@/lib/data";
|
||||
import { ProductTabs } from "@/components/product/ProductTabs";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { blogImage, fetchBlog } from "@/lib/blog";
|
||||
import { fetchComments } from "@/lib/comments";
|
||||
import { getBlogPost } from "@/lib/data";
|
||||
import { formatFaDate } from "@/lib/format";
|
||||
|
||||
export function generateStaticParams() {
|
||||
return blogPosts.map((post) => ({ slug: post.slug }));
|
||||
}
|
||||
export const revalidate = 60;
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
@@ -15,9 +18,11 @@ export async function generateMetadata({
|
||||
params: Promise<{ slug: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const post = getBlogPost(slug);
|
||||
if (!post) return { title: "مقاله" };
|
||||
return { title: post.title, description: post.excerpt };
|
||||
const apiPost = await fetchBlog(slug);
|
||||
if (apiPost) return { title: apiPost.title, description: apiPost.abstract ?? undefined };
|
||||
const local = getBlogPost(slug);
|
||||
if (!local) return { title: "مقاله" };
|
||||
return { title: local.title, description: local.excerpt };
|
||||
}
|
||||
|
||||
export default async function BlogPostPage({
|
||||
@@ -26,6 +31,36 @@ export default async function BlogPostPage({
|
||||
params: Promise<{ slug: string }>;
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const apiPost = await fetchBlog(slug);
|
||||
|
||||
if (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="font-latin text-[12px] tracking-[0.18em] 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(slug);
|
||||
if (!post) notFound();
|
||||
|
||||
@@ -40,6 +75,9 @@ export default async function BlogPostPage({
|
||||
<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" />
|
||||
|
||||
+73
-16
@@ -3,35 +3,92 @@ import Link from "next/link";
|
||||
import { Container } from "@/components/Container";
|
||||
import { PageHero } from "@/components/layout/PageHero";
|
||||
import { Placeholder } from "@/components/Placeholder";
|
||||
import { blogHref, blogImage, fetchBlogs } from "@/lib/blog";
|
||||
import { blogPosts } from "@/lib/data";
|
||||
import { faDigits, formatFaDate } from "@/lib/format";
|
||||
|
||||
export const revalidate = 60;
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "مقالات",
|
||||
description: "نکتههایی از تعمیرگاه و بورس قطعات لوازم خانگی برادران برقعی.",
|
||||
};
|
||||
|
||||
export default function BlogPage() {
|
||||
export default async function BlogPage({
|
||||
searchParams,
|
||||
}: {
|
||||
searchParams: Promise<{ page?: string }>;
|
||||
}) {
|
||||
const { page: pageParam } = await searchParams;
|
||||
const page = Math.max(1, Number(pageParam) || 1);
|
||||
const result = await fetchBlogs({ page, pageSize: 12 });
|
||||
const usingApi = result.items.length > 0;
|
||||
const pageCount = usingApi
|
||||
? Math.max(1, Math.ceil((result.total || result.items.length) / (result.pageSize || 12)))
|
||||
: 1;
|
||||
|
||||
return (
|
||||
<>
|
||||
<PageHero kicker="Blog" title="مقالات" image="/images/slides/slide-2.jpg" />
|
||||
<section className="py-16 sm:py-24">
|
||||
<Container>
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{blogPosts.map((post) => (
|
||||
<Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
|
||||
<div className="overflow-hidden rounded-2xl">
|
||||
<Placeholder
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
{usingApi ? (
|
||||
<>
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{result.items.map((post) => (
|
||||
<Link key={post.id} href={blogHref(post)} className="group block">
|
||||
<div className="overflow-hidden rounded-2xl">
|
||||
<Placeholder
|
||||
src={blogImage(post)}
|
||||
alt={post.title}
|
||||
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">
|
||||
{formatFaDate(post.publishedAt || post.createdAt)}
|
||||
</p>
|
||||
<h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
|
||||
{post.abstract ? (
|
||||
<p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.abstract}</p>
|
||||
) : null}
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
{pageCount > 1 ? (
|
||||
<div className="mt-10 flex justify-center gap-2">
|
||||
{Array.from({ length: pageCount }, (_, index) => {
|
||||
const number = index + 1;
|
||||
return (
|
||||
<Link
|
||||
key={number}
|
||||
href={`/blog?page=${number}`}
|
||||
className={`grid size-10 place-items-center rounded-xl text-[13px] ${number === page ? "bg-brand text-white" : "border border-line bg-white text-ink"}`}
|
||||
>
|
||||
{faDigits(number)}
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
|
||||
<h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
|
||||
<p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<div className="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
||||
{blogPosts.map((post) => (
|
||||
<Link key={post.slug} href={`/blog/${post.slug}`} className="group block">
|
||||
<div className="overflow-hidden rounded-2xl">
|
||||
<Placeholder
|
||||
src={post.image}
|
||||
alt={post.title}
|
||||
className="aspect-[16/10] w-full object-cover transition-transform duration-700 group-hover:scale-105"
|
||||
/>
|
||||
</div>
|
||||
<p className="mt-4 font-latin text-[11px] tracking-[0.18em] text-muted">{post.date}</p>
|
||||
<h2 className="mt-2 text-[18px] font-bold leading-7 group-hover:text-brand">{post.title}</h2>
|
||||
<p className="mt-2 line-clamp-2 text-[14px] leading-7 text-muted">{post.excerpt}</p>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Container>
|
||||
</section>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user