docs: vitepress

hemengke1997 · Nov 5, 2024 · 16b0d17 · 16b0d17
1 parent 35a9c5b
commit 16b0d17
Show file tree

Hide file tree

Showing 92 changed files with 2,535 additions and 486 deletions.
diff --git a/.github/workflows/pages.yml b/.github/workflows/pages.yml
@@ -0,0 +1,59 @@
+# 构建 VitePress 站点并将其部署到 GitHub Pages 的示例工作流程
+#
+name: Deploy VitePress site to Pages
+
+on:
+  # 在针对 `main` 分支的推送上运行。如果你
+  # 使用 `master` 分支作为默认分支，请将其更改为 `master`
+  push:
+    branches: [master]
+
+  # 允许你从 Actions 选项卡手动运行此工作流程
+  workflow_dispatch:
+
+# 设置 GITHUB_TOKEN 的权限，以允许部署到 GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# 只允许同时进行一次部署，跳过正在运行和最新队列之间的运行队列
+# 但是，不要取消正在进行的运行，因为我们希望允许这些生产部署完成
+concurrency:
+  group: pages
+  cancel-in-progress: false
+
+jobs:
+  # 构建工作
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci
+      - name: Build with VitePress
+        run: npm run docs:build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: docs/.vitepress/dist
+
+  # 部署工作
+  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
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,6 @@ package.nls.*
 
 TODO.md
 CHANGELOG-CODE.md
+
+docs/.vitepress/dist
+docs/.vitepress/cache
diff --git a/README.md b/README.md
@@ -6,11 +6,12 @@
 
 <h1 align='center'>Image Manager</h1>
 
-> View, compress, crop, convert formats, search, and find similar images in VS Code
+<p align='center'>Powerful yet easy-to-use VSCode image management extension<p>
 
-[中文文档](./README.zh.md)
 
-## [Changelog](./CHANGELOG.md)
+[中文](./README.zh.md)
+
+## [Document](https://hemengke1997.github.io/vscode-image-manager/)
 
 ## Screenshot
 
@@ -56,96 +57,6 @@
 
 </details>
 
-
-## Features
-
-> **Absolutely secure, processed locally**. All image processing is done locally, ensuring privacy and security.
-
-- **Batch image compression**
-- **Image cropper**
-- **Image viewer**
-- **Finding similar images**
-- Multi-select (Shift/Ctrl/Cmd)
-- View image details
-- Finding images
-- Conditional filtering of images
-- Dark/light theme
-- I18n support: `English`, `简体中文`, `繁體中文`, `日本語`
-
-## Usage
-
-**Several ways open extension**
-
-### 1.Shortcut
-
-- Windows: `Shift+Alt+J`
-- macOS: `Cmd+Option+J`
-
-### 2.Context Menu
-
-Right-click in Explorer, select `Image Manager` to open the extension (opens the current folder).
-
-### 3.Command
-
-Press `Ctrl+Shift+P` (macOS: `Cmd+Shift+P`), type `Image Manager` to open (opens the workspace root folder).
-
-## [Extension Configurations](./docs//vscode-configuration.md)
-
-## Tips
-
-### Compression
-
-<details>
-  <summary>Right-click on the image</summary>
-
-![compress-right-click-image](./screenshots/compress-1.png)
-</details>
-
-<details>
-  <summary>Right-click on the folder</summary>
-
-![compress-right-click-folder](./screenshots/compress-2.png)
-</details>
-
-
-
-### Viewer
-
-- `Cmd/Ctrl + Mouse Wheel` to scale image size
-- `Cmd/Ctrl + F` to open the `Search` modal
-
-### Common Questions
-
-#### Why is opening the extension slow the first time?
-
-The first time you open the extension, it will need to download the necessary dependencies. Depending on your network environment, this process may be slow. Please be patient!
-
-#### Why does the file get bigger after compression?
-
-- Meta information about whether the image is compressed is added during compression. As a result, a small image may become larger after compression.
-- You can set `image-manager.compression.errorRange` to adjust the compression error range.
-
-#### What to do if there are too many images and it feels sluggish?
-
-- You can configure `image-manager.appearance.reduceMotion: 'on'` to reduce animation effects.
-- You can open a specific directory by right-clicking on the folder, which will reduce the number of images rendered.
-
-## Support
-
-> If this plugin has been helpful to you, please consider buying the author a cup of coffee :) ☕️
->
-> Or give it a star by [clicking here](https://github.com/hemengke1997/vscode-image-manager) ⭐️
-
-| Wechat Pay                                             | Alipay                                              |
-| ------------------------------------------------------ | --------------------------------------------------- |
-| <img src="./screenshots/wechatpay.jpeg" width="200" /> | <img src="./screenshots/alipay.jpeg" width="200" /> |
-
-## Feedback
-
-If you have any questions or suggestions, please raise them in [GitHub Issues](https://github.com/hemengke1997/vscode-image-manager/issues).
-
-If you find this plugin useful, please give it a good rating in the [Marketplace](https://marketplace.visualstudio.com/items?itemName=minko.image-manager&ssr=false#review-details). Thank you very much! Your support is my greatest motivation for open source.
-
 ## Thanks
 
 ❤️ [vscode-image-viewer](https://github.com/ZhangJian1713/vscode-image-viewer)

diff --git a/README.zh.md b/README.zh.md
@@ -6,11 +6,11 @@
 
 <h1 align='center'>Image Manager</h1>
 
-> 浏览、压缩、裁剪、转换格式、搜索、查找相似图片的 VS Code 插件
+<p align='center'>强大易用的VSCode图片管理插件<p>
 
-[English Docs](./README.md)
+[English](./README.md)
 
-## [更新日志](./CHANGELOG.md)
+## [文档](https://hemengke1997.github.io/vscode-image-manager/zh/)
 
 ## 插件截图
 
@@ -58,129 +58,6 @@
 
 </details>
 
-
-
-## 核心功能
-
-> **绝对安全，本地处理**。所有图片处理均在本地完成，确保隐私安全
-
-- **图片批量压缩**
-- **图片裁剪**
-- **图片大图浏览**
-- **相似图片查找**
-- 支持多选（Shift/Ctrl/Cmd）
-- 查看图片详情（尺寸、体积等）
-- 查找图片
-- 条件筛选图片（根据 git-staged/图片大小/是否已压缩筛选）
-- 暗黑/明亮主题，自定义 UI 主题色
-- 国际化。目前支持 `English`，`简体中文`，`繁體中文`，`日本語`
-
-## 使用方法
-
-**有以下几种方式打开插件**
-
-### 1. 快捷键
-
-- Windows: `Shift+Alt+J`
-- macOS: `Cmd+Option+J`
-
-### 2. 右键菜单
-
-在资源管理器中右键选择 `Image Manager 🏞️` 打开插件。
-
-### 3. 命令面板
-
-按 `Ctrl+Shift+P`（macOS: `Cmd+Shift+P`）打开命令面板，输入 `Image Manager` 并选择打开。
-
-## [插件配置项](./docs/vscode-configuration.zh.md)
-
-## 小贴士
-
-### 关于配置
-
-大部分配置可以在插件页面中设置，比如主题、语言等。当然，也可以在 `settings.json` 中进行设置。
-
-### 压缩
-
-<details>
-  <summary>在图片上右键，可以压缩单张图片</summary>
-
-![compress-right-click-image](./screenshots/compress-cn-1.png)
-
-</details>
-
-
-<details>
-  <summary>在文件夹上右键，可以批量压缩文件夹下的所有图片</summary>
-
-![compress-right-click-folder](./screenshots/compress-cn-2.png)
-
-</details>
-
-### 浏览区域
-
-- `Cmd/Ctrl + 鼠标滚轮` 可以缩放图片大小。
-- `Cmd/Ctrl + F` 可以打开搜索窗口。
-
-### 常见问题
-
-#### 为什么第一次打开插件很慢？
-
-由于首次打开插件时需要下载必要的依赖，这个过程可能会比较慢，具体取决于您的网络环境。请耐心等待。
-
-#### 报错：依赖安装失败，请检查网络
-
-如果您在中国大陆且网络环境不佳（你懂的），有两种解决方案：
-
-1. 切换镜像源
-2. 手动安装依赖
-
-##### 如何切换镜像源
-
-使用命令面板，输入 `select mirror url` 并回车。
-
-![选择](./screenshots/select-mirror-1.png)
-
-然后选择一个镜像源，重启 VS Code 并尝试重新下载依赖。
-
-![选择](./screenshots/select-mirror-2.png)
-
-如果切换镜像源后依然安装失败，请手动安装依赖。
-
-##### 如何手动安装依赖
-
-1. 打开命令面板，输入 `Show Output Channel`，选择 Image Manager 对应的选项。
-2. 在输出中找到 `插件根目录 (Extension Root)`，之后需要用到。
-3. 下载 `Output Channel` 中打印的依赖地址。
-4. 将下载的文件放在步骤 2 的 `插件根目录`。
-5. 重启 VS Code 即可。
-
-#### 为什么压缩后文件反而变大了？
-
-- 由于压缩时添加了「是否已压缩」的元信息，可能导致小体积图片压缩后变大。
-- 您可以设置 `image-manager.compression.errorRange` 来调整压缩误差范围。
-
-#### 图片太多，感觉卡顿怎么办？
-
-- 可以配置 `image-manager.appearance.reduceMotion: 'on'` 来减少动画效果。
-- 可以使用右键文件夹的方式打开指定的目录，从而减少渲染的图片数量。
-
-## 赞赏
-
-> 如果这个插件能帮助到您，请作者喝杯咖啡吧 :) ☕️
->
-> 或者动动小手指 [点个 star](https://github.com/hemengke1997/vscode-image-manager) ⭐️
-
-| 微信                                                   | 支付宝                                              |
-| ------------------------------------------------------ | --------------------------------------------------- |
-| <img src="./screenshots/wechatpay.jpeg" width="200" /> | <img src="./screenshots/alipay.jpeg" width="200" /> |
-
-## 反馈
-
-如果有任何问题或建议，请在 [GitHub Issues](https://github.com/hemengke1997/vscode-image-manager/issues) 中提出。
-
-如果觉得此插件好用，请在 [Marketplace](https://marketplace.visualstudio.com/items?itemName=minko.image-manager&ssr=false#review-details) 中给予好评，非常感谢！你的支持是我开源的最大动力
-
 ## 感谢
 
 ❤️ [vscode-image-viewer](https://github.com/ZhangJian1713/vscode-image-viewer)