docs: localization of homepage website

apps/docs/docs/examples/index.md

@@ -1,8 +1,8 @@
 ---
-title: 输出示例
+title: Output Example
 order: 0
 ---
 
-# libro 输出示例
+# libro Output Example
 
 <code src="../../src/output" compact="true"></code>

apps/docs/docs/examples/index.zh-CN.md

@@ -0,0 +1,8 @@
+---
+title: 输出示例
+order: 0
+---
+
+# libro 输出示例
+
+<code src="../../src/output" compact="true"></code>

apps/docs/docs/examples/lab.md

@@ -3,8 +3,8 @@ title: Lab
 order: 1
 ---
 
-# libro lab
+# libro Lab
 
-本地在某个文件目录下，起一个`jupyterlab`服务，该文件目录中包含以 `.ipynb` 为后缀名的文件。
+Start a `jupyterlab` service locally in a specific directory that contains files with the `.ipynb` extension.
 
 <code src="../../src/lab" compact="true"></code>

apps/docs/docs/examples/lab.zh-CN.md

@@ -0,0 +1,10 @@
+---
+title: Lab
+order: 1
+---
+
+# libro lab
+
+本地在某个文件目录下，起一个`jupyterlab`服务，该文件目录中包含以 `.ipynb` 为后缀名的文件。
+
+<code src="../../src/lab" compact="true"></code>

apps/docs/docs/examples/terminal.md

@@ -5,6 +5,6 @@ order: 2
 
 # Terminal
 
-本地在某个文件目录下，起一个`jupyterlab`服务
+Start a `jupyterlab` service locally in a specific directory.
 
 <code src="../../src/terminal" compact="true"></code>

apps/docs/docs/examples/terminal.zh-CN.md

@@ -0,0 +1,10 @@
+---
+title: Terminal
+order: 2
+---
+
+# Terminal
+
+本地在某个文件目录下，起一个`jupyterlab`服务
+
+<code src="../../src/terminal" compact="true"></code>

apps/docs/docs/examples/workbench.md

@@ -1,10 +1,10 @@
 ---
-title: 工作台
+title: Workbench
 order: 1
 ---
 
-# libro 工作台
+# libro Workbench
 
-本地在某个文件目录下，起一个`jupyterlab`服务，该文件目录中包含以 `.ipynb` 为后缀名的文件。
+Start a `jupyterlab` service locally in a specific directory that contains files with the `.ipynb` extension.
 
 <code src="../../src/workbench" compact="true"></code>

apps/docs/docs/examples/workbench.zh-CN.md

@@ -0,0 +1,10 @@
+---
+title: 工作台
+order: 1
+---
+
+# libro 工作台
+
+本地在某个文件目录下，起一个`jupyterlab`服务，该文件目录中包含以 `.ipynb` 为后缀名的文件。
+
+<code src="../../src/workbench" compact="true"></code>

apps/docs/docs/integration/command.md

@@ -1,25 +1,25 @@
 ---
-title: 自定义命令
+title: Custom Commands
 order: 1
 ---
 
-# 命令
+# Commands
 
-命令（Command）是 Libro 中的核心交互机制之一，主要作用是提供一种标准化的方式，允许用户触发特定操作或功能。这种机制不仅能由用户通过界面或快捷键调用，也能在代码中通过编程方式执行。
+Commands are one of the core interaction mechanisms in Libro. They provide a standardized way for users to trigger specific actions or features. This mechanism can be called by users through the interface or keyboard shortcuts, and it can also be executed programmatically within code.
 
-## 如何使用命令？
+## How to Use Commands
 
-1. 获取命令服务：在 React 组件中你可以使用`useInject`来获取到命令服务；在 mana 模块类中，您可以使用`@inject(CommandRegistry) commandRegistry: CommandRegistry`获取到命令服务.
-2. 执行命令：`commandRegistry.executeCommand`是命令执行的核心方法。它接受以下几个参数：
+1. **Access the Command Service**: In a React component, you can use `useInject` to get access to the command service. In a Mana module class, use `@inject(CommandRegistry) commandRegistry: CommandRegistry` to access the command service.
+2. **Execute a Command**: `commandRegistry.executeCommand` is the main method for executing commands. It accepts the following parameters:
 
-- commandId: 命令的唯一标识符，指明要执行的具体命令。
-- args: 可选参数，用于传递给命令的执行函数。
+- `commandId`: The unique identifier for the command, specifying which command to execute.
+- `args`: Optional arguments for the command's execution function.
 
-### React 组件中使用
+### Usage in a React Component
 
-提示：关于在 React 组件中使用首先需要保证该 React 组件存在于 mana 应用的上下文中。
+Tip: To use commands in a React component, ensure that the component is within the Mana app’s context.
 
-#### 示例
+#### Example
 
 ```jsx
 import { DocumentCommands, LibroService, LibroView, NotebookCommands } from '@difizen/libro-jupyter';
@@ -33,7 +33,6 @@ export const LibroEditor: React.FC = ()=>{
   const commandRegistry = useInject(CommandRegistry);
 
   const save = () => {
-    //通过命令进行保存
     commandRegistry.executeCommand(
       DocumentCommands['Save'].id,
       undefined,
@@ -43,7 +42,6 @@ export const LibroEditor: React.FC = ()=>{
   };
 
   const selectAll = () => {
-    //通过命令进行 cell 全选操作
     commandRegistry.executeCommand(
       NotebookCommands['SelectAll'].id,
       undefined,
@@ -53,7 +51,6 @@ export const LibroEditor: React.FC = ()=>{
   };
 
   const runAllCells = () => {
-    //通过命令进行执行全部 cell 操作
     commandRegistry.executeCommand(
       NotebookCommands['RunAllCells'].id,
       undefined,
@@ -63,7 +60,6 @@ export const LibroEditor: React.FC = ()=>{
   };
 
   const insertCellBelow = () => {
-    //通过命令进行向下插入 cell 操作
     commandRegistry.executeCommand(
       NotebookCommands['InsertCellBelow'].id,
       libroView?.activeCell,
@@ -73,9 +69,7 @@ export const LibroEditor: React.FC = ()=>{
   };
 
   useEffect(() => {
-    libroService.getOrCreateView({
-      //这里可以给每个 libro 编辑器增加标识，用于区分每次打开编辑器里面的内容都不一样
-    }).then((libro)=>{
+    libroService.getOrCreateView({ }).then((libro)=>{
       if(!libro) return;
       setLibroView(libro);
     })
@@ -84,121 +78,117 @@ export const LibroEditor: React.FC = ()=>{
   return (
     <div className='libro-command-container'>
       <div className='libro-command-demo-panel'>
-        <Button type='primary' onClick={save} className='libro-command-demo-btn'>保存文件</Button>
-        <Button type='primary' onClick={selectAll} className='libro-command-demo-btn'>全选 Cell</Button>
-        <Button type='primary' onClick={runAllCells} className='libro-command-demo-btn'>执行所有 Cell</Button>
-        <Button type='primary' onClick={insertCellBelow} className='libro-command-demo-btn'>向下新增 Cell</Button>
+        <Button type='primary' onClick={save} className='libro-command-demo-btn'>Save File</Button>
+        <Button type='primary' onClick={selectAll} className='libro-command-demo-btn'>Select All Cells</Button>
+        <Button type='primary' onClick={runAllCells} className='libro-command-demo-btn'>Run All Cells</Button>
+        <Button type='primary' onClick={insertCellBelow} className='libro-command-demo-btn'>Insert Cell Below</Button>
       </div>
       {libroView && <ViewRender view={libroView}/>}
     </div>
   );
 }
 ```
 
-### Class 中使用
+### Usage in a Class
 
-#### 示例
+#### Example
 
-```jsx
+```typescript
 import { DocumentCommands, LibroView, NotebookCommands } from '@difizen/libro-jupyter';
 import { CommandRegistry, inject, singleton } from '@difizen/mana-app';
 
 @singleton()
 export class LibroCommandDemoService {
-    @inject(CommandRegistry) commandRegistry: CommandRegistry;
-
-    save = (libroView:LibroView|undefined) => {
-        //通过命令进行保存
-        this.commandRegistry.executeCommand(
-          DocumentCommands['Save'].id,
-          undefined,
-          libroView,
-          undefined
-        );
-    };
-
-    selectAll = (libroView:LibroView|undefined) => {
-        //通过命令进行 cell 全选操作
-        this.commandRegistry.executeCommand(
-          NotebookCommands['SelectAll'].id,
-          undefined,
-          libroView,
-          undefined
-        );
-    };
-
-    runAllCells = (libroView:LibroView|undefined) => {
-        //通过命令进行执行全部 cell 操作
-        this.commandRegistry.executeCommand(
-          NotebookCommands['RunAllCells'].id,
-          undefined,
-          libroView,
-          undefined
-        );
-    };
-
-    insertCellBelow = (libroView:LibroView|undefined) => {
-        //通过命令进行向下插入 cell 操作
-        this.commandRegistry.executeCommand(
-          NotebookCommands['InsertCellBelow'].id,
-          libroView?.activeCell,
-          libroView,
-          undefined
-        );
-    };
+  @inject(CommandRegistry) commandRegistry: CommandRegistry;
+
+  save = (libroView: LibroView | undefined) => {
+    this.commandRegistry.executeCommand(
+      DocumentCommands['Save'].id,
+      undefined,
+      libroView,
+      undefined,
+    );
+  };
+
+  selectAll = (libroView: LibroView | undefined) => {
+    this.commandRegistry.executeCommand(
+      NotebookCommands['SelectAll'].id,
+      undefined,
+      libroView,
+      undefined,
+    );
+  };
+
+  runAllCells = (libroView: LibroView | undefined) => {
+    this.commandRegistry.executeCommand(
+      NotebookCommands['RunAllCells'].id,
+      undefined,
+      libroView,
+      undefined,
+    );
+  };
+
+  insertCellBelow = (libroView: LibroView | undefined) => {
+    this.commandRegistry.executeCommand(
+      NotebookCommands['InsertCellBelow'].id,
+      libroView?.activeCell,
+      libroView,
+      undefined,
+    );
+  };
 }
 ```
 
-## 如何注册自定义命令？
+## How to Register a Custom Command
 
-在 libro 中，每个模块都可以向命令注册表中添加命令。最基础的命令通常包含这几个部分：
+In Libro, each module can add commands to the command registry. Basic commands generally include the following components:
 
-- id: 命令的唯一标识符。
-- label: 命令的描述，用于菜单或命令面板。
-- handler: 命令被触发时的执行函数。
+- `id`: Unique identifier for the command.
+- `label`: Description for the command, used in menus or command panels.
+- `handler`: The function executed when the command is triggered.
 
-### 命令定义
+### Command Definition
 
-定义命令主要是为每个命令指定一个唯一的标识符（id）和一个可读的标签（label）。这是命令系统的基础部分，它决定了命令在应用程序中的身份和展示方式。
+Defining a command mainly involves specifying a unique identifier (`id`) and a readable label (`label`) for each command. This forms the core of the command system, establishing the command's identity and display.
 
-#### 自定义命令定义示例
+#### Custom Command Definition Example
 
 ```typescript
 export const LibroDemoCommand = {
   demoCommand1: {
     id: 'demo:libro-command-1',
-    label: '普通命令demo示例1',
+    label: 'Demo Command Example 1',
   },
   demoCommand2: {
     id: 'demo:libro-command-2',
-    label: '普通命令demo示例2',
+    label: 'Demo Command Example 2',
   },
 };
 ```
 
-### 命令实现
+### Command Implementation
 
-1. 实现命令的 handler，handler 是命令的核心部分，负责控制命令的行为。它包含以下三个可选函数：
+1. **Implement the Handler**: The handler is the command’s core part, responsible for controlling its behavior. It includes three optional functions:
 
-- execute: 命令执行的具体逻辑，用户触发命令时会调用此函数。
-- isEnabled: 判断命令是否处于可用状态。如果返回 false，命令将不可执行且不可点击。
-- isVisible: 判断命令是否可见。如果返回 false，命令不会显示在菜单或工具栏等 UI 中。
-  关于 isEnabled、isVisible 的更多内容详情请看：xxx
+- `execute`: The logic for executing the command, called when the command is triggered.
+- `isEnabled`: Determines if the command is enabled. If it returns false, the command cannot be executed or clicked.
+- `isVisible`: Determines if the command is visible. If it returns false, the command won’t appear in the UI, such as menus or toolbars.
+  For more details on `isEnabled` and `isVisible`, see: [xxx].
 
-2. 注册命令。libro 使用依赖注入机制来管理命令的注册，因此你需要创建一个命令扩展类，并在这个类中注册命令。命令扩展类实现了 `CommandContribution` 接口，这个接口提供了 `registerCommands` 方法，专门用于注册命令。此外，提供了 `LibroCommandRegister` 和 `CommandRegistry`两种方式注册命令。
+2. **Register the Command**: Libro uses dependency injection to manage command registration, so you need to create a command extension class and register commands within it. The command extension class implements the `CommandContribution` interface, providing a `registerCommands` method specifically for registering commands. Additionally, `LibroCommandRegister` and `CommandRegistry` can both be used to register commands.
 
-- `LibroCommandRegister`：使用该种方式意味着，当前命令的参数依次是：`CellView`实例、`LibroView` 实例、position（关于该参数的解释详情请看：xxx） ,即使在命令执行时没有传递参数，在命令的 handler 中也能拿到当前上下的文对应的 `CellView` 实例、`LibroView` 实例。
-- `CommandRegistry`：通过该种方式注册则是在命令的 handler 中只能拿到命令执行时传递的参数。
+- `LibroCommandRegister`: When using this approach, the command’s parameters are: `CellView` instance, `LibroView` instance, position (for details on this parameter, see: [xxx]). Even if no arguments are passed at command execution, the handler can access the `CellView` and `LibroView` instances.
+- `CommandRegistry`: When using this approach, only parameters passed during command execution are accessible within the handler.
 
-3. 把新增的命令扩展类注册进 mana module 中。
+3. **Register the Command Extension Class in the Mana Module**
 
 ```typescript
 export const LibroCommandDemoModule = ManaModule.create()
   .register(LibroCommandDemoService, LibroDemoCommandContribution)
   .dependOn(LibroEditorModule);
 ```
 
-#### 自定义命令注册示例
+#### Custom Command Registration Example
 
 ```typescript
 import { LibroCommandRegister } from '@difizen/libro-jupyter';
@@ -218,7 +208,7 @@ export class LibroDemoCommandContribution implements CommandContribution {
     this.libroCommand.registerLibroCommand(command, LibroDemoCommand['demoCommand1'], {
       execute: async (cell, libro, path) => {
         console.log(
-          '使用 LibroCommandRegister 的方式注册的 demoCommand1 被执行',
+          'DemoCommand1 registered via LibroCommandRegister has been executed',
           cell,
           libro,
           path,
@@ -231,7 +221,7 @@ export class LibroDemoCommandContribution implements CommandContribution {
     command.registerCommand(LibroDemoCommand['demoCommand2'], {
       execute: async (args1, args2) => {
         console.log(
-          '使用 CommandRegistry 的方式注册的 demoCommand2 被执行',
+          'DemoCommand2 registered via CommandRegistry has been executed',
           args1,
           args2,
         );