From c5f482160f40eb88d50b862c88957a24cd3d5d12 Mon Sep 17 00:00:00 2001 From: SonMooSans Date: Thu, 4 Jan 2024 21:14:44 +0800 Subject: [PATCH] Docs: Rewrite internationalized routing section --- .../docs/headless/contentlayer/config.mdx | 2 +- .../internationalization.mdx | 56 ++++++++----------- .../docs/headless/search/flexsearch.mdx | 2 +- .../content/docs/ui/internationalization.mdx | 32 ++++------- 4 files changed, 38 insertions(+), 54 deletions(-) rename apps/docs/content/docs/headless/{contentlayer => }/internationalization.mdx (60%) diff --git a/apps/docs/content/docs/headless/contentlayer/config.mdx b/apps/docs/content/docs/headless/contentlayer/config.mdx index 7c09794ec..6e1283d38 100644 --- a/apps/docs/content/docs/headless/contentlayer/config.mdx +++ b/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). diff --git a/apps/docs/content/docs/headless/contentlayer/internationalization.mdx b/apps/docs/content/docs/headless/internationalization.mdx similarity index 60% rename from apps/docs/content/docs/headless/contentlayer/internationalization.mdx rename to apps/docs/content/docs/headless/internationalization.mdx index abe1aaa89..7b8997aaf 100644 --- a/apps/docs/content/docs/headless/contentlayer/internationalization.mdx +++ b/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() { diff --git a/apps/docs/content/docs/headless/search/flexsearch.mdx b/apps/docs/content/docs/headless/search/flexsearch.mdx index 79d2c663f..0d8e03e75 100644 --- a/apps/docs/content/docs/headless/search/flexsearch.mdx +++ b/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 diff --git a/apps/docs/content/docs/ui/internationalization.mdx b/apps/docs/content/docs/ui/internationalization.mdx index c2660abbb..d42d9e7bf 100644 --- a/apps/docs/content/docs/ui/internationalization.mdx +++ b/apps/docs/content/docs/ui/internationalization.mdx @@ -4,7 +4,7 @@ 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 @@ -12,10 +12,9 @@ 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 `` -component to sidebar same as following: +To allow users changing their language, you can add a `` +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 ( { +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, })), ); }