feat: docs support multi lang

src/app/[locale]/(docs)/docs/layout.tsx

@@ -1,7 +1,10 @@
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { DocsSidebarNav } from "@/components/docs/sidebar-nav";
-import {unstable_setRequestLocale} from 'next-intl/server';
-
+import { NavMobile } from "@/components/layout/mobile-nav";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { getDocsConfig } from "@/config/docs";
+import { getMarketingConfig } from "@/config/marketing";
+import { useTranslations } from "next-intl";
+import { unstable_setRequestLocale } from 'next-intl/server';
 
 interface DocsLayoutProps {
   children: React.ReactNode;
@@ -10,15 +13,28 @@ interface DocsLayoutProps {
 
 export default function DocsLayout({ children, params: {locale}}: DocsLayoutProps) {
   unstable_setRequestLocale(locale);
+  const t = useTranslations();
+  const marketingConfig = getMarketingConfig(t);
+  const docsConfig = getDocsConfig(t);
+
+  const translations = {
+    adminPanel: t('Dashboard.sidebar.adminPanel'),
+    dashboard: t('Dashboard.sidebar.dashboard'),
+    login: t('Marketing.login'),
+    signUp: t('Marketing.signUp'),
+  };
 
   return (
-    <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-5 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
-      <aside className="fixed top-14 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
-        <ScrollArea className="h-full py-6 pr-6 lg:py-8">
-          <DocsSidebarNav />
-        </ScrollArea>
-      </aside>
-      {children}
-    </div>
+    <>
+      <NavMobile marketingConfig={marketingConfig} docsConfig={docsConfig} translations={translations} />
+      <div className="flex-1 items-start md:grid md:grid-cols-[220px_minmax(0,1fr)] md:gap-5 lg:grid-cols-[240px_minmax(0,1fr)] lg:gap-10">
+        <aside className="fixed top-14 -ml-2 hidden h-[calc(100vh-3.5rem)] w-full shrink-0 md:sticky md:block">
+          <ScrollArea className="h-full py-6 pr-6 lg:py-8">
+            <DocsSidebarNav />
+          </ScrollArea>
+        </aside>
+        {children}
+      </div>
+    </>
   );
 }

src/app/[locale]/(docs)/layout.tsx

@@ -2,6 +2,7 @@ import { NavMobile } from "@/components/layout/mobile-nav";
 import { NavBar } from "@/components/layout/navbar";
 import { SiteFooter } from "@/components/layout/site-footer";
 import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
+import { getDocsConfig } from "@/config/docs";
 import { getMarketingConfig } from "@/config/marketing";
 import { useTranslations } from "next-intl";
 import {unstable_setRequestLocale} from 'next-intl/server';
@@ -16,6 +17,7 @@ export default function DocsLayout({ children, params: {locale} }: DocsLayoutPro
 
   const t = useTranslations();
   const marketingConfig = getMarketingConfig(t);
+  const docsConfig = getDocsConfig(t);
 
   const translations = {
     adminPanel: t('Dashboard.sidebar.adminPanel'),
@@ -26,8 +28,8 @@ export default function DocsLayout({ children, params: {locale} }: DocsLayoutPro
 
   return (
     <div className="flex flex-col">
-      <NavMobile marketingConfig={marketingConfig} translations={translations} />
-      <NavBar marketingConfig={marketingConfig} translations={translations} />
+      <NavMobile marketingConfig={marketingConfig} docsConfig={docsConfig} translations={translations} />
+      <NavBar marketingConfig={marketingConfig} docsConfig={docsConfig} translations={translations} />
       <MaxWidthWrapper className="min-h-screen" large>
         {children}
       </MaxWidthWrapper>

src/app/[locale]/(marketing)/layout.tsx

@@ -5,6 +5,7 @@ import { NavBar } from "@/components/layout/navbar";
 import { SiteFooter } from "@/components/layout/site-footer";
 import { getMarketingConfig } from "@/config/marketing";
 import { useTranslations } from "next-intl";
+import { getDocsConfig } from "@/config/docs";
 
 interface MarketingLayoutProps {
   children: React.ReactNode;
@@ -19,6 +20,7 @@ export default function MarketingLayout({
 
   const t = useTranslations();
   const marketingConfig = getMarketingConfig(t);
+  const docsConfig = getDocsConfig(t);
 
   const translations = {
     adminPanel: t('Dashboard.sidebar.adminPanel'),
@@ -29,8 +31,8 @@ export default function MarketingLayout({
 
   return (
     <div className="flex min-h-screen flex-col">
-      <NavMobile marketingConfig={marketingConfig} translations={translations} />
-      <NavBar scroll={true} marketingConfig={marketingConfig} translations={translations} />
+      <NavMobile marketingConfig={marketingConfig} docsConfig={docsConfig} translations={translations} />
+      <NavBar scroll={true} marketingConfig={marketingConfig} docsConfig={docsConfig} translations={translations} />
       <main className="flex-1">{children}</main>
       <SiteFooter />
     </div>

src/components/docs/pager.tsx

@@ -1,17 +1,21 @@
 import Link from "@/components/link/link";
-import { Doc } from "contentlayer/generated"
+import { Doc } from "contentlayer/generated";
 
-import { docsConfig } from "@/config/docs"
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
-import { Icons } from "@/components/shared/icons"
+import { Icons } from "@/components/shared/icons";
+import { buttonVariants } from "@/components/ui/button";
+import { getDocsConfig } from "@/config/docs";
+import { cn } from "@/lib/utils";
+import { DocsConfig } from "@/types";
+import { useTranslations } from "next-intl";
 
 interface DocsPagerProps {
   doc: Doc
 }
 
 export function DocsPager({ doc }: DocsPagerProps) {
-  const pager = getPagerForDoc(doc)
+  const t = useTranslations();
+  const docsConfig = getDocsConfig(t);
+  const pager = getPagerForDoc(doc, docsConfig)
 
   if (!pager) {
     return null
@@ -40,8 +44,7 @@ export function DocsPager({ doc }: DocsPagerProps) {
     </div>
   )
 }
-
-export function getPagerForDoc(doc: Doc) {
+export function getPagerForDoc(doc: Doc, docsConfig: DocsConfig) {
   const flattenedLinks = [null, ...flatten(docsConfig.sidebarNav), null]
   const activeIndex = flattenedLinks.findIndex(
     (link) => doc.slug === link?.href

src/components/layout/mobile-nav.tsx

@@ -1,21 +1,22 @@
 "use client";
 
-import { useEffect, useState } from "react";
 import Link from "@/components/link/link";
-import { useSelectedLayoutSegment } from "next/navigation";
 import { Menu, X } from "lucide-react";
 import { useSession } from "next-auth/react";
+import { useSelectedLayoutSegment } from "next/navigation";
+import { useEffect, useState } from "react";
 
-import { docsConfig } from "@/config/docs";
-import { siteConfig } from "@/config/site";
-import { cn } from "@/lib/utils";
 import { DocsSidebarNav } from "@/components/docs/sidebar-nav";
 import { Icons } from "@/components/shared/icons";
+import { siteConfig } from "@/config/site";
+import { cn } from "@/lib/utils";
 
+import { DocsConfig, MarketingConfig } from "@/types";
 import { ModeToggle } from "./mode-toggle";
 
 interface NavMobileProps {
-  marketingConfig: any;
+  marketingConfig: MarketingConfig;
+  docsConfig: DocsConfig;
   translations: {
     adminPanel: string;
     dashboard: string;
@@ -24,7 +25,7 @@ interface NavMobileProps {
   };
 }
 
-export function NavMobile({ marketingConfig, translations }: NavMobileProps) {
+export function NavMobile({ marketingConfig, translations, docsConfig }: NavMobileProps) {
   const { data: session } = useSession();
   const [open, setOpen] = useState(false);
   const selectedLayout = useSelectedLayoutSegment();

src/components/layout/navbar.tsx

@@ -2,7 +2,7 @@
 
 import { useContext } from "react";
 import { useSelectedLayoutSegment } from "next/navigation";
-import { MarketingConfig } from "@/types";
+import { DocsConfig, MarketingConfig } from "@/types";
 import { useSession } from "next-auth/react";
 import { useLocale } from "next-intl";
 
@@ -21,6 +21,7 @@ import MaxWidthWrapper from "@/components/shared/max-width-wrapper";
 interface NavBarProps {
   scroll?: boolean;
   marketingConfig: MarketingConfig;
+  docsConfig: DocsConfig;
   translations: {
     adminPanel: string;
     dashboard: string;
@@ -32,6 +33,7 @@ interface NavBarProps {
 export function NavBar({
   scroll = false,
   marketingConfig,
+  docsConfig,
   translations,
 }: NavBarProps) {
   const locale = useLocale();
@@ -144,4 +146,4 @@ export function NavBar({
       </MaxWidthWrapper>
     </header>
   );
-}
+}