docs: improve docs

.eslintrc.js

@@ -30,6 +30,12 @@ module.exports = {
         '@typescript-eslint/no-var-requires': 'off',
       },
     },
+    {
+      files: ['./packages/site/**'],
+      rules: {
+        'no-console': 'off',
+      },
+    },
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {

packages/site/docs/manual/faq.en.md

@@ -85,3 +85,15 @@ Solution: Use a callback method to prioritize obtaining styles from the data to
   }
 }
 ```
+
+### Residual content in the canvas
+
+When using the Canvas renderer for drawing, residual content may appear in the canvas, which is referred to as "dirty rectangles". This phenomenon occurs because the underlying rendering engine improves performance by only drawing the parts that have changed each time, rather than clearing the entire canvas.
+
+However, when the graphics in the canvas change, there may be cases where some graphics are not correctly cleared, resulting in residual content.
+
+You can solve this issue by:
+
+1. Using the SVG or WebGL renderer;
+2. Checking whether there are illegal values in the element of the nodes, such as null, NaN, and so on;
+3. Using integers as much as possible for numeric style values, such as r, width, height, fontSize, and so on.

packages/site/docs/manual/faq.zh.md

@@ -80,8 +80,20 @@ behaviors: [
     style: (data) => {
       return {
         fill: data.style?.fill || 'pink',
-      }
-    }
+      };
+    };
   }
 }
 ```
+
+### 画布中出现残影
+
+在使用 Canvas 渲染器进行绘制时，可能会出现残影现象，这些图形被称为“脏矩形”。该现象出现的原因是底层渲染引擎为了提高性能，每次绘制时只会绘制发生变化的部分，而不会清空整个画布。
+
+但是，当画布中的图形发生变化时，可能会出现部分图形未被正确清除的情况，从而导致残影现象。
+
+可以通过以下方式解决：
+
+1. 使用 SVG 或 WebGL 渲染器；
+2. 检查节点中的图形样式中是否存在非法值，例如 null、NaN 等；
+3. 尽量使用整数作为数值型的样式值，例如 r、width、height、fontSize 等；

packages/site/docs/manual/further-reading/3d.en.md

@@ -1,6 +1,6 @@
 ---
 title: Use 3D
-order: 4
+order: 5
 ---
 
 ## Install Dependencies

packages/site/docs/manual/further-reading/3d.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 使用 3D
-order: 4
+order: 5
 ---
 
 ## 安装依赖

packages/site/docs/manual/further-reading/bundle.en.md

@@ -0,0 +1,94 @@
+---
+title: Bundle Project
+order: 6
+---
+
+In general, if you are using modern build tools such as Webpack, Rollup, or ESBuild, you can easily build projects that depend on `@antv/g6`.
+
+Some build tools, such as Vite, use ESBuild as the underlying tool, so you can refer to ESBuild's configuration.
+
+Below are some example configurations that you can refer to when building your project. If you find that these configurations do not work properly, make sure that your build tool version is up to date.
+
+## Bundle Project with Webpack
+
+1. Make sure that `webpack` and `webpack-cli` are installed in your project:
+
+```bash
+npm install webpack webpack-cli --save-dev
+```
+
+2. Refer to the following `webpack.config.js` for configuration:
+
+```js
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+  },
+  mode: 'production',
+};
+```
+
+3. Run the build command:
+
+```bash
+npx webpack
+```
+
+> The above configuration works with `"webpack": "^5.94.0"`, `"webpack-cli": "^5.1.4"`.
+
+If your Webpack version is lower, you may need to add additional loaders:
+
+- `ts-loader`: Used to load TypeScript files
+- `@babel/plugin-transform-class-properties`: Used to transform properties of TypeScript classes
+
+## Bundle Project with Rollup
+
+1. First, make sure that `rollup` and the necessary plugins are installed in your project:
+
+- `@rollup/plugin-commonjs`: Used to load CommonJS modules
+- `@rollup/plugin-node-resolve`: Used to load Node.js modules
+
+```bash
+npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev
+```
+
+2. Refer to the following `rollup.config.js` for configuration:
+
+```js
+const commonjs = require('@rollup/plugin-commonjs');
+const resolve = require('@rollup/plugin-node-resolve');
+
+module.exports = {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.js',
+    format: 'umd',
+    name: 'project',
+  },
+  plugins: [resolve(), commonjs()],
+};
+```
+
+3. Run the build command:
+
+```bash
+npx rollup -c
+```
+
+## Bundle Project with ESBuild
+
+1. First, make sure that `esbuild` is installed in your project:
+
+```bash
+npm install esbuild --save-dev
+```
+
+2. Run the build command:
+
+```bash
+npx esbuild src/index.ts --bundle --outfile=dist/index.js
+```

packages/site/docs/manual/further-reading/bundle.zh.md

@@ -0,0 +1,94 @@
+---
+title: 项目打包
+order: 6
+---
+
+通常情况下，如果你使用的现代构建工具，如 Webpack、Rollup 或 ESBuild，你可以很容易地构建依赖于 `@antv/g6` 的项目。
+
+一些构建工具例如 Vite，其底层是使用 ESBuild，因此你可以参考 ESBuild 的配置。
+
+下面是一些示例配置，你可以参考这些配置来构建你的项目。如果你发现这些配置无法正常工作，请确保你的构建工具版本较新。
+
+## 使用 Webpack 打包项目
+
+1. 确保你的项目中已经安装了 `webpack` 和 `webpack-cli`：
+
+```bash
+npm install webpack webpack-cli --save-dev
+```
+
+2. 参考下面的 `webpack.config.js` 进行配置：
+
+```js
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.ts',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'index.js',
+  },
+  mode: 'production',
+};
+```
+
+3. 执行构建命令：
+
+```bash
+npx webpack
+```
+
+> 上述配置在："webpack": "^5.94.0"，"webpack-cli": "^5.1.4" 可以正常工作。
+
+如果你的 webpack 版本较低，可能需要添加额外的 loader：
+
+- `ts-loader`：用于加载 TypeScript 文件
+- `@babel/plugin-transform-class-properties`：用于转换 TypeScript 类的属性
+
+## 使用 Rollup 打包项目
+
+1. 首先，确保你的项目中已经安装了 `rollup` 及必要的插件：
+
+- `@rollup/plugin-commonjs`：用于加载 CommonJS 模块
+- `@rollup/plugin-node-resolve`：用于加载 Node.js 模块
+
+```bash
+npm install rollup @rollup/plugin-commonjs @rollup/plugin-node-resolve --save-dev
+```
+
+2. 参考下面的 `rollup.config.js` 进行配置：
+
+```js
+const commonjs = require('@rollup/plugin-commonjs');
+const resolve = require('@rollup/plugin-node-resolve');
+
+module.exports = {
+  input: 'src/index.ts',
+  output: {
+    file: 'dist/index.js',
+    format: 'umd',
+    name: 'project',
+  },
+  plugins: [resolve(), commonjs()],
+};
+```
+
+3. 执行构建命令：
+
+```bash
+npx rollup -c
+```
+
+## 使用 ESBuild 打包项目
+
+1. 首先，确保你的项目中已经安装了 `esbuild`：
+
+```bash
+npm install esbuild --save-dev
+```
+
+2. 执行构建命令：
+
+```bash
+npx esbuild src/index.ts --bundle --outfile=dist/index.js
+```

packages/site/docs/manual/further-reading/coordinate.en.md

@@ -1,6 +1,6 @@
 ---
 title: coordinate
-order: 1
+order: 2
 ---
 
 ## Overview
@@ -43,5 +43,3 @@ Other related APIs are also provided:
 - Get the viewport center in viewport coordinates: [getCanvasCenter](/en/api/graph/method#graphgetcanvascenter)
 - Get the viewport center in canvas coordinates: [getViewportCenter](/en/api/graph/method#graphgetviewportcenter)
 - Get the position of the graph origin in the viewport coordinate system: [getPosition](/en/api/graph/method#graphgetposition)
-
-

packages/site/docs/manual/further-reading/coordinate.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 坐标系
-order: 1
+order: 2
 ---
 
 ## 概述

packages/site/docs/manual/further-reading/download-image.en.md

@@ -1,6 +1,6 @@
 ---
 title: download-image
-order: 2
+order: 3
 ---
 
 G6 5.0 only provides an API for exporting the canvas as a Base64 image ([toDataURL](/en/api/graph/method#graphtodataurloptions)). If you need to download the image, you can use the following method:

packages/site/docs/manual/further-reading/download-image.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 下载图片
-order: 2
+order: 3
 ---
 
 G6 5.0 仅提供导出画布为 Base64 图片的 API([toDataURL](/api/graph/method#graphtodataurloptions))，如果需要下载图片，可以使用以下方法：

packages/site/docs/manual/further-reading/iconfont.en.md

@@ -1,6 +1,6 @@
 ---
 title: Using Iconfont
-order: 3
+order: 4
 ---
 
 ## Overview

packages/site/docs/manual/further-reading/iconfont.zh.md

@@ -1,6 +1,6 @@
 ---
 title: 使用 iconfont
-order: 3
+order: 4
 ---
 
 ## 概述

packages/site/docs/manual/further-reading/renderer.en.md

@@ -1,5 +1,6 @@
 ---
 title: renderer
+order: 1
 ---
 
 G6 uses Canvas as the default renderer, but also supports rendering with SVG and WebGL. To switch to the SVG or WebGL renderer, simply pass the `renderer` parameter during initialization.

packages/site/docs/manual/further-reading/renderer.zh.md

@@ -1,5 +1,6 @@
 ---
 title: 渲染器
+order: 1
 ---
 
 G6 默认使用 Canvas 作为渲染器，但也支持通过 SVG 和 WebGL 进行渲染，要切换到 SVG 或 WebGL 渲染器，只需在初始化时传入 `renderer` 参数即可。

packages/site/scripts/sort-doc.ts

@@ -29,8 +29,9 @@ if (!path) {
 const orderRegex = /order: ([\d]+)/;
 
 /**
- *
- * @param file
+ * Get the order of the file
+ * @param file file path
+ * @returns order
  */
 function getOrder(file: string) {
   const content = fs.readFileSync(file, 'utf-8');
@@ -45,7 +46,7 @@ function getOrder(file: string) {
 const docs: [number, string][] = [];
 
 /**
- *
+ * Sort the docs
  */
 function sortDocs() {
   // list all files in the directory
@@ -67,7 +68,7 @@ function sortDocs() {
 let currentLine = 0;
 
 /**
- *
+ * Print the docs
  */
 function printDocs() {
   readline.cursorTo(process.stdout, 0, 0);
@@ -78,12 +79,12 @@ function printDocs() {
     else console.log(`  [${index}] ${name}`);
   });
 
-  console.log(chalk.greenBright('Press ↑/↓ to move, Press ⌘ + ↑/↓ to swap, Press Ctrl + C to exit'));
+  console.log(chalk.greenBright('Press ↑/↓ to move, Press alt + ↑/↓ to swap, Press Ctrl + C to exit'));
   console.log(chalk.green('Enter ' + chalk.bold('y') + ' to apply sorted order'));
 }
 
 /**
- *
+ * Handle keypress event
  */
 function onKeypress() {
   process.stdin.on('keypress', (ch, key) => {