jiang13-bbs/frontend/app/announcement/[id]/page.tsx

import type { Metadata } from "next";
import { cookies } from "next/headers";
import { notFound } from "next/navigation";
import { Megaphone } from "lucide-react";
import { fetchAnnouncementDetail, fetchOverview } from "@/lib/api";
import { authCookieHeader } from "@/lib/cookies";
import { getMeCached, getPublicSettingsCached } from "@/lib/serverData";
import { extractToc, estimateReadingMinutes, markdownHeadingToc } from "@/lib/toc";
import MarkdownBody from "@/components/MarkdownBody";
import PostToc from "@/components/PostToc";
import {
  SiteDocShell,
  SiteDocIdentity,
  SiteDocPageNav,
  SiteDocAnnoNav,
  SiteDocMasthead,
  SiteDocBreadcrumb,
} from "@/components/site-doc";

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 cookie = authCookieHeader(await cookies());
  const [data, me, overview, settings] = await Promise.all([
    fetchAnnouncementDetail(id, cookie || undefined).catch(() => null),
    getMeCached(cookie || undefined),
    fetchOverview(cookie || undefined).catch(() => null),
    getPublicSettingsCached(),
  ]);
  if (!data) notFound();

  const a = data.announcement;
  const annId = Number(id);
  const loginHref = `/login?redirect=${encodeURIComponent(`/announcement/${id}`)}`;
  const sidebarPages = overview?.sidebar_pages ?? [];
  const announcements = overview?.announcements ?? [];
  const siteLead = settings.site_description?.trim() || undefined;
  const toc = extractToc(a.content);
  const headingToc = markdownHeadingToc(toc);
  const readingMinutes = estimateReadingMinutes(a.content, a.title.length);

  let headingIndex = 0;
  const headingRenderer = (Tag: "h2" | "h3") =>
    function Heading({ children }: { children?: React.ReactNode }) {
      const item = headingToc[headingIndex++];
      return (
        <Tag id={item?.id} style={{ scrollMarginTop: 90 }}>
          {children}
        </Tag>
      );
    };

  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: a.title,
    datePublished: a.created_at,
    dateModified: a.updated_at,
    articleSection: "站点公告",
    keywords: a.tag,
  };

  const left = (
    <>
      <SiteDocIdentity kind="announcements" lead={siteLead} />
      <SiteDocAnnoNav items={announcements} currentId={annId} />
    </>
  );

  const right = (
    <>
      {toc.length > 0 ? <PostToc items={toc} /> : null}
      <SiteDocPageNav pages={sidebarPages} title="关于本站" />
    </>
  );

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />

      <SiteDocShell
        left={left}
        right={right}
        mobileExtras={
          <>
            {toc.length > 0 ? <PostToc items={toc} /> : null}
            <SiteDocAnnoNav items={announcements} currentId={annId} />
            <SiteDocPageNav pages={sidebarPages} title="关于本站" />
          </>
        }
      >
        <SiteDocBreadcrumb
          items={[
            { href: "/", label: "首页" },
            { href: "/announcements", label: "站点公告" },
            { label: a.title },
          ]}
        />

        <article className="panel p-6 sm:p-8">
          <SiteDocMasthead
            kicker="站点公告"
            title={a.title}
            createdAt={a.created_at}
            updatedAt={a.updated_at}
            readingMinutes={readingMinutes}
            showTimeOfDay
            badges={
              <>
                {a.pinned ? <span className="badge-pin">置顶</span> : null}
                <span className={`j13-anno-tag is-${a.tag_color}`}>{a.tag}</span>
              </>
            }
          />

          <MarkdownBody
            content={a.content}
            loggedIn={!!me.user}
            loginHref={loginHref}
            components={
              headingToc.length > 0
                ? { h2: headingRenderer("h2"), h3: headingRenderer("h3") }
                : undefined
            }
          />
        </article>

        <div className="mt-5 flex items-center gap-2 text-[12.5px] meta">
          <Megaphone size={14} style={{ color: "var(--accent)" }} />
          <span>由站点管理团队发布</span>
        </div>
      </SiteDocShell>
    </>
  );
}