Add i18n support with English, Chinese, Spanish, and Japanese

.gitignore

@@ -26,6 +26,7 @@ downloads/
 eggs/
 .eggs/
 lib/
+!docs/lib/
 lib64/
 parts/
 sdist/

docs/app/[lang]/(home)/layout.tsx

@@ -0,0 +1,13 @@
+import { HomeLayout } from "fumadocs-ui/layouts/home";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default async function Layout({
+  params,
+  children,
+}: {
+  params: Promise<{ lang: string }>;
+  children: React.ReactNode;
+}) {
+  const { lang } = await params;
+  return <HomeLayout {...baseOptions(lang)}>{children}</HomeLayout>;
+}

docs/app/[lang]/(home)/page.tsx

@@ -0,0 +1,47 @@
+import { DynamicLink } from "fumadocs-core/dynamic-link";
+
+const greetings: Record<string, string> = {
+  en: "Hello World",
+  zh: "你好世界",
+  es: "Hola Mundo",
+  ja: "こんにちは世界",
+};
+
+const descriptions: Record<string, string> = {
+  en: "You can open",
+  zh: "你可以打开",
+  es: "Puedes abrir",
+  ja: "開くことができます",
+};
+
+const docsText: Record<string, string> = {
+  en: "and see the documentation.",
+  zh: "查看文档。",
+  es: "y ver la documentación.",
+  ja: "でドキュメントを確認できます。",
+};
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  return (
+    <div className="flex flex-col justify-center text-center flex-1">
+      <h1 className="text-2xl font-bold mb-4">
+        {greetings[lang] ?? greetings.en}
+      </h1>
+      <p>
+        {descriptions[lang] ?? descriptions.en}{" "}
+        <DynamicLink
+          href="/[lang]/docs"
+          className="font-medium underline"
+        >
+          /docs
+        </DynamicLink>{" "}
+        {docsText[lang] ?? docsText.en}
+      </p>
+    </div>
+  );
+}

docs/app/[lang]/docs/[[...slug]]/page.tsx

@@ -0,0 +1,74 @@
+import { getPageImage, source } from "@/lib/source";
+import {
+  DocsBody,
+  DocsDescription,
+  DocsPage,
+  DocsTitle,
+} from "fumadocs-ui/layouts/docs/page";
+import { notFound } from "next/navigation";
+import { getMDXComponents } from "@/mdx-components";
+import type { Metadata } from "next";
+import { createRelativeLink } from "fumadocs-ui/mdx";
+import { LLMCopyButton, ViewOptions } from "@/components/ai/page-actions";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: string; slug?: string[] }>;
+}) {
+  const { lang, slug } = await params;
+  const page = source.getPage(slug, lang);
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+  const gitConfig = {
+    user: "username",
+    repo: "repo",
+    branch: "main",
+  };
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription className="mb-0">
+        {page.data.description}
+      </DocsDescription>
+      <div className="flex flex-row gap-2 items-center border-b pb-6">
+        <LLMCopyButton markdownUrl={`${page.url}.mdx`} />
+        <ViewOptions
+          markdownUrl={`${page.url}.mdx`}
+          githubUrl={`https://github.com/${gitConfig.user}/${gitConfig.repo}/blob/${gitConfig.branch}/docs/content/docs/${page.path}`}
+        />
+      </div>
+      <DocsBody>
+        <MDX
+          components={getMDXComponents({
+            a: createRelativeLink(source, page),
+          })}
+        />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ lang: string; slug?: string[] }>;
+}): Promise<Metadata> {
+  const { lang, slug } = await params;
+  const page = source.getPage(slug, lang);
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+    openGraph: {
+      images: getPageImage(page).url,
+    },
+  };
+}

docs/app/[lang]/docs/layout.tsx

@@ -0,0 +1,18 @@
+import { source } from "@/lib/source";
+import { DocsLayout } from "fumadocs-ui/layouts/docs";
+import { baseOptions } from "@/lib/layout.shared";
+
+export default async function Layout({
+  params,
+  children,
+}: {
+  params: Promise<{ lang: string }>;
+  children: React.ReactNode;
+}) {
+  const { lang } = await params;
+  return (
+    <DocsLayout tree={source.getPageTree(lang)} {...baseOptions(lang)}>
+      {children}
+    </DocsLayout>
+  );
+}

docs/app/[lang]/layout.tsx

@@ -0,0 +1,74 @@
+import { RootProvider } from "fumadocs-ui/provider/next";
+import { Archivo } from "next/font/google";
+import { defineI18nUI } from "fumadocs-ui/i18n";
+import { i18n } from "@/lib/i18n";
+
+const archivo = Archivo({
+  subsets: ["latin", "latin-ext"],
+  weight: ["500"],
+  display: "swap",
+});
+
+const { provider } = defineI18nUI(i18n, {
+  translations: {
+    en: {
+      displayName: "English",
+    },
+    zh: {
+      displayName: "中文",
+      toc: "目录",
+      search: "搜索文档",
+      lastUpdate: "最后更新于",
+      searchNoResult: "没有结果",
+      previousPage: "上一页",
+      nextPage: "下一页",
+      chooseLanguage: "选择语言",
+      chooseTheme: "选择主题",
+      editOnGithub: "在 GitHub 上编辑",
+      tocNoHeadings: "无标题",
+    },
+    es: {
+      displayName: "Español",
+      toc: "En esta página",
+      search: "Buscar documentación",
+      lastUpdate: "Última actualización",
+      searchNoResult: "Sin resultados",
+      previousPage: "Página anterior",
+      nextPage: "Página siguiente",
+      chooseLanguage: "Elegir idioma",
+      chooseTheme: "Elegir tema",
+      editOnGithub: "Editar en GitHub",
+      tocNoHeadings: "Sin encabezados",
+    },
+    ja: {
+      displayName: "日本語",
+      toc: "目次",
+      search: "ドキュメントを検索",
+      lastUpdate: "最終更新",
+      searchNoResult: "結果なし",
+      previousPage: "前のページ",
+      nextPage: "次のページ",
+      chooseLanguage: "言語を選択",
+      chooseTheme: "テーマを選択",
+      editOnGithub: "GitHub で編集",
+      tocNoHeadings: "見出しなし",
+    },
+  },
+});
+
+export default async function Layout({
+  params,
+  children,
+}: {
+  params: Promise<{ lang: string }>;
+  children: React.ReactNode;
+}) {
+  const { lang } = await params;
+  return (
+    <html lang={lang} className={archivo.className} suppressHydrationWarning>
+      <body className="flex flex-col min-h-screen" suppressHydrationWarning>
+        <RootProvider i18n={provider(lang)}>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

docs/app/api/search/route.ts

@@ -1,7 +1,19 @@
-import { source } from '@/lib/source';
-import { createFromSource } from 'fumadocs-core/search/server';
+import { source } from "@/lib/source";
+import { createFromSource } from "fumadocs-core/search/server";
 
 export const { GET } = createFromSource(source, {
-  // https://docs.orama.com/docs/orama-js/supported-languages
-  language: 'english',
+  localeMap: {
+    zh: {
+      search: {
+        threshold: 0,
+        tolerance: 0,
+      },
+    },
+    ja: {
+      search: {
+        threshold: 0,
+        tolerance: 0,
+      },
+    },
+  },
 });

docs/app/layout.tsx

@@ -1,13 +1,6 @@
-import { RootProvider } from "fumadocs-ui/provider/next";
 import "./global.css";
-import { Archivo } from "next/font/google";
 import type { Metadata } from "next";
 
-const archivo = Archivo({
-  subsets: ["latin"],
-  weight: ["500"],
-});
-
 export const metadata: Metadata = {
   title: "Python Template Documentation",
   description: "Super-opinionated Python stack for fast development",
@@ -29,12 +22,6 @@ export const metadata: Metadata = {
   },
 };
 
-export default function Layout({ children }: LayoutProps<'/'>) {
-  return (
-    <html lang="en" className={archivo.className} suppressHydrationWarning>
-      <body className="flex flex-col min-h-screen" suppressHydrationWarning>
-        <RootProvider>{children}</RootProvider>
-      </body>
-    </html>
-  );
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return children;
 }