From 4dcdd11e9ece54aac69f20c21140eff7fffaebcc Mon Sep 17 00:00:00 2001
From: Sanskar Jethi <sansyrox@gmail.com>
Date: Sat, 11 Jan 2025 17:30:10 +0000
Subject: [PATCH] add more docs

---
 docs_src/next.config.mjs                      |  11 +-
 .../documentation/LanguageSelector.jsx        |  44 +++++---
 .../components/documentation/Navigation.jsx   | 102 +++++++++++-------
 3 files changed, 101 insertions(+), 56 deletions(-)

diff --git a/docs_src/next.config.mjs b/docs_src/next.config.mjs
index fea282ed..5b59a0fd 100644
--- a/docs_src/next.config.mjs
+++ b/docs_src/next.config.mjs
@@ -22,7 +22,16 @@ const nextConfig = {
   i18n: {
     locales: ['en', 'zh'],
     defaultLocale: 'en',
-    localeDetection: true,
+    localeDetection: false,
+  },
+  async redirects() {
+    return [
+      {
+        source: '/documentation',
+        destination: '/documentation/en',
+        permanent: false,
+      },
+    ]
   },
 }
 
diff --git a/docs_src/src/components/documentation/LanguageSelector.jsx b/docs_src/src/components/documentation/LanguageSelector.jsx
index 2f7002ed..2ac35038 100644
--- a/docs_src/src/components/documentation/LanguageSelector.jsx
+++ b/docs_src/src/components/documentation/LanguageSelector.jsx
@@ -13,28 +13,42 @@ function LanguageSelector() {
   const currentLanguage = router.locale || 'en'
 
   const changeLanguage = (locale) => {
-    router.push({ pathname, query }, asPath, { locale })
+    const currentPath = asPath.split('?')[0]
+    
+    if (currentPath === '/documentation' || currentPath === '/documentation/') {
+      router.push(`/documentation/${locale}`)
+      return
+    }
+
+    const newPath = currentPath.replace(
+      /\/documentation\/(en|zh)/,
+      `/documentation/${locale}`
+    )
+    
+    router.push(newPath)
   }
 
+  const currentLang = languages.find(l => l.code === currentLanguage)
+
   return (
     <Menu as="div" className="relative">
-      <Menu.Button className="flex items-center gap-2 rounded-lg px-3 py-2 text-sm text-white hover:bg-white/10">
-        {languages.find(l => l.code === currentLanguage)?.name}
+      <Menu.Button className="flex items-center gap-2 rounded-lg bg-zinc-800/40 px-3 py-2 text-sm text-white hover:bg-zinc-800 transition-colors duration-200">
+        {currentLang?.name}
         <svg
-          width="6"
-          height="3"
-          className="ml-2 stroke-current"
+          width="8"
+          height="5"
+          className="ml-1 stroke-current"
           fill="none"
-          viewBox="0 0 6 3"
+          viewBox="0 0 8 5"
         >
-          <path d="M0 0L3 3L6 0" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+          <path d="M1 1L4 4L7 1" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
         </svg>
       </Menu.Button>
       <Menu.Items as={motion.div}
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        exit={{ opacity: 0, y: -10 }}
-        className="absolute left-0 mt-2 w-40 origin-top-left rounded-lg bg-white/10 p-1 backdrop-blur-lg"
+        initial={{ y: -10 }}
+        animate={{ y: 0 }}
+        exit={{ y: -10 }}
+        className="absolute left-0 mt-1 w-40 origin-top-left rounded-lg bg-[#27272A] ring-1 ring-zinc-700 shadow-xl z-50"
       >
         {languages.map((language) => (
           <Menu.Item key={language.code}>
@@ -42,10 +56,10 @@ function LanguageSelector() {
               <button
                 onClick={() => changeLanguage(language.code)}
                 className={`${
-                  active ? 'bg-white/10' : ''
+                  active ? 'bg-zinc-700/50' : ''
                 } ${
-                  currentLanguage === language.code ? 'text-orange-500' : 'text-white'
-                } group flex w-full items-center rounded-md px-2 py-2 text-sm`}
+                  currentLanguage === language.code ? 'bg-orange-500/10 text-orange-500' : 'text-zinc-100'
+                } group flex w-full items-center gap-2 rounded-md px-3 py-2.5 text-sm transition-colors duration-200`}
               >
                 {language.name}
               </button>
diff --git a/docs_src/src/components/documentation/Navigation.jsx b/docs_src/src/components/documentation/Navigation.jsx
index 8d0d82ad..02651de0 100644
--- a/docs_src/src/components/documentation/Navigation.jsx
+++ b/docs_src/src/components/documentation/Navigation.jsx
@@ -188,37 +188,37 @@ export const navigation = [
   {
     title: 'Example Application',
     links: [
-      { title: 'Getting Started', href: '/documentation/example_app' },
+      { title: 'Getting Started', href: '/documentation/en/example_app' },
       {
         title: 'Modeling Routes',
-        href: '/documentation/example_app/modeling_routes',
+        href: '/documentation/en/example_app/modeling_routes',
       },
 
       {
         title: 'Authentication and Authorization',
-        href: '/documentation/example_app/authentication',
+        href: '/documentation/en/example_app/authentication',
       },
       {
         title: 'Middlewares',
-        href: '/documentation/example_app/authentication-middlewares',
+        href: '/documentation/en/example_app/authentication-middlewares',
       },
       {
         title: 'Real Time Notifications',
-        href: '/documentation/example_app/real_time_notifications',
+        href: '/documentation/en/example_app/real_time_notifications',
       },
       {
         title: 'Monitoring and Logging',
-        href: '/documentation/example_app/monitoring_and_logging',
+        href: '/documentation/en/example_app/monitoring_and_logging',
       },
-      { title: 'Deployment', href: '/documentation/example_app/deployment' },
+      { title: 'Deployment', href: '/documentation/en/example_app/deployment' },
       {
         title: 'OpenAPI Documentation',
-        href: '/documentation/example_app/openapi',
+        href: '/documentation/en/example_app/openapi',
       },
-      { title: 'Templates', href: '/documentation/example_app/templates' },
+      { title: 'Templates', href: '/documentation/en/example_app/templates' },
       {
         title: 'SubRouters',
-        href: '/documentation/example_app/subrouters',
+        href: '/documentation/en/example_app/subrouters',
       },
     ],
   },
@@ -226,87 +226,87 @@ export const navigation = [
     title: 'API Reference',
     links: [
       {
-        href: '/documentation/api_reference/',
+        href: '/documentation/en/api_reference/',
         title: 'Installation',
       },
       {
-        href: '/documentation/api_reference/getting_started',
+        href: '/documentation/en/api_reference/getting_started',
         title: 'Getting Started',
       },
       {
-        href: '/documentation/api_reference/request_object',
+        href: '/documentation/en/api_reference/request_object',
         title: 'The Request Object',
       },
       {
-        href: '/documentation/api_reference/robyn_env',
+        href: '/documentation/en/api_reference/robyn_env',
         title: 'The Robyn Env file',
       },
       {
-        href: '/documentation/api_reference/middlewares',
+        href: '/documentation/en/api_reference/middlewares',
         title: 'Middlewares, Events and Websockets',
       },
       {
-        href: '/documentation/api_reference/authentication',
+        href: '/documentation/en/api_reference/authentication',
         title: 'Authentication',
       },
       {
-        href: '/documentation/api_reference/const_requests',
+        href: '/documentation/en/api_reference/const_requests',
         title: 'Const Requests and Multi Core Scaling',
       },
       {
-        href: '/documentation/api_reference/cors',
+        href: '/documentation/en/api_reference/cors',
         title: 'CORS',
       },
       {
-        href: '/documentation/api_reference/templating',
+        href: '/documentation/en/api_reference/templating',
         title: 'Templating',
       },
       {
         title: 'Redirection',
-        href: '/documentation/api_reference/redirection',
+        href: '/documentation/en/api_reference/redirection',
       },
       {
-        href: '/documentation/api_reference/file-uploads',
+        href: '/documentation/en/api_reference/file-uploads',
         title: 'File Uploads',
       },
       {
-        href: '/documentation/api_reference/form_data',
+        href: '/documentation/en/api_reference/form_data',
         title: 'Form Data',
       },
       {
-        href: '/documentation/api_reference/websockets',
+        href: '/documentation/en/api_reference/websockets',
         title: 'Websockets',
       },
       {
-        href: '/documentation/api_reference/exceptions',
+        href: '/documentation/en/api_reference/exceptions',
         title: 'Exceptions',
       },
       {
-        href: '/documentation/api_reference/scaling',
+        href: '/documentation/en/api_reference/scaling',
         title: 'Scaling the Application',
       },
       {
-        href: '/documentation/api_reference/advanced_features',
+        href: '/documentation/en/api_reference/advanced_features',
         title: 'Advanced Features',
       },
       {
-        href: '/documentation/api_reference/multiprocess_execution',
+        href: '/documentation/en/api_reference/multiprocess_execution',
         title: 'Multiprocess Execution',
       },
       {
-        href: '/documentation/api_reference/using_rust_directly',
+        href: '/documentation/en/api_reference/using_rust_directly',
         title: 'Direct Rust Usage',
       },
       {
-        href: '/documentation/api_reference/graphql-support',
+        href: '/documentation/en/api_reference/graphql-support',
         title: 'GraphQL Support',
       },
       {
-        href: '/documentation/api_reference/openapi',
+        href: '/documentation/en/api_reference/openapi',
         title: 'OpenAPI Documentation',
       },
       {
-        href: '/documentation/api_reference/dependency_injection',
+        href: '/documentation/en/api_reference/dependency_injection',
         title: 'Dependency Injection',
       }
     ],
@@ -315,11 +315,11 @@ export const navigation = [
     title: 'Community Resources',
     links: [
       {
-        href: '/documentation/community-resources#talks',
+        href: '/documentation/en/community-resources#talks',
         title: 'Talks',
       },
       {
-        href: '/documentation/community-resources#blogs',
+        href: '/documentation/en/community-resources#blogs',
         title: 'Blogs',
       },
     ],
@@ -328,7 +328,7 @@ export const navigation = [
     title: 'Architecture',
     links: [
       {
-        href: '/documentation/architecture',
+        href: '/documentation/en/architecture',
         title: 'Architecture',
       },
     ],
@@ -337,7 +337,7 @@ export const navigation = [
     title: 'Framework Comparison',
     links: [
       {
-        href: '/documentation/framework_performance_comparison',
+        href: '/documentation/en/framework_performance_comparison',
         title: 'Performance Comparison',
       },
     ],
@@ -346,11 +346,11 @@ export const navigation = [
     title: 'Hosting',
     links: [
       {
-        href: '/documentation/hosting#railway',
+        href: '/documentation/en/hosting#railway',
         title: 'Railway',
       },
       {
-        href: '/documentation/hosting#exposing-ports',
+        href: '/documentation/en/hosting#exposing-ports',
         title: 'Exposing Ports',
       },
     ],
@@ -359,7 +359,7 @@ export const navigation = [
     title: 'Plugins',
     links: [
       {
-        href: '/documentation/plugins',
+        href: '/documentation/en/plugins',
         title: 'Plugins',
       },
     ],
@@ -368,7 +368,7 @@ export const navigation = [
     title: 'Future Roadmap',
     links: [
       {
-        href: '/documentation/api_reference/future-roadmap',
+        href: '/documentation/en/api_reference/future-roadmap',
         title: 'Upcoming Features',
       },
     ],
@@ -376,6 +376,28 @@ export const navigation = [
 ]
 
 export function Navigation(props) {
+  const router = useRouter()
+  const currentLanguage = router.locale || 'en'
+
+  // Function to transform links based on current language
+  const getLocalizedHref = (href) => {
+    // If it's the root documentation page
+    if (href === '/documentation') {
+      return `/documentation/${currentLanguage}`
+    }
+    // For all other links, replace /en/ with current language
+    return href.replace('/documentation/en/', `/documentation/${currentLanguage}/`)
+  }
+
+  // Create localized navigation
+  const localizedNavigation = navigation.map(group => ({
+    ...group,
+    links: group.links.map(link => ({
+      ...link,
+      href: getLocalizedHref(link.href)
+    }))
+  }))
+
   return (
     <nav {...props}>
       <div className="flex items-center justify-between px-4 py-2">
@@ -385,7 +407,7 @@ export function Navigation(props) {
         <TopLevelNavItem href="/">API</TopLevelNavItem>
         <TopLevelNavItem href="#">Documentation</TopLevelNavItem>
         <TopLevelNavItem href="#">Support</TopLevelNavItem>
-        {navigation.map((group, groupIndex) => (
+        {localizedNavigation.map((group, groupIndex) => (
           <NavigationGroup
             key={group.title}
             group={group}