chore(docs): import vitepress-theme-demoblock

docs/.vitepress/config.mts

@@ -1,11 +1,33 @@
 import { defineConfig } from 'vitepress'
+import { demoblockPlugin, demoblockVitePlugin } from 'vitepress-theme-demoblock'
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   base: '/vue3-styled-components/',
   title: 'Vue3 Styled Components',
   description: 'A tool for css in js.',
   themeConfig: {
+    demoblock: {
+      'root': {
+        'view-source': 'View source',
+        'hide-source': 'Hide source',
+        'edit-in-editor': 'Edit in Playground',
+        'edit-on-github': 'Edit on GitHub',
+        'copy-code': 'Copy code',
+        'copy-success': 'Copy success',
+        'copy-error': 'Copy error',
+      },
+      'zh': {
+        'view-source': '查看源代码',
+        'hide-source': '隐藏源代码',
+        'edit-in-editor': '在 Playground 中编辑',
+        'edit-on-github': '在 Github 中编辑',
+        'copy-code': '复制代码',
+        'copy-success': '复制成功',
+        'copy-error': '复制失败'
+      }
+    },
+
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
@@ -26,4 +48,13 @@ export default defineConfig({
       { icon: 'github', link: 'https://github.com/vue-styled-components/vue3-styled-components' },
     ],
   },
+  markdown: {
+    config: (md) => {
+      md.use(demoblockPlugin)
+    }
+  },
+  vite: {
+    plugins: [demoblockVitePlugin()]
+  },
+  vue: {}
 })

docs/.vitepress/theme/index.ts

@@ -3,6 +3,8 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import 'vitepress-theme-demoblock/dist/theme/styles/index.css'
+import { useComponents } from './useComponents'
 
 export default {
   extends: DefaultTheme,
@@ -11,7 +13,8 @@ export default {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
     })
   },
-  enhanceApp({ app, router, siteData }) {
-    // ...
+  enhanceApp(ctx) {
+    DefaultTheme.enhanceApp(ctx)
+    useComponents(ctx.app)
   }
 } satisfies Theme

docs/.vitepress/theme/useComponents.ts

@@ -0,0 +1,8 @@
+// Don't remove this file, because it registers the demo components.
+import Demo from 'vitepress-theme-demoblock/dist/client/components/Demo.vue'
+import DemoBlock from 'vitepress-theme-demoblock/dist/client/components/DemoBlock.vue'
+
+export function useComponents(app) {
+  app.component('Demo', Demo)
+  app.component('DemoBlock', DemoBlock)
+}

docs/api-examples.md

@@ -2,48 +2,12 @@
 outline: deep
 ---
 
-# Runtime API Examples
+## Demo
 
-This page demonstrates usage of some of the runtime APIs provided by VitePress.
-
-The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
-
-```md
-<script setup>
-import { useData } from 'vitepress'
-
-const { theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
+:::demo
+```vue
+<template>
+  <h3>Demo Test</h3>
+</template>
 ```
-
-<script setup>
-import { useData } from 'vitepress'
-
-const { site, theme, page, frontmatter } = useData()
-</script>
-
-## Results
-
-### Theme Data
-<pre>{{ theme }}</pre>
-
-### Page Data
-<pre>{{ page }}</pre>
-
-### Page Frontmatter
-<pre>{{ frontmatter }}</pre>
-
-## More
-
-Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
+:::

docs/package.json

@@ -13,6 +13,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
-    "vitepress": "^1.0.2"
+    "vitepress": "^1.0.2",
+    "vitepress-theme-demoblock": "^3.0.7"
   }
 }