docs: add Chinese translation (tomalaforge#1112)

* docs: add Chinese translation * docs: translate checkout-answers.md * docs: guide、leaderboard translate * docs: translate 1-projection

Author: EnochGao

docs/astro.config.mjs

@@ -23,6 +23,10 @@ export const locales = {
  ru: {
  label: 'Русский',
  lang: 'ru'
+ },
+ 'zh-cn': {
+ label: '简体中文',
+ lang: 'zh-CN'
  }
 };
 
@@ -51,7 +55,8 @@ export default defineConfig({
  es: 'Guías',
  fr: 'Guides',
  pt: 'Guias',
- ru: 'Руководство'
+ ru: 'Руководство',
+ 'zh-CN': '指南'
  }
  },
  {
@@ -64,7 +69,8 @@ export default defineConfig({
  es: 'Leaderboard',
  fr: 'Leaderboard',
  pt: 'Tabela de Classificação',
- ru: 'Leaderboard'
+ ru: 'Leaderboard',
+ 'zh-CN': '排行榜'
  }
  },
  {
@@ -76,7 +82,8 @@ export default defineConfig({
  es: 'Desafíos',
  fr: 'Challenges',
  pt: 'Desafios',
- ru: 'Задачи'
+ ru: 'Задачи',
+ 'zh-CN': '挑战'
  }
  }],
  head: [{

docs/src/components/CommentSection.astro

@@ -3,7 +3,8 @@ import type { Props } from '@astrojs/starlight/props';
 
 const {lang, locale} = Astro.props;
 
-const shortLang = lang.split('-')[0];
+// Chinese needs to `zh-CN`
+// const shortLang =lang.split('-')[0];
 ---
 
 <div class="separator"></div>
@@ -19,7 +20,7 @@ const shortLang = lang.split('-')[0];
  data-emit-metadata="0"
  data-input-position="bottom"
  data-theme="preferred_color_scheme"
- data-lang={shortLang}
+ data-lang={lang}
  data-loading="lazy"
  crossorigin="anonymous"
  async>

docs/src/content/docs/zh-cn/challenges/angular/1-projection.md

@@ -0,0 +1,52 @@
+---
+title: 🟢 投影
+description: 挑战1是学习如何通过组件投影DOM元素
+author: thomas-laforge
+contributors:
+ - tomalaforge
+ - jdegand
+ - dmmishchenko
+ - kabrunko-dev
+ - svenson95
+challengeNumber: 1
+command: angular-projection
+blogLink: https://medium.com/@thomas.laforge/create-a-highly-customizable-component-cc3a9805e4c5
+videoLinks:
+ - link: https://www.youtube.com/watch?v=npyEyUZxoIw&ab_channel=ArthurLannelucq
+ alt: Projection video by Arthur Lannelucq
+ flag: FR
+ - link: https://www.youtube.com/watch?v=yNrfvu7vTa4
+ alt: Projection video by Amos Lucian IsailaAmos Lucian Isaila
+ flag: ES
+sidebar:
+ order: 1
+---
+
+## 信息
+
+在Angular中，内容投影是一种创建高度可定制组件的强大技术。利用和理解<b>ng-content</b>和<b>ngTemplateOutlet</b>的概念可以显著增强你创建可共享组件的能力
+
+你可以在[这里](https://angular.dev/guide/components/content-projection)了解<b>ng-content</b> 的所有内容，从简单的投影到更复杂的投影。
+
+要了解<b>ngTemplateOutlet</b>，你可以在[这里](https://angular.io/api/common/NgTemplateOutlet)找到API文档和一些基本示例。
+
+有了这两个工具，您现在就可以接受挑战了。
+
+## 说明
+
+您将从一个功能齐全的应用程序开始，该应用程序包括一个包含教师卡和学生卡的仪表盘。目标是实现城市卡。
+
+虽然应用程序可以工作，但开发人员的体验还远没有达到最佳。每次需要实现新卡时，都必须修改`card.component.ts` 。在实际项目中，该组件可以在许多应用程序之间共享。该挑战的目标是创建一个 `CardComponent` ，它可以在不做任何修改的情况下进行自定义。一旦你创建了这个组件，你就可以开始实现 `CityCardComponent` ，并确保你没有触碰 `CardComponent` 。
+
+## 约束
+
+- <b>必须</b>重构 `CardComponent` 和 `ListItemComponent`。
+- `NgFor` 指令必须声明并保持在 `CardComponent` 内。你可能想把它移到 `ParentCardComponent` ，比如 `TeacherCardComponent` 。
+- `CardComponent` 不应包含任何 `NgIf` 或 `NgSwitch` 。
+- CSS:尽量避免使用 `::ng-deep` 。寻找更好的方法来处理CSS样式。
+
+## 挑战奖励
+
+- 尝试使用新的内置控制流语法for循环和条件语句(文档在[这里](https://angular.dev/guide/templates/control-flow))
+- 使用signal API来管理组件状态(文档在[这里](https://angular.dev/guide/signals))
+- 要引用模板，请使用指令而不是魔术字符串([魔术字符串有什么问题?](https://softwareengineering.stackexchange.com/a/365344))

docs/src/content/docs/zh-cn/guides/checkout-answer.md

@@ -0,0 +1,57 @@
+---
+title: 查看某人的回答
+description: 查看某人的回答指南
+contributors:
+ - tomalaforge
+ - gsgonzalez88
+ - 1fbr
+ - jdegand
+sidebar:
+ order: 3
+---
+
+所有Angular Challenges的答案都将以pull request (PR)的形式呈现。要查看和跟踪它们，请浏览GitHub上的**文件更改**页面。但是，如果您不熟悉界面，理解和遵循此过程可能并不简单。在许多情况下，您可能更喜欢签出分支并在您首选的IDE中检查解决方案。
+
+## 安装 GitHub CLI
+
+在[这里](https://github.com/cli/cli#installation)按照操作系统的说明操作。
+
+## 查看本地其他人的PR
+
+### 同步存储库
+
+首先，您需要同步您的分支，以确保它与分支存储库是最新的。
+
+这可以通过点击你的分支主页上的**Sync fork**按钮来实现。
+
+![Sync project header](../../../../assets/fork-sync.png)
+
+上图显示我的分支落后于主分支 8 个提交，我需要将其同步才能保持最新。
+
+![Sync project update modal](../../../../assets/sync-fork-update.png)
+
+### 本地检出查看
+
+导航到你想在本地查看的PR并获取其ID。你可以在PR的标题中找到它(如下所示)。
+
+![PR header](../../../../assets/PR-header.png)
+
+接下来，切换到项目目录中的任意终端，并运行以下命令:
+
+```bash
+gh pr checkout <ID>
+```
+
+如果你不记得这个命令，点击标题右侧的Code按钮，你可以轻松地复制/粘贴这个命令。
+
+![PR code modal](../../../../assets/PR-code-btn-modal.png)
+
+:::note[注意]
+如果命令不起作用或失败，GitHub CLI会引导你完成整个过程。
+:::
+
+🔥您现在可以在本地浏览解决方案并提供服务以测试它。🔥
+
+### 使用GitHub Codespaces检出查看
+
+你可以使用GitHub Codespaces查看任何**打开**的PR。点击code按钮后，你可以导航到codespaces标签，然后点击绿色按钮，在PR的分支上创建一个codesace。codespace初始化后，就可以启动应用了。

docs/src/content/docs/zh-cn/guides/contribute.md

@@ -0,0 +1,25 @@
+---
+title: 贡献
+description: 贡献指南
+contributors:
+ - tomalaforge
+ - jdegand
+sidebar:
+ order: 4
+---
+
+你可以通过以下多种方式为这个存储库做出贡献：
+
+🔥 依照以下[指示](/guides/create-challenge)创建一个新的挑战。
+
+🔥 接受挑战并提交结果(指南 [在此](/guides/resolve-challenge))。
+
+🔥 对他人提出的解决方案给予有建设性的、热情的反馈。
+
+🔥 校正文档中的拼写错误。
+
+🔥 协助翻译文档。
+
+🔥 提交问题建议新的挑战想法或报告错误。
+
+🔥 [在此](https://github.com/sponsors/tomalaforge)赞助该项目。

docs/src/content/docs/zh-cn/guides/create-challenge.md

@@ -0,0 +1,68 @@
+---
+title: 创建你自己的挑战
+description: 创建你自己的挑战指南
+contributors:
+ - tomalaforge
+ - gsgonzalez88
+ - jdegand
+sidebar:
+ order: 5
+---
+
+你有一个想法想要分享，你正在努力解决某个私人项目或业余项目中的一个有趣的bug，或者你发现的一个Angular技巧。所有这些可能性都是创建挑战并与他人分享解决方案的良好起点。
+
+如何开始创造这些挑战?
+
+## 样板设置
+
+为了简化这个过程，我创建了一个Nx生成器，它将为您设置所有样板文件。运行它最简单的方法是使用Nx控制台:转到<b>Nx Console > generate > @angular-challenges/cli - challenge</b>。
+
+或者，你也可以利用IDE的 [Nx Console extension](https://nx.dev/getting-started/editor-setup)来生成文件
+
+### 参数
+
+#### 强制参数
+
+- <b>title</b>: 你想给你的挑战的标题。
+ :::note[注意]
+ 标题长度不能超过25个字符。
+ :::
+
+- <b>author</b>: 你的名字
+
+ :::note[注意]
+ 你的名字应该使用烤肉串格式(如： john-doe)
+ :::
+
+ :::note[注意]
+ 别忘了在以你名字命名的文件中更新你的个人信息
+ :::
+
+- <b>challengeDifficulty</b>:你认为你的挑战有多大的难度。有三个难度级别:🟢简单/🟠中等/🔴困难
+
+- <b>docRepository</b>: 你挑战的类别是Nx、Angular、Angular性能、Rxjs、NgRx、Typescript、表单或信号。
+
+#### 可选参数
+
+- <b>challengeNumber</b>: 当有挑战提交时，可以指定挑战号。(如果为空，该数字将是下一个数字)。
+- <b>directory</b>: 如果您希望您的应用程序位于 `apps` 中的特定文件夹中。
+- <b>addTest</b>: 如果您想添加测试配置。
+
+### 创建了什么?
+
+- 生成器将创建新应用程序运行所需的所有文件。所有这些文件都将创建在 `apps/${directory}/${name}` 中
+- 将在 `docs/src/content/docs/challenges/${docRepository}` 中创建一个带有最小设置的Markdown文件。
+
+## 创造挑战
+
+剩下唯一要做的就是创造挑战。 🚀
+
+:::danger[危险]
+不要忘记更新文档以介绍您的挑战并提供说明。
+:::
+
+轮到你行动了!!💪
+
+## 解决方案提交
+
+大约一周后，提供一个针对您的挑战的解决方案的pull request。

docs/src/content/docs/zh-cn/guides/faq.md

@@ -0,0 +1,22 @@
+---
+title: 常见问题解答
+description: 回答问题
+contributors:
+ - tomalaforge
+ - jdegand
+sidebar:
+ order: 7
+---
+
+<details>
+ <summary>
+ 为什么我的应用程序没有启动，或者为什么我在运行`nx serve`时在终端中遇到错误?
+ </summary>
+ 
+ 大多数情况下，出现这个问题是因为你的node_modules已经过时了，你需要通过运行 `npm ci` 来更新它们。
+
+如果安装失败，可以通过 `rm -rf node_modules` 或 `npx npkill` 删除node_modules文件夹，然后重新运行 `npm ci` 来解决。
+
+如果问题仍然存在，请在[这里](https://github.com/tomalaforge/angular-challenges/issues/new)报告问题。
+
+</details>

docs/src/content/docs/zh-cn/guides/getting-started.md

@@ -0,0 +1,83 @@
+---
+title: 开始
+description: 关于如何开始Angular挑战的指南。
+contributors:
+ - tomalaforge
+ - 1fbr
+ - ho-ssain
+ - jdegand
+sidebar:
+ order: 1
+---
+
+要开始使用 <b>Angular Challenges</b>，请按照以下步骤操作：
+
+## 创建一个GitHub账户
+
+如果你想提交答案，你需要拥有自己的GitHub账户。此外，拥有GitHub账户总是有益的，而且是免费的。
+
+## Fork GitHub 项目
+
+导航至 [Angular Challenges Repository](https://github.com/tomalaforge/angular-challenges) 在页面顶部点击 <span class="github-neutral-btn"> <svg aria-hidden="true" height="16" viewBox="0 0 16 16" version="1.1" width="16" data-view-component="true" class="mr-2 octicon octicon-repo-forked">
+<path d="M5 5.372v.878c0 .414.336.75.75.75h4.5a.75.75 0 0 0 .75-.75v-.878a2.25 2.25 0 1 1 1.5 0v.878a2.25 2.25 0 0 1-2.25 2.25h-1.5v2.128a2.251 2.251 0 1 1-1.5 0V8.5h-1.5A2.25 2.25 0 0 1 3.5 6.25v-.878a2.25 2.25 0 1 1 1.5 0ZM5 3.25a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Zm6.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm-3 8.75a.75.75 0 1 0-1.5 0 .75.75 0 0 0 1.5 0Z"></path></svg>Fork</span> 按钮。这将在您的 GitHub 个人资料中创建该存储库的副本。
+
+## 将存储库克隆到您的本地机器上
+
+在您的本地计算机上选择一个目录，然后克隆此存储库。
+
+打开终端，导航到选择的目录，并输入以下命令：
+
+```bash
+git clone https://github.com/[YOUR_GITHUB_NAME]/angular-challenges.git
+```
+
+:::note[注意]
+
+你可以通过点击Angular Challenges存储库中<b>你自己的实例</b>中的<span class="github-success-btn"><> Code</span> 按钮来找到克隆URL
+
+![Header of GitHub workspace](../../../../assets/header-github.png)
+
+:::
+
+## 在您最喜欢的IDE中打开该项目
+
+使用您选择的任意集成开发环境（IDE）打开该项目。
+
+## 安装所有依赖项
+
+```bash
+npm ci
+```
+
+## 选择一个挑战
+
+您的项目现已启动并正在运行。剩下的唯一步骤是选择一个挑战 🚀
+
+每项挑战包括：
+
+- <b>Name</b>: 表示挑战的内容。
+- <b>Number</b>: 创建顺序。 这个数字没有任何特别的含义，但有助于在 GitHub Pull Request 部分进行参考。
+- <b>Badge</b>: 有助于可视化难度程度。这完全是主观的 😅
+ - 🟢 容易
+ - 🟠 中等
+ - 🔴 困难
+
+## (交替) 使用 GitHub Codespaces
+
+在你自己的 Angular Challenges 存储库<b>实例</b>中，单击代码按钮并导航到 codespaces 选项卡。
+
+![Codespaces tab](../../../../assets/codespaces.png)
+
+单击 `Create codespace on main` 按钮, 您将导航到 GitHub codespace
+
+如果您以前从未使用过 GitHub codespace，我建议您尝试这个简短的交互式 [GitHub Skills Tutorial](https://github.com/skills/code-with-codespaces).
+
+当您导航到codespace时，将出现一个提示，要求安装推荐的 `VS Code` 插件。如果您打算创建一个挑战，您可以使用 `Nx plugin` 来生成开始代码。无论哪种方式，codespace都将安装依赖项，你可以创建一个新分支，解决任何挑战，并创建一个pull request。
+
+当您推送到分支时，您不必提供 GitHub 令牌。
+
+一旦你完成，记得暂停或删除你的codesace。如果不这样做，GitHub将在30分钟后自动暂停空闲的codesace。你每个月确实有大量的免费codespace时间，但重要的是不要浪费你的分配时间
+
+在GitHub codesace中，复制和粘贴将被阻止，直到你获得许可
+
+GitHub codespace使用端口转发为项目提供服务。单击运行 `npx nx serve [project-name]` 后的提示符，导航到 `localhost:4200` 。