98 lines
3.0 KiB
TypeScript
98 lines
3.0 KiB
TypeScript
import type { Metadata } from "next";
|
|
import Link from "next/link";
|
|
import { notFound } from "next/navigation";
|
|
import { ChevronRight, Megaphone } from "lucide-react";
|
|
import { fetchAnnouncementDetail } from "@/lib/api";
|
|
import { formatDate } from "@/lib/format";
|
|
import MarkdownBody from "@/components/MarkdownBody";
|
|
|
|
interface PageProps {
|
|
params: Promise<{ id: string }>;
|
|
}
|
|
|
|
export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
|
|
const { id } = await params;
|
|
const data = await fetchAnnouncementDetail(id).catch(() => null);
|
|
if (!data) return { title: "公告不存在" };
|
|
return {
|
|
title: data.announcement.title,
|
|
description: `站点公告 · ${data.announcement.tag}`,
|
|
openGraph: {
|
|
title: data.announcement.title,
|
|
description: `站点公告 · ${data.announcement.tag}`,
|
|
type: "article",
|
|
publishedTime: data.announcement.created_at,
|
|
},
|
|
};
|
|
}
|
|
|
|
export default async function AnnouncementPage({ params }: PageProps) {
|
|
const { id } = await params;
|
|
const data = await fetchAnnouncementDetail(id).catch(() => null);
|
|
if (!data) notFound();
|
|
|
|
const a = data.announcement;
|
|
const jsonLd = {
|
|
"@context": "https://schema.org",
|
|
"@type": "Article",
|
|
headline: a.title,
|
|
datePublished: a.created_at,
|
|
dateModified: a.updated_at,
|
|
articleSection: "站点公告",
|
|
keywords: a.tag,
|
|
};
|
|
|
|
return (
|
|
<div className="max-w-3xl mx-auto">
|
|
<script
|
|
type="application/ld+json"
|
|
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
|
/>
|
|
|
|
{/* 面包屑 */}
|
|
<nav className="meta mb-5 flex items-center gap-1.5 text-[13px]">
|
|
<Link href="/" className="hover:text-[var(--accent)] transition-colors">
|
|
首页
|
|
</Link>
|
|
<ChevronRight size={13} />
|
|
<span style={{ color: "var(--accent)" }}>站点公告</span>
|
|
</nav>
|
|
|
|
<article className="panel p-6 sm:p-8">
|
|
<div className="flex items-center justify-between gap-3 flex-wrap">
|
|
<span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
|
|
<time className="meta text-[12px] tabular-nums" dateTime={a.created_at}>
|
|
{formatDate(a.created_at)}
|
|
</time>
|
|
</div>
|
|
|
|
<h1
|
|
className="mt-3.5 text-[24px] sm:text-[28px] font-extrabold leading-snug tracking-tight"
|
|
style={{ color: "var(--ink)" }}
|
|
>
|
|
{a.title}
|
|
</h1>
|
|
|
|
<div
|
|
className="mt-5 pt-5"
|
|
style={{ borderTop: "1px solid var(--line)" }}
|
|
>
|
|
<MarkdownBody content={a.content} />
|
|
</div>
|
|
</article>
|
|
|
|
<div className="mt-5 flex items-center gap-2 text-[12.5px] meta">
|
|
<Megaphone size={14} style={{ color: "var(--accent)" }} />
|
|
<span>由站点管理团队发布</span>
|
|
<Link
|
|
href="/"
|
|
className="ml-auto font-semibold transition-colors hover:text-[var(--accent)]"
|
|
style={{ color: "var(--accent)" }}
|
|
>
|
|
返回首页
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|