feat: add announcements feature with dynamic routing and markdown support

app/announcements/[slug]/page.tsx

@@ -0,0 +1,66 @@
+import type { Metadata } from "next";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+
+import { Badge } from "@/components/ui/badge";
+import { getAnnouncementBySlug, getAnnouncementSlugs } from "@/lib/announcements";
+
+type PageProps = {
+  params: Promise<{ slug: string }>;
+};
+
+export async function generateStaticParams() {
+  const slugs = await getAnnouncementSlugs();
+  return slugs.map((slug) => ({ slug }));
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+  const { slug } = await params;
+
+  try {
+    const announcement = await getAnnouncementBySlug(slug);
+    return {
+      title: `${announcement.title} | お知らせ`,
+      description: announcement.summary || `${announcement.title} のお知らせです。`,
+    };
+  } catch {
+    return {
+      title: "お知らせ",
+      description: "お知らせページ",
+    };
+  }
+}
+
+export default async function AnnouncementDetailPage({ params }: PageProps) {
+  const { slug } = await params;
+
+  let announcement;
+  try {
+    announcement = await getAnnouncementBySlug(slug);
+  } catch {
+    notFound();
+  }
+
+  return (
+    <article className="mx-auto flex w-full max-w-4xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
+      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
+        <Badge variant="outline" className="mb-3">
+          お知らせ詳細
+        </Badge>
+        <p className="text-xs text-muted-foreground">{announcement.date}</p>
+        <h1 className="mt-2 text-2xl font-semibold tracking-tight sm:text-4xl">{announcement.title}</h1>
+      </header>
+
+      <section className="rounded-3xl border bg-card p-6 shadow-sm sm:p-8">
+        <div
+          className="markdown-body space-y-4 text-sm leading-7 sm:text-base [&_a]:text-primary [&_a]:underline [&_a]:underline-offset-4 [&_blockquote]:border-l-2 [&_blockquote]:pl-3 [&_code]:rounded [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_h1]:text-2xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_li]:ml-5 [&_ol]:list-decimal [&_pre]:overflow-x-auto [&_pre]:rounded-lg [&_pre]:bg-muted [&_pre]:p-3 [&_ul]:list-disc"
+          dangerouslySetInnerHTML={{ __html: announcement.contentHtml }}
+        />
+      </section>
+
+      <Link href="/announcements" className="text-sm text-primary underline underline-offset-4">
+        お知らせ一覧へ戻る
+      </Link>
+    </article>
+  );
+}

app/announcements/page.tsx

@@ -0,0 +1,49 @@
+import Link from "next/link";
+
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { getAllAnnouncements } from "@/lib/announcements";
+
+export const metadata = {
+  title: "お知らせ | Takasumi-Neodyマイクラサーバプロジェクト",
+  description: "Takasumi-Neodyマイクラサーバプロジェクトのお知らせ一覧です。",
+};
+
+export default async function AnnouncementsPage() {
+  const announcements = await getAllAnnouncements();
+
+  return (
+    <div className="mx-auto flex w-full max-w-5xl flex-1 flex-col gap-6 px-4 py-8 sm:px-8 sm:py-12">
+      <header className="rounded-3xl border bg-card/70 p-6 shadow-sm backdrop-blur sm:p-8">
+        <Badge variant="outline" className="mb-3">
+          お知らせ
+        </Badge>
+        <h1 className="text-3xl font-semibold tracking-tight sm:text-4xl">更新情報・告知</h1>
+        <p className="mt-3 text-sm leading-7 text-muted-foreground sm:text-base">
+          このページは Markdown で作成したお知らせを表示します。
+        </p>
+      </header>
+
+      <section className="grid gap-4">
+        {announcements.map((item) => (
+          <Card key={item.slug} className="border-foreground/10">
+            <CardHeader>
+              <p className="text-xs text-muted-foreground">{item.date}</p>
+              <CardTitle className="text-xl">
+                <Link
+                  href={`/announcements/${item.slug}`}
+                  className="underline-offset-4 hover:underline"
+                >
+                  {item.title}
+                </Link>
+              </CardTitle>
+            </CardHeader>
+            <CardContent>
+              <p className="text-sm text-muted-foreground">{item.summary}</p>
+            </CardContent>
+          </Card>
+        ))}
+      </section>
+    </div>
+  );
+}

app/page.tsx

@@ -1,17 +1,10 @@
 "use client";
 
 import { ExternalLink, Pickaxe, Sprout, Wifi } from "lucide-react";
+import Link from "next/link";
 
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
 import { cn } from "@/lib/utils";
 
@@ -48,14 +41,22 @@ export default function Home() {
             サーバー追加画面で下記アドレスを入力してください。Java版 と
             統合版のどちらにも対応しています。
           </p>
+          <div className="mt-6">
+            <Link href="/announcements" className={cn(buttonVariants({ variant: "outline" }))}>
+              お知らせを見る
+            </Link>
+          </div>
         </section>
 
         <section className="grid gap-4 md:grid-cols-2">
           {servers.map((server) => {
             const Icon = server.icon;
             return (
-              <Card key={server.name} className="border-foreground/10">
-                <CardHeader>
+              <article
+                key={server.name}
+                className="rounded-2xl border border-foreground/10 bg-card p-5 shadow-xs sm:p-6"
+              >
+                <header>
                   <div className="mb-2 flex flex-col items-start gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                     <Badge variant={server.badgeVariant}>{server.name}</Badge>
                     <span className="inline-flex items-center gap-1.5 text-xs text-muted-foreground">
@@ -63,19 +64,19 @@ export default function Home() {
                       Java版 / 統合版 対応
                     </span>
                   </div>
-                  <CardTitle className="flex items-center gap-2 text-xl">
+                  <h3 className="flex items-center gap-2 text-xl font-semibold">
                     <Icon className="size-5" />
                     {server.name}
-                  </CardTitle>
-                  <CardDescription>{server.description}</CardDescription>
-                </CardHeader>
-                <CardContent>
+                  </h3>
+                  <p className="mt-1 text-sm text-muted-foreground">{server.description}</p>
+                </header>
+                <div className="mt-5">
                   <div className="rounded-xl border bg-background px-4 py-3">
                     <p className="text-xs text-muted-foreground">サーバアドレス</p>
                     <p className="mt-1 break-all font-mono text-sm">{server.address}</p>
                   </div>
-                </CardContent>
-                <CardFooter className="gap-2">
+                </div>
+                <div className="mt-5 flex gap-2">
                   <a
                     className={cn(buttonVariants(), "w-full sm:w-auto")}
                     href={`minecraft://?addExternalServer=${server.name}|${server.address}`}
@@ -83,8 +84,8 @@ export default function Home() {
                     Minecraft で開く
                     <ExternalLink className="size-4" />
                   </a>
-                </CardFooter>
-              </Card>
+                </div>
+              </article>
             );
           })}
         </section>