x

2026-06-20 18:39:03 -04:00
1 parent 3c4bb06003
commit f7aa4d099f
@@ -0,0 +1,77 @@
+import Link from '@/components/LocalizedLink'
+import { notFound } from 'next/navigation'
+import type { Metadata } from 'next'
+import { ArrowLeft } from 'lucide-react'
+import type { Article } from '@homaroma/types'
+
+import { API_BASE } from '@/lib/api'
+
+async function getArticle(slug: string): Promise<Article | null> {
+  try {
+    const res = await fetch(`${API_BASE}/articles/${slug}`, { next: { revalidate: 300 } })
+    return res.ok ? res.json() : null
+  } catch { return null }
+}
+
+export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
+  const { slug } = await params
+  const article = await getArticle(slug)
+  if (!article) return { title: 'Article Not Found | HomAroma' }
+  return {
+    title: `${article.title} | HomAroma Scent Guide`,
+    description: article.content.replace(/<[^>]+>/g, '').slice(0, 160),
+    openGraph: {
+      title: article.title,
+      images: article.coverImage ? [article.coverImage] : [],
+      type: 'article',
+      publishedTime: article.createdAt,
+    },
+  }
+}
+
+export default async function ArticleReaderPage({ params }: { params: Promise<{ slug: string }> }) {
+  const { slug } = await params
+  const article = await getArticle(slug)
+
+  if (!article) notFound()
+
+  return (
+    <div className="flex min-h-screen flex-col bg-pop-bg">
+      <main className="flex-1 pb-20 pt-24">
+        <article className="relative mx-auto mt-8 w-full max-w-4xl">
+          <Link
+            href="/scent-guide"
+            className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-gray-200 bg-white p-4 text-pop-black shadow-sm transition-colors hover:text-pop-pink xl:-left-24 lg:flex"
+          >
+            <ArrowLeft className="h-5 w-5" />
+          </Link>
+
+          <div className="space-y-6 px-6 py-12 text-center">
+            <Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-gray-600 hover:text-pop-pink lg:hidden">
+              <ArrowLeft className="h-4 w-4" /> Go Back
+            </Link>
+            <p className="text-xs font-bold uppercase tracking-[0.3em] text-pop-pink">
+              {new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
+            </p>
+            <h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-pop-black md:text-5xl lg:text-6xl">
+              {article.title}
+            </h1>
+          </div>
+
+          {article.coverImage && (
+            <div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]">
+              <img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" />
+            </div>
+          )}
+
+          <div className="mx-auto max-w-3xl rounded-3xl bg-white px-6 py-10 shadow-brutal md:px-12">
+            <div
+              dangerouslySetInnerHTML={{ __html: article.content }}
+              className="space-y-6 leading-relaxed text-gray-700 [&_a]:font-semibold [&_a]:text-pop-pink [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-pop-black [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-pop-black [&_img]:rounded-2xl [&_img]:shadow-brutal [&_p]:leading-relaxed [&_strong]:text-pop-black"
+            />
+          </div>
+        </article>
+      </main>
+    </div>
+  )
+}