import type { Metadata } from "next"; import { notFound } from "next/navigation"; import "@/component/Blog/blog.css"; import { POSTS } from "@/data/blog-posts"; import { BlogPostHeader } from "@/component/Blog/BlogPostHeader"; import { BlogReadingProgress } from "@/component/Blog/BlogReadingProgress"; import { BlogShareRail, BlogShareRailMobile } from "@/component/Blog/BlogShareRail"; import { BlogTOC } from "@/component/Blog/BlogTOC"; import { BlogAuthorBio } from "@/component/Blog/BlogAuthorBio"; import { BlogRelated } from "@/component/Blog/BlogRelated"; import { BlogNewsletter } from "@/component/Blog/BlogNewsletter"; import { BlogJsonLd } from "@/component/Blog/BlogJsonLd"; import { Marquee } from "@/component/common/Marquee"; import { MARQUEE_ITEMS } from "@/data/blog-posts"; import { ArticleUnlimitedGuide, unlimitedGuideTOC, unlimitedGuideFAQ, } from "@/component/Blog/articles/ArticleUnlimitedGuide"; import { ArticleCostBreakdown, costBreakdownTOC, costBreakdownFAQ, } from "@/component/Blog/articles/ArticleCostBreakdown"; import { ArticleFigmaAI, figmaAITOC, figmaAIFAQ, } from "@/component/Blog/articles/ArticleFigmaAI"; import type { TOCItem } from "@/component/Blog/BlogTOC"; interface FAQItem { q: string; a: string; } const ARTICLES: Record< string, { Body: React.ComponentType; toc: TOCItem[]; faq: readonly FAQItem[] | FAQItem[]; } > = { "unlimited-design-subscription-guide": { Body: ArticleUnlimitedGuide, toc: unlimitedGuideTOC, faq: unlimitedGuideFAQ, }, "design-subscription-vs-hiring-designer-vs-agency": { Body: ArticleCostBreakdown, toc: costBreakdownTOC, faq: costBreakdownFAQ, }, "figma-ai-agents-startup-design-2026": { Body: ArticleFigmaAI, toc: figmaAITOC, faq: figmaAIFAQ, }, }; interface BlogPostPageProps { params: Promise<{ slug: string }>; } export async function generateStaticParams() { return POSTS.map((p) => ({ slug: p.slug })); } export async function generateMetadata({ params, }: BlogPostPageProps): Promise { const { slug } = await params; const post = POSTS.find((p) => p.slug === slug); if (!post) return {}; return { title: post.metaTitle, description: post.metaDescription, keywords: [post.targetKeyword], alternates: { canonical: `https://designshare.net/blog/${post.slug}`, }, openGraph: { title: post.metaTitle, description: post.metaDescription, url: `https://designshare.net/blog/${post.slug}`, type: "article", publishedTime: post.dateISO, images: [{ url: `https://designshare.net${post.image}` }], }, twitter: { card: "summary_large_image", title: post.metaTitle, description: post.metaDescription, }, }; } const marqueeInkItems = [...MARQUEE_ITEMS]; export default async function BlogPostPage({ params }: BlogPostPageProps) { const { slug } = await params; const post = POSTS.find((p) => p.slug === slug); if (!post) notFound(); const article = ARTICLES[post.id]; if (!article) notFound(); const { Body, toc, faq } = article; return (

); }