Add zh-cn translations (exclude blog)

astro.config.ts

@@ -34,26 +34,39 @@ export default defineConfig({
       sidebar: [
         {
           label: "Core Concepts",
+          translations: { 'zh-CN': '核心概念' },
           items: [
             // Each item here is one entry in the navigation menu.
-            { label: "Why Volar?", link: "/core-concepts/why-volar" },
-            { label: "Embedded Languages", link: "/core-concepts/embedded-languages" },
+            { label: "Why Volar?", link: "/core-concepts/why-volar", translations: { 'zh-CN': '为什么选择 Volar?' } },
+            { label: "Embedded Languages", link: "/core-concepts/embedded-languages", translations: { 'zh-CN': '嵌入式语言' } },
             { label: "Volar Labs", link: "/core-concepts/volar-labs" },
           ],
           // TODO: Use `autogenerate` once it allows you to order the sidebar
         },
         {
           label: "Guides",
+          translations: { 'zh-CN': '指南' },
           items: [
-            { label: "Your First Volar Language Server", link: "/guides/first-server" },
-            { label: "File Structure", link: "/guides/file-structure" },
+            { label: "Your First Volar Language Server", link: "/guides/first-server", translations: { 'zh-CN': '你的第一个 Volar 语言服务器' } },
+            { label: "File Structure", link: "/guides/file-structure", translations: { 'zh-CN': '文件结构' } },
           ],
         },
         {
           label: "Reference",
+          translations: { 'zh-CN': '参考' },
           autogenerate: { directory: "reference" },
         },
       ],
+      locales: {
+        root: {
+          label: 'English',
+          lang: 'en-US',
+        },
+        'zh-cn': {
+          label: '简体中文',
+          lang: 'zh-CN',
+        }
+      }
     }),
   ],
 });

src/components/starlight/SiteTitle.astro

@@ -3,9 +3,19 @@ import type { Props } from "@astrojs/starlight/props";
 import AstrolightSiteTitle from "@astrojs/starlight/components/SiteTitle.astro";
 
 const menuItems = [
-  { name: "Docs", href: "/core-concepts/why-volar" },
-  { name: "Blog", href: "/blog" },
+  { 
+    name: { 'en-US': "Docs", 'zh-CN': '文档' },
+    id: 'docs',
+    href: { 'en-US': "/core-concepts/why-volar", 'zh-CN': "/zh-cn/core-concepts/why-volar" }
+  },
+  { 
+    name: { 'en-US': "Blog", 'zh-CN': '博客' },
+    id: 'blog',
+    href: { 'en-US': "/blog", 'zh-CN': "/blog" }
+  },
 ];
+type DefinedI18nName = keyof typeof menuItems[number]['name']
+type DefinedHref = keyof typeof menuItems[number]['href'];
 
 function pathsMatch(pathA: string, pathB: string): boolean {
   return pathB.includes(pathA);
@@ -21,14 +31,14 @@ function pathsMatch(pathA: string, pathB: string): boolean {
     {
       menuItems.map((menuItem) => (
         <a
-          href={menuItem.href}
+          href={menuItem.href[Astro.currentLocale as DefinedHref] || menuItem.href['en-US']}
           aria-current={
-            (pathsMatch(encodeURI(menuItem.href), Astro.url.pathname) ||
-              (menuItem.name === "Docs" && Astro.props.hasSidebar)) &&
+            (pathsMatch(encodeURI(menuItem.href[Astro.currentLocale as DefinedHref] || menuItem.href['en-US']), Astro.url.pathname) ||
+              (menuItem.id === "Docs" && Astro.props.hasSidebar)) &&
             "page"
           }
         >
-          <span>{menuItem.name}</span>
+          <span>{menuItem.name[Astro.currentLocale as DefinedI18nName] || menuItem.name['en-US']}</span>
         </a>
       ))
     }

src/content/docs/core-concepts/volar-labs.mdx

@@ -9,7 +9,7 @@ Those pesky times where your mappings are off by one, or you're not sure what fi
 
 Volar Labs is a VS Code extension to help you debug your Volar-powered language server and client. **It's the editor tooling for the people who make the editor tooling.**
 
-![A screenshot of Volar Labs, showing the mappings between the different parts of a file being inspected](./volar-labs-1.png)
+![A screenshot of Volar Labs, showing the mappings between the different parts of a file being inspected](../../../assets/volar-labs-1.png)
 
 ## Installation
 

src/content/docs/zh-cn/core-concepts/embedded-languages.mdx

@@ -0,0 +1,12 @@
+---
+title: 嵌入式语言
+description: VolarJS 对嵌入式语言提供了顶级支持，并可以大大简化在文件不同部分之间实现编辑功能所需的映射。
+---
+
+如今，许多编程语言都是由其他编程语言组成的。最著名的例子是 HTML, 在其中你会发现 JavaScript 和 CSS 分别位于 `<script>` 和 `<style>` 块中。除了这些，你甚至可以在 HTML 元素的 `style` 属性中找到一些内联 CSS, 在 HTML 元素的 `onclick`（和其他事件）属性中找到一些内联 JavaScript。
+
+实际上，这种行为的例子相当多，尤其是在 Web 上：[Vue 的单文件组件](https://vuejs.org/guide/scaling-up/sfc.html) 中不同的 Block, [Svelte 组件](https://svelte.dev/docs/svelte-components) 中的部分，[Astro 组件](https://docs.astro.build/en/core-concepts/astro-components/) 中的前置语法和基于 JSX 的组件模板，[Markdown](https://spec.commonmark.org/0.29/#fenced-code-blocks) 中的不同块（更不用说常见的 YAML 前置语法）, 等等。
+
+因此, Volar 是基于这样一个原则构建的: 你的语言很可能会有这样的嵌入式语言, 并且对它们提供了顶级支持。值得注意的是, Volar 可以大大简化在文件不同部分之间实现编辑功能所需的映射。
+
+**如果你的语言没有嵌入式语言：这完全没问题！** Volar 仍然可以很好地为你工作，并且如果有一天你决定向你的语言添加嵌入式语言，它将随时准备好。

src/content/docs/zh-cn/core-concepts/volar-labs.mdx

@@ -0,0 +1,26 @@
+---
+title: Volar Labs
+description: Volar Labs 是一个 vscode 扩展，用于帮助你调试基于 Volar 的语言服务器和客户端。
+---
+
+有一个通用的框架来构建编辑器工具有很多好处。它允许我们共享代码，允许我们共享知识，最重要的是，它允许我们分享构建编辑器工具的痛苦。
+
+那些恼人的时刻，你的映射偏移了一位，或者你不确定哪些文件被包含在你的项目中，或者你的生成的虚拟代码中有语法错误。我们都知道这些时刻，如果你不知道，你可能很快就会知道。
+
+Volar Labs 是一个 VS Code 扩展，用于帮助你调试基于 Volar 的语言服务器和客户端。**它是为那些制作编辑器工具的人提供的编辑器工具。**
+
+![一张 Volar Labs 的截图，显示了正在检查的文件不同部分之间的映射](../../../../assets/volar-labs-1.png)
+
+## 安装
+
+Volar Labs 可以在 VS Code Marketplace 中找到。你可以通过在 VS Code 的扩展选项卡中搜索 `volarjs-labs` 来安装它，或者通过 [点击这里](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volarjs-labs) 来安装。
+
+## 功能
+
+- **列出 Volar 服务器** - 查看在你的 VS Code 实例中运行的所有 Volar 服务器。
+- **检查项目** - 查看包含在你的项目中的文件。
+- **检查虚拟文件** - 查看由你的服务器生成的虚拟源代码。
+- **虚拟源映射** - 查看虚拟源代码与原始源代码之间的映射。
+- **TS 内存使用情况** - 查看 TypeScript 使用了多少内存。
+- ... 更多！
+

src/content/docs/zh-cn/core-concepts/why-volar.mdx

@@ -0,0 +1,10 @@
+---
+title: 为什么选择 Volar?
+description: 介绍 Volar 的优势, 以及为什么你会想要使用它。
+---
+
+在过去的几年中，程序员越来越依赖他们的代码编辑器来提供有用的上下文信息和代码提示。悬停信息、诊断和自动补全等功能现在已经成为用户理所当然的期望，无论他们使用什么编程语言。
+
+然而，实现这些功能不仅不是一项简单的任务，而且通常也不是语言和框架作者的优先事项。即使你有时间和资源来实现这些功能，正确地做到这一点也很困难，需要相当多领域的知识，并且可能需要花费大量时间来维护。
+
+**Volar 旨在通过处理所有繁重的工作来解决这个问题。** Volar 为你提供了构建出色编辑体验所需的所有工具，而无需担心细节问题，这样你就可以专注于最重要的事情：让你的语言或框架变得更棒!

src/content/docs/zh-cn/guides/file-structure.mdx

@@ -0,0 +1,63 @@
+---
+title: Volar 项目的文件结构
+description: 一个 Volar 项目文件结构的指南。
+---
+
+本指南将向您展示 Volar 项目的组织方式以及项目中不同文件的作用。
+
+## 文件和目录结构
+
+由于需要多个包来运行语言服务器和 VS Code 扩展，Volar 项目通常位于 monorepo 中。这不是一个要求，但它是最常见的设置，也是设置 Volar 项目的推荐方式。
+
+### 服务器 (`packages/language-server`)
+
+与语言服务器相关的所有文件都位于 `packages/language-server` 目录中。
+
+- `package.json` — 语言服务器包的配置，包括其依赖项和主入口点。
+- `bin/server.js` — 语言服务器二进制文件的入口点。此文件负责启动语言服务器。
+- `src/index.ts` — 语言服务器的主文件，设置服务器及其功能。
+- `src/language.ts` — 定义语言功能并提供处理项目文件的方法。
+
+### 客户端 (`packages/vscode`)
+
+与 VS Code 扩展相关的所有文件都位于 `packages/vscode` 目录中。
+
+- `package.json` — VS Code 扩展包的配置，包括其依赖项、主入口点和激活事件。
+- `src/extension.ts` — VS Code 扩展的主文件，设置客户端并激活功能。
+- `scripts/build.js` — 用于构建 VS Code 扩展的脚本。
+
+## 完整示例
+
+您的 Volar 项目在大多数情况下将类似于以下内容：
+
+import { FileTree } from "@astrojs/starlight/components";
+
+<FileTree>
+
+- .vscode/
+  - launch.json
+  - tasks.json
+- packages/
+  - language-server/
+    - bin/
+      - server.js
+    - src/
+      - index.ts
+      - ...
+    - package.json
+    - tsconfig.json
+  - vscode/
+    - scripts/
+      - build.js
+    - src/
+      - extension.ts
+      - ...
+    - .vscodeignore
+    - package.json
+    - tsconfig.json
+- package.json
+- tsconfig.json
+
+</FileTree>
+
+一些通用文件，例如 `README.md`，为了简洁起见被省略了。