feat: improve and refactor the site

Signed-off-by: bitliu <[email protected]>

Author: Xunzhuo

.gitignore

@@ -97,4 +97,5 @@ example_prd.txt
 scripts/prd.txt
 .env.taskmaster
 package-lock.json
-package.json
+
+website/build

Makefile

@@ -155,3 +155,24 @@ download-models:
 	@if [ ! -d "models/pii_classifier_modernbert_base_presidio_token_model" ]; then \
 		hf download LLM-Semantic-Router/pii_classifier_modernbert-base_presidio_token_model --local-dir models/pii_classifier_modernbert-base_presidio_token_model; \
 	fi
+
+# Documentation targets
+docs-install:
+	@echo "Installing documentation dependencies..."
+	cd website && npm install
+
+docs-dev: docs-install
+	@echo "Starting documentation development server..."
+	cd website && npm start
+
+docs-build: docs-install
+	@echo "Building documentation for production..."
+	cd website && npm run build
+
+docs-serve: docs-build
+	@echo "Serving production documentation..."
+	cd website && npm run serve
+
+docs-clean:
+	@echo "Cleaning documentation build artifacts..."
+	cd website && npm run clear

README.md

@@ -1,8 +1,6 @@
-# LLM Semantic Router
-
 <div align="center">
 
-<img src="docs/logo.png" alt="LLM Semantic Router" width="200"/>
+<img src="website/static/img/repo.png" alt="LLM Semantic Router"/>
 
 [![Documentation](https://img.shields.io/badge/docs-read%20the%20docs-blue)](https://llm-semantic-router.readthedocs.io/en/latest/)
 [![Hugging Face](https://img.shields.io/badge/🤗%20Hugging%20Face-Community-yellow)](https://huggingface.co/LLM-Semantic-Router)
@@ -11,7 +9,7 @@
 
 **📚 [Complete Documentation](https://llm-semantic-router.readthedocs.io/en/latest/) | 🚀 [Quick Start](https://llm-semantic-router.readthedocs.io/en/latest/getting-started/quick-start/) | 🏗️ [Architecture](https://llm-semantic-router.readthedocs.io/en/latest/architecture/system-architecture/) | 📖 [API Reference](https://llm-semantic-router.readthedocs.io/en/latest/api/router/)**
 
-![](./docs/code.png)
+![](./website/static/img/code.png)
 
 </div>
 
@@ -55,11 +53,11 @@ This is achieved using BERT classification. Conceptually similar to Mixture-of-E
 
 As such, the overall inference accuracy is improved by using a pool of models that are better suited for different types of tasks:
 
-![Model Accuracy](./docs/category_accuracies.png)
+![Model Accuracy](./website/static/img/category_accuracies.png)
 
 The screenshot below shows the LLM Router dashboard in Grafana.
 
-![LLM Router Dashboard](./docs/grafana_screenshot.png)
+![LLM Router Dashboard](./website/static/img/grafana_screenshot.png)
 
 The router is implemented in two ways: Golang (with Rust FFI based on Candle) and Python. Benchmarking will be conducted to determine the best implementation.
 

mkdocs.yml

@@ -0,0 +1,112 @@
+# 技术方案设计
+
+## 技术架构
+
+### 核心技术栈
+- **Docusaurus 3.x**: 现代化的静态网站生成器
+- **React 18**: 用于自定义组件和页面
+- **TypeScript**: 提供类型安全
+- **MDX**: 支持在 Markdown 中使用 React 组件
+- **Mermaid**: 图表渲染支持
+- **Algolia DocSearch**: 搜索功能（可选）
+
+### 项目结构
+```
+website/
+├── docusaurus.config.js     # Docusaurus 配置
+├── sidebars.js             # 侧边栏配置
+├── package.json            # 依赖管理
+├── src/
+│   ├── components/         # 自定义 React 组件
+│   ├── css/               # 自定义样式
+│   ├── pages/             # 自定义页面
+│   └── theme/             # 主题自定义
+├── docs/                  # 文档内容（迁移自现有 docs/）
+├── static/                # 静态资源
+└── build/                 # 构建输出
+```
+
+### 科技感设计方案
+
+#### 配色方案
+- **主色调**: 深蓝色系 (#0D1117, #161B22, #21262D)
+- **强调色**: 霓虹蓝 (#58A6FF), 霓虹绿 (#7C3AED)
+- **文本色**: 高对比度白色和灰色
+- **代码块**: 暗色主题配合语法高亮
+
+#### 视觉效果
+- **渐变背景**: 深色渐变背景
+- **毛玻璃效果**: 导航栏和卡片组件
+- **动画效果**: 页面切换和悬停动画
+- **图标系统**: 现代化的 Feather Icons 或 Heroicons
+
+#### 自定义组件
+- **Hero Section**: 带动画的首页展示区域
+- **Feature Cards**: 功能特性展示卡片
+- **Code Playground**: 交互式代码示例
+- **Architecture Diagram**: 增强的架构图展示
+
+### 迁移策略
+
+#### 内容迁移
+1. **文档结构映射**:
+   - `docs/index.md` → `docs/intro.md`
+   - 保持现有的文件夹结构
+   - 更新内部链接格式
+
+2. **导航配置**:
+   - 将 `mkdocs.yml` 的 nav 配置转换为 `sidebars.js`
+   - 保持相同的层级结构
+
+3. **资源迁移**:
+   - 图片文件移动到 `static/img/`
+   - 更新图片引用路径
+
+#### 功能增强
+1. **Mermaid 集成**: 使用 `@docusaurus/theme-mermaid` 插件
+2. **代码高亮**: 配置 Prism 主题和语言支持
+3. **搜索功能**: 集成本地搜索或 Algolia DocSearch
+4. **PWA 支持**: 离线访问和安装功能
+
+### 构建和部署
+
+#### 开发环境
+- `npm start`: 启动开发服务器
+- `npm run build`: 构建生产版本
+- `npm run serve`: 预览生产版本
+
+#### Makefile 集成
+```makefile
+# 文档相关命令
+docs-install:
+	cd website && npm install
+
+docs-dev: docs-install
+	cd website && npm start
+
+docs-build: docs-install
+	cd website && npm run build
+
+docs-serve: docs-build
+	cd website && npm run serve
+```
+
+### 性能优化
+
+#### 构建优化
+- **代码分割**: 自动的路由级代码分割
+- **图片优化**: 自动图片压缩和 WebP 转换
+- **CSS 优化**: 自动 CSS 压缩和去重
+- **预加载**: 关键资源预加载
+
+#### 运行时优化
+- **懒加载**: 图片和组件懒加载
+- **缓存策略**: 静态资源长期缓存
+- **CDN 支持**: 静态资源 CDN 分发
+
+### 安全性考虑
+
+- **内容安全策略**: 配置 CSP 头部
+- **XSS 防护**: MDX 内容安全渲染
+- **依赖安全**: 定期更新依赖包
+- **构建安全**: 构建过程中的安全检查

specs/docusaurus_migration/design.md

@@ -0,0 +1,53 @@
+# 需求文档
+
+## 介绍
+
+将现有的基于 MkDocs 的文档系统重构为基于 Docusaurus 的现代化文档网站，提供极具科技感的视觉体验和本地预览功能。
+
+## 需求
+
+### 需求 1 - Docusaurus 文档系统迁移
+
+**用户故事：** 作为开发者，我希望将现有的 MkDocs 文档迁移到 Docusaurus，以获得更现代化的文档体验和更好的维护性。
+
+#### 验收标准
+
+1. When 执行文档构建命令时，系统应当成功生成基于 Docusaurus 的静态网站
+2. When 访问文档网站时，系统应当展示所有现有的文档内容，包括 API 参考、架构说明、训练指南等
+3. When 浏览文档时，系统应当保持原有的导航结构和内容组织方式
+4. When 查看 Mermaid 图表时，系统应当正确渲染所有现有的架构图和流程图
+
+### 需求 2 - 科技感视觉设计
+
+**用户故事：** 作为用户，我希望文档网站具有极具科技感的视觉风格，提供现代化的用户体验。
+
+#### 验收标准
+
+1. When 访问网站时，系统应当展示深色主题为主的科技感配色方案
+2. When 浏览页面时，系统应当提供流畅的动画效果和现代化的 UI 组件
+3. When 查看代码块时，系统应当使用语法高亮和现代化的代码展示样式
+4. When 使用导航时，系统应当提供直观的侧边栏和顶部导航体验
+5. When 在移动设备上访问时，系统应当提供响应式的移动端体验
+
+### 需求 3 - 本地预览功能
+
+**用户故事：** 作为开发者，我希望通过 Makefile 命令轻松启动本地文档预览服务。
+
+#### 验收标准
+
+1. When 执行 `make docs-dev` 时，系统应当启动本地开发服务器并自动打开浏览器
+2. When 修改文档内容时，系统应当自动重新加载页面显示最新内容
+3. When 执行 `make docs-build` 时，系统应当构建生产版本的静态文件
+4. When 执行 `make docs-serve` 时，系统应当启动生产版本的本地预览服务
+
+### 需求 4 - 内容增强
+
+**用户故事：** 作为用户，我希望文档网站提供增强的内容展示功能，提升阅读体验。
+
+#### 验收标准
+
+1. When 查看 API 文档时，系统应当提供交互式的 API 示例和代码片段
+2. When 浏览架构文档时，系统应当支持可交互的 Mermaid 图表
+3. When 搜索内容时，系统应当提供快速准确的全文搜索功能
+4. When 查看代码示例时，系统应当提供一键复制功能
+5. When 浏览长文档时，系统应当提供目录导航和回到顶部功能