Add Translations for Custom Panels and some broken links fix

docs/device/4-device-collector.md

@@ -31,17 +31,17 @@ sidebar_position: 4
 
 ![org-dev-rule-save](./img/4-3-device-save-collector.png)
 
-## 数采规则格式详解
+## 数采规则格式详解 {#device-collector-format}
 
 数采规则主要对 5 个模块进行设置：
 
 | 模块名称                    | 功能描述                                                       |
 | --------------------------- | -------------------------------------------------------------- |
-| 数据收集器设置（collector） | 完成数据采集后，是否删除数采客户端在设备端生成的缓存数据                             |
+| 数据收集器设置（collector） | 完成数据采集后，是否删除数采客户端在设备端生成的缓存数据       |
 | 存储设置（mod）             | 设备 ID 存放位置；监听目录；客户端初始化监听时间范围；采集目录 |
 | 设备事件属性（device）      | 事件的属性值                                                   |
 | 规则触发话题（topic）       | 规则触发话题                                                   |
-| 更新设置（updater）         | 数采客户端是否开启自动更新                                       |
+| 更新设置（updater）         | 数采客户端是否开启自动更新                                     |
 
 示例模板如下：
 

docs/use-case/data-diagnosis/2-get-started.md

@@ -14,7 +14,7 @@ sidebar_position: 2
 
 1. 请准备好一台设备
 
-2. 请创建名为 auto-upload 的项目，详情参见[创建新项目](https://docs.coscene.cn/docs/recipes/project)。
+2. 请创建名为 auto-upload 的项目
 
 3. 请确认你在 coScene 的组织角色为「管理员」。若不是管理员，请联系组织管理员更新你的组织角色。
 
@@ -96,7 +96,7 @@ sidebar_position: 2
      enabled: false
    ```
 
-   \*更多配置参见[数采规则格式](https://docs.coscene.cn/docs/recipes/device/device-collector/#%E6%95%B0%E9%87%87%E8%A7%84%E5%88%99%E6%A0%BC%E5%BC%8F)
+   更多配置参见[数采规则格式](../../device/4-device-collector.md#device-collector-format)
 
 3. 点击【保存编辑】按钮
 

docs/viz/8-extensions/5-api/6-other/8-variable-value.md

@@ -7,5 +7,3 @@ sidebar_position: 8
 ```typescript
 type VariableValue = undefined | boolean | number | string | VariableValue[] | {};
 ```
-
-变量的有效类型 

i18n/en/docusaurus-plugin-content-docs/current/use-case/data-diagnosis/2-get-started.md

@@ -11,7 +11,7 @@ Using the following scenario as an example, let's setup your automatic data coll
 ## Prerequisites
 
 1. Have a device ready.
-2. Create a project named `auto-upload`. See [Cerate New Project](https://docs.coscene.cn/en/docs/recipes/project) for details.
+2. Create a project named `auto-upload`.
 3. Make sure your role in the coScene organization is "Administrator". If you're not an administrator, contact your organizational admin to update your role.
    ![org-role](./img/org-role.png)
 
@@ -191,6 +191,3 @@ Using the following scenario as an example, let's setup your automatic data coll
 2. View the automatically created record, and check the data uploaded in the record.
 
    ![auto-record-1](./img/auto-record-1.png)
-
-
-

i18n/en/docusaurus-plugin-content-docs/current/viz/8-extensions/1-introduction.md

@@ -0,0 +1,63 @@
+---
+sidebar_position: 1
+---
+
+# Extensions Introduction
+
+Extend visualization capabilities through custom extensions to better support your team's unique workflows. Build custom panels, convert custom messages into visualization-supported schemas, and create aliases for topic names to facilitate visualization.
+
+Once you develop and install extensions, you can enable them in the application settings to display all available and installed extensions.
+
+## Custom Panels
+
+While visualization provides a set of built-in panels for robot data visualization and debugging, many users have domain-specific requirements that our out-of-the-box product cannot meet.
+
+Custom panel extensions allow you to build complete panels. Custom panels can subscribe to messages on various topics, publish and receive messages, and display message information in a form that best suits your workflow.
+
+Custom panels are ideal when your visualization or interaction requirements are customized and not easily addressed through built-in panels.
+
+### Links and Resources
+
+- Guide: Creating Custom Panels
+- Building Custom Panel Extensions (React)
+
+## Message Converters
+
+Message converter extensions allow you to transform messages from one schema to another. By converting messages to schemas supported by visualization, you can inspect them using visualization's built-in visualization features. For example, you can use a message converter to transform custom GPS messages into foxglove.LocationFix messages for visualization in the map panel.
+
+> Note: Message converters only run on-demand when panels subscribe to topics.
+
+### Links and Resources
+
+- Guide: Creating Message Converters
+- Writing Message Converter Extensions (Map Panel)
+- Writing Message Converter Extensions (3D Panel)
+
+## Topic Aliases
+
+Topic alias extensions allow you to alias topics from your data source to new topics. Visualization panels can subscribe to both aliased topics and topics from the original data source.
+
+## Writing Extensions
+
+You can write extensions using JavaScript or TypeScript and package them into `.coe` files. You can distribute these files privately within your organization or publicly through our registry (in development) - installing extensions through the registry is only supported in the desktop application. A single extension can contain multiple panels or converters.
+
+coScene provides a set of starter templates and commands in the [create-coscene-extension](https://github.com/coscene-io/create-coscene-extension) package to simplify extension writing.
+
+Requirements:
+
+- Node.js 14+
+
+To set up your extension project, navigate to the directory where you want your source code to reside, and run the following command in a terminal window:
+
+```
+npm init coscene-extension@latest my-extension-name
+```
+
+This will set up the extension directory structure. Your extension entry point is the `index.ts` file.
+
+The entry point script must export an ExtensionModule — a function named `activate` that accepts a single `ExtensionContext` parameter.
+
+## API Reference
+
+- [ExtensionContext](/docs/viz/extensions/api/entry-point/extension-context)
+- @coscene/coscene-extension

i18n/en/docusaurus-plugin-content-docs/current/viz/8-extensions/2-local-development.md

@@ -0,0 +1,24 @@
+---
+sidebar_position: 2
+---
+
+# Local Development
+
+Build and test your custom visualization extensions locally before publishing.
+
+## Installation
+
+To build and install your extension to the local coStudio extensions folder, run `npm run local-install`. This will create a folder under your user home directory (e.g., `~/.coStudio/extensions/unknown.myExtensionName-0.0.0`) containing your compiled extension.
+
+Open the latest version of the coStudio desktop application. You should now see `myExtensionName` in the list of installed extensions in the application settings.
+
+After installation, you should be able to open the "Add Panel" menu and see an option called `ExamplePanel`. You have successfully loaded your first visualization extension!
+
+(🏗️ Work in progress, expected to launch in May 2025)
+To install local extensions on the web application, you must first package your extension, then drag and drop the `.coe` file onto an open visualization page. You can also open `.coe` files in the desktop application by dragging and dropping or double-clicking.
+
+## Development
+
+Every time you make changes to your extension, you must run `npm run local-install` to build it into the local extensions folder.
+
+Reload or restart coStudio to execute the latest version of your extension code in the application. Alternatively, you can simply run `npm run build` to confirm that your code compiles without installing it locally.

i18n/en/docusaurus-plugin-content-docs/current/viz/8-extensions/3-best-practices/1-using-message-converters-to-display-3d-markers-in-3d-panel.md

@@ -0,0 +1,162 @@
+---
+sidebar_position: 1
+---
+
+# Using Message Converters to Display 3D Markers in 3D Panel
+
+By writing your own message converter, you can use coScene's existing panels to visualize your custom messages, even if these message definitions are not supported by the existing panels.
+
+## Why Use Message Converters
+
+While you could build a custom panel every time you want to visualize certain specific data, writing a message converter can save you a lot of time and effort. Message converters transform data into supported formats, allowing existing panels to handle the visualization without having to build another panel from scratch.
+
+## Our Goal
+
+We will create a message converter that transforms custom `my.Marker` messages into `foxglove.SceneUpdate` messages, then use the 3D panel to display these markers. You can download the [example mcap file](https://download.coscene.cn/assets/bags/example.mcap) for this tutorial.
+
+## Prerequisites
+
+Before we begin, you should be familiar with or have installed:
+
+- Basic robotics concepts
+- Basic usage of coScene visualization features
+- [Basic JavaScript/TypeScript syntax](https://www.typescriptlang.org/docs/handbook/basic-types.html)
+- [Basic usage of frontend package managers like npm](https://docs.npmjs.com/)
+- [Node.js version 14 or higher installed on your current device](https://nodejs.org/en/download/)
+
+## Initialize the Project
+
+Create a project using [create-coscene-extension](https://github.com/coscene-io/create-coscene-extension):
+
+```bash
+npm init coscene-extension@latest mySceneUpdateConverter
+```
+
+This command will create a `mySceneUpdateConverter` directory containing some template source code.
+
+## Write the Converter
+
+src/index.ts is the entry point for the plugin source code. It exports an `activate` function that accepts a single parameter of type [`ExtensionContext`](/docs/viz/extensions/api/entry-point/extension-context).
+
+First, let's add the `@foxglove/schemas` package to our project. `@foxglove/schemas` is foxglove's schema definition library, where you can find all foxglove-supported schema definitions:
+
+```bash
+npm install @foxglove/schemas
+```
+
+Then, open the `src/index.ts` file and import the following packages:
+
+```ts
+// Import coScene's plugin context
+import { ExtensionContext } from '@coscene/extension';
+// Import foxglove's schema definitions
+import { CubePrimitive, SceneUpdate } from '@foxglove/schemas';
+// Import foxglove's time type definition
+import { Time } from '@foxglove/schemas/schemas/typescript/Time';
+```
+
+And declare our custom `my.Marker` message type:
+
+```ts
+// Declare our custom `my.Marker` message type
+type DetectedObject = {
+  position: [number, number, number];
+  markerType: 'adult' | 'car' | 'truck';
+  scale: [number, number, number];
+  timestamp: Time;
+  frameId: string;
+};
+```
+
+To register the message converter, we need to call the `registerMessageConverter` function from `extensionContext`. The `registerMessageConverter` function requires three parameters:
+
+- fromSchemaName: The message type defined in mcap that needs to be converted
+- toSchemaName: The target message type after conversion
+- converter: The function that performs the conversion, which accepts the message registered in fromSchemaName. We need to convert the message to the type registered in toSchemaName
+
+```ts
+// Register the message converter
+export function activate(extensionContext: ExtensionContext) {
+  extensionContext.registerMessageConverter({
+    fromSchemaName: 'my.Marker',
+    toSchemaName: 'foxglove.SceneUpdate',
+    converter: (inputMessage: DetectedObject): SceneUpdate => {
+      // Conversion logic from my.Marker to foxglove.SceneUpdate
+    },
+  });
+}
+```
+
+Fill in the converter function to transform `my.Marker` messages into `foxglove.SceneUpdate` messages. We'll display all detected objects as colored cubes:
+
+- Blue for adults
+- Red for cars
+- Green for trucks
+
+```ts
+converter: (inputMessage: DetectedObject): SceneUpdate => {
+  const { position, scale, markerType, timestamp, frameId } = inputMessage;
+  const colorMap = {
+    adult: { r: 0, g: 0, b: 1, a: 1 },
+    car: { r: 1, g: 0, b: 0, a: 1 },
+    truck: { r: 0, g: 1, b: 0, a: 1 },
+  };
+
+  const cubePrimitive: CubePrimitive = {
+    pose: {
+      position: { x: position[0], y: position[1], z: position[2] },
+      orientation: { x: 0, y: 0, z: 0, w: 1 },
+    },
+    size: { x: scale[0], y: scale[1], z: scale[2] },
+    color: colorMap[markerType],
+  };
+
+  const sceneUpdateMessage = {
+    deletions: [],
+    entities: [
+      {
+        id: 'detectedObjects-entities',
+        timestamp,
+        frame_id: frameId,
+        lifetime: { sec: 10, nsec: 0 },
+        frame_locked: false,
+        metadata: [],
+        arrows: [],
+        cubes: [cubePrimitive],
+        spheres: [],
+        cylinders: [],
+        lines: [],
+        triangles: [],
+        texts: [],
+        models: [],
+      },
+    ],
+  };
+
+  return sceneUpdateMessage;
+};
+```
+
+## Test the Plugin
+
+To build and install the plugin for local testing in coStudio, run the following command in the plugin directory:
+
+```bash
+npm run local-install
+```
+
+In coStudio, open the plugin list on the right side, and you'll now see `mySceneUpdateConverter` in the list of installed plugins:
+![extensionList](./img/extensionList.png)
+
+Now, open our example mcap file, and you can open the 3D panel to see all detected objects displayed as colored cubes:
+![3dPanel](./img/3dPanel.png)
+
+## Share Your Plugin
+
+To share your plugin with others, you need to package it as a .coe file. To do this, run the following command in the plugin directory:
+
+```bash
+npm run package
+```
+
+You'll find an `unknown.mySceneUpdateConverter-0.0.0.coe` file in the plugin directory. You can distribute this to others, and they can install it in their coStudio by dragging and dropping it.