docs: add documentation (#5695)

* refactor(site): adjust script

* feat(site): add script that can sort docs in specific folder

* docs: remove apis folder

* docs: add getting-started for chinese version

* docs: add core-concept for chinese version

* docs: add upgrade for chinese version

* docs: remove quick-start

* refactor(site): add createGraph global utils

* docs: add extension in core concept

packages/site/.dumi/global.ts

@@ -16,4 +16,28 @@ if (window) {
 
   window.React = require('react');
   window.ReactDOM = require('react-dom');
+
+  // 用于文档中快速创建 ob demo 示例
+  window.createGraph = (options, style = {}) => {
+    const container = document.createElement('div');
+    Object.entries(style).forEach(([key, value]) => {
+      if (key === 'width' || key === 'height') {
+        if (typeof value === 'number') {
+          container.style[key] = `${value}px`;
+        }
+        container.style[key] = value;
+      }
+    });
+
+    const graph = new window.g6.Graph({
+      width: style.width,
+      height: style.height,
+      container,
+      ...options,
+    });
+
+    graph.render();
+
+    return container;
+  };
 }

packages/site/common/angular-snippet.md

@@ -0,0 +1,56 @@
+<iframe src="https://codesandbox.io/embed/2gv4rt?view=split&module=%2Fsrc%2Fapp%2Fapp.component.ts&hidenavigation=1&theme=light"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="G6 Angular"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+**app.component.html**
+
+```html
+<div>
+  <h1>{{ title }}</h1>
+  <div #container></div>
+</div>
+```
+
+**app.component.ts**
+
+```ts
+import { Component, ViewChild, ElementRef } from '@angular/core';
+import { Graph } from '@antv/g6';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+})
+export class AppComponent {
+  title = 'Use G6 in Angular';
+
+  @ViewChild('container') container: ElementRef;
+
+  ngAfterViewInit() {
+    const graph = new Graph({
+      container: this.container.nativeElement,
+      width: 500,
+      height: 500,
+      data: {
+        nodes: [
+          {
+            id: 'node-1',
+            style: { x: 50, y: 100 },
+          },
+          {
+            id: 'node-2',
+            style: { x: 150, y: 100 },
+          },
+        ],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    graph.render();
+  }
+}
+```

packages/site/common/react-snippet.md

@@ -0,0 +1,40 @@
+<iframe src="https://codesandbox.io/embed/gpcc43?view=split&module=%2Fsrc%2FApp.tsx&hidenavigation=1&theme=light"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="G6 React"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+```tsx
+import { Graph } from '@antv/g6';
+import { useEffect, useRef } from 'react';
+
+export default () => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const graph = new Graph({
+      container: containerRef.current!,
+      width: 500,
+      height: 500,
+      data: {
+        nodes: [
+          {
+            id: 'node-1',
+            style: { x: 50, y: 100 },
+          },
+          {
+            id: 'node-2',
+            style: { x: 150, y: 100 },
+          },
+        ],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    graph.render();
+  }, []);
+
+  return <div ref={containerRef} />;
+};
+```

packages/site/common/vue-snippet.md

@@ -0,0 +1,40 @@
+<iframe src="https://codesandbox.io/embed/xzf7pg?view=split&module=%2Fsrc%2FApp.vue&hidenavigation=1&theme=light"
+     style="width:100%; height: 500px; border:0; border-radius: 4px; overflow:hidden;"
+     title="G6 Vue"
+     allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+     sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+   ></iframe>
+
+```html
+<template>
+  <div id="container"></div>
+</template>
+
+<script setup>
+  import { onMounted } from 'vue';
+  import { Graph } from '@antv/g6';
+
+  onMounted(() => {
+    const graph = new Graph({
+      container: document.getElementById('container'),
+      width: 500,
+      height: 500,
+      data: {
+        nodes: [
+          {
+            id: 'node-1',
+            style: { x: 50, y: 100 },
+          },
+          {
+            id: 'node-2',
+            style: { x: 150, y: 100 },
+          },
+        ],
+        edges: [{ id: 'edge-1', source: 'node-1', target: 'node-2' }],
+      },
+    });
+
+    graph.render();
+  });
+</script>
+```

packages/site/docs/manual/core-concept/animation.en.md

@@ -1,4 +1,4 @@
 ---
 title: Animation
-order: 7
+order: 8
 ---