docs: add pages

.github/workflows/pages.yml

@@ -0,0 +1,66 @@
+name: Deploy VitePress site to Pages
+
+on:
+  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
+  # using the `master` branch as the default branch.
+  push:
+    branches: [main]
+    paths:
+      - docs/**
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v3 # Uncomment this block if you're using pnpm
+      #   with:
+      #     version: 9 # Not needed if you've set "packageManager" in package.json
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    needs: build
+    runs-on: ubuntu-latest
+    name: Deploy
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -30,3 +30,6 @@ src-tauri/*.exe
 src-tauri/tests/audio/*.srt
 
 .env
+
+docs/.vitepress/cache
+docs/.vitepress/dist

README.md

@@ -12,77 +12,16 @@ BiliBili ShadowReplay 是一个缓存直播并进行实时编辑投稿的工具
 
 目前仅支持 B 站和抖音平台的直播。
 
-![rooms](docs/summary.png)
+![rooms](docs/public/images/summary.png)
 
-## Headless
+## 安装和使用
 
-BiliBili ShadowReplay 支持无界面模式，提供 Web 控制界面，可以用于在服务器等无图形界面环境下部署使用。
-
-使用方法：
-
-```bash
-sudo docker run -it -d\
-    -p 3000:3000 \
-    -v $DATA_DIR:/app/data \
-    -v $CACHE_DIR:/app/cache \
-    -v $OUTPUT_DIR:/app/output \
-    -v $CONFIG_FILE:/app/config.toml \
-    --name bili-shadowreplay \
-    ghcr.io/xinrea/bili-shadowreplay:latest
-```
+前往网站查看说明：[BiliBili ShadowReplay](https://bsr.xinrea.cn/)
 
 ## 参与开发
 
 [Contributing](.github/CONTRIBUTING.md)
 
-## 总览
+## 赞助
 
-![rooms](docs/summary.png)
-
-## 直播间管理
-
-![clip](docs/rooms.png)
-
-显示当前缓存的直播间列表，在添加前需要在账号页面添加至少一个账号（主账号）用于直播流以及用户信息的获取。
-操作菜单包含打开直播流、查看历史记录以及删除等操作。其中历史记录以列表形式展示，可以进行回放以及删除。
-
-![archives](docs/archives.png)
-
-无论是正在进行的直播还是历史录播，都可在预览窗口进行回放，同时也可以进行切片编辑以及投稿。关于预览窗口的相关说明请见 [预览窗口](#预览窗口)。
-
-## 账号管理
-
-![accounts](docs/accounts.png)
-
-程序需要至少一个账号用于直播流以及用户信息的获取，可以在此页面添加账号。
-
-你可以添加多个账号，但只有一个账号会被标记为主账号，主账号用于直播流的获取。所有账号都可在切片投稿或是观看直播流发送弹幕时自由选择，详情见 [预览窗口](#预览窗口)。
-
-抖音账号目前仅支持手动 Cookie 添加，且账号仅用于获取直播信息和直播流。
-
-## 预览窗口
-
-![livewindow](docs/livewindow.png)
-
-预览窗口是一个多功能的窗口，可以用于观看直播流、回放历史录播、编辑切片、记录时间点以及投稿等操作。如果当前播放的是直播流，那么会有实时弹幕观看以及发送弹幕相关的选项。
-
-通过预览窗口的快捷键操作，可以快速选择时间区间，进行切片生成以及投稿。
-
-无论是弹幕发送还是投稿，均可自由选择账号，只要在账号管理中添加了该账号。
-
-进度条上方会显示弹幕频率图，可以直观地看到弹幕的分布情况；右侧的弹幕统计过滤器可以用于过滤弹幕，只显示含有指定文字的弹幕的统计情况。
-
-## 封面编辑
-
-![cover](docs/coveredit.png)
-
-在预览窗口中，生成切片后可以进行封面编辑，包括关键帧的选择、文字的添加和拖动等。
-
-## 设置
-
-![settings](docs/settings.png)
-
-在设置页面可以进行一些基本的设置，包括缓存和切片的保存路径，以及相关事件是否显示通知等。
-
-> [!WARNING]
-> 缓存目录进行切换时，会有文件复制等操作，如果缓存量较大，可能会耗费较长时间；且在此期间预览功能会暂时失效，需要等待操作完成。
+![donate](docs/public/images/donate.png)

docs/.vitepress/config.ts

@@ -0,0 +1,38 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  title: "BiliBili ShadowReplay",
+  description: "直播录制/实时回放/剪辑/投稿工具",
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: "Home", link: "/" },
+      {
+        text: "Releases",
+        link: "https://github.com/Xinrea/bili-shadowreplay/releases",
+      },
+    ],
+
+    sidebar: [
+      {
+        text: "开始使用",
+        items: [
+          { text: "安装准备", link: "/getting-started/installation" },
+          { text: "配置使用", link: "/getting-started/configuration" },
+        ],
+      },
+      {
+        text: "说明文档",
+        items: [
+          { text: "功能说明", link: "/usage/features" },
+          { text: "常见问题", link: "/usage/faq" },
+        ],
+      },
+    ],
+
+    socialLinks: [
+      { icon: "github", link: "https://github.com/Xinrea/bili-shadowreplay" },
+    ],
+  },
+});

docs/getting-started/installation.md

@@ -0,0 +1,16 @@
+## Docker 部署
+
+BiliBili ShadowReplay 支持无界面模式，提供 Web 控制界面，可以用于在服务器等无图形界面环境下部署使用。
+
+使用方法：
+
+```bash
+sudo docker run -it -d\
+    -p 3000:3000 \
+    -v $DATA_DIR:/app/data \
+    -v $CACHE_DIR:/app/cache \
+    -v $OUTPUT_DIR:/app/output \
+    -v $CONFIG_FILE:/app/config.toml \
+    --name bili-shadowreplay \
+    ghcr.io/xinrea/bili-shadowreplay:latest
+```

docs/index.md

@@ -0,0 +1,70 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "BiliBili ShadowReplay"
+  tagline: "直播录制/实时回放/剪辑/投稿工具"
+  image:
+    src: /images/icon.png
+    alt: BiliBili ShadowReplay
+  actions:
+    - theme: brand
+      text: 开始使用
+      link: /getting-started/installation
+    - theme: alt
+      text: 说明文档
+      link: /usage/features
+
+features:
+  - icon: 📹
+    title: 直播录制
+    details: 缓存直播流，直播结束自动生成整场录播
+  - icon: 📺
+    title: 实时回放
+    details: 实时回放当前直播，不错过任何内容
+  - icon: ✂️
+    title: 剪辑投稿
+    details: 剪辑切片，封面编辑，一键投稿
+  - icon: 📝
+    title: 字幕生成
+    details: 支持 Wisper 模型生成字幕，编辑与压制
+  - icon: 📄
+    title: 弹幕支持
+    details: 直播间弹幕压制到切片，并支持直播弹幕发送和导出
+  - icon: 🌐
+    title: 多直播平台支持
+    details: 目前支持 B 站和抖音直播
+  - icon: 🔍
+    title: 云端部署
+    details: 支持 Docker 部署，提供 Web 控制界面
+  - icon: 📦
+    title: 多平台支持
+    details: 桌面端支持 Windows/Linux/macOS
+---
+
+## 总览
+
+![rooms](/images/summary.png)
+
+## 直播间管理
+
+![clip](/images/rooms.png)
+
+![archives](/images/archives.png)
+
+## 账号管理
+
+![accounts](/images/accounts.png)
+
+## 预览窗口
+
+![livewindow](/images/livewindow.png)
+
+## 封面编辑
+
+![cover](/images/coveredit.png)
+
+## 设置
+
+![settings](/images/settings.png)

package.json

@@ -9,7 +9,10 @@
     "build": "vite build",
     "preview": "vite preview",
     "check": "svelte-check --tsconfig ./tsconfig.json",
-    "tauri": "tauri"
+    "tauri": "tauri",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:preview": "vitepress preview docs"
   },
   "dependencies": {
     "@tauri-apps/api": "^2.4.1",
@@ -41,6 +44,7 @@
     "ts-node": "^10.9.1",
     "tslib": "^2.4.1",
     "typescript": "^4.6.4",
-    "vite": "^4.0.0"
+    "vite": "^4.0.0",
+    "vitepress": "^1.6.3"
   }
 }