feat: article detail page with ISR and generateMetadata

2026-05-28 22:31:19 +07:00
parent 852646e40c
commit cddde56b49
1 changed files with 156 additions and 0 deletions
@@ -0,0 +1,156 @@
+import { notFound } from 'next/navigation'
+import type { Metadata } from 'next'
+import Image from 'next/image'
+import Link from 'next/link'
+import {
+  getArticleBySlug,
+  getRelatedArticles,
+  getAllCategories,
+  getArticles,
+  getAssetUrl,
+} from '@/lib/directus'
+import ArticleBody from '@/components/article/ArticleBody'
+import TagRow from '@/components/article/TagRow'
+import ArticleGrid from '@/components/home/ArticleGrid'
+
+interface Props {
+  params: Promise<{ category: string; slug: string }>
+}
+
+export const revalidate = false
+
+export async function generateStaticParams() {
+  try {
+    const categories = await getAllCategories()
+    const articlesByCategory = await Promise.all(
+      categories.map((cat) => getArticles({ categorySlug: cat.slug, limit: 1000 }))
+    )
+    return articlesByCategory.flat().map((article) => ({
+      category: article.category.slug,
+      slug: article.slug,
+    }))
+  } catch {
+    return []
+  }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params
+  try {
+    const article = await getArticleBySlug(slug)
+    if (!article) return {}
+    return {
+      title: article.seo_title ?? article.title,
+      description: article.seo_description ?? article.excerpt ?? undefined,
+      openGraph: {
+        title: article.seo_title ?? article.title,
+        description: article.seo_description ?? article.excerpt ?? undefined,
+        images: article.featured_image
+          ? [getAssetUrl(article.featured_image, { width: 1200, quality: 80 })]
+          : [],
+      },
+    }
+  } catch {
+    return {}
+  }
+}
+
+export default async function ArticlePage({ params }: Props) {
+  const { category: categorySlug, slug } = await params
+  let article = null
+  let related: import('@/lib/types').Article[] = []
+
+  try {
+    article = await getArticleBySlug(slug)
+    if (article && article.category.slug === categorySlug) {
+      related = await getRelatedArticles(categorySlug, slug)
+    } else {
+      article = null
+    }
+  } catch {
+    article = null
+  }
+
+  if (!article) notFound()
+
+  const publishedDate = article.published_at
+    ? new Intl.DateTimeFormat('en-US', {
+        year: 'numeric',
+        month: 'long',
+        day: 'numeric',
+      }).format(new Date(article.published_at))
+    : null
+
+  return (
+    <>
+      <article className="max-w-[780px] mx-auto px-6 pt-10 pb-8">
+        <nav
+          className="flex items-center gap-2 text-xs text-text-disabled mb-7"
+          aria-label="Breadcrumb"
+        >
+          <Link href="/" className="text-text-muted hover:text-accent transition-colors">
+            Home
+          </Link>
+          <span>›</span>
+          <Link
+            href={`/${article.category.slug}`}
+            className="text-text-muted hover:text-accent transition-colors"
+          >
+            {article.category.name}
+          </Link>
+          <span>›</span>
+          <span className="text-text-muted truncate">{article.title}</span>
+        </nav>
+
+        <p className="text-[10px] font-bold uppercase tracking-[2px] text-text-muted mb-3">
+          {article.category.name}
+        </p>
+        <h1 className="text-3xl lg:text-4xl font-bold text-text-primary leading-tight mb-4">
+          {article.title}
+        </h1>
+        {article.excerpt && (
+          <p className="text-lg text-text-secondary leading-relaxed mb-6">
+            {article.excerpt}
+          </p>
+        )}
+
+        <div className="flex items-center gap-3 py-3.5 border-t border-b border-border mb-8">
+          {article.is_featured && (
+            <span className="bg-violet text-white text-[9px] font-bold uppercase tracking-widest px-2 py-1 rounded">
+              Featured
+            </span>
+          )}
+          {publishedDate && (
+            <span className="text-xs text-text-muted">{publishedDate}</span>
+          )}
+        </div>
+
+        {article.featured_image && (
+          <div className="relative aspect-video rounded-md overflow-hidden mb-9">
+            <Image
+              src={getAssetUrl(article.featured_image, { width: 1200, quality: 85 })}
+              alt={article.title}
+              fill
+              priority
+              className="object-cover"
+              sizes="(max-width: 780px) 100vw, 780px"
+            />
+          </div>
+        )}
+
+        {article.content && <ArticleBody html={article.content} />}
+
+        <TagRow tags={article.tags} />
+      </article>
+
+      {related.length > 0 && (
+        <div className="max-w-[1200px] mx-auto">
+          <ArticleGrid
+            articles={related}
+            title={`More from ${article.category.name}`}
+          />
+        </div>
+      )}
+    </>
+  )
+}