docs: refine docs

README.md

@@ -1,47 +1,72 @@
-# Vide
+<p align="center">
+  <a href="https://vide.pascal-lab.net/">
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcset="docs/src/assets/vide-logo-reveal-dark.svg">
+      <img src="docs/src/assets/vide-logo-reveal-light.svg" alt="Vide" width="520">
+    </picture>
+  </a>
+</p>
 
-Vide 是一个面向 Verilog 和 SystemVerilog 的语言服务器，以及配套的 VS Code 扩展。我们把日常写 RTL 时最常用的能力放进编辑器里：语法高亮、诊断、跳转、补全、悬停说明、引用查找、重命名、格式化、代码操作、语义高亮、折叠、符号大纲、签名帮助、inlay hints 和实例 code lens。
+# Vide - 现代 SystemVerilog 开发环境
 
-如果你只是想把 Vide 用起来，请从用户手册开始读：
+[![Homepage](https://img.shields.io/badge/homepage-vide.pascal--lab.net-0969da)](https://vide.pascal-lab.net/)
+[![CI](https://github.com/pascal-lab/vide/actions/workflows/ci.yml/badge.svg?branch=master)](https://github.com/pascal-lab/vide/actions/workflows/ci.yml)
+[![Release](https://img.shields.io/badge/release-v0.1.6-2ea44f)](https://vide.pascal-lab.net/changelog/v0-1-6/)
+[![VS Code Marketplace](https://img.shields.io/badge/dynamic/json?url=https%3A%2F%2Fpascal-lab.gallery.vsassets.io%2F_apis%2Fpublic%2Fgallery%2Fpublisher%2Fpascal-lab%2Fextension%2Fvide-ls%2Flatest%2Fassetbyname%2FMicrosoft.VisualStudio.Code.Manifest&query=%24.version&label=Marketplace&prefix=v&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI%2BPHBhdGggZmlsbD0iI2ZmZiIgZD0iTTIzLjE1IDIuNTkgMTguMjEuMjFhMS40OSAxLjQ5IDAgMCAwLTEuNy4yOUw3LjA2IDkuMTEgMi45NCA1Ljk5YTEgMSAwIDAgMC0xLjI3LjA2TC4zMyA3LjI2YTEgMSAwIDAgMCAwIDEuNDhMMy45IDEyIC4zMyAxNS4yNmExIDEgMCAwIDAgMCAxLjQ4bDEuMzQgMS4yMWExIDEgMCAwIDAgMS4yNy4wNmw0LjEyLTMuMTIgOS40NSA4LjYxYTEuNDkgMS40OSAwIDAgMCAxLjcuMjlsNC45NC0yLjM4QTEuNSAxLjUgMCAwIDAgMjQgMjAuMDZWMy45NGExLjUgMS41IDAgMCAwLS44NS0xLjM1Wk0xOCAxNy40NSAxMC44MyAxMiAxOCA2LjU1djEwLjlaIi8%2BPC9zdmc%2B&logoColor=white&color=007ACC)](https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide-ls)
+[![License](https://img.shields.io/badge/license-MIT-blue)](LICENSE)
 
-- [Vide 用户手册](docs/src/content/docs/index.mdx)
-- [快速上手](docs/src/content/docs/quick-start.md)
-- [项目配置](docs/src/content/docs/project-configuration.md)
-- [VS Code 设置参考](docs/src/content/docs/vscode-settings.md)
+Vide 是专为 Verilog/SystemVerilog 开发者打造的现代化开发环境，旨在让硬件设计像软件开发一样流畅顺手。Vide 提供了[十多项](https://vide.pascal-lab.net/user-guide/features/)在现代软件开发环境中已成标配、却长期缺失于硬件开发环境的能力，包括但不限于[定义跳转](https://vide.pascal-lab.net/user-guide/features/navigation/)、[代码注解](https://vide.pascal-lab.net/user-guide/features/inlay-hints/)、[精准补全](https://vide.pascal-lab.net/user-guide/features/completion/)和[自动重构](https://vide.pascal-lab.net/user-guide/features/quick-fixes/)等。借助 Vide，硬件开发者可以更高效地理解、编写和维护 Verilog/SystemVerilog 代码。
 
-## 30 秒认识 Vide
+## 功能展示
 
-Vide 由两部分组成：
+### 符号导航
 
-1. `vide`：Rust 编写的 LSP 服务器，负责理解 Verilog/SystemVerilog 工程。
-2. `editors/vscode`：VS Code 扩展，负责启动服务器并把功能接到编辑器界面上。
+在 Vide 中使用[定义跳转](https://vide.pascal-lab.net/user-guide/features/navigation/)、[引用搜索](https://vide.pascal-lab.net/user-guide/features/references/)和[符号大纲](https://vide.pascal-lab.net/user-guide/features/document-symbols/)在模块、端口和寄存器之间快速定位，让开发者不用离开当前上下文也能追清 RTL 连接关系。
 
-普通用户安装 VS Code 扩展即可。扩展会随发布包带上对应平台的语言服务器；只有从源码开发、调试，或者想使用自己编译的服务器时，才需要手动配置 `vide.server.command`。
+| Peek Definition | Find All References | Document Symbol |
+| --- | --- | --- |
+| <img src="docs/src/assets/homepage-features/peek-definition.png" alt="Peek Definition 截图" width="360" /> | <img src="docs/src/assets/homepage-features/find-all-references.jpeg" alt="Find All References 截图" width="360" /> | <img src="docs/src/assets/homepage-features/document-symbol.jpeg" alt="Document Symbol 截图" width="360" /> |
 
-## 安装方式
+### 代码理解
 
-普通用户请从 VS Code 扩展市场安装：
+利用 Vide 的[悬停信息](https://vide.pascal-lab.net/user-guide/features/hover/)和[代码注解](https://vide.pascal-lab.net/user-guide/features/inlay-hints/)在一个窗口中实时查看模块、字面量与端口连接信息，减少窗口切换的负担，让开发者更专注于 RTL 设计本身。
 
-```powershell
-code --install-extension pascal-lab.vide
-```
+|  |  |
+| --- | --- |
+| <img src="docs/src/assets/homepage-features/hover-on-module-name.png" alt="模块 Hover 信息截图" width="520" /><br />Module Hover | <img src="docs/src/assets/homepage-features/hover-on-instance-name.png" alt="例化 Hover 信息截图" width="520" /><br />Instance Hover |
+| <img src="docs/src/assets/homepage-features/hover-on-number-literal.png" alt="字面量 Hover 信息截图" width="520" /><br />Number Literal Hover | <img src="docs/src/assets/homepage-features/inlay-hints.png" alt="Inlay Hints 截图" width="520" /><br />Inlay Hints |
 
-也可以在 VS Code 扩展面板中搜索 `Vide` 并点击 Install。
+### 精准补全
 
-如果你要修改 Vide、调试本地服务器，或者扩展还没有发布到市场，请看 [从源码构建](docs/src/content/docs/build-from-source.md)。
+Vide 的[补全](https://vide.pascal-lab.net/user-guide/features/completion/)机制理解当前代码上下文，能在实例化、端口连接和其他编辑位置给出更贴近工程语义的建议，也能通过代码片段提供结构化补全。
 
-## 文档本地预览
+|  |  |  |
+| --- | --- | --- |
+| <img src="docs/src/assets/homepage-features/completion-module-decl.png" alt="模块声明补全截图" width="360" /><br />Module Declaration | <img src="docs/src/assets/homepage-features/completion-ports.png" alt="端口补全截图" width="360" /><br />Port Completion | <img src="docs/src/assets/homepage-features/completion-items.png" alt="补全候选列表截图" width="360" /><br />Completion Items |
+| <img src="docs/src/assets/homepage-features/completion-snippets-module.png" alt="模块代码片段补全截图" width="360" /><br />Module Snippet | <img src="docs/src/assets/homepage-features/completion-module-snippets-expanded.png" alt="展开后的模块代码片段补全截图" width="360" /><br />Expanded Snippet |  |
 
-本项目的完整文档使用 Astro Starlight 组织。首次预览前在 `docs` 目录安装依赖：
+### 自动重构
 
-```powershell
-cd docs
-npm ci
-npm run dev
-```
+通过[自动重构](https://vide.pascal-lab.net/user-guide/features/quick-fixes/)和[重命名](https://vide.pascal-lab.net/user-guide/features/rename/)，把端口连线、信号重命名、转换进制这些繁琐的细节交给 Vide 完成，解放开发者的重构体验。
 
-浏览器打开命令输出里的地址即可阅读。
+| Missing Ports | Rename |
+| --- | --- |
+| <img src="docs/src/assets/homepage-features/missing-ports.png" alt="补全缺失端口 Code Action 截图" width="520" /> | <img src="docs/src/assets/homepage-features/rename-updated.png" alt="重命名符号截图" width="520" /> |
+
+### 诊断分析
+
+Vide 能在编辑过程中实时给出[代码诊断](https://vide.pascal-lab.net/user-guide/features/diagnostics/)，让错误更早被发现。此外，Vide 能够结合[骑河（Qihe）](https://vide.pascal-lab.net/user-guide/features/qihe/)提供的静态分析能力，在编辑器中给出更深入的分析结果，帮助开发者发现潜在问题。
+
+| Undeclared Identifier | Loop Analysis |
+| --- | --- |
+| <img src="docs/src/assets/homepage-features/diagnostics-undeclared-identifiers.jpeg" alt="未定义标识符诊断截图" width="520" /> | <img src="docs/src/assets/homepage-features/diagnostics-loop-analysis.jpeg" alt="组合环路诊断截图" width="520" /> |
+
+## 继续了解 Vide
+
+- [访问官网](https://vide.pascal-lab.net/)：查看完整功能展示、对比信息和文档入口。
+- [在线体验](https://vide.pascal-lab.net/playground/)：直接在浏览器中试用 Vide。
+- [阅读用户手册](https://vide.pascal-lab.net/user-guide/)：从快速开始、项目配置和功能特性继续了解。
 
 ## 许可证
 
-Vide 使用 MIT License。
+Vide 使用 [MIT License](LICENSE)。

docs/src/content/docs/advanced-guide/advanced-installation.md

@@ -11,7 +11,7 @@ description: 安装本地 VSIX、选择发布渠道，或配置自定义 Vide 
 
 | 版本 | 获取方式 | 适合场景 |
 | --- | --- | --- |
-| 稳定版 | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide)，或 [GitHub Releases](https://github.com/pascal-lab/vide/releases) 中最新的正式 Release | 常规使用和离线安装 |
+| 稳定版 | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide-ls)，或 [GitHub Releases](https://github.com/pascal-lab/vide/releases) 中最新的正式 Release | 常规使用和离线安装 |
 | Beta 版 | [GitHub Releases](https://github.com/pascal-lab/vide/releases) 中标记为 Pre-release 的发布 | 提前验证下一版功能 |
 | Nightly 开发包 | [GitHub Actions CI](https://github.com/pascal-lab/vide/actions/workflows/ci.yml) 的运行产物，artifact 名称形如 `vide-vscode-dev-<target>-<commit>` | 验证某个提交或排查最新修复 |
 

docs/src/content/docs/changelog/v0-1-6.md

@@ -6,7 +6,7 @@ description: Vide v0.1.6 发布说明。
 ## Vide 品牌与项目配置
 
 - 项目品牌已从 Vizsla 迁移到 Vide，Rust 包、VS Code 界面、文档、工作流、Playground 和生成的 manifest schema 已统一使用新的项目名称。（[#161](https://github.com/pascal-lab/vide/pull/161)）
-- VS Code 扩展的安装 ID 已更新为 `pascal-lab.vide`，与当前扩展包名称和发布者保持一致。
+- VS Code 扩展的安装 ID 已更新为 `pascal-lab.vide-ls`，与当前扩展包名称和发布者保持一致。
 - 默认项目 manifest 现在是 `vide.toml`，旧 manifest 兼容入口已移除。新项目和文档示例都应使用 `vide.toml`。（[#161](https://github.com/pascal-lab/vide/pull/161)）
 
 ## 编辑体验

docs/src/content/docs/en/advanced-guide/advanced-installation.md

@@ -11,7 +11,7 @@ You can download a `.vsix` file and install it manually. Choose the source based
 
 | Version | Source | Use when |
 | --- | --- | --- |
-| Stable | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide), or the latest non-prerelease entry in [GitHub Releases](https://github.com/pascal-lab/vide/releases) | Daily use and offline installation |
+| Stable | [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide-ls), or the latest non-prerelease entry in [GitHub Releases](https://github.com/pascal-lab/vide/releases) | Daily use and offline installation |
 | Beta | A prerelease entry in [GitHub Releases](https://github.com/pascal-lab/vide/releases) | You want to try the next version early |
 | Nightly dev package | Artifacts from [GitHub Actions CI](https://github.com/pascal-lab/vide/actions/workflows/ci.yml), named like `vide-vscode-dev-<target>-<commit>` | You need to verify a specific commit or a latest fix |
 

docs/src/content/docs/en/changelog/v0-1-6.md

@@ -6,7 +6,7 @@ description: Vide v0.1.6 release notes.
 ## Vide Branding and Project Configuration
 
 - The project brand has moved from Vizsla to Vide across the Rust package, VS Code UI, docs, workflows, playground, and generated manifest schema. ([#161](https://github.com/pascal-lab/vide/pull/161))
-- The VS Code extension install ID is now `pascal-lab.vide`, matching the current extension package name and publisher.
+- The VS Code extension install ID is now `pascal-lab.vide-ls`, matching the current extension package name and publisher.
 - The default project manifest is now `vide.toml`, and the old manifest compatibility path has been removed. New projects and documentation examples should use `vide.toml`. ([#161](https://github.com/pascal-lab/vide/pull/161))
 
 ## Editing Experience

docs/src/content/docs/en/user-guide/vscode-installation.mdx

@@ -12,14 +12,14 @@ This page helps you install Vide and verify that it is working.
 For regular use, install the stable Marketplace extension.
 
 <ThinLinkCard
-  href="https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide"
+  href="https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide-ls"
   title="Visual Studio Marketplace"
   action="Open"
 >
-  Install stable Vide, extension ID: <code>pascal-lab.vide</code>
+  Install stable Vide, extension ID: <code>pascal-lab.vide-ls</code>
 </ThinLinkCard>
 
-You can also search for the display name `Vide` or the extension ID `pascal-lab.vide` in the VS Code Extensions view.
+You can also search for the display name `Vide` or the extension ID `pascal-lab.vide-ls` in the VS Code Extensions view.
 
 ![vide in extension market](../../assets/quick-start/extension-marketplace.png)
 

docs/src/content/docs/user-guide/vscode-installation.mdx

@@ -12,14 +12,14 @@ import ThinLinkCard from '../../../components/ThinLinkCard.astro';
 常规使用只需要安装 Marketplace 稳定版。以下卡片可以跳转到 VS Code 扩展市场：
 
 <ThinLinkCard
-  href="https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide"
+  href="https://marketplace.visualstudio.com/items?itemName=pascal-lab.vide-ls"
   title="Visual Studio Marketplace"
   action="打开"
 >
-  安装稳定版 Vide，扩展 ID：<code>pascal-lab.vide</code>
+  安装稳定版 Vide，扩展 ID：<code>pascal-lab.vide-ls</code>
 </ThinLinkCard>
 
-也可以在 VS Code 的扩展面板搜索显示名 `Vide`，或搜索扩展 ID `pascal-lab.vide`。
+也可以在 VS Code 的扩展面板搜索显示名 `Vide`，或搜索扩展 ID `pascal-lab.vide-ls`。
 
 ![vide in extension market](../assets/quick-start/extension-marketplace.png)
 

editors/vscode/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vide-ls",
-  "displayName": "Vide - A Verilog/SystemVerilog Language Support",
+  "displayName": "Vide - Verilog/SystemVerilog Language Support",
   "description": "%extension.description%",
   "version": "0.1.6",
   "publisher": "pascal-lab",