name: docs description: 文档页面组件规范。Use when creating documentation pages or editing files in /docs/ directory. Triggers on: creating docs pages, DocsSection, DocsPageLayout usage.

Docs Components Guide

文档页面组件规范。

DocsSection Type

type DocsSection = {
  value: string; // Anchor ID
  title: string; // Section title
  content: ReactNode; // Content
  children?: { value: string; title: string }[];
};

Usage Pattern

Content File

// app/(main)/docs/privacy/content.tsx
export const LAST_UPDATED = "2024-12-29";

export const sections: DocsSection[] = [
  {
    value: "introduction",
    title: "Introduction",
    content: <p>Content here...</p>,
  },
  {
    value: "data-collection",
    title: "Data Collection",
    content: (
      <>
        <h3 id="personal-data">Personal Data</h3>
        <p>...</p>
      </>
    ),
    children: [
      { value: "personal-data", title: "Personal Data" },
    ],
  },
];

Page File

// app/(main)/docs/privacy/page.tsx
import { DocsPageLayout } from '@/components/common/docs/docs-page-layout';
import { LAST_UPDATED, sections } from './content';

export default function PrivacyPage() {
  return (
    <DocsPageLayout
      title="Privacy Policy"
      lastUpdated={LAST_UPDATED}
      sections={sections}
    />
  );
}

Sub-section Navigation

<h3 id="xxx"> must match children[].value:

content: <h3 id="personal-data">Personal Data</h3>,
children: [{ value: "personal-data", title: "Personal Data" }],

Helper Components

• CodeBlock - Code blocks with syntax highlighting
• DocsTable - Formatted tables