feat(plugin-md-power): add demo syntax (#415)

* feat(plugin-md-power): add `demo` syntax

cli/src/packageJson.ts

@@ -27,7 +27,7 @@ export async function createPackageJson(
       let version = await getPackageManagerVersion(packageManager)
       if (version) {
         if (packageManager === 'yarn' && version.startsWith('1'))
-          version = '4.5.0'
+          version = '4.6.0'
         pkg.packageManager = `${packageManager}@${version}`
       }
     }

cli/templates/.vuepress/config.ts.handlebars

@@ -106,7 +106,6 @@ export default defineUserConfig({
        * @see https://theme-plume.vuejs.press/config/plugins/markdown-enhance/
        */
       // markdownEnhance: {
-      //   demo: true,
       //   chartjs: true,
       //   echarts: true,
       //   mermaid: true,
@@ -131,6 +130,7 @@ export default defineUserConfig({
       //   codeSandbox: true,  // 启用嵌入 codeSandbox 语法 @[codeSandbox](id)
       //   jsfiddle: true,     // 启用嵌入 jsfiddle 语法 @[jsfiddle](user/id)
       //   npmTo: true,        // 启用 npm-to 容器  ::: npm-to
+      //   demo: true,         // 启用 demo 容器  ::: demo
       //   repl: {             // 启用 代码演示容器
       //     go: true,         // ::: go-repl
       //     rust: true,       // ::: rust-repl

cli/templates/docs/en/preview/markdown.md

@@ -254,26 +254,36 @@ const c = a + b
 
 **code demo:**
 
-::: normal-demo Demo 演示
+:::: demo title="Demo" desc="A normal demo"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">Very</span>Powerful!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('Very Powerful')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **tab card：**
 

cli/templates/docs/zh/preview/markdown.md

@@ -254,26 +254,36 @@ const c = a + b
 
 **代码演示：**
 
-::: normal-demo Demo 演示
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">非常</span>强大!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('非常强大')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **选项卡：**
 

docs/.vuepress/config.ts

@@ -24,7 +24,7 @@ export default defineUserConfig({
     ['meta', { name: 'google-site-verification', content: 'AaTP7bapCAcoO9ZGE67ilpy99GL6tYqtD30tRHjO9Ps' }],
   ],
 
-  pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules'],
+  pagePatterns: ['**/*.md', '!**/*.snippet.md', '!.vuepress', '!node_modules', '!docs/notes/theme/guide/代码演示/demo/*'],
 
   extendsBundlerOptions(bundlerOptions, app) {
     addViteOptimizeDepsInclude(bundlerOptions, app, '@simonwep/pickr')

docs/.vuepress/notes/zh/theme-guide.ts

@@ -64,14 +64,15 @@ export const themeGuide = defineNoteConfig({
           icon: 'carbon:demo',
           collapsed: true,
           items: [
-            '前端',
+            '前端演示',
             'rust',
             'golang',
             'kotlin',
             'codepen',
             'jsFiddle',
             'codeSandbox',
             'replit',
+            { link: '前端', text: '前端（弃用）' },
           ],
         },
         {

docs/.vuepress/theme.ts

@@ -36,6 +36,7 @@ export const theme: Theme = plumeTheme({
       replit: true,
       codeSandbox: true,
       jsfiddle: true,
+      demo: true,
       npmTo: ['pnpm', 'yarn', 'npm'],
       repl: {
         go: true,

docs/2.preview/主题效果预览.md

@@ -348,26 +348,36 @@ const c = a + b
 
 **代码演示：**
 
-::: normal-demo Demo 演示
+:::: demo title="常规示例" desc="一个常规示例"
+
+::: code-tabs
+@tab HTML
 
 ```html
-<h1>Hello Word!</h1>
-<p><span id="very">非常</span>强大!</p>
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
 ```
 
+@tab Javascript
+
 ```js
-document.querySelector('#very').addEventListener('click', () => {
-  alert('非常强大')
-})
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
 ```
 
+@tab CSS
+
 ```css
-span {
-  color: red;
+#app {
+  font-size: 2em;
+  text-align: center;
 }
 ```
 
 :::
+::::
 
 **选项卡：**
 

docs/notes/theme/guide/代码演示/demo/Counter.module.css

@@ -0,0 +1,5 @@
+.btn {
+  padding: 0 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}

docs/notes/theme/guide/代码演示/demo/Counter.ts

@@ -0,0 +1,18 @@
+import { defineComponent, h, ref } from 'vue'
+import styles from './Counter.module.css'
+
+export default defineComponent({
+  setup() {
+    const count = ref(0)
+    return () => h('div', {
+      class: 'counter',
+    }, [
+      h('p', `计数器：${count.value}`),
+      h('button', {
+        type: 'button',
+        class: styles.btn,
+        onClick: () => count.value += 1,
+      }, '+ 1'),
+    ])
+  },
+})

docs/notes/theme/guide/代码演示/demo/Counter.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const count = ref(0)
+</script>
+
+<template>
+  <div class="counter">
+    <p>
+      计数器：{{ count }}
+    </p>
+    <button type="button" class="btn" @click="count += 1">
+      + 1
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  padding: 0 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+</style>

docs/notes/theme/guide/代码演示/demo/Toggle.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { useToggle } from '@vueuse/core'
+
+const [value, toggle] = useToggle()
+</script>
+
+<template>
+  <div>
+    <p>Value: {{ value ? 'ON' : 'OFF' }}</p>
+    <div style="display: flex;gap: 16px;">
+      <button class="btn" @click="toggle()">
+        Toggle
+      </button>
+      <button class="btn" @click="value = true">
+        Set On
+      </button>
+      <button class="btn" @click="value = false">
+        Set Off
+      </button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.btn {
+  padding: 0 8px;
+  border: 1px solid var(--vp-c-divider);
+  border-radius: 4px;
+}
+</style>

docs/notes/theme/guide/代码演示/demo/normal-lib.html

@@ -0,0 +1,30 @@
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+  <p id="message"></p>
+  <datetime id="datetime"></datetime>
+</div>
+
+<script>
+$('#message', document).text('So Awesome!')
+const datetime = $('#datetime', document)
+setInterval(() => {
+  datetime.text(dayjs().format('YYYY-MM-DD HH:mm:ss'))
+}, 1000)
+</script>
+
+<style lang="css">
+#app {
+  font-size: 2em;
+  text-align: center;
+}
+</style>
+
+<script type="config">
+{
+  "jsLib": [
+    "https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js",
+    "https://cdn.jsdelivr.net/npm/dayjs@1.11.13/dayjs.min.js"
+  ],
+  "cssLib": ["https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.min.css"]
+}
+</script>

docs/notes/theme/guide/代码演示/demo/normal.html

@@ -0,0 +1,16 @@
+<div id="app">
+  <h3>vuepress-theme-plume</h3>
+</div>
+
+<script lang="ts">
+const a = 'So Awesome!'
+const app = document.querySelector('#app')
+app.appendChild(window.document.createElement('small')).textContent = a
+</script>
+
+<style lang="css">
+#app {
+  font-size: 2em;
+  text-align: center;
+}
+</style>

docs/notes/theme/guide/代码演示/前端.md

@@ -1,11 +1,26 @@
 ---
 title: 前端
-author: pengzhanbo
 icon: icon-park-outline:html-five
 createTime: 2024/04/04 11:39:05
-permalink: /guide/repl/frontend/
+permalink: /guide/repl/frontend-deprecated/
+badge:
+  text: 弃用
+  type: danger
 ---
 
+::: caution 弃用说明
+[vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 在 未来的版本会将 `demo` 相关的
+功能迁移至 [vuepress/ecosystem](https://github.com/vuepress/ecosystem), 详细进度请查看 [ecosystem#293](https://github.com/vuepress/ecosystem/pull/293) 。
+
+但在基于用户反馈后发现，此功能在实际场景中使用表现不符合预期。存在以下问题：
+
+- `vue-demo` 仅能用于简单的组件演示，不能支持如 组件库、`composables-api` 等外部依赖的演示。
+- 演示代码仅能内联在 markdown 文件中，对于代码量较大的演示的编写体验不佳。
+- 在浏览器运行时通过异步加载 `babel` 转换源代码，一方面需要额外的等待时间，另一方面对于企业内网环境可能不支持。
+
+主题重新对 前端代码演示 功能进行了重新设计和重构，请查看新的 [前端代码演示](./前端演示.md) 。
+:::
+
 ## 概述
 
 前端代码演示 由 [vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供支持。