feat: add plugin-demo

Author: Mister-Hope

.vscode/settings.json

@@ -21,6 +21,7 @@
   "cSpell.words": [
     "artalk",
     "bumpp",
+    "codepen",
     "commitlint",
     "composables",
     "darkmode",
@@ -36,6 +37,7 @@
     "giscus",
     "globby",
     "gtag",
+    "jsfiddle",
     "jsonld",
     "katex",
     "lazyload",

docs/.vuepress/config.ts

@@ -5,6 +5,7 @@ import { getRealPath } from '@vuepress/helper'
 import { cachePlugin } from '@vuepress/plugin-cache'
 import { catalogPlugin } from '@vuepress/plugin-catalog'
 import { commentPlugin } from '@vuepress/plugin-comment'
+import { demoPlugin } from '@vuepress/plugin-demo'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { feedPlugin } from '@vuepress/plugin-feed'
 import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'
@@ -78,6 +79,12 @@ export default defineUserConfig({
   plugins: [
     catalogPlugin(),
     commentPlugin({ provider: 'Giscus' }),
+    demoPlugin({
+      markdown: true,
+      normal: true,
+      vue: true,
+      react: true,
+    }),
     docsearchPlugin(),
     feedPlugin({
       hostname: 'https://ecosystem.vuejs.press',

docs/package.json

@@ -17,6 +17,7 @@
     "@vuepress/plugin-catalog": "workspace:*",
     "@vuepress/plugin-comment": "workspace:*",
     "@vuepress/plugin-copy-code": "workspace:*",
+    "@vuepress/plugin-demo": "workspace:*",
     "@vuepress/plugin-docsearch": "workspace:*",
     "@vuepress/plugin-feed": "workspace:*",
     "@vuepress/plugin-markdown-ext": "workspace:*",

docs/plugins/markdown/demo.md

@@ -0,0 +1,72 @@
+# demo
+
+<NpmBadge package="@vuepress/plugin-demo" />
+
+## Usage
+
+```bash
+npm i -D @vuepress/plugin-demo@next
+```
+
+```ts
+import { demoPlugin } from '@vuepress/plugin-demo'
+
+export default {
+  plugins: [
+    demoPlugin({
+      // options
+    }),
+  ],
+}
+```
+
+## Options
+
+### dev
+
+- Type: `boolean`
+
+- Default: `true`
+
+- Details:
+
+  Whether check dead links in markdown in devServer
+
+### build
+
+- Type: `boolean | 'error'`
+
+- Default: `true`
+
+- Details:
+
+  Whether check dead links in markdown in build. If set to `'error'`, the build will fail if there are dead links.
+
+### exclude
+
+- Type: `(string | RegExp)[] | ((link: string, isDev: boolean) => boolean)`
+
+- Details:
+
+  The links that should be excluded from checking. You can use a list of strings or regular expressions, or a function that returns a boolean.
+
+- Example:
+
+  ```ts
+  linksCheckPlugin({
+    exclude: [
+      // exclude links by string
+      '/exclude-link',
+      // exclude links by regex
+      /\/exclude-link-regex/,
+    ],
+
+    // or exclude links by function
+    exclude: (link, isDev) => {
+      if (isDev) {
+        return link.startsWith('/exclude-link-dev')
+      }
+      return link.startsWith('/exclude-link-build')
+    },
+  })
+  ```

plugins/markdown/plugin-demo/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "@vuepress/plugin-demo",
+  "version": "2.0.0-rc.61",
+  "description": "VuePress plugin - demo",
+  "keywords": [
+    "vuepress-plugin",
+    "vuepress",
+    "plugin",
+    "markdown",
+    "demo"
+  ],
+  "homepage": "https://ecosystem.vuejs.press/plugins/markdown/demo.html",
+  "bugs": {
+    "url": "https://github.com/vuepress/ecosystem/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vuepress/ecosystem.git",
+    "directory": "plugins/markdown/plugin-demo"
+  },
+  "license": "MIT",
+  "author": {
+    "name": "Mr.Hope",
+    "email": "[email protected]",
+    "url": "https://mister-hope.com"
+  },
+  "type": "module",
+  "exports": {
+    ".": "./lib/node/index.js",
+    "./package.json": "./package.json"
+  },
+  "main": "./lib/node/index.js",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "scripts": {
+    "build": "tsc -b tsconfig.build.json",
+    "bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "style": "sass src:lib --embed-sources --style=compressed"
+  },
+  "dependencies": {
+    "@mdit/plugin-alert": "^0.13.1",
+    "@mdit/plugin-container": "^0.13.1",
+    "@mdit/plugin-demo": "^0.13.1",
+    "@types/markdown-it": "^14.1.2",
+    "@vuepress/helper": "workspace:*",
+    "@vueuse/core": "^12.0.0",
+    "balloon-css": "^1.2.0",
+    "vue": "^3.5.13"
+  },
+  "peerDependencies": {
+    "vuepress": "2.0.0-rc.18"
+  },
+  "devDependencies": {
+    "@types/babel__core": "7.20.5",
+    "markdown-it": "^14.1.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/markdown/plugin-demo/rollup.config.ts

@@ -0,0 +1,8 @@
+import { rollupBundle } from '../../../scripts/rollup.js'
+
+export default [
+  ...rollupBundle('node/index', {
+    external: ['@mdit/plugin-container', '@mdit/plugin-demo'],
+  }),
+  ...rollupBundle('client/config'),
+]

plugins/markdown/plugin-demo/src/client/components/MdDemo.ts

@@ -0,0 +1,93 @@
+import { useEventListener, useToggle } from '@vueuse/core'
+import type { SlotsType, VNode } from 'vue'
+import { defineComponent, h, ref, shallowRef } from 'vue'
+
+import '../styles/demo.css'
+import '../styles/md-demo.css'
+
+export default defineComponent({
+  name: 'MdDemo',
+
+  props: {
+    /**
+     * Markdown demo id
+     *
+     * Markdown 代码演示 id
+     */
+    id: {
+      type: String,
+      required: true,
+    },
+
+    /**
+     * Markdown demo title
+     *
+     * Markdown 演示标题
+     */
+    title: {
+      type: String,
+      default: '',
+    },
+  },
+
+  slots: Object as SlotsType<{
+    default: () => VNode[]
+    code: () => VNode[]
+  }>,
+
+  setup(props, { slots }) {
+    const [isExpanded, toggleIsExpand] = useToggle(false)
+    const codeContainer = shallowRef<HTMLDivElement>()
+    const height = ref('0')
+
+    useEventListener('beforeprint', () => {
+      toggleIsExpand(true)
+    })
+
+    return (): VNode =>
+      h('div', { class: 'vp-demo-container vp-md-demo', id: props.id }, [
+        h('div', { class: 'vp-demo-container-header' }, [
+          h('button', {
+            'type': 'button',
+            'title': 'toggle',
+            'aria-hidden': true,
+            'class': [
+              'vp-md-demo-toggle-button',
+              isExpanded.value ? 'expanded' : '',
+            ],
+            'onClick': () => {
+              height.value = isExpanded.value
+                ? '0'
+                : `${codeContainer.value!.clientHeight + 13.8}px`
+              toggleIsExpand()
+            },
+          }),
+          props.title
+            ? h(
+                'div',
+                { class: 'vp-demo-container-title' },
+                decodeURIComponent(props.title),
+              )
+            : null,
+        ]),
+
+        h('div', { class: 'vp-md-demo-display' }, slots.default()),
+
+        h(
+          'div',
+          {
+            class: 'vp-demo-code-wrapper',
+            style: { height: height.value },
+          },
+          h(
+            'div',
+            {
+              ref: codeContainer,
+              class: 'vp-md-demo-codes',
+            },
+            slots.code(),
+          ),
+        ),
+      ])
+  },
+})