diff --git a/docs/astro.config.mjs b/docs/astro.config.mjs index 4cd529fa0..0ec6cef0c 100644 --- a/docs/astro.config.mjs +++ b/docs/astro.config.mjs @@ -10,7 +10,7 @@ export default defineConfig({ integrations: [ starlight({ title: { - 'zh-CN': 'Vide 文档', + 'zh-CN': 'VIDE', en: 'Vide Docs', }, description: diff --git a/docs/src/assets/homepage-features/completion1.png b/docs/src/assets/homepage-features/completion1.png new file mode 100644 index 000000000..58faa41bc Binary files /dev/null and b/docs/src/assets/homepage-features/completion1.png differ diff --git a/docs/src/assets/homepage-features/goto-def.png b/docs/src/assets/homepage-features/goto-def.png new file mode 100644 index 000000000..f7c0b93af Binary files /dev/null and b/docs/src/assets/homepage-features/goto-def.png differ diff --git a/docs/src/assets/homepage-features/hover-on-instance.png b/docs/src/assets/homepage-features/hover-on-instance.png new file mode 100644 index 000000000..7eb0beb77 Binary files /dev/null and b/docs/src/assets/homepage-features/hover-on-instance.png differ diff --git a/docs/src/assets/homepage-features/hover-on-literal.png b/docs/src/assets/homepage-features/hover-on-literal.png new file mode 100644 index 000000000..9f5356b89 Binary files /dev/null and b/docs/src/assets/homepage-features/hover-on-literal.png differ diff --git a/docs/src/assets/homepage-features/hover-on-module.png b/docs/src/assets/homepage-features/hover-on-module.png new file mode 100644 index 000000000..c1b8edae1 Binary files /dev/null and b/docs/src/assets/homepage-features/hover-on-module.png differ diff --git a/docs/src/assets/homepage-features/inlay.png b/docs/src/assets/homepage-features/inlay.png new file mode 100644 index 000000000..9325af07b Binary files /dev/null and b/docs/src/assets/homepage-features/inlay.png differ diff --git a/docs/src/assets/homepage-features/missing-port.png b/docs/src/assets/homepage-features/missing-port.png new file mode 100644 index 000000000..da1563220 Binary files /dev/null and b/docs/src/assets/homepage-features/missing-port.png differ diff --git a/docs/src/assets/homepage-features/peek-def.png b/docs/src/assets/homepage-features/peek-def.png new file mode 100644 index 000000000..b38767b6c Binary files /dev/null and b/docs/src/assets/homepage-features/peek-def.png differ diff --git a/docs/src/assets/homepage-features/rename.png b/docs/src/assets/homepage-features/rename.png new file mode 100644 index 000000000..5bb7d1ae6 Binary files /dev/null and b/docs/src/assets/homepage-features/rename.png differ diff --git a/docs/src/assets/landing.css b/docs/src/assets/landing.css index da5916a86..17c57266e 100644 --- a/docs/src/assets/landing.css +++ b/docs/src/assets/landing.css @@ -1,11 +1,11 @@ :root { - --vide-accent-hsl: 186, 74%, 52%; + --vide-accent-hsl: 200, 100%, 50%; --vide-accent: hsl(var(--vide-accent-hsl)); --vide-overlay: hsla(var(--vide-accent-hsl), 0.18); } :root[data-theme='light'] { - --vide-accent-hsl: 190, 84%, 38%; + --vide-accent-hsl: 202, 92%, 44%; --vide-overlay: hsla(var(--vide-accent-hsl), 0.14); } @@ -32,18 +32,48 @@ padding-block-start: clamp(3rem, 8vw, 7rem); } -[data-has-hero] .hero h1 { - letter-spacing: 0; +[data-has-hero] .hero .stack { + gap: clamp(2.25rem, 4vw, 3.5rem); +} + +@media (min-width: 50rem) { + [data-has-hero] .hero { + grid-template-columns: minmax(0, 1fr); + } + + [data-has-hero] .hero .stack, + [data-has-hero] .hero .copy { + align-items: flex-start; + text-align: start; + width: 100%; + } + + [data-has-hero] .hero .actions { + justify-content: flex-start; + } } [data-has-hero] .hero .tagline { color: var(--sl-color-gray-2); } -[data-has-hero] .sl-link-button.primary { +[data-has-hero] .hero .actions { + gap: 1.25rem; +} + +[data-has-hero] .hero .actions .sl-link-button.primary { + color: #fff; box-shadow: 0 0 2rem hsla(var(--vide-accent-hsl), 0.28); } +[data-has-hero] .hero .actions .sl-link-button.primary:hover { + color: #fff; +} + +[data-has-hero] .hero .actions .sl-link-button.primary p { + color: inherit; +} + [data-has-hero] .card { background: linear-gradient(180deg, hsla(var(--vide-accent-hsl), 0.08), transparent), diff --git a/docs/src/components/HomepageComparisonSection.astro b/docs/src/components/HomepageComparisonSection.astro new file mode 100644 index 000000000..1ec46f9b6 --- /dev/null +++ b/docs/src/components/HomepageComparisonSection.astro @@ -0,0 +1,25 @@ +--- +import HomepageComparisonTable from './HomepageComparisonTable.astro'; +import { homepageComparison } from '../data/homepage'; +--- + +
+

特性对比

+ +

+ 当 EDA 的编辑体验仍停留在接近记事本的阶段时，Vide 已经把现代 IDE 体验带进了 HDL 世界。
+ 从「定义跳转」到「引用搜索」，从「悬停提示」到「代码补全」，Vide 提供了完整的 Verilog/SystemVerilog 开发体验。 +

+ + +
+ + diff --git a/docs/src/components/HomepageComparisonTable.astro b/docs/src/components/HomepageComparisonTable.astro new file mode 100644 index 000000000..6cc13b0fe --- /dev/null +++ b/docs/src/components/HomepageComparisonTable.astro @@ -0,0 +1,167 @@ +--- +import type { + ComparisonFeatureKey, + ComparisonFeatureValue, + ComparisonProduct, +} from '../data/homepage'; + +type FeatureStatus = 'yes' | 'partial' | 'no'; + +interface FeatureColumn { + key: ComparisonFeatureKey; + label: string; +} + +interface Props { + columns: readonly FeatureColumn[]; + products: readonly ComparisonProduct[]; +} + +const { columns, products } = Astro.props as Props; + +const statusMap: Record = { + yes: { className: 'vide-comparison-table__true', label: 'Yes', symbol: '✓' }, + partial: { className: 'vide-comparison-table__partial', label: 'Partial', symbol: '△' }, + no: { className: 'vide-comparison-table__false', label: 'No', symbol: '✕' }, +}; + +const getStatus = (value: ComparisonFeatureValue): FeatureStatus => { + if (value === 'partial') return 'partial'; + return value ? 'yes' : 'no'; +}; +--- + + + + + + { + products.map((product) => ( + + )) + } + + + + { + columns.map((column) => ( + + + {products.map((product) => { + const status = statusMap[getStatus(product.features[column.key])]; + const isBeta = product.betaFeatureKeys?.includes(column.key); + return ( + + ); + })} + + )) + } + +
+ + {product.name} + +
+ {product.meta} +
{column.label} + + {status.symbol} + {isBeta && BETA} + +
+ + diff --git a/docs/src/components/HomepageCta.astro b/docs/src/components/HomepageCta.astro new file mode 100644 index 000000000..a1b12f5cf --- /dev/null +++ b/docs/src/components/HomepageCta.astro @@ -0,0 +1,48 @@ +--- +import { LinkButton } from '@astrojs/starlight/components'; +import { homepageCtaActions } from '../data/homepage'; +--- + +
+

立刻体验

+

直接打开文档快速上手，或者先去 Playground 里实际试一遍补全、跳转和诊断体验。

+
+ { + homepageCtaActions.map((action) => ( + + {action.label} + + )) + } +
+
+ + diff --git a/docs/src/components/HomepageFeatureCarousel.astro b/docs/src/components/HomepageFeatureCarousel.astro new file mode 100644 index 000000000..85666089f --- /dev/null +++ b/docs/src/components/HomepageFeatureCarousel.astro @@ -0,0 +1,339 @@ +--- +import { homepageFeatures } from '../data/homepage'; + +--- + +
+ { + homepageFeatures.map((feature, featureIndex) => ( +
+
+
+
+ {feature.images.map((image, imageIndex) => ( +
+ {image.alt} +
+ ))} +
+
+ + {feature.images.length > 1 && ( +
+ +
+ 1 + / + {feature.images.length} +
+ +
+ )} +
+ +
+

{feature.eyebrow}

+

{feature.title}

+

+

+
+ )) + } +
+ + + + diff --git a/docs/src/components/HomepageFeatureSection.astro b/docs/src/components/HomepageFeatureSection.astro new file mode 100644 index 000000000..55907b5a2 --- /dev/null +++ b/docs/src/components/HomepageFeatureSection.astro @@ -0,0 +1,23 @@ +--- +import HomepageFeatureCarousel from './HomepageFeatureCarousel.astro'; +--- + +
+

专注 RTL 设计
把繁琐细节交给 Vide

+ +
+ + diff --git a/docs/src/components/HomepageHeroStyles.astro b/docs/src/components/HomepageHeroStyles.astro new file mode 100644 index 000000000..acf2cac3e --- /dev/null +++ b/docs/src/components/HomepageHeroStyles.astro @@ -0,0 +1,25 @@ + diff --git a/docs/src/content/docs/index.mdx b/docs/src/content/docs/index.mdx index a454d1383..080ac4e42 100644 --- a/docs/src/content/docs/index.mdx +++ b/docs/src/content/docs/index.mdx @@ -1,119 +1,43 @@ --- -title: Vide 文档 +title: VIDE 文档 description: Verilog/SystemVerilog 语言服务器、VS Code 扩展和 Playground 文档。 template: splash editUrl: false lastUpdated: false hero: - title: Vide - tagline: 面向 Verilog 和 SystemVerilog 的语言服务器与 VS Code 扩展，把 RTL 开发常用的 IDE 能力接入编辑器。 + title: | + Vide + 现代 SystemVerilog 开发环境 + 让硬件设计像编写软件一样丝滑顺手 actions: - text: 快速开始 link: ./user-guide/quick-start/ icon: right-arrow - - text: 打开 Playground + - text: 在线体验 link: ./playground/ icon: rocket variant: secondary - - text: 查看 GitHub + - text: GitHub 仓库 link: https://github.com/pascal-lab/vide icon: external variant: minimal --- -import { Card, CardGrid, LinkCard } from '@astrojs/starlight/components'; +import HomepageComparisonSection from '../../components/HomepageComparisonSection.astro'; +import HomepageCta from '../../components/HomepageCta.astro'; +import HomepageFeatureSection from '../../components/HomepageFeatureSection.astro'; +import HomepageHeroStyles from '../../components/HomepageHeroStyles.astro'; - - - 读取打开的 RTL 文件，并在需要时根据项目配置文件、include 目录和宏定义建立更完整的工程语义。 - - - 安装扩展后打开 RTL 目录即可使用语法高亮、命令、状态栏和随扩展打包的后台服务。 - - - 支持语义诊断、跳转到声明/定义、引用查找、文档高亮、符号大纲和折叠。 - - - 提供补全、悬停说明、签名帮助、重命名、格式化、代码操作和行内提示。 - - - -## 选择入口 - - - - - - - - -## 常用路径 - - - - - - - - - - -## 项目组成 - -Vide 由两个部分组成： +--- -- `vide`：Rust 编写的 LSP 服务器，负责读取工程、解析源文件、维护语义信息并响应编辑器请求。 -- `editors/vscode`：VS Code 扩展，负责贡献 Verilog/SystemVerilog 语言配置、语法高亮、命令、状态栏，并启动语言服务器。 + -后续我们会支持更多编辑器。 + -## 支持的文件 +--- -VS Code 扩展当前识别这些文件类型： + -| 语言 | 扩展名 | -| --- | --- | -| Verilog | `.v`, `.vh` | -| SystemVerilog | `.sv`, `.svh`, `.svi` | +--- -服务器加载工程时还会读取 `.map` 文件，以支持库映射等工程输入。 + diff --git a/docs/src/data/homepage.ts b/docs/src/data/homepage.ts new file mode 100644 index 000000000..da8f7d0c8 --- /dev/null +++ b/docs/src/data/homepage.ts @@ -0,0 +1,205 @@ +import type { ImageMetadata } from 'astro'; + +import completionImage from '../assets/homepage-features/completion1.png'; +import gotoDefImage from '../assets/homepage-features/goto-def.png'; +import hoverInstanceImage from '../assets/homepage-features/hover-on-instance.png'; +import hoverLiteralImage from '../assets/homepage-features/hover-on-literal.png'; +import hoverModuleImage from '../assets/homepage-features/hover-on-module.png'; +import inlayImage from '../assets/homepage-features/inlay.png'; +import missingPortImage from '../assets/homepage-features/missing-port.png'; +import peekDefImage from '../assets/homepage-features/peek-def.png'; +import renameImage from '../assets/homepage-features/rename.png'; + +export type HomepageFeatureLayout = 'image-left' | 'image-right'; + +export interface HomepageFeatureImage { + src: ImageMetadata; + alt: string; +} + +export interface HomepageFeature { + layout: HomepageFeatureLayout; + eyebrow: string; + title: string; + description: string; + images: HomepageFeatureImage[]; +} + +export type ComparisonFeatureValue = boolean | 'partial'; + +const accent = (text: string) => + `${text}`; + +export const homepageFeatures: HomepageFeature[] = [ + { + layout: 'image-left', + eyebrow: 'Navigation', + title: '符号导航', + description: `在 Vide 中使用${accent('定义跳转')}和${accent('引用搜索')}在模块、实例和端口之间快速定位，让开发者不用离开当前上下文也能追清 RTL 连接关系。

写 RTL，不再只能依靠 Ctrl + F。`, + images: [ + { src: gotoDefImage, alt: 'Go to Definition 截图' }, + { src: peekDefImage, alt: 'Peek Definition 截图' }, + ], + }, + { + layout: 'image-right', + eyebrow: 'Insight', + title: '代码理解', + description: `利用 Vide 的${accent('悬停信息')}和${accent('代码注解')}在一个窗口中实时查看模块、字面量与端口连接信息，减少窗口切换的负担，让开发者更专注于 RTL 设计本身。`, + images: [ + { src: hoverModuleImage, alt: '模块 Hover 信息截图' }, + { src: hoverInstanceImage, alt: '例化 Hover 信息截图' }, + { src: hoverLiteralImage, alt: '字面量 Hover 信息截图' }, + { src: inlayImage, alt: 'Inlay Hints 截图' }, + ], + }, + { + layout: 'image-left', + eyebrow: 'Completion', + title: '精准补全', + description: `Vide 的${accent('补全')}机制理解当前的代码上下文，能在实例化、端口连接和其他的编辑位置给出更贴近工程语义的建议，更能通过${accent('代码片段')}提供结构化补全。`, + images: [{ src: completionImage, alt: '模块和端口补全截图' }], + }, + { + layout: 'image-right', + eyebrow: 'Refactoring', + title: '自动重构', + description: `通过${accent('自动重构')}和${accent('重命名')}，把端口连线、信号重命名、转换进制这些繁琐的细节交给 Vide 完成，解放开发者的重构体验。`, + images: [ + { src: missingPortImage, alt: '补全缺失端口 Code Action 截图' }, + { src: renameImage, alt: '重命名符号截图' }, + ], + }, +]; + +export const comparisonColumns = [ + { key: 'definition', label: '定义跳转' }, + { key: 'references', label: '引用搜索' }, + { key: 'hover', label: '悬停信息' }, + { key: 'completion', label: '代码补全' }, + { key: 'rename', label: '重命名' }, + { key: 'syntaxHighlighting', label: '语法高亮' }, + { key: 'semanticHighlighting', label: '语义高亮' }, + { key: 'inlayHints', label: '代码注解' }, + { key: 'documentSymbols', label: '符号大纲' }, + { key: 'folding', label: '折叠' }, + { key: 'codeActions', label: '自动重构' }, + { key: 'diagnostics', label: '实时诊断' }, + { key: 'signatureHelp', label: '签名提示' }, + { key: 'selectionRange', label: '语义选区' }, +] as const; + +export type ComparisonFeatureKey = (typeof comparisonColumns)[number]['key']; + +export interface ComparisonProduct { + name: string; + meta: string; + highlighted?: boolean; + betaFeatureKeys?: readonly ComparisonFeatureKey[]; + features: Record; +} + +export const comparisonProducts: ComparisonProduct[] = [ + { + name: 'Quartus', + meta: 'Intel', + features: { + syntaxHighlighting: true, + definition: false, + references: false, + hover: false, + completion: false, + rename: false, + semanticHighlighting: false, + signatureHelp: false, + documentSymbols: 'partial', + folding: true, + selectionRange: false, + codeActions: false, + inlayHints: false, + diagnostics: false, + }, + }, + { + name: 'Vivado', + meta: 'Xilinx', + features: { + syntaxHighlighting: true, + definition: false, + references: false, + hover: false, + completion: false, + rename: false, + semanticHighlighting: false, + signatureHelp: false, + documentSymbols: false, + folding: false, + selectionRange: false, + codeActions: false, + inlayHints: false, + diagnostics: false, + }, + }, + { + name: 'Verible', + meta: 'Most-Starred OSS', + features: { + syntaxHighlighting: true, + definition: 'partial', + references: 'partial', + hover: false, + completion: false, + rename: false, + semanticHighlighting: false, + signatureHelp: false, + documentSymbols: true, + folding: false, + selectionRange: false, + codeActions: 'partial', + inlayHints: false, + diagnostics: true, + }, + }, + { + name: 'Vide', + meta: 'Ours', + highlighted: true, + betaFeatureKeys: ['diagnostics'], + features: { + syntaxHighlighting: true, + definition: true, + references: true, + hover: true, + completion: true, + rename: true, + semanticHighlighting: true, + signatureHelp: true, + documentSymbols: true, + folding: true, + selectionRange: true, + codeActions: true, + inlayHints: true, + diagnostics: true, + }, + }, +]; + +export const homepageComparison = { + columns: comparisonColumns, + products: comparisonProducts, +}; + +export const homepageCtaActions = [ + { + href: './user-guide/quick-start/', + label: '快速开始', + variant: 'primary', + icon: 'right-arrow', + }, + { + href: './playground/', + label: '在线体验', + variant: 'secondary', + icon: 'rocket', + }, +] as const;