feat(docs): enhance documentation site with internationalization and layout updates

- Updated the demo API to support locale-based content rendering. - Refactored the main layout to accommodate language-specific metadata and routing. - Introduced new components for blog and documentation pages, ensuring proper language handling. - Added styles for improved UI consistency across different sections. - Removed deprecated layout files and streamlined the structure for better maintainability.
2026-10-10 01:30:21 +08:00 · 2026-08-28 00:35:31 +08:00
parent 6c758f2b44
commit eca063e424
55 changed files with 6700 additions and 407 deletions
@@ -0,0 +1,79 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { ArrowLeft } from 'lucide-react';
+import { InlineTOC } from 'fumadocs-ui/components/inline-toc';
+import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { getMDXComponents } from '@/components/mdx';
+import { blogSource, formatBlogDate } from '@/lib/blog';
+import { i18n, isLanguage, type Language } from '@/lib/i18n';
+
+const copy: Record<Language, { back: string; team: string }> = {
+  zh: { back: '返回开发者博客', team: 'cursor-byok 开发团队' },
+  en: { back: 'Back to Developer Blog', team: 'The cursor-byok team' },
+};
+
+export default async function BlogPostPage(props: PageProps<'/[lang]/blog/[slug]'>) {
+  const { lang, slug } = await props.params;
+  if (!isLanguage(lang)) notFound();
+
+  const page = blogSource.getPage([slug], lang);
+  if (!page) notFound();
+
+  const t = copy[lang];
+  const prefix = lang === i18n.defaultLanguage ? '' : `/${lang}`;
+  const MDX = page.data.body;
+
+  return (
+    <main className="mx-auto w-full max-w-3xl px-6 py-12 sm:py-20">
+      <article>
+        <Link
+          href={`${prefix}/blog`}
+          className="mb-10 inline-flex items-center gap-2 text-sm text-fd-muted-foreground transition-colors hover:text-fd-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          {t.back}
+        </Link>
+
+        <header className="border-b pb-8">
+          <time className="text-sm text-fd-muted-foreground">
+            {formatBlogDate(page.path, lang)}
+          </time>
+          <h1 className="mt-4 text-3xl font-bold tracking-tight sm:text-4xl">{page.data.title}</h1>
+          <p className="mt-4 text-lg leading-8 text-fd-muted-foreground">{page.data.description}</p>
+          <p className="mt-5 text-sm font-medium">{t.team}</p>
+        </header>
+
+        <div className="prose mt-10 min-w-0">
+          <InlineTOC items={page.data.toc} />
+          <MDX
+            components={getMDXComponents({
+              a: createRelativeLink(blogSource, page),
+            })}
+          />
+        </div>
+      </article>
+    </main>
+  );
+}
+
+export function generateStaticParams() {
+  return i18n.languages.flatMap((lang) =>
+    blogSource.getPages(lang).map((page) => ({ lang, slug: page.slugs[0] })),
+  );
+}
+
+export async function generateMetadata(
+  props: PageProps<'/[lang]/blog/[slug]'>,
+): Promise<Metadata> {
+  const { lang, slug } = await props.params;
+  if (!isLanguage(lang)) notFound();
+
+  const page = blogSource.getPage([slug], lang);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}
@@ -0,0 +1,68 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+import { ArrowRight } from 'lucide-react';
+import { blogSource, formatBlogDate, sortBlogPages } from '@/lib/blog';
+import { isLanguage, type Language } from '@/lib/i18n';
+
+const copy: Record<Language, { title: string; description: string; intro: string }> = {
+  zh: {
+    title: '开发者博客',
+    description: 'cursor-byok 的架构决策、协议实现与开发进展。',
+    intro: '记录 cursor-byok 的架构决策、协议实现和开发进展。',
+  },
+  en: {
+    title: 'Developer Blog',
+    description: 'Architecture decisions, protocol work, and development progress of cursor-byok.',
+    intro: 'Notes on architecture decisions, protocol work, and development progress of cursor-byok.',
+  },
+};
+
+export async function generateMetadata(props: PageProps<'/[lang]/blog'>): Promise<Metadata> {
+  const { lang } = await props.params;
+  if (!isLanguage(lang)) notFound();
+
+  return {
+    title: copy[lang].title,
+    description: copy[lang].description,
+  };
+}
+
+export default async function BlogPage(props: PageProps<'/[lang]/blog'>) {
+  const { lang } = await props.params;
+  if (!isLanguage(lang)) notFound();
+
+  const t = copy[lang];
+  const posts = sortBlogPages(blogSource.getPages(lang));
+
+  return (
+    <main className="mx-auto w-full max-w-5xl px-6 py-16 sm:py-24">
+      <div className="max-w-2xl">
+        <p className="font-mono text-sm font-medium text-fd-primary">DEVELOPER BLOG</p>
+        <h1 className="mt-4 text-4xl font-bold tracking-tight">{t.title}</h1>
+        <p className="mt-4 text-lg leading-8 text-fd-muted-foreground">{t.intro}</p>
+      </div>
+
+      <div className="mt-12 divide-y border-y">
+        {posts.map((post) => (
+          <Link
+            key={post.url}
+            href={post.url}
+            className="group grid gap-3 py-7 transition-colors hover:text-fd-primary sm:grid-cols-[10rem_1fr_auto] sm:items-center"
+          >
+            <time className="text-sm text-fd-muted-foreground">
+              {formatBlogDate(post.path, lang)}
+            </time>
+            <div>
+              <h2 className="font-semibold">{post.data.title}</h2>
+              <p className="mt-1 text-sm leading-6 text-fd-muted-foreground">
+                {post.data.description}
+              </p>
+            </div>
+            <ArrowRight className="hidden size-4 transition-transform group-hover:translate-x-1 sm:block" />
+          </Link>
+        ))}
+      </div>
+    </main>
+  );
+}