docs: Add Sandpack in docs (#363)

docs/.vitepress/config.mts

@@ -1,4 +1,6 @@
 import { defineConfig } from 'vitepress';
+import container from 'markdown-it-container';
+import { renderSandbox } from 'vitepress-plugin-sandpack';
 import { en } from './en.mts';
 import { ko } from './ko.mts';
 import { zh_hans } from './zh_hans.mts';
@@ -11,4 +13,13 @@ export default defineConfig({
     ko: { label: '한국어', ...ko },
     zh_hans: { label: '简体中文', ...zh_hans },
   },
+  markdown: {
+    config(md) {
+      md.use(container, 'sandpack', {
+        render(tokens: any[], idx: number) {
+          return renderSandbox(tokens, idx, 'sandpack');
+        },
+      });
+    },
+  },
 });

docs/.vitepress/theme/index.js

@@ -1,4 +1,15 @@
 import DefaultTheme from 'vitepress/theme';
 import './index.css';
+import { defineAsyncComponent } from 'vue';
 
-export default DefaultTheme;
+/** @type {import('vitepress').Theme} */
+export default {
+  ...DefaultTheme,
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx);
+    ctx.app.component(
+      'Sandpack',
+      defineAsyncComponent(() => import('../../components/Sandpack.vue'))
+    );
+  },
+};

docs/components/Sandpack.vue

@@ -0,0 +1,35 @@
+<template>
+  <Sandbox
+    :rtl="rtl"
+    template="vanilla-ts"
+    :light-theme="lightTheme"
+    :dark-theme="darkTheme"
+    :options="{
+      ...props,
+      showLineNumbers: true,
+      showConsole: true,
+      showTabs: false,
+    }"
+    :custom-setup="{
+      ...props,
+      deps: {
+        'es-toolkit': 'latest',
+      },
+    }"
+    :code-options="codeOptions"
+  >
+    <slot />
+  </Sandbox>
+</template>
+
+<script setup>
+import { Sandbox, sandboxProps } from 'vitepress-plugin-sandpack';
+
+const props = defineProps(sandboxProps);
+</script>
+
+<style>
+.sp-preview {
+  display: none !important;
+}
+</style>

docs/ko/reference/array/chunk.md

@@ -38,6 +38,18 @@ chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3);
 // Returns: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]
 ```
 
+## 사용해보기
+
+::: sandpack
+
+```ts index.ts
+import { chunk } from 'es-toolkit/array';
+
+console.log(chunk([1, 2, 3, 4, 5], 2));
+```
+
+:::
+
 ## Lodash 호환성
 
 `es-toolkit/compat`에서 `chunk`를 가져오면 lodash와 호환돼요.

docs/package.json

@@ -2,7 +2,10 @@
   "name": "docs",
   "private": true,
   "devDependencies": {
-    "vitepress": "^1.2.2"
+    "markdown-it-container": "^4.0.0",
+    "vitepress": "^1.3.2",
+    "vitepress-plugin-sandpack": "^1.1.4",
+    "vue": "^3.4.37"
   },
   "scripts": {
     "docs:dev": "vitepress dev",

docs/reference/array/chunk.md

@@ -39,6 +39,18 @@ chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3);
 // Returns: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]
 ```
 
+## Demo
+
+::: sandpack
+
+```ts index.ts
+import { chunk } from 'es-toolkit/array';
+
+console.log(chunk([1, 2, 3, 4, 5], 2));
+```
+
+:::
+
 ## Lodash Compatibility
 
 Import `chunk` from `es-toolkit/compat` for full compatibility with lodash.

docs/zh_hans/reference/array/chunk.md

@@ -39,6 +39,18 @@ chunk(['a', 'b', 'c', 'd', 'e', 'f', 'g'], 3);
 // 返回: [['a', 'b', 'c'], ['d', 'e', 'f'], ['g']]
 ```
 
+## 試用
+
+::: sandpack
+
+```ts index.ts
+import { chunk } from 'es-toolkit/array';
+
+console.log(chunk([1, 2, 3, 4, 5], 2));
+```
+
+:::
+
 ## Lodash 兼容性
 
 从`es-toolkit/compat`中导入`chunk`以实现与 lodash 的完全兼容。
@@ -55,7 +67,7 @@ chunk([1, 2, 3], 0); // Returns []
 ## 性能对比
 
 |                   | [包大小](../../bundle-size.md) | [性能](../../performance.md) |
-| ----------------- | ------------------------------ | ----------------------------------- |
+| ----------------- | ------------------------------ | ---------------------------- |
 | es-toolkit        | 238 字节 (小 92.4%)            | 9,338,821 次 (慢 11%)        |
 | es-toolkit/compat | 307 字节 (小 90.2%)            | 9,892,157 次 (慢 5%)         |
 | lodash-es         | 3,153 字节                     | 10,523,270 次                |