WikiExplorer (VibeCode)

Note

WikiExplorer 是一个现代化的、基于 React 构建的vibe coding的静态知识库浏览器。它旨在为你的 Markdown 笔记提供 IDE 级别的浏览体验和 Typora 风格的渲染效果。

• see my blog: [yceachan.github.io]

✨ 核心特性 (Features)

📖 卓越的阅读体验

• 三栏式布局: 类typora原生体验
  • 左侧: 始终可见的作者档案 (Author Profile)。
  • 中间: 沉浸式阅读区或文件网格浏览器。
  • 右侧: 智能上下文导航（同级文件切换 / 文档 TOC 大纲）。
• 增强 Markdown 引擎:
  • 支持 LaTeX 数学公式 ($E=mc^2$, $$...$$)，采用 KaTeX 渲染。
  • 代码高亮: 集成 Prism (Atom One Dark 主题)。
  • GFM 支持: 完美渲染表格、任务列表、引用等。

⚙️ 强大的构建系统

• 配置化扫描: 采用 scan.config.js 进行精确的正则白名单/黑名单控制。
• 虚拟路径映射 (Path Mapping): 支持通过 mappings 配置将复杂的物理路径（如 Protocol/mipi/note）重写为简洁的虚拟路径（如 Protocol/mipi），实现文件系统与 Wiki 层级的解耦。
• 自动化同步: ./do.bat --help
• 源码/产物分离:
  • Main 分支: 仅保留纯净源码。
  • Page 分支: 专门存放构建产物，由 CI/CD 自动部署，保持仓库整洁。

---

🚀 快速上手 (Quick Start)

1. 环境准备

# 1. 克隆项目到你的笔记工作区 (Workspace)
git clone [email protected]:yceachan/yceachan.github.io.git WikiExplorer

# 2. 安装依赖
cd WikiExplorer
npm install

2. 个性化配置

• 扫描规则: 编辑 scan.config.js，配置你想展示的笔记目录（支持正则）。
• 个人档案: 修改 public/profile.json，更新你的头像、Bio 和社交链接。

3. 本地开发

# 启动开发服务器 (自动同步笔记)
npm run dev

---

🚢 部署指南 (Deployment)

本项目采用独特的 “本地构建 -> 产物推送” 模式，无需在 GitHub Actions 上重新安装依赖，速度极快。

使用 do.bat (Windows)

这是日常维护的唯一入口。

1. 常规部署:

   .\do.bat

   • 自动执行：Sync Notes -> Vite Build -> Copy Workflows -> Push to 'page' branch。
   • 注意: 此命令不会推送 main 分支的源码，仅更新网站内容。

2. 带备注部署:

   .\do.bat -m "Update: Added new FPGA docs"

3. 仅本地构建 (不推送):

   .\do.bat --nopush

GitHub 配置

确保仓库的 Settings -> Pages 中，Source 设置为 GitHub Actions。脚本会自动触发 deploy.yml 完成发布。

---

🛠️ 技术栈 (Tech Stack)

• Core: React 18, Vite 6, Tailwind CSS
• Router: React Router v7
• Markdown Pipeline:
  • react-markdown
  • remark-math / rehype-katex (LaTeX)
  • rehype-slug (Anchor Links)
  • react-syntax-highlighter (Code Blocks)

📄 License

MIT License (c) copyright [email protected]