feat: add i18n support for 8 languages (#100)

Add internationalization infrastructure using Fumadocs i18n with
support for English, French, German, Spanish, Japanese, Russian,
Simplified Chinese, and Traditional Chinese.

- Create i18n config with defineI18n (en, fr, de, es, ja, ru, cn, tw)
- Restructure app routes under [lang] dynamic segment
- Pass i18n config to fumadocs-core source loader
- Update layouts to be locale-aware (RootProvider, DocsLayout, shared)
- Add root redirect from / to /en
- Update LLM and OG routes for locale support
- Add cyrillic font subset for Russian support

Author: towneh

src/app/(home)/layout.tsx

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

src/app/(home)/page.tsx

@@ -0,0 +1,10 @@
+import { redirect } from 'next/navigation';
+
+export default async function HomePage({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+  redirect(`/${lang}/docs`);
+}

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

@@ -9,18 +9,21 @@ import { notFound } from 'next/navigation';
 import { getMDXComponents } from '@/mdx-components';
 import type { Metadata } from 'next';
 import { createRelativeLink } from 'fumadocs-ui/mdx';
+import { i18n } from '@/lib/i18n';
 
-export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
+export default async function Page(props: {
+  params: Promise<{ lang: string; slug?: string[] }>;
+}) {
   const params = await props.params;
-  const page = source.getPage(params.slug);
+  const page = source.getPage(params.slug, params.lang);
   if (!page) notFound();
 
   const MDX = page.data.body;
   const path = `content/docs/${params.slug?.join('/') || 'index'}.mdx`;
 
   return (
-    <DocsPage 
-      toc={page.data.toc} 
+    <DocsPage
+      toc={page.data.toc}
       full={page.data.full}
       editOnGithub={{
         owner: 'BasisVR',
@@ -34,7 +37,6 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
       <DocsBody>
         <MDX
           components={getMDXComponents({
-            // this allows you to link to other pages with relative file paths
             a: createRelativeLink(source, page),
           })}
         />
@@ -43,15 +45,20 @@ export default async function Page(props: PageProps<'/docs/[[...slug]]'>) {
   );
 }
 
-export async function generateStaticParams() {
-  return source.generateParams();
+export function generateStaticParams() {
+  return i18n.languages.flatMap((lang) =>
+    source.getPages(lang).map((page) => ({
+      lang,
+      slug: page.slugs,
+    })),
+  );
 }
 
-export async function generateMetadata(
-  props: PageProps<'/docs/[[...slug]]'>,
-): Promise<Metadata> {
+export async function generateMetadata(props: {
+  params: Promise<{ lang: string; slug?: string[] }>;
+}): Promise<Metadata> {
   const params = await props.params;
-  const page = source.getPage(params.slug);
+  const page = source.getPage(params.slug, params.lang);
   if (!page) notFound();
 
   return {

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

@@ -3,11 +3,19 @@ import { DocsLayout } from 'fumadocs-ui/layouts/notebook';
 import { baseOptions } from '@/lib/layout.shared';
 import type { ReactNode } from 'react';
 
-export default function Layout({ children }: { children: ReactNode }) {
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+
   return (
-    <DocsLayout 
-      tree={source.pageTree} 
-      {...baseOptions()}
+    <DocsLayout
+      tree={source.pageTree[lang]}
+      {...baseOptions(lang)}
       sidebar={{
         defaultOpenLevel: 0,
         footer: (

src/app/docs/[[...slug]]/page.tsx src/app/[lang]/docs/[[...slug]]/page.tsxsrc/app/docs/[[...slug]]/page.tsx renamed to src/app/[lang]/docs/[[...slug]]/page.tsx

@@ -0,0 +1,71 @@
+import { RootProvider } from 'fumadocs-ui/provider/next';
+import type { Metadata } from 'next';
+import { i18n, localeDisplayNames } from '@/lib/i18n';
+
+export const metadata: Metadata = {
+  title: {
+    default: 'BasisVR Docs',
+    template: '%s | BasisVR Docs',
+  },
+  description: 'Documentation for BasisVR - Virtual Reality Framework',
+  metadataBase: new URL('https://docs.basisvr.org'),
+  openGraph: {
+    title: 'BasisVR Docs',
+    description: 'Documentation for BasisVR - Virtual Reality Framework',
+    url: 'https://docs.basisvr.org',
+    siteName: 'BasisVR Docs',
+    images: [
+      {
+        url: '/img/basisvr-social-card.jpg',
+        width: 1200,
+        height: 630,
+        alt: 'BasisVR',
+      },
+    ],
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'BasisVR Docs',
+    description: 'Documentation for BasisVR - Virtual Reality Framework',
+    images: ['/img/basisvr-social-card.jpg'],
+  },
+  icons: {
+    icon: '/img/BasisLogoSmall.png',
+  },
+};
+
+export default async function LangLayout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+
+  return (
+    <RootProvider
+      locale={lang}
+      i18n={{
+        locale: lang,
+        locales: i18n.languages.map((l) => ({
+          locale: l,
+          name: localeDisplayNames[l] ?? l,
+        })),
+      }}
+      search={{
+        enabled: false,
+      }}
+      theme={{
+        defaultTheme: 'dark',
+      }}
+    >
+      {children}
+    </RootProvider>
+  );
+}
+
+export function generateStaticParams() {
+  return i18n.languages.map((lang) => ({ lang }));
+}

src/app/docs/layout.tsx src/app/[lang]/docs/layout.tsxsrc/app/docs/layout.tsx renamed to src/app/[lang]/docs/layout.tsx

@@ -1,61 +1,18 @@
-import { RootProvider } from 'fumadocs-ui/provider/next';
-import type { Metadata } from 'next';
 import './global.css';
 import { Inter } from 'next/font/google';
 
 const inter = Inter({
-  subsets: ['latin'],
+  subsets: ['latin', 'latin-ext', 'cyrillic'],
 });
 
-export const metadata: Metadata = {
-  title: {
-    default: 'BasisVR Docs',
-    template: '%s | BasisVR Docs',
-  },
-  description: 'Documentation for BasisVR - Virtual Reality Framework',
-  metadataBase: new URL('https://docs.basisvr.org'),
-  openGraph: {
-    title: 'BasisVR Docs',
-    description: 'Documentation for BasisVR - Virtual Reality Framework',
-    url: 'https://docs.basisvr.org',
-    siteName: 'BasisVR Docs',
-    images: [
-      {
-        url: '/img/basisvr-social-card.jpg',
-        width: 1200,
-        height: 630,
-        alt: 'BasisVR',
-      },
-    ],
-    locale: 'en',
-    type: 'website',
-  },
-  twitter: {
-    card: 'summary_large_image',
-    title: 'BasisVR Docs',
-    description: 'Documentation for BasisVR - Virtual Reality Framework',
-    images: ['/img/basisvr-social-card.jpg'],
-  },
-  icons: {
-    icon: '/img/BasisLogoSmall.png',
-  },
-};
-
-export default function Layout({ children }: LayoutProps<'/'>) {
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
-      <body className="flex flex-col min-h-screen">
-        <RootProvider
-          search={{
-            enabled: false,
-          }}
-          theme={{
-            defaultTheme: 'dark',
-          }}
-        >
-          {children}
-        </RootProvider>
-      </body>
+    <html suppressHydrationWarning className={inter.className}>
+      <body className="flex flex-col min-h-screen">{children}</body>
     </html>
   );
 }

src/app/[lang]/layout.tsx

@@ -3,7 +3,7 @@ import { getLLMText, source } from '@/lib/source';
 export const revalidate = false;
 
 export async function GET() {
-  const scan = source.getPages().map(getLLMText);
+  const scan = source.getPages('en').map(getLLMText);
   const scanned = await Promise.all(scan);
 
   return new Response(scanned.join('\n\n'));

src/app/layout.tsx

@@ -2,6 +2,7 @@ import { getPageImage, source } from '@/lib/source';
 import { notFound } from 'next/navigation';
 import { ImageResponse } from 'next/og';
 import { generate as DefaultImage } from 'fumadocs-ui/og';
+import { i18n } from '@/lib/i18n';
 
 export const revalidate = false;
 
@@ -28,8 +29,9 @@ export async function GET(
 }
 
 export function generateStaticParams() {
-  return source.getPages().map((page) => ({
-    lang: page.locale,
-    slug: getPageImage(page).segments,
-  }));
+  return i18n.languages.flatMap((lang) =>
+    source.getPages(lang).map((page) => ({
+      slug: getPageImage(page).segments,
+    })),
+  );
 }