docs: update

docs/content/basic/demos/getting-started/circle.vue

@@ -0,0 +1,22 @@
+<template>
+  <canvas ref="canvas" width="600" height="300"></canvas>
+</template>
+
+<script setup lang="ts">
+import * as nc from 'newcar'
+import { onMounted, ref } from 'vue'
+
+const canvas = ref<HTMLCanvasElement>()
+
+onMounted(async () => {
+  const engine = await new nc.CarEngine().init('https://unpkg.com/canvaskit-wasm@latest/bin/canvaskit.wasm')
+  const app = engine.createApp(canvas.value!).setBackgroundColor('transparent')
+  const root = new nc.Circle(100, {
+    x: 100,
+    y: 100
+  })
+  const scene = nc.createScene(root)
+  app.checkout(scene)
+  app.play()
+})
+</script>

docs/content/basic/getting-started.md

@@ -3,8 +3,7 @@ title: Getting Started
 ---
 
 <script setup lang="ts">
-import { default as DemoText } from './demos/demo-text.vue'
-
+import { default as DemoCircle } from './demos/getting-started/circle.vue'
 </script>
 
 # Getting Started
@@ -126,7 +125,9 @@ Then, we created a `Scene` object and set the circle widget as the root widget o
 
 Finally, we used the `App.checkout` method to switch to this scene and the `App.play` method to play the animation.
 
-If you setup the project correctly, you will see a white circle on the screen.
+If you setup the project correctly, you will see a white circle on the screen, just like this.
+<DemoCircle/>
+<demo src="./demos/getting-started/circle.vue"/>
 
 ## Adding Animation
 

docs/content/zh/basic/getting-started.md

@@ -1,6 +1,9 @@
 ---
 title: 快速开始
 ---
+<script setup lang="ts">
+import { default as DemoCircle } from '../../basic/demos/getting-started/circle.vue'
+</script>
 
 # 快速开始
 
@@ -120,8 +123,8 @@ app.play()
 
 最后，我们使用 `App.checkout` 方法切换到这个场景，并使用 `App.play` 方法播放动画。
 
-如果您正确设置了项目，您将在屏幕上看到一个白色圆圈。
-
+如果您正确设置了项目，您将在屏幕上看到一个白色圆圈就像这样。
+<DemoCircle/>
 ## 添加动画
 
 ```typescript

docs/package.json

@@ -8,9 +8,11 @@
   },
   "dependencies": {
     "@newcar/mod-math": "latest",
+    "@shikijs/vitepress-twoslash": "^1.12.0",
     "canvaskit-wasm": "0.39.1",
     "newcar": "latest",
-    "unplugin-vue-components": "^0.26.0"
+    "unplugin-vue-components": "^0.26.0",
+    "vitepress-demoblock": "^1.0.4"
   },
   "devDependencies": {
     "unocss": "^0.59.4",