Update gitbook

gitbook/components/DocsHeader.js

@@ -2,7 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
-import { DOCS_CONFIG } from "@/constants/docsConfig";
+import { DOCS_CONFIG, t } from "@/constants/docsConfig";
 import { DEFAULT_LANG } from "@/constants/languages";
 import { ExternalLink, Menu, X } from "lucide-react";
 import DocsSidebar from "./DocsSidebar";
@@ -41,7 +41,7 @@ export default function DocsHeader({ lang = DEFAULT_LANG }) {
               rel="noopener noreferrer"
               className="flex items-center gap-2 px-3 sm:px-4 py-2 bg-[#E68A6E] text-white rounded-lg font-medium hover:bg-[#d67a5e] transition-colors text-sm"
             >
-              <span className="hidden sm:inline">Go to App</span>
+              <span className="hidden sm:inline">{t(lang, "goToApp")}</span>
               <ExternalLink className="w-4 h-4" />
             </Link>
           </div>

gitbook/components/DocsLayout.js

@@ -17,7 +17,7 @@ export default function DocsLayout({ children, headings = [], lang = DEFAULT_LAN
         
         <div className="flex-1 flex">
           {children}
-          <DocsToc headings={headings} />
+          <DocsToc headings={headings} lang={lang} />
         </div>
       </div>
     </div>

gitbook/components/DocsSidebar.js

@@ -1,49 +1,58 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { DOCS_CONFIG } from "@/constants/docsConfig";
+import { getNavigation } from "@/constants/docsConfig";
 import { DEFAULT_LANG } from "@/constants/languages";
-import { ChevronDown, ChevronRight, BookOpen, Rocket, Terminal, Monitor, FolderOpen, HelpCircle, MessageCircle, Layers, Plug, Cloud, Zap, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server, Globe } from "lucide-react";
+import { ChevronDown, ChevronRight, BookOpen, Rocket, Terminal, Monitor, HelpCircle, MessageCircle, Layers, Plug, Cloud, Zap, Wallet, Gift, GitBranch, BarChart3, Code2, Sparkles, Server } from "lucide-react";
 
+// Icons keyed by structural key (language-independent)
 const SECTION_ICONS = {
-  "Getting Started": Rocket,
+  gettingStarted: Rocket,
-  "Providers": Layers,
+  providers: Layers,
-  "Features": Zap,
+  features: Zap,
-  "Integration": Plug,
+  integration: Plug,
-  "Deployment": Cloud,
+  deployment: Cloud,
-  "Help": HelpCircle
+  help: HelpCircle
 };
 
 const ITEM_ICONS = {
-  "Introduction": BookOpen,
+  introduction: BookOpen,
-  "Quick Start": Rocket,
+  quickStart: Rocket,
-  "Installation": Terminal,
+  installation: Terminal,
-  "Subscription (Maximize)": Sparkles,
+  subscription: Sparkles,
-  "Cheap (Backup)": Wallet,
+  cheap: Wallet,
-  "Free (Fallback)": Gift,
+  free: Gift,
-  "Smart Routing": GitBranch,
+  smartRouting: GitBranch,
-  "Combos & Fallback": Layers,
+  combos: Layers,
-  "Quota Tracking": BarChart3,
+  quotaTracking: BarChart3,
-  "Claude Code": Code2,
+  claudeCode: Code2,
-  "OpenAI Codex": Code2,
+  codex: Code2,
-  "Cursor": Code2,
+  cursor: Code2,
-  "Cline": Code2,
+  cline: Code2,
-  "Roo": Code2,
+  roo: Code2,
-  "Continue": Code2,
+  continue: Code2,
-  "Other Tools": Plug,
+  otherTools: Plug,
-  "Localhost": Monitor,
+  localhost: Monitor,
-  "Cloud (VPS/Docker)": Server,
+  cloud: Server,
-  "Troubleshooting": HelpCircle,
+  troubleshooting: HelpCircle,
-  "FAQ": MessageCircle
+  faq: MessageCircle
 };
 
 export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_LANG }) {
   const pathname = usePathname();
-  const [openSections, setOpenSections] = useState(
+  const navigation = getNavigation(lang);
-    DOCS_CONFIG.navigation.map((_, i) => i)
+  const [openSections, setOpenSections] = useState(() => {
-  );
+    if (typeof window === "undefined") return [];
+    try {
+      return JSON.parse(sessionStorage.getItem("sidebarOpen") || "[]");
+    } catch { return []; }
+  });
+
+  useEffect(() => {
+    sessionStorage.setItem("sidebarOpen", JSON.stringify(openSections));
+  }, [openSections]);
 
   const toggleSection = (index) => {
     setOpenSections(prev =>
@@ -53,26 +62,21 @@ export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_
     );
   };
 
-  // Build URL for a navigation slug under current language
   const buildHref = (slug) => (slug ? `/${lang}/${slug}` : `/${lang}`);
-
   const isActive = (slug) => pathname === buildHref(slug);
 
   const handleLinkClick = () => {
-    if (isMobile && onClose) {
+    if (isMobile && onClose) onClose();
-      onClose();
-    }
   };
 
   return (
     <aside className={`${isMobile ? 'w-full' : 'w-64'} border-r bg-white border-gray-200 ${isMobile ? 'h-full' : 'h-[calc(100vh-4rem)] sticky top-16'} overflow-y-auto`}>
       <nav className="p-4 space-y-6">
-        {DOCS_CONFIG.navigation.map((section, sectionIndex) => {
+        {navigation.map((section, sectionIndex) => {
-          const SectionIcon = SECTION_ICONS[section.title] || BookOpen;
+          const SectionIcon = SECTION_ICONS[section.key] || BookOpen;
 
           return (
-            <div key={sectionIndex}>
+            <div key={section.key}>
-              {/* Section title */}
               <button
                 onClick={() => toggleSection(sectionIndex)}
                 className="flex items-center justify-between w-full text-sm font-semibold text-gray-900 mb-2 hover:text-[#E68A6E] transition-colors"
@@ -88,14 +92,13 @@ export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_
                 )}
               </button>
 
-              {/* Section items */}
               {openSections.includes(sectionIndex) && (
                 <ul className="space-y-1">
-                  {section.items.map((item, itemIndex) => {
+                  {section.items.map((item) => {
-                    const ItemIcon = ITEM_ICONS[item.title] || BookOpen;
+                    const ItemIcon = ITEM_ICONS[item.key] || BookOpen;
 
                     return (
-                      <li key={itemIndex}>
+                      <li key={item.key}>
                         <Link
                           href={buildHref(item.slug)}
                           onClick={handleLinkClick}

gitbook/components/DocsToc.js

@@ -2,8 +2,10 @@
 
 import { useEffect, useState } from "react";
 import { List } from "lucide-react";
+import { t } from "@/constants/docsConfig";
+import { DEFAULT_LANG } from "@/constants/languages";
 
-export default function DocsToc({ headings }) {
+export default function DocsToc({ headings, lang = DEFAULT_LANG }) {
   const [activeId, setActiveId] = useState("");
 
   useEffect(() => {
@@ -33,7 +35,7 @@ export default function DocsToc({ headings }) {
       <nav className="p-4">
         <h3 className="flex items-center gap-2 text-sm font-semibold text-gray-900 mb-3">
           <List className="w-4 h-4" />
-          On this page
+          {t(lang, "onThisPage")}
         </h3>
         <ul className="space-y-2">
           {headings.map((heading, idx) => (

gitbook/components/LanguageSwitcher.js

@@ -5,6 +5,7 @@ import { createPortal } from "react-dom";
 import { useRouter, usePathname } from "next/navigation";
 import { Globe, X } from "lucide-react";
 import { LANGUAGES, getLanguage, DEFAULT_LANG } from "@/constants/languages";
+import { t } from "@/constants/docsConfig";
 
 function extractLangFromPath(pathname) {
   const match = pathname.match(/^\/([^/]+)(?:\/(.*))?$/);
@@ -45,7 +46,7 @@ export default function LanguageSwitcher({ currentLang }) {
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex items-center justify-between p-4 border-b border-gray-200">
-          <h2 className="font-bold text-lg text-gray-900">Select Language</h2>
+          <h2 className="font-bold text-lg text-gray-900">{t(currentLang, "selectLanguage")}</h2>
           <button
             onClick={() => setOpen(false)}
             className="p-1.5 rounded-lg hover:bg-gray-100 transition-colors"

gitbook/constants/docsConfig.js

@@ -1,60 +1,242 @@
+import { DEFAULT_LANG } from "./languages";
+
+// Navigation structure (slugs are shared). Labels are per-language.
+const NAV_STRUCTURE = [
+  {
+    key: "gettingStarted",
+    items: [
+      { key: "introduction", slug: "" },
+      { key: "quickStart", slug: "getting-started/quick-start" },
+      { key: "installation", slug: "getting-started/installation" }
+    ]
+  },
+  {
+    key: "providers",
+    items: [
+      { key: "subscription", slug: "providers/subscription" },
+      { key: "cheap", slug: "providers/cheap" },
+      { key: "free", slug: "providers/free" }
+    ]
+  },
+  {
+    key: "features",
+    items: [
+      { key: "smartRouting", slug: "features/smart-routing" },
+      { key: "combos", slug: "features/combos" },
+      { key: "quotaTracking", slug: "features/quota-tracking" }
+    ]
+  },
+  {
+    key: "integration",
+    items: [
+      { key: "claudeCode", slug: "integration/claude-code" },
+      { key: "codex", slug: "integration/codex" },
+      { key: "cursor", slug: "integration/cursor" },
+      { key: "cline", slug: "integration/cline" },
+      { key: "roo", slug: "integration/roo" },
+      { key: "continue", slug: "integration/continue" },
+      { key: "otherTools", slug: "integration/other-tools" }
+    ]
+  },
+  {
+    key: "deployment",
+    items: [
+      { key: "localhost", slug: "deployment/localhost" },
+      { key: "cloud", slug: "deployment/cloud" }
+    ]
+  },
+  {
+    key: "help",
+    items: [
+      { key: "troubleshooting", slug: "troubleshooting" },
+      { key: "faq", slug: "faq" }
+    ]
+  }
+];
+
+// Translations for section/item titles (5 langs).
+const TRANSLATIONS = {
+  en: {
+    gettingStarted: "Getting Started",
+    introduction: "Introduction",
+    quickStart: "Quick Start",
+    installation: "Installation",
+    providers: "Providers",
+    subscription: "Subscription (Maximize)",
+    cheap: "Cheap (Backup)",
+    free: "Free (Fallback)",
+    features: "Features",
+    smartRouting: "Smart Routing",
+    combos: "Combos & Fallback",
+    quotaTracking: "Quota Tracking",
+    integration: "Integration",
+    claudeCode: "Claude Code",
+    codex: "OpenAI Codex",
+    cursor: "Cursor",
+    cline: "Cline",
+    roo: "Roo",
+    continue: "Continue",
+    otherTools: "Other Tools",
+    deployment: "Deployment",
+    localhost: "Localhost",
+    cloud: "Cloud (VPS/Docker)",
+    help: "Help",
+    troubleshooting: "Troubleshooting",
+    faq: "FAQ",
+    goToApp: "Go to App",
+    selectLanguage: "Select Language",
+    onThisPage: "On this page"
+  },
+  vi: {
+    gettingStarted: "Bắt đầu",
+    introduction: "Giới thiệu",
+    quickStart: "Bắt đầu nhanh",
+    installation: "Cài đặt",
+    providers: "Nhà cung cấp",
+    subscription: "Subscription (Tối đa hóa)",
+    cheap: "Giá rẻ (Dự phòng)",
+    free: "Miễn phí (Phương án cuối)",
+    features: "Tính năng",
+    smartRouting: "Định tuyến thông minh",
+    combos: "Combo & Fallback",
+    quotaTracking: "Theo dõi Quota",
+    integration: "Tích hợp",
+    claudeCode: "Claude Code",
+    codex: "OpenAI Codex",
+    cursor: "Cursor",
+    cline: "Cline",
+    roo: "Roo",
+    continue: "Continue",
+    otherTools: "Công cụ khác",
+    deployment: "Triển khai",
+    localhost: "Localhost",
+    cloud: "Cloud (VPS/Docker)",
+    help: "Trợ giúp",
+    troubleshooting: "Khắc phục sự cố",
+    faq: "Câu hỏi thường gặp",
+    goToApp: "Vào ứng dụng",
+    selectLanguage: "Chọn ngôn ngữ",
+    onThisPage: "Trên trang này"
+  },
+  "zh-CN": {
+    gettingStarted: "开始使用",
+    introduction: "简介",
+    quickStart: "快速开始",
+    installation: "安装",
+    providers: "提供商",
+    subscription: "订阅 (最大化)",
+    cheap: "低价 (备用)",
+    free: "免费 (兜底)",
+    features: "功能",
+    smartRouting: "智能路由",
+    combos: "组合与回退",
+    quotaTracking: "配额跟踪",
+    integration: "集成",
+    claudeCode: "Claude Code",
+    codex: "OpenAI Codex",
+    cursor: "Cursor",
+    cline: "Cline",
+    roo: "Roo",
+    continue: "Continue",
+    otherTools: "其他工具",
+    deployment: "部署",
+    localhost: "本地",
+    cloud: "云端 (VPS/Docker)",
+    help: "帮助",
+    troubleshooting: "故障排查",
+    faq: "常见问题",
+    goToApp: "前往应用",
+    selectLanguage: "选择语言",
+    onThisPage: "本页内容"
+  },
+  es: {
+    gettingStarted: "Comenzar",
+    introduction: "Introducción",
+    quickStart: "Inicio rápido",
+    installation: "Instalación",
+    providers: "Proveedores",
+    subscription: "Suscripción (Maximizar)",
+    cheap: "Económico (Respaldo)",
+    free: "Gratis (Alternativa)",
+    features: "Funciones",
+    smartRouting: "Enrutamiento inteligente",
+    combos: "Combos y Fallback",
+    quotaTracking: "Seguimiento de cuota",
+    integration: "Integración",
+    claudeCode: "Claude Code",
+    codex: "OpenAI Codex",
+    cursor: "Cursor",
+    cline: "Cline",
+    roo: "Roo",
+    continue: "Continue",
+    otherTools: "Otras herramientas",
+    deployment: "Despliegue",
+    localhost: "Localhost",
+    cloud: "Nube (VPS/Docker)",
+    help: "Ayuda",
+    troubleshooting: "Solución de problemas",
+    faq: "Preguntas frecuentes",
+    goToApp: "Ir a la app",
+    selectLanguage: "Seleccionar idioma",
+    onThisPage: "En esta página"
+  },
+  ja: {
+    gettingStarted: "はじめに",
+    introduction: "概要",
+    quickStart: "クイックスタート",
+    installation: "インストール",
+    providers: "プロバイダー",
+    subscription: "サブスクリプション (最大化)",
+    cheap: "格安 (バックアップ)",
+    free: "無料 (フォールバック)",
+    features: "機能",
+    smartRouting: "スマートルーティング",
+    combos: "コンボとフォールバック",
+    quotaTracking: "クォータ追跡",
+    integration: "連携",
+    claudeCode: "Claude Code",
+    codex: "OpenAI Codex",
+    cursor: "Cursor",
+    cline: "Cline",
+    roo: "Roo",
+    continue: "Continue",
+    otherTools: "その他のツール",
+    deployment: "デプロイ",
+    localhost: "ローカル",
+    cloud: "クラウド (VPS/Docker)",
+    help: "ヘルプ",
+    troubleshooting: "トラブルシューティング",
+    faq: "よくある質問",
+    goToApp: "アプリへ",
+    selectLanguage: "言語を選択",
+    onThisPage: "このページ"
+  }
+};
+
+// Translate one key for given language with fallback to default.
+export function t(lang, key) {
+  return TRANSLATIONS[lang]?.[key] || TRANSLATIONS[DEFAULT_LANG][key] || key;
+}
+
+// Build localized navigation for sidebar.
+export function getNavigation(lang) {
+  return NAV_STRUCTURE.map(section => ({
+    key: section.key,
+    title: t(lang, section.key),
+    items: section.items.map(item => ({
+      key: item.key,
+      slug: item.slug,
+      title: t(lang, item.key)
+    }))
+  }));
+}
+
+// Static config (logo, urls, default English nav for backward compatibility).
 export const DOCS_CONFIG = {
   title: "9Router Documentation",
   description: "Smart AI model router - Maximize subscriptions, minimize costs",
   logo: "9Router",
   appUrl: "https://9router.com",
   githubUrl: "https://github.com/decolua/9router",
-  
+  navigation: getNavigation(DEFAULT_LANG)
-  navigation: [
-    {
-      title: "Getting Started",
-      items: [
-        { title: "Introduction", slug: "" },
-        { title: "Quick Start", slug: "getting-started/quick-start" },
-        { title: "Installation", slug: "getting-started/installation" }
-      ]
-    },
-    {
-      title: "Providers",
-      items: [
-        { title: "Subscription (Maximize)", slug: "providers/subscription" },
-        { title: "Cheap (Backup)", slug: "providers/cheap" },
-        { title: "Free (Fallback)", slug: "providers/free" }
-      ]
-    },
-    {
-      title: "Features",
-      items: [
-        { title: "Smart Routing", slug: "features/smart-routing" },
-        { title: "Combos & Fallback", slug: "features/combos" },
-        { title: "Quota Tracking", slug: "features/quota-tracking" }
-      ]
-    },
-    {
-      title: "Integration",
-      items: [
-        { title: "Claude Code", slug: "integration/claude-code" },
-        { title: "OpenAI Codex", slug: "integration/codex" },
-        { title: "Cursor", slug: "integration/cursor" },
-        { title: "Cline", slug: "integration/cline" },
-        { title: "Roo", slug: "integration/roo" },
-        { title: "Continue", slug: "integration/continue" },
-        { title: "Other Tools", slug: "integration/other-tools" }
-      ]
-    },
-    {
-      title: "Deployment",
-      items: [
-        { title: "Localhost", slug: "deployment/localhost" },
-        { title: "Cloud (VPS/Docker)", slug: "deployment/cloud" }
-      ]
-    },
-    {
-      title: "Help",
-      items: [
-        { title: "Troubleshooting", slug: "troubleshooting" },
-        { title: "FAQ", slug: "faq" }
-      ]
-    }
-  ]
 };

gitbook/utils/markdown.js

@@ -113,8 +113,9 @@ function renderHeadingWithEmoji(tag, children, props) {
   const text = (Array.isArray(children) ? children : [children])
     .map(c => (typeof c === "string" ? c : ""))
     .join("");
-  const id = slugify(text);
   const emojiMatch = text.match(EMOJI_REGEX);
+  const textForId = emojiMatch ? text.slice(emojiMatch[0].length).trim() : text;
+  const id = slugify(textForId);
   if (emojiMatch) {
     const { Icon, color } = EMOJI_ICON_MAP[emojiMatch[1]];
     const rest = text.slice(emojiMatch[0].length);
@@ -132,7 +133,7 @@ export function MarkdownRenderer({ content }) {
   return (
     <ReactMarkdown
       remarkPlugins={[remarkGfm]}
-      rehypePlugins={[rehypeHighlight, rehypeSlug]}
+      rehypePlugins={[rehypeHighlight]}
       className="markdown-content"
       components={{
         h1: ({ node, children, ...props }) => {