(WIP) docs: add Chinese translation

build-system/homepage.js

@@ -1,38 +1,18 @@
+const fs = require("fs");
+const path = require("path");
+
 // Supported homepage reading languages
-const readingLanguages = ["en-us", "pt-br"];
+const readingLanguages = ["en-us", "pt-br", "zh-cn"];
 
 // Our introduction text
-const introductionHtml = {
-  "en-us": `
-    <p>
-      WebAssembly (Wasm) is an universal low level bytecode that runs on the
-      web. It is a compilation target for languages like
-      <b class="highlight"
-        >Rust, AssemblyScript (Typescript-like), Emscripten (C/C++), and much
-        more!</b
-      >
-      Wasm offer a compact binary format with predictable performance, and
-      portability to run alongside Javascript and other host languages. Wasm is
-      currently shipped in all major browsers, and has runtimes meant for
-      running on servers or interfacing with systems using WASI.
-    </p>
-
-    <blockquote>
-      <p class="label">What is Wasm By Example?</p>
-      <p>
-        Wasm By Example is a concise, hands-on introduction to WebAssembly using
-        code snippets and annotated WebAssembly example programs. Learn more
-        about Wasm at the
-        <a
-          onclick="goToExample('examples/introduction', 'introduction', 'all', 'en-us')"
-          href="#"
-          >WebAssembly Introduction
-        </a>
-        or browse the list of examples below.
-      </p>
-    </blockquote>
-  `
-};
+const introductionHtml = {};
+const introDir = path.resolve(__dirname, "./introduction");
+for (const name of fs.readdirSync(introDir)) {
+  const filename = path.resolve(introDir, name);
+  const locate = name.split(".")[0];
+  const content = fs.readFileSync(filename, "utf-8");
+  introductionHtml[locate] = content;
+}
 
 const examplesTitle = {
   "en-us": "Examples"
@@ -58,11 +38,14 @@ const exampleOrder = [
 // Catgeories
 const concepts = {
   title: {
-    "en-us": "Concepts"
+    "en-us": "Concepts",
+    "zh-cn": "概念"
   },
   description: {
     "en-us":
-      "Examples that express some of the major underlying concepts in WebAssembly. Some of these examples are not the most convenient or productive way for building projects with WebAssembly. However, these minimal examples are great for learning, or developing straightforward / lower-level parts of an application."
+      "Examples that express some of the major underlying concepts in WebAssembly. Some of these examples are not the most convenient or productive way for building projects with WebAssembly. However, these minimal examples are great for learning, or developing straightforward / lower-level parts of an application.",
+    "zh-cn":
+      "这样例子展示了 WebAssembly 中的核心概念。有些例子中的代码不是以最高效的方式实现的，但能更好地通过最小用例讲解如何从底层开始开发应用程序。"
   },
   examples: [
     "introduction",
@@ -75,11 +58,14 @@ const concepts = {
 
 const applyingTheConcepts = {
   title: {
-    "en-us": "Applying the Concepts"
+    "en-us": "Applying the Concepts",
+    "zh-cn": "实操"
   },
   description: {
     "en-us":
-      "Examples that expand on the conceptual examples to show how these minimal examples could be used to build common features in larger applications."
+      "Examples that expand on the conceptual examples to show how these minimal examples could be used to build common features in larger applications.",
+    "zh-cn":
+      "进一步深入概念来展示如何通过迷你用例来构建大型应用程序中的常见功能。"
   },
   examples: ["reading-and-writing-graphics", "reading-and-writing-audio"]
 };

build-system/introduction/en-us.html

@@ -0,0 +1,27 @@
+<p>
+  WebAssembly (Wasm) is an universal low level bytecode that runs on the web. It
+  is a compilation target for languages like
+  <b class="highlight"
+    >Rust, AssemblyScript (Typescript-like), Emscripten (C/C++), and much
+    more!</b
+  >
+  Wasm offer a compact binary format with predictable performance, and
+  portability to run alongside Javascript and other host languages. Wasm is
+  currently shipped in all major browsers, and has runtimes meant for running on
+  servers or interfacing with systems using WASI.
+</p>
+
+<blockquote>
+  <p class="label">What is Wasm By Example?</p>
+  <p>
+    Wasm By Example is a concise, hands-on introduction to WebAssembly using
+    code snippets and annotated WebAssembly example programs. Learn more about
+    Wasm at the
+    <a
+      onclick="goToExample('examples/introduction', 'introduction', 'all', 'en-us')"
+      href="#"
+      >WebAssembly Introduction
+    </a>
+    or browse the list of examples below.
+  </p>
+</blockquote>

build-system/introduction/zh-cn.html

@@ -0,0 +1,25 @@
+<p>
+  WebAssembly (Wasm) 是一种通用的可以运行在 web 上的低级字节码。
+  <br />
+  <b class="highlight"
+    >Rust, AssemblyScript (类似 Typescript), Emscripten (C/C++) 等多种语言</b
+  >
+  都可以编译为 Wasm。 Wasm 提供了一种性能可观的紧凑二进制格式，易于移植并与
+  JavaScript 等宿主语言配合良好。 Wasm
+  目前正在陆续登陆主流浏览器，也将提供用于运行服务器程序或与系统交互的独立
+  runtime。
+</p>
+
+<blockquote>
+  <p class="label">Wasm By Example 是什么？</p>
+  <p>
+    Wasm By Example 是一个简明的实操教程，通过代码片段与带注解的例程来教学
+    WebAssembly。 更多关于 Wasm 的信息请参考
+    <a
+      onclick="goToExample('examples/introduction', 'introduction', 'all', 'en-us')"
+      href="#"
+      >WebAssembly Introduction
+    </a>
+    或浏览下列示例。
+  </p>
+</blockquote>

examples/importing-javascript-functions-into-webassembly/importing-javascript-functions-into-webassembly.rust.zh-cn.md

@@ -0,0 +1,71 @@
+# 导入 Javascript 函数到 WebAssembly
+
+## 概览
+
+在实例化 Wasm 模块时可以传递一个 [`importObject`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WebAssembly/instantiateStreaming) 参数，这个 `importObject` 可以用于在 Wasm 中调用宿主（Javascript 侧）的函数。
+
+在 rust 中可以使用 [wasm-bindgen](https://github.com/rustwasm/wasm-bindgen)，它作为 wasm-pack 工作流的一部分提供了对于 `importObject` 的抽象封装。
+
+在这个例子中我们导入并实现了一个简单的 `console.log` 并在 wasm 中调用。这个例子受到来自 [console_log example](https://github.com/rustwasm/wasm-bindgen/blob/master/examples/console_log/src/lib.rs) 的启发，并在此基础上进行了简化。接下来看看例子：
+
+---
+
+## 实现
+
+首先在 `src/lib.rs` 中编写以下代码：
+
+```rust
+// wasm-pack 使用 wasm-binden 来生成 JavaScript binding 文件.
+// 导入 wasm-bindgen crate.
+use wasm_bindgen::prelude::*;
+
+// 定义从 JavaScript 导入的外部函数 `console.log`
+#[wasm_bindgen]
+extern "C" {
+  // 这里要在 log(..) 前使用 `js_namespace` 来绑定 `console.log(..)`
+#[wasm_bindgen(js_namespace = console)]
+  fn log(s: &str);
+}
+
+// 导出可以被 JavaScript 侧调用的函数
+// 内部则会调用从 JavaScript 导入的 console.log
+#[wasm_bindgen]
+pub fn console_log_from_wasm() {
+  log("This console.log is from wasm!");
+}
+```
+
+然后使用 [wasm-pack](https://github.com/rustwasm/wasm-pack) 编译、生成 `pkg/` 目录。
+
+```bash
+wasm-pack build --target web
+```
+
+新建 `index.js` 文件来加载和运行我们的 wasm 产物。从 `pkg/importing_javascript_functions_into_webassembly.js` 导入 wasm-pack 生成的 wasm 初始化模块。然后传入路径来调用 wasm-pack 生成的 `pkg/importing_javascript_functions_into_webassembly_bg.wasm` 文件。现在就可以调用先前导出的 wasm 函数，其内部会去调用 rust 侧导入的 JavaScript 函数 `console.log`。
+
+> **注意：**为了便于理解 WebAssembly API 的使用方式，这个例子我们直接从 wasm 模块导出并使用函数。不过实际上 `wasm-bindgen` 会自动生成 JavaScript bindings 代码，可以直接使用 ES6 import 语句来导入并使用。这些 JavaScript binding 将在 “使用 `wasm-bindgen` 传递高级数据类型” 章节详细展示。
+
+```javascript
+const runWasm = async () => {
+  // 实例化 wasm 模块
+  const rustWasm = await wasmInit(
+    "./pkg/importing_javascript_functions_into_webassembly_bg.wasm"
+  );
+
+  // 运行其导出的函数
+  rustWasm.console_log_from_wasm(); // 打印输出 "This console.log is from wasm!"
+};
+runWasm();
+```
+
+Lastly, lets load our ES6 Module, `index.js` Javascript file in our `index.html`. And you should get something similar to the demo ([Source Code](/source-redirect?path=examples/importing-javascript-functions-into-webassembly/demo/rust)) below!
+
+最后只需在 `index.html` 中导入编写好的 `index.js` 代码模块。最终的结果可以参考以下 demo 的 ([源码](/source-redirect?path=examples/importing-javascript-functions-into-webassembly/demo/rust))。
+
+---
+
+## Demo
+
+<iframe title="Rust Demo" src="/demo-redirect?example-name=importing-javascript-functions-into-webassembly"></iframe>
+
+以上就是 wasm 的基础内容。接下来我们将通过例子 [Reading and Writing Graphics with WebAssembly](/example-redirect?exampleName=reading-and-writing-graphics) 学习一些进阶示例。

examples/introduction/introduction.all.zh-cn.md

@@ -0,0 +1,12 @@
+# 介绍
+
+首先来简单介绍下 WebAssembly 当中的主要概念：
+
+- WebAssembly 语言通常作为编译的结果，用于在 web 上运行字节码。
+- 相较于 Javascript，WebAssembly 能提供更可预测的性能。它本身并不比 JavaScript 更快，但在正确的使用情况下，例如进行 **计算密集型任务**，比如循环嵌套或处理大量数据时，**WebAssembly 可能会更快**。因此 **WebAssembly 是 JavaScript 的补充而不是替代**。
+- WebAssembly 具有优秀的可移植性。它可以运行在所有主流 web 浏览器、类似 [Node.js](https://nodejs.org/en/) 的 V8 运行时、或者包括 [Wasmtime](https://wasmtime.dev/)、[Lucet](https://github.com/bytecodealliance/lucet) 以及 [Wasmer](https://github.com/wasmerio/wasmer) 等在内的独立 Wasm 运行时。
+- WebAssembly 具有线性的内存模型，可以理解为一个巨大可拓展的数组。也因此在 Javascript 环境中 Javascript 和 Wasm 都可以直接同步访问。
+- WebAssembly 可以导出函数和常量，也因此在 Javascript 环境中 Javascript 和 Wasm 都可以直接同步访问。
+- WebAssembly 在当前的 MVP 版本中只能处理整型和浮点数，但是有一些工具和库可以方便地传递高级数据类型。
+
+接下来请查看 [Hello World](/example-redirect?exampleName=hello-world) 来上手这些概念。

shell/js/index.js

@@ -19,6 +19,7 @@ window.WASM_BY_EXAMPLE_PROGRAMMING_LANGUAGES["TinyGo (Go)"] = "go";
 window.WASM_BY_EXAMPLE_READING_LANGUAGES = {};
 window.WASM_BY_EXAMPLE_READING_LANGUAGES["English (US)"] = "en-us";
 window.WASM_BY_EXAMPLE_READING_LANGUAGES["Brazilian Portuguese"] = "pt-br";
+window.WASM_BY_EXAMPLE_READING_LANGUAGES["Simplified Chinese"] = "zh-cn";
 
 // Define Default Settings
 window.WASM_BY_EXAMPLE = {