Docs: Rewrite internationalized routing section

apps/docs/content/docs/headless/contentlayer/config.mdx

@@ -55,4 +55,4 @@ convenient to use and straightforward.
 ### Adding Icons
 
 You can configure the icon handler in
-the [`Source API`](/docs/headless/source-api#icons).
+the [`loader`](/docs/headless/source-api#icons).

apps/docs/content/docs/headless/contentlayer/internationalization.mdx → apps/docs/content/docs/headless/internationalization.mdx

@@ -3,7 +3,7 @@ title: Internationalization
 description: Support multiple languages in your documentation
 ---
 
-Next Docs has built-in support for internationalized routing in Contentlayer.
+Next Docs has built-in support for internationalized routing.
 You can define a list of supported languages and pass it to i18n utilities. Read
 the
 [Next.js Docs](https://nextjs.org/docs/app/building-your-application/routing/internationalization)
@@ -18,33 +18,30 @@ export const defaultLanguage = 'en';
 export const languages = ['en', 'cn'];
 ```
 
-2. Change your current configurations.
+2. Change your current source configurations.
 
 ```ts title="source.ts"
-import { languages } from './i18n';
-import { allDocs, allMeta } from 'contentlayer/generated';
-import { createContentlayer } from 'next-docs-zeta/contentlayer';
+import { languages } from '@/i18n';
+import { map } from '@/.map';
+import { loader } from 'next-docs-zeta/source';
 
-export const { getPage, tree } = createContentlayer(allMeta, allDocs, {
+export const { getPage, getPages, pageTree } = loader({
   languages,
+  ...
 });
 ```
 
-3. Create i18n middleware.
+3. Create the middleware that redirects users when missing locale.
 
 ```ts title="middleware.ts"
 import { defaultLanguage, languages } from '@/i18n';
 import { createI18nMiddleware } from 'next-docs-zeta/middleware';
 import { NextRequest } from 'next/server';
 
-export default function middleware(request: NextRequest) {
-  return createI18nMiddleware(
-    request,
-    languages,
-    defaultLanguage,
-    (locale, slug) => `/${locale}/docs/${slug}`, // the format of redirected url
-  );
-}
+export default createI18nMiddleware({
+  languages,
+  defaultLanguage,
+});
 
 export const config = {
   // Matcher ignoring `/_next/` and `/api/`
@@ -67,43 +64,38 @@ export default function Layout({ params }: { params: { lang: string } }) {
 
 ### Get Pages
 
-To get the pages with specific languages, use the utilities exported from
+To get the pages of a specific language, use the utilities exported from
 `source.ts`.
 
 ```ts
-import { getPage, getPages, tree } from '@/source';
+import { getPage, getPages, pageTree } from '@/source';
 
 // get page tree
-const t = tree[params.lang];
+pageTree[params.lang];
 
 // get page
-const page = getPage(params.slug, params.lang);
+getPage(params.slug, params.lang);
 
 // get pages
-const pages = getPages(params.lang);
+getPages(params.lang);
 ```
 
-### Docs Search
-
-You will need some extra configurations in order to implement international
-document searching.
+### Flexsearch
 
 The default `createSearchAPI` doesn't provide functionality for i18n. Instead,
-you can use `createI18nSearchAPI`.
+you should use `createI18nSearchAPI`.
 
 1. Update the route handler.
 
 ```ts title="api/search/route.ts"
 import { languages } from '@/i18n';
 import { getPages } from '@/source';
-import { createI18nSearchAPI } from 'next-docs-zeta/server';
+import { createI18nSearchAPI } from 'next-docs-zeta/search/server';
 
-export const { GET } = createI18nSearchAPI('simple', {
+export const { GET } = createI18nSearchAPI('advanced', {
   indexes: languages.map((lang) => {
     const pages = getPages(lang)!.map((page) => ({
-      title: page.title,
-      content: page.body.raw,
-      url: page.url,
+      ...
     }));
 
     return [lang, pages];
@@ -112,7 +104,7 @@ export const { GET } = createI18nSearchAPI('simple', {
 ```
 
 2. Add `locale` to search dialog, this will only allow pages with specified
-   locale to being searched by the user.
+   locale to be searched by the user.
 
 ```tsx
 function Dialog() {
@@ -124,7 +116,7 @@ function Dialog() {
 
 <Cards className="mt-4">
   <Card
-    title="Pages Structure"
+    title="Page Conventions"
     description="Learn to build Internationalized Page Structure"
     href="/docs/headless/page-conventions"
   />

apps/docs/content/docs/headless/search/flexsearch.mdx

@@ -54,7 +54,7 @@ Create a GET route handler, that supports `simple` and `advanced` search.
 
 Create a GET route handler with i18n functionality.
 
-[Learn how to implement i18n](/docs/headless/contentlayer/internationalization)
+[Learn how to implement i18n](/docs/headless/internationalization)
 
 ### useDocsSearch
 

apps/docs/content/docs/ui/internationalization.mdx

@@ -4,18 +4,17 @@ description: Learn more implement internationalization in Next Docs UI
 ---
 
 Next Docs UI supports I18n routing based on **Zeta**. Please refer to this
-[guide](/docs/headless/contentlayer/internationalization) to setup basic
+[guide](/docs/headless/internationalization) to setup basic
 configurations and learn how to structure the documents.
 
 Ensure you have your page tree, layout and middleware ready before getting
 started.
 
 ## Create Provider
 
-A `I18nProvider` is needed for internationalization.
+A `I18nProvider` is needed for internationalization features.
 
-Assume your files are nested under `/app/[lang]`, where the 'lang' parameter is
-at index 1.
+Put your pages and layouts under `/app/[lang]`, where the 'lang' parameter is at the second segment.
 
 ```tsx
 'use client';
@@ -72,11 +71,11 @@ We won't translate any content by default, you have to pass it to the Context.
 
 ## Add Language Switch
 
-To allow users changing their language, you can put the `<LanguageSelect />`
-component to sidebar same as following:
+To allow users changing their language, you can add a `<LanguageSelect />`
+component to the sidebar same as following:
 
 ```tsx title="[lang]/docs/layout.tsx"
-import { tree } from '@/source';
+import { pageTree } from '@/source';
 import { LanguageSelect } from 'next-docs-ui/i18n';
 import { DocsLayout } from 'next-docs-ui/layout';
 import { ReactNode } from 'react';
@@ -90,7 +89,7 @@ export default function Layout({
 }) {
   return (
     <DocsLayout
-      tree={tree[params.lang] ?? []}
+      tree={pageTree[params.lang] ?? []}
       navTitle="My App"
       sidebarFooter={
         <LanguageSelect
@@ -113,23 +112,16 @@ export default function Layout({
 }
 ```
 
-## Final Step
-
-Replace all references of original `tree` with `tree[lang]` and check if there's
-any legacy usage.
-
-### Static Generation
+## Static Generation
 
 Generate parameters for every language and page.
 
 ```tsx
-export async function generateStaticParams(): Promise<
-  { lang: string; slug: string[] }[]
-> {
+export async function generateStaticParams() {
   return languages.flatMap((lang) =>
-    getPages(lang).map((docs) => ({
-      slug: docs.slug.split('/'),
-      lang: lang,
+    getPages(lang)!.map((page) => ({
+      slug: page.slug,
+      lang,
     })),
   );
 }