feat: add demo code blocks

.vitepress/config.ts → .vitepress/config.js

@@ -1,5 +1,7 @@
 import { defineConfig } from 'vitepress'
 
+import VitePluginVitepressDemo from 'vite-plugin-vitepress-demo'
+
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "PDanPDan",
@@ -22,21 +24,31 @@ export default defineConfig({
 
     nav: [
       { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
+      { text: 'Examples', link: '/markdown-examples/' }
     ],
 
     sidebar: [
       {
         text: 'Examples',
         items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
+          { text: 'Markdown Examples', link: '/markdown-examples/' },
+          { text: 'Runtime API Examples', link: '/api-examples/' }
         ]
       }
     ],
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/pdanpdan' }
     ]
+  },
+
+  vite: {
+    plugins: [
+      VitePluginVitepressDemo( {
+        glob: [
+          '**/*.demo.vue'
+        ]
+      }),
+    ]
   }
 })

.vitepress/theme/index.ts → .vitepress/theme/index.js

@@ -3,6 +3,8 @@ import { h } from 'vue'
 import Theme from 'vitepress/theme'
 import './style.css'
 
+import { AntdTheme } from 'vite-plugin-vitepress-demo/theme'
+
 export default {
   extends: Theme,
   Layout: () => {
@@ -11,6 +13,6 @@ export default {
     })
   },
   enhanceApp({ app, router, siteData }) {
-    // ...
+    app.component( 'Demo', AntdTheme )
   }
 }

package.json

@@ -1,13 +1,13 @@
 {
   "type": "module",
-
   "scripts": {
     "docs:dev": "vitepress dev",
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
   },
   "devDependencies": {
-    "vitepress": "1.0.0-rc.20",
+    "vite-plugin-vitepress-demo": "^2.1.0",
+    "vitepress": "^1.0.0-rc.20",
     "vue": "^3.3.4"
   },
   "pnpm": {

pages/api-examples/example_1.demo.vue

@@ -0,0 +1,18 @@
+<docs>
+---
+title: Test Title 1
+---
+
+Hello World This is Test Docs block code in `docs.vue`.
+
+</docs>
+
+<template>
+  <div>{{ msg }}</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const msg = ref('Hello World')
+</script>

pages/api-examples.md → pages/api-examples/index.md

@@ -47,3 +47,8 @@ const { site, theme, page, frontmatter } = useData()
 ## More
 
 Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).
+
+
+## Tests
+
+<demo src="./example_1.demo.vue" title="Test title" desc="Test description"></demo>

pages/index.md

@@ -9,10 +9,10 @@ hero:
   actions:
     - theme: brand
       text: Markdown Examples
-      link: /markdown-examples
+      link: /markdown-examples/
     - theme: alt
       text: API Examples
-      link: /api-examples
+      link: /api-examples/
 
 features:
   - title: Feature A