feat(web): render cms pages and navigation from db

apps/web/src/app/[locale]/[slug]/page.tsx

@@ -0,0 +1,21 @@
+import { getPublishedPageBySlug } from "@cms/db"
+import { notFound } from "next/navigation"
+
+import { PublicPageView } from "@/components/public-page-view"
+
+export const dynamic = "force-dynamic"
+
+type PageProps = {
+  params: Promise<{ slug: string }>
+}
+
+export default async function CmsPageRoute({ params }: PageProps) {
+  const { slug } = await params
+  const page = await getPublishedPageBySlug(slug)
+
+  if (!page) {
+    notFound()
+  }
+
+  return <PublicPageView page={page} />
+}

apps/web/src/app/[locale]/about/page.tsx

@@ -1,13 +0,0 @@
-import { getTranslations } from "next-intl/server"
-
-export default async function AboutPage() {
-  const t = await getTranslations("About")
-
-  return (
-    <section className="mx-auto w-full max-w-6xl space-y-4 px-6 py-16">
-      <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
-      <h1 className="text-4xl font-semibold tracking-tight">{t("title")}</h1>
-      <p className="max-w-3xl text-neutral-600">{t("description")}</p>
-    </section>
-  )
-}

apps/web/src/app/[locale]/contact/page.tsx

@@ -1,13 +0,0 @@
-import { getTranslations } from "next-intl/server"
-
-export default async function ContactPage() {
-  const t = await getTranslations("Contact")
-
-  return (
-    <section className="mx-auto w-full max-w-6xl space-y-4 px-6 py-16">
-      <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
-      <h1 className="text-4xl font-semibold tracking-tight">{t("title")}</h1>
-      <p className="max-w-3xl text-neutral-600">{t("description")}</p>
-    </section>
-  )
-}

apps/web/src/app/[locale]/page.tsx

@@ -1,35 +1,45 @@
-import { listPosts } from "@cms/db"
+import { getPublishedPageBySlug, listPosts } from "@cms/db"
 import { Button } from "@cms/ui/button"
 import { getTranslations } from "next-intl/server"
 
+import { PublicPageView } from "@/components/public-page-view"
+
 export const dynamic = "force-dynamic"
 
 export default async function HomePage() {
-  const [posts, t] = await Promise.all([listPosts(), getTranslations("Home")])
+  const [homePage, posts, t] = await Promise.all([
+    getPublishedPageBySlug("home"),
+    listPosts(),
+    getTranslations("Home"),
+  ])
 
   return (
-    <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-16">
-      <header className="space-y-3">
-        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
-        <h1 className="text-4xl font-semibold tracking-tight">{t("title")}</h1>
-        <p className="text-neutral-600">{t("description")}</p>
-      </header>
+    <section>
+      {homePage ? <PublicPageView page={homePage} /> : null}
 
-      <section className="space-y-4 rounded-xl border border-neutral-200 p-6">
-        <div className="flex items-center justify-between">
-          <h2 className="text-xl font-medium">{t("latestPosts")}</h2>
-          <Button variant="secondary">{t("explore")}</Button>
-        </div>
+      <section className="mx-auto flex w-full max-w-6xl flex-col gap-6 px-6 py-6 pb-16">
+        <header className="space-y-3">
+          <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{t("badge")}</p>
+          <h2 className="text-3xl font-semibold tracking-tight">{t("latestPosts")}</h2>
+          <p className="text-neutral-600">{t("description")}</p>
+        </header>
 
-        <ul className="space-y-3">
-          {posts.map((post) => (
-            <li key={post.id} className="rounded-lg border border-neutral-200 p-4">
-              <p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
-              <h3 className="mt-1 text-lg font-medium">{post.title}</h3>
-              <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? t("noExcerpt")}</p>
-            </li>
-          ))}
-        </ul>
+        <section className="space-y-4 rounded-xl border border-neutral-200 p-6">
+          <div className="flex items-center justify-between">
+            <h3 className="text-xl font-medium">{t("latestPosts")}</h3>
+            <Button variant="secondary">{t("explore")}</Button>
+          </div>
+
+          <ul className="space-y-3">
+            {posts.map((post) => (
+              <li key={post.id} className="rounded-lg border border-neutral-200 p-4">
+                <p className="text-xs uppercase tracking-wide text-neutral-500">{post.status}</p>
+                <h4 className="mt-1 text-lg font-medium">{post.title}</h4>
+                <p className="mt-2 text-sm text-neutral-600">{post.excerpt ?? t("noExcerpt")}</p>
+              </li>
+            ))}
+          </ul>
+        </section>
       </section>
     </section>
   )

apps/web/src/app/sitemap.ts

@@ -1,14 +1,13 @@
+import { listPublishedPageSlugs } from "@cms/db"
 import type { MetadataRoute } from "next"
 
 const baseUrl = process.env.CMS_WEB_ORIGIN ?? "http://localhost:3000"
 
-const publicRoutes = ["/", "/about", "/contact"]
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  const pages = await listPublishedPageSlugs()
 
-export default function sitemap(): MetadataRoute.Sitemap {
-  const now = new Date()
-
-  return publicRoutes.map((route) => ({
-    url: `${baseUrl}${route}`,
-    lastModified: now,
+  return pages.map((page) => ({
+    url: page.slug === "home" ? `${baseUrl}/` : `${baseUrl}/${page.slug}`,
+    lastModified: page.updatedAt,
   }))
 }

apps/web/src/components/public-page-view.tsx

@@ -0,0 +1,26 @@
+type PageEntity = {
+  title: string
+  status: string
+  summary: string | null
+  content: string
+}
+
+type PublicPageViewProps = {
+  page: PageEntity
+}
+
+export function PublicPageView({ page }: PublicPageViewProps) {
+  return (
+    <article className="mx-auto flex w-full max-w-4xl flex-col gap-6 px-6 py-16">
+      <header className="space-y-3">
+        <p className="text-sm uppercase tracking-[0.2em] text-neutral-500">{page.status}</p>
+        <h1 className="text-4xl font-semibold tracking-tight">{page.title}</h1>
+        {page.summary ? <p className="text-neutral-600">{page.summary}</p> : null}
+      </header>
+
+      <section className="prose prose-neutral max-w-none whitespace-pre-wrap rounded-xl border border-neutral-200 bg-white p-6 text-neutral-800">
+        {page.content}
+      </section>
+    </article>
+  )
+}

apps/web/src/components/public-site-header.tsx

@@ -1,19 +1,11 @@
-"use client"
-
-import { useTranslations } from "next-intl"
+import { listPublicNavigation } from "@cms/db"
 
 import { Link } from "@/i18n/navigation"
 
 import { LanguageSwitcher } from "./language-switcher"
 
-export function PublicSiteHeader() {
-  const t = useTranslations("Layout")
-
-  const navItems = [
-    { href: "/", label: t("nav.home") },
-    { href: "/about", label: t("nav.about") },
-    { href: "/contact", label: t("nav.contact") },
-  ]
+export async function PublicSiteHeader() {
+  const navItems = await listPublicNavigation("header")
 
   return (
     <header className="border-b border-neutral-200 bg-white/80 backdrop-blur">
@@ -22,19 +14,28 @@ export function PublicSiteHeader() {
           href="/"
           className="text-sm font-semibold uppercase tracking-[0.2em] text-neutral-700"
         >
-          {t("brand")}
+          CMS Web
         </Link>
 
         <nav className="flex flex-wrap items-center gap-2">
-          {navItems.map((item) => (
+          {navItems.length === 0 ? (
             <Link
-              key={item.href}
-              href={item.href}
+              href="/"
               className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100"
             >
-              {item.label}
+              Home
             </Link>
-          ))}
+          ) : (
+            navItems.map((item) => (
+              <Link
+                key={item.id}
+                href={item.href}
+                className="rounded-md border border-neutral-300 px-3 py-1.5 text-sm font-medium text-neutral-700 hover:bg-neutral-100"
+              >
+                {item.label}
+              </Link>
+            ))
+          )}
         </nav>
 
         <LanguageSwitcher />