feat: add i18n to docs

website/components/home/hero.tsx

@@ -38,7 +38,7 @@ export function Hero() {
               !
             </p>
             <div className="mt-16 flex flex-wrap justify-center gap-y-4 gap-x-6">
-              <Link href="/docs" className="w-full sm:w-max">
+              <Link href="/docs/introduction" className="w-full sm:w-max">
                 <ShimmerButton
                   className="relative w-full sm:w-max flex items-center justify-center transition-all hover:shadow-[0_0_0_3px_rgba(255,255,255,0.3)_inset]"
                   background="radial-gradient(ellipse 80% 70% at 50% 120%, #b28ce2, #892fda)"

website/middleware.js

@@ -0,0 +1,12 @@
+import { locales } from 'nextra/locales';
+
+export const middleware = (request) => {
+  const { nextUrl } = request;
+
+  // The middleware must not handle dynamic routes.
+  // if (nextUrl.pathname.startsWith('/ai')) {
+  //   return;
+  // }
+
+  return locales(request);
+};

website/next.config.mjs

@@ -12,6 +12,19 @@ const withNextra = nextra({
  */
 const nextConfig = {
   transpilePackages: ['react-tweet'],
+  i18n: {
+    locales: ['en-US', 'zh-CN', 'es-ES', "fr-FR"],
+    defaultLocale: 'en-US',
+  },
+  async redirects() {
+    return [
+      {
+        source: '/docs.([a-zA-Z-]+)',
+        destination: '/docs/introduction',
+        statusCode: 302,
+      }
+    ];
+  },
 };
 
 // eslint-disable-next-line import/no-default-export  -- Next.js requires default export

website/pages/_meta.json → website/pages/_meta.en-US.json

@@ -70,4 +70,4 @@
       }
     }
   }
-}
+}

website/pages/_meta.es-ES.json

@@ -0,0 +1,73 @@
+{
+  "index": {
+    "type": "page",
+    "title": "Million.js",
+    "display": "hidden",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "docs": {
+    "type": "page",
+    "title": "Docs"
+  },
+  "blog": {
+    "type": "page",
+    "title": "Blog"
+  },
+  "showcase": {
+    "type": "page",
+    "title": "Showcase",
+    "theme": {
+      "typesetting": "article",
+      "layout": "full"
+    }
+  },
+  "foundation": {
+    "display": "hidden",
+    "type": "page",
+    "title": "Foundation",
+    "theme": {
+      "typesetting": "article"
+    }
+  },
+  "faq": {
+    "type": "page",
+    "title": "FAQ",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "ai": {
+    "type": "page",
+    "title": "AI",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "more": {
+    "title": "More",
+    "type": "menu",
+    "items": {
+      "foundation": {
+        "title": "Foundation",
+        "href": "/foundation"
+      },
+      "research": {
+        "title": "Research",
+        "href": "https://dl.acm.org/doi/10.1145/3555776.3577683",
+        "newWindow": true
+      },
+      "demo": {
+        "title": "Live demo",
+        "href": "https://demo.million.dev",
+        "newWindow": true
+      },
+      "hundred": {
+        "title": "Build your own",
+        "href": "/~https://github.com/aidenybai/hundred",
+        "newWindow": true
+      }
+    }
+  }
+}

website/pages/_meta.fr-FR.json

@@ -0,0 +1,73 @@
+{
+  "index": {
+    "type": "page",
+    "title": "Million.js",
+    "display": "hidden",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "docs": {
+    "type": "page",
+    "title": "Docs"
+  },
+  "blog": {
+    "type": "page",
+    "title": "Blog"
+  },
+  "showcase": {
+    "type": "page",
+    "title": "Showcase",
+    "theme": {
+      "typesetting": "article",
+      "layout": "full"
+    }
+  },
+  "foundation": {
+    "display": "hidden",
+    "type": "page",
+    "title": "Foundation",
+    "theme": {
+      "typesetting": "article"
+    }
+  },
+  "faq": {
+    "type": "page",
+    "title": "FAQ",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "ai": {
+    "type": "page",
+    "title": "AI",
+    "theme": {
+      "layout": "raw"
+    }
+  },
+  "more": {
+    "title": "More",
+    "type": "menu",
+    "items": {
+      "foundation": {
+        "title": "Foundation",
+        "href": "/foundation"
+      },
+      "research": {
+        "title": "Research",
+        "href": "https://dl.acm.org/doi/10.1145/3555776.3577683",
+        "newWindow": true
+      },
+      "demo": {
+        "title": "Live demo",
+        "href": "https://demo.million.dev",
+        "newWindow": true
+      },
+      "hundred": {
+        "title": "Build your own",
+        "href": "/~https://github.com/aidenybai/hundred",
+        "newWindow": true
+      }
+    }
+  }
+}

website/pages/_meta.zh-CN.json

@@ -0,0 +1,73 @@
+{
+    "index": {
+      "type": "page",
+      "title": "Million.js",
+      "display": "hidden",
+      "theme": {
+        "layout": "raw"
+      }
+    },
+    "docs": {
+      "type": "page",
+      "title": "Docs"
+    },
+    "blog": {
+      "type": "page",
+      "title": "Blog"
+    },
+    "showcase": {
+      "type": "page",
+      "title": "Showcase",
+      "theme": {
+        "typesetting": "article",
+        "layout": "full"
+      }
+    },
+    "foundation": {
+      "display": "hidden",
+      "type": "page",
+      "title": "Foundation",
+      "theme": {
+        "typesetting": "article"
+      }
+    },
+    "faq": {
+      "type": "page",
+      "title": "FAQ",
+      "theme": {
+        "layout": "raw"
+      }
+    },
+    "ai": {
+      "type": "page",
+      "title": "AI",
+      "theme": {
+        "layout": "raw"
+      }
+    },
+    "more": {
+      "title": "More",
+      "type": "menu",
+      "items": {
+        "foundation": {
+          "title": "Foundation",
+          "href": "/foundation"
+        },
+        "research": {
+          "title": "Research",
+          "href": "https://dl.acm.org/doi/10.1145/3555776.3577683",
+          "newWindow": true
+        },
+        "demo": {
+          "title": "Live demo",
+          "href": "https://demo.million.dev",
+          "newWindow": true
+        },
+        "hundred": {
+          "title": "Build your own",
+          "href": "/~https://github.com/aidenybai/hundred",
+          "newWindow": true
+        }
+      }
+    }
+  }

website/pages/ai.es-ES.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Million AI'
+description: 'Your personal performance expert'
+---
+
+import { Home } from '../components/ai';
+
+<Home />

website/pages/ai.fr-FR.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Million AI'
+description: 'Your personal performance expert'
+---
+
+import { Home } from '../components/ai';
+
+<Home />

website/pages/ai.zh-CN.mdx

@@ -0,0 +1,8 @@
+---
+title: 'Million AI'
+description: 'Your personal performance expert'
+---
+
+import { Home } from '../components/ai';
+
+<Home />

website/pages/blog.es-ES.mdx

@@ -0,0 +1,58 @@
+---
+title: Blog
+description: The latest updates and releases from the Million.js team.
+---
+
+import { getPagesUnderRoute } from 'nextra/context';
+import Link from 'next/link';
+
+export function BlogHeader() {
+  return (
+    <div className="max-w-screen-lg mx-auto pt-4 pb-8 mb-16 border-b border-gray-400 border-opacity-20 text-center">
+      <h1>
+        <span className="font-bold leading-tight lg:text-5xl">Blog</span>
+      </h1>
+      <p className="text-center text-gray-500 dark:text-gray-400 font-space-grotesk">
+        The latest updates and releases from the Million.js team.
+      </p>
+    </div>
+  );
+}
+
+export function BlogIndex() {
+  return getPagesUnderRoute('/blog')
+    .sort((a, b) => {
+      return (
+        new Date(b.frontMatter?.date || 0).getTime() -
+        new Date(a.frontMatter?.date || 0).getTime()
+      );
+    })
+    .map((page) => {
+      return (
+        <div key={page.route} className="mb-10">
+          <Link
+            href={page.route}
+            style={{ color: 'inherit', textDecoration: 'none' }}
+            className="block font-semibold mt-8 text-2xl"
+            tabIndex="0"
+          >
+            {page.meta?.title || page.frontMatter?.title || page.name}
+          </Link>
+          <p className="opacity-80" style={{ marginTop: '.5rem' }}>
+            {page.frontMatter?.description}{' '}
+            <span className="inline-block nx-text-primary-600 nx-underline nx-decoration-from-font [text-underline-position:from-font] font-bold">
+              <Link href={page.route} tabIndex="-1">
+                {'Read more →'}
+              </Link>
+            </span>
+          </p>
+          {page.frontMatter?.date ? (
+            <p className="opacity-50 text-sm mt-2">{page.frontMatter.date}</p>
+          ) : null}
+        </div>
+      );
+    });
+}
+
+<BlogHeader />
+<BlogIndex />