Merge pull request #2 from leaperone/1-feat-i18n

1 feat i18n

Author: cunoe

app/(home)/layout.tsx

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

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

@@ -3,7 +3,8 @@ import Image from 'next/image';
 import Link from 'next/link';
 import MultiPostLogo from '@/public/MultiPost-Latest.png';
 
-export default function HomePage() {
+export default async function HomePage(props: { params: Promise<{ lang: string }> }) {
+  const lang = (await props.params).lang;
   return (
     <main className="flex flex-1 flex-col justify-center items-center text-center p-8">
       <Image src={MultiPostLogo} alt="MultiPost Logo" width={200} height={200} />
@@ -12,13 +13,13 @@ export default function HomePage() {
         MultiPost is a tool that allows you to post to multiple social media platforms from a single interface.
       </p>
       <div className="flex flex-col sm:flex-row gap-4">
-        <Button href="/docs/user-guide" icon={<BookCheckIcon />}>
+        <Button href={`/${lang}/docs/user-guide`} icon={<BookCheckIcon />}>
           User Guide
         </Button>
         <Button href="https://api-docs.multipost.app/" icon={<WebhookIcon />}>
           API Reference
         </Button>
-        <Button href="/docs/development" icon={<BugPlayIcon />}>
+        <Button href={`/${lang}/docs/development`} icon={<BugPlayIcon />}>
           Development
         </Button>
       </div>

app/(home)/page.tsx app/[lang]/(home)/page.tsxapp/(home)/page.tsx renamed to app/[lang]/(home)/page.tsx

@@ -10,7 +10,7 @@ import { createRelativeLink } from 'fumadocs-ui/mdx';
 import { getMDXComponents } from '@/mdx-components';
 
 export default async function Page(props: {
-  params: Promise<{ slug?: string[] }>;
+  params: Promise<{ slug?: string[], lang: string }>;
 }) {
   const params = await props.params;
 
@@ -19,7 +19,7 @@ export default async function Page(props: {
     redirect('https://api-docs.multipost.app/');
   }
 
-  const page = source.getPage(params.slug);
+  const page = source.getPage(params.slug, params.lang);
   if (!page) notFound();
 
   const MDXContent = page.data.body;

app/api/search/route.ts app/[lang]/api/search/route.tsapp/api/search/route.ts renamed to app/[lang]/api/search/route.ts

@@ -0,0 +1,23 @@
+import { DocsLayout } from "fumadocs-ui/layouts/notebook";
+import type { ReactNode } from "react";
+import { baseOptions } from "@/app/layout.config";
+import { source } from "@/lib/source";
+
+export default async function Layout({
+  children,
+  params,
+}: {
+  children: ReactNode;
+  params: Promise<{ lang: string }>;
+}) {
+  const lang = (await params).lang;
+  return (
+    <DocsLayout
+      {...baseOptions(lang)}
+      tree={source.pageTree[lang]}
+      nav={{ ...baseOptions(lang).nav, mode: "auto" }}
+    >
+      {children}
+    </DocsLayout>
+  );
+}

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

@@ -1,8 +1,10 @@
 import { Banner } from 'fumadocs-ui/components/banner';
-import './global.css';
+import '../global.css';
 import { RootProvider } from 'fumadocs-ui/provider';
+import type { Translations } from 'fumadocs-ui/i18n';
 import { Inter } from 'next/font/google';
 import type { ReactNode } from 'react';
+import { i18n } from '@/lib/i18n';
 
 export const metadata = {
   title: 'MultiPost Documentation',
@@ -13,9 +15,22 @@ const inter = Inter({
   subsets: ['latin'],
 });
 
-export default function Layout({ children }: { children: ReactNode }) {
+// translations
+const zh: Partial<Translations> = {
+  search: '搜索内容',
+};
+
+// available languages that will be displayed on UI
+const locales = i18n.languages.map(lang => ({
+  name: lang === 'zh' ? '中文' : 'English',
+  locale: lang,
+}));
+
+export default async function Layout({ children, params }: { children: ReactNode, params: Promise<{ lang: string }> }) {
+  const lang = (await params).lang;
+
   return (
-    <html lang="en" className={inter.className} suppressHydrationWarning>
+    <html lang={lang} className={inter.className} suppressHydrationWarning>
       <body className="flex flex-col min-h-screen">
       <Banner variant="rainbow" id="try-multiget">
         <p>
@@ -25,7 +40,13 @@ export default function Layout({ children }: { children: ReactNode }) {
           「MultiGet」
         </a>
         </Banner>
-        <RootProvider>{children}</RootProvider>
+        <RootProvider 
+          i18n={{
+            locale: lang,
+            locales,
+            translations: { zh }[lang],
+          }}
+        >{children}</RootProvider>
       </body>
     </html>
   );

app/[lang]/docs/layout.tsx

@@ -1,6 +1,15 @@
-import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
-import { ActivityIcon, ChromeIcon, HomeIcon, LayoutDashboardIcon, MailIcon, PuzzleIcon } from 'lucide-react';
-import Image from 'next/image';
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
+import {
+  ActivityIcon,
+  ChromeIcon,
+  HomeIcon,
+  LayoutDashboardIcon,
+  MailIcon,
+  PuzzleIcon,
+} from "lucide-react";
+import Image from "next/image";
+import { i18n } from "@/lib/i18n";
+import Link from "next/link";
 
 /**
  * Shared layout configurations
@@ -9,68 +18,70 @@ import Image from 'next/image';
  * Home Layout: app/(home)/layout.tsx
  * Docs Layout: app/docs/layout.tsx
  */
-export const baseOptions: BaseLayoutProps = {
-  githubUrl: 'https://github.com/leaperone/MultiPost-Extension',
+export const baseOptions = (locale: string): BaseLayoutProps => ({
+  i18n,
+  githubUrl: "https://github.com/leaperone/MultiPost-Extension",
   nav: {
     title: (
-      <>
-        <Image
-          width={24}
-          height={24}
-          src="/favicon.ico"
-          alt="Logo"
-          className="rounded-full"
-        />
-        MultiPost
-      </>
+      <Link href={`/${locale}/`}>
+        <div className="flex items-center gap-2">
+          <Image
+            width={24}
+            height={24}
+            src="/favicon.ico"
+            alt="Logo"
+            className="rounded-full"
+          />
+          MultiPost
+        </div>
+      </Link>
     ),
-    transparentMode: 'top',
+    transparentMode: "top",
   },
   links: [
-
     {
-      type: 'icon',
-      label: 'Home Link',
-      text: 'Home',
+      type: "icon",
+      label: "Home Link",
+      text: "Home",
       icon: <HomeIcon />,
-      url: 'https://multipost.app',
+      url: "https://multipost.app",
     },
     {
-      type: 'icon',
-      label: 'Dashboard Link',
-      text: 'Dashboard',
+      type: "icon",
+      label: "Dashboard Link",
+      text: "Dashboard",
       icon: <LayoutDashboardIcon />,
-      url: 'https://multipost.app/dashboard',
+      url: "https://multipost.app/dashboard",
     },
     {
-      type: 'icon',
-      label: 'Contact Us Link',
-      text: 'Contact Us',
+      type: "icon",
+      label: "Contact Us Link",
+      text: "Contact Us",
       icon: <MailIcon />,
-      url: '/docs/user-guide/contact-us',
+      url: `/${locale}/docs/user-guide/contact-us`,
     },
     {
-      type: 'icon',
-      label: 'MultiPost Status',
-      text: 'Status',
+      type: "icon",
+      label: "MultiPost Status",
+      text: "Status",
       icon: <ActivityIcon />,
-      url: 'https://monitor.leaper.one',
+      url: "https://monitor.leaper.one",
     },
     {
-      type: 'menu',
-      text: 'Extensions',
+      type: "menu",
+      text: "Extensions",
       items: [
         {
           icon: <ChromeIcon />,
-          text: 'Install MultiPost',
-          url: 'https://multipost.app/extension',
+          text: "Install MultiPost",
+          url: "https://multipost.app/extension",
         },
         {
           icon: <PuzzleIcon />,
-          text: 'Install MultiGet',
-          url: 'https://chromewebstore.google.com/detail/multiget/bhggbcoodmbomiaffjbpkafajbgcchgi',
+          text: "Install MultiGet",
+          url: "https://chromewebstore.google.com/detail/multiget/bhggbcoodmbomiaffjbpkafajbgcchgi",
         },
       ],
     },
   ],
-};
+});

app/layout.tsx app/[lang]/layout.tsxapp/layout.tsx renamed to app/[lang]/layout.tsx

@@ -0,0 +1,36 @@
+---
+title: Overview
+---
+
+<Callout title="API Documentation">
+  Please visit <a href="https://api-docs.multipost.app/" target="_blank">API Documentation</a> for the latest API interface information.
+</Callout>
+
+MultiPost provides rich API interfaces, allowing developers to remotely call our extension interfaces, enabling semi-automatic and fully automatic content publishing to multiple platforms.
+
+Currently, we provide the following API interfaces:
+
+## Extension API
+
+In your Web App, call MultiPost Extension interfaces to implement publishing, get account information, get platform information and other functions.
+
+## Restful API (Beta, Only for Version above 1.1.0)
+
+We provide Restful API in multipost.app, allowing developers to remotely call our extension interfaces to implement extension information retrieval, publishing task creation and other functions. Currently supports remote calling, scheduled publishing and other functions.
+
+## Scraper API
+
+We provide Scraper API in multipost.app, allowing developers to remotely call our extension interfaces to implement content scraping, searching and other functions.
+
+## Social Media API
+
+We provide Social Media API in multipost.app, allowing developers to remotely call our extension interfaces to implement social media content scraping, searching and other functions.
+
+## What is Next?
+
+<Cards>
+  <Card title="Learn more about Extension API" href="https://api-docs.multipost.app/" />
+  <Card title="Learn more about Restful API" href="https://api-docs.multipost.app/" />
+  <Card title="MultiPost" href="https://multipost.app" />
+  <Card title="User Guide" href="/docs/user-guide" />
+</Cards>