Update gitbook
This commit is contained in:
decolua
parent
cd483d9f65
commit
50b8a59f99
7 changed files with 297 additions and 108 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
"Providers": Layers,
|
||||
"Features": Zap,
|
||||
"Integration": Plug,
|
||||
"Deployment": Cloud,
|
||||
"Help": HelpCircle
|
||||
gettingStarted: Rocket,
|
||||
providers: Layers,
|
||||
features: Zap,
|
||||
integration: Plug,
|
||||
deployment: Cloud,
|
||||
help: HelpCircle
|
||||
};
|
||||
|
||||
const ITEM_ICONS = {
|
||||
"Introduction": BookOpen,
|
||||
"Quick Start": Rocket,
|
||||
"Installation": Terminal,
|
||||
"Subscription (Maximize)": Sparkles,
|
||||
"Cheap (Backup)": Wallet,
|
||||
"Free (Fallback)": Gift,
|
||||
"Smart Routing": GitBranch,
|
||||
"Combos & Fallback": Layers,
|
||||
"Quota Tracking": BarChart3,
|
||||
"Claude Code": Code2,
|
||||
"OpenAI Codex": Code2,
|
||||
"Cursor": Code2,
|
||||
"Cline": Code2,
|
||||
"Roo": Code2,
|
||||
"Continue": Code2,
|
||||
"Other Tools": Plug,
|
||||
"Localhost": Monitor,
|
||||
"Cloud (VPS/Docker)": Server,
|
||||
"Troubleshooting": HelpCircle,
|
||||
"FAQ": MessageCircle
|
||||
introduction: BookOpen,
|
||||
quickStart: Rocket,
|
||||
installation: Terminal,
|
||||
subscription: Sparkles,
|
||||
cheap: Wallet,
|
||||
free: Gift,
|
||||
smartRouting: GitBranch,
|
||||
combos: Layers,
|
||||
quotaTracking: BarChart3,
|
||||
claudeCode: Code2,
|
||||
codex: Code2,
|
||||
cursor: Code2,
|
||||
cline: Code2,
|
||||
roo: Code2,
|
||||
continue: Code2,
|
||||
otherTools: Plug,
|
||||
localhost: Monitor,
|
||||
cloud: Server,
|
||||
troubleshooting: HelpCircle,
|
||||
faq: MessageCircle
|
||||
};
|
||||
|
||||
export default function DocsSidebar({ isMobile = false, onClose, lang = DEFAULT_LANG }) {
|
||||
const pathname = usePathname();
|
||||
const [openSections, setOpenSections] = useState(
|
||||
DOCS_CONFIG.navigation.map((_, i) => i)
|
||||
);
|
||||
const navigation = getNavigation(lang);
|
||||
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) {
|
||||
onClose();
|
||||
}
|
||||
if (isMobile && 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) => {
|
||||
const SectionIcon = SECTION_ICONS[section.title] || BookOpen;
|
||||
|
||||
{navigation.map((section, sectionIndex) => {
|
||||
const SectionIcon = SECTION_ICONS[section.key] || BookOpen;
|
||||
|
||||
return (
|
||||
<div key={sectionIndex}>
|
||||
{/* Section title */}
|
||||
<div key={section.key}>
|
||||
<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) => {
|
||||
const ItemIcon = ITEM_ICONS[item.title] || BookOpen;
|
||||
|
||||
{section.items.map((item) => {
|
||||
const ItemIcon = ITEM_ICONS[item.key] || BookOpen;
|
||||
|
||||
return (
|
||||
<li key={itemIndex}>
|
||||
<li key={item.key}>
|
||||
<Link
|
||||
href={buildHref(item.slug)}
|
||||
onClick={handleLinkClick}
|
||||
|
|
|
|||
|
|
@ -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) => (
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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: [
|
||||
{
|
||||
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" }
|
||||
]
|
||||
}
|
||||
]
|
||||
navigation: getNavigation(DEFAULT_LANG)
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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 }) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue