docs: update

docs/guide/why.md

@@ -92,6 +92,8 @@ As you can see, after using <ReactiveVscode />, the code is much cleaner and eas
 
 This library is built on top of `npm::@vue/reactivity`, and ported some code from `npm::@vue/runtime-core` (See [the `./packages/core/src/reactivity` directory](https://github.com/KermanX/reactive-vscode/blob/main/packages/core/src/reactivity)).
 
+The size of the minimal extension built with this library is about 12KB.
+
 ### Use Vue in Webview?
 
-This library is **not** designed for using Vue in a webview. If you want to use Vue in a webview, you can use the CDN version of Vue or bundler plugins like [`@tomjs/vite-plugin-vscode`](https://github.com/tomjs/vite-plugin-vscode).
+This library is **not** designed for using Vue in a webview. If you want to use Vue in a webview, you can use the CDN version of Vue or bundler plugins like `npm::@tomjs/vite-plugin-vscode`.

docs/index.md

@@ -33,3 +33,25 @@ features:
     title: Fully tree shakeable
     details: Only take what you want
 ---
+
+<script setup>
+import { withBase } from 'vitepress'
+</script>
+
+<div class="relative">
+
+::: code-group
+
+<<< ./examples/hello-counter/1.ts [<ReactiveVscode2 />]
+
+<<< ./examples/hello-counter/2.ts [Original VSCode API]
+
+:::
+
+<div class="absolute top-4 text-sm right-6 op-80 hidden sm:block">
+<a :href="withBase('examples/index.html')" style="text-decoration: none">
+<span class="i-carbon-launch mb-.5"></span> More examples
+</a>
+</div>
+
+</div>