Skip to content

Commit ec42a7e

Browse files
Mister-HopeMister-Hope
committed
feat: add plugin-demo
1 parent 8e2aafe commit ec42a7e

32 files changed

+1602
-4
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
"cSpell.words": [
2222
"artalk",
2323
"bumpp",
24+
"codepen",
2425
"commitlint",
2526
"composables",
2627
"darkmode",
@@ -36,6 +37,7 @@
3637
"giscus",
3738
"globby",
3839
"gtag",
40+
"jsfiddle",
3941
"jsonld",
4042
"katex",
4143
"lazyload",

‎docs/.vuepress/config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { getRealPath } from '@vuepress/helper'
55
import { cachePlugin } from '@vuepress/plugin-cache'
66
import { catalogPlugin } from '@vuepress/plugin-catalog'
77
import { commentPlugin } from '@vuepress/plugin-comment'
8+
import { demoPlugin } from '@vuepress/plugin-demo'
89
import { docsearchPlugin } from '@vuepress/plugin-docsearch'
910
import { feedPlugin } from '@vuepress/plugin-feed'
1011
import { markdownExtPlugin } from '@vuepress/plugin-markdown-ext'
@@ -78,6 +79,12 @@ export default defineUserConfig({
7879
plugins: [
7980
catalogPlugin(),
8081
commentPlugin({ provider: 'Giscus' }),
82+
demoPlugin({
83+
markdown: true,
84+
normal: true,
85+
vue: true,
86+
react: true,
87+
}),
8188
docsearchPlugin(),
8289
feedPlugin({
8390
hostname: 'https://ecosystem.vuejs.press',

‎docs/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
"@vuepress/plugin-catalog": "workspace:*",
1818
"@vuepress/plugin-comment": "workspace:*",
1919
"@vuepress/plugin-copy-code": "workspace:*",
20+
"@vuepress/plugin-demo": "workspace:*",
2021
"@vuepress/plugin-docsearch": "workspace:*",
2122
"@vuepress/plugin-feed": "workspace:*",
2223
"@vuepress/plugin-markdown-ext": "workspace:*",

‎docs/plugins/markdown/demo.md‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# demo
2+
3+
<NpmBadge package="@vuepress/plugin-demo" />
4+
5+
## Usage
6+
7+
```bash
8+
npm i -D @vuepress/plugin-demo@next
9+
```
10+
11+
```ts
12+
import { demoPlugin } from '@vuepress/plugin-demo'
13+
14+
export default {
15+
plugins: [
16+
demoPlugin({
17+
// options
18+
}),
19+
],
20+
}
21+
```
22+
23+
## Options
24+
25+
### dev
26+
27+
- Type: `boolean`
28+
29+
- Default: `true`
30+
31+
- Details:
32+
33+
Whether check dead links in markdown in devServer
34+
35+
### build
36+
37+
- Type: `boolean | 'error'`
38+
39+
- Default: `true`
40+
41+
- Details:
42+
43+
Whether check dead links in markdown in build. If set to `'error'`, the build will fail if there are dead links.
44+
45+
### exclude
46+
47+
- Type: `(string | RegExp)[] | ((link: string, isDev: boolean) => boolean)`
48+
49+
- Details:
50+
51+
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.
52+
53+
- Example:
54+
55+
```ts
56+
linksCheckPlugin({
57+
exclude: [
58+
// exclude links by string
59+
'/exclude-link',
60+
// exclude links by regex
61+
/\/exclude-link-regex/,
62+
],
63+
64+
// or exclude links by function
65+
exclude: (link, isDev) => {
66+
if (isDev) {
67+
return link.startsWith('/exclude-link-dev')
68+
}
69+
return link.startsWith('/exclude-link-build')
70+
},
71+
})
72+
```

‎plugins/markdown/plugin-demo/package.json‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
{
2+
"name": "@vuepress/plugin-demo",
3+
"version": "2.0.0-rc.61",
4+
"description": "VuePress plugin - demo",
5+
"keywords": [
6+
"vuepress-plugin",
7+
"vuepress",
8+
"plugin",
9+
"markdown",
10+
"demo"
11+
],
12+
"homepage": "https://ecosystem.vuejs.press/plugins/markdown/demo.html",
13+
"bugs": {
14+
"url": "https://github.com/vuepress/ecosystem/issues"
15+
},
16+
"repository": {
17+
"type": "git",
18+
"url": "git+https://github.com/vuepress/ecosystem.git",
19+
"directory": "plugins/markdown/plugin-demo"
20+
},
21+
"license": "MIT",
22+
"author": {
23+
"name": "Mr.Hope",
24+
"email": "[email protected]",
25+
"url": "https://mister-hope.com"
26+
},
27+
"type": "module",
28+
"exports": {
29+
".": "./lib/node/index.js",
30+
"./package.json": "./package.json"
31+
},
32+
"main": "./lib/node/index.js",
33+
"types": "./lib/node/index.d.ts",
34+
"files": [
35+
"lib"
36+
],
37+
"scripts": {
38+
"build": "tsc -b tsconfig.build.json",
39+
"bundle": "rollup -c rollup.config.ts --configPlugin esbuild",
40+
"clean": "rimraf --glob ./lib ./*.tsbuildinfo",
41+
"style": "sass src:lib --embed-sources --style=compressed"
42+
},
43+
"dependencies": {
44+
"@mdit/plugin-alert": "^0.13.1",
45+
"@mdit/plugin-container": "^0.13.1",
46+
"@mdit/plugin-demo": "^0.13.1",
47+
"@types/markdown-it": "^14.1.2",
48+
"@vuepress/helper": "workspace:*",
49+
"@vueuse/core": "^12.0.0",
50+
"balloon-css": "^1.2.0",
51+
"vue": "^3.5.13"
52+
},
53+
"peerDependencies": {
54+
"vuepress": "2.0.0-rc.18"
55+
},
56+
"devDependencies": {
57+
"@types/babel__core": "7.20.5",
58+
"markdown-it": "^14.1.0"
59+
},
60+
"publishConfig": {
61+
"access": "public"
62+
}
63+
}

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import { rollupBundle } from '../../../scripts/rollup.js'
2+
3+
export default [
4+
...rollupBundle('node/index', {
5+
external: ['@mdit/plugin-container', '@mdit/plugin-demo'],
6+
}),
7+
...rollupBundle('client/config'),
8+
]

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

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
import { useEventListener, useToggle } from '@vueuse/core'
2+
import type { SlotsType, VNode } from 'vue'
3+
import { defineComponent, h, ref, shallowRef } from 'vue'
4+
5+
import '../styles/demo.css'
6+
import '../styles/md-demo.css'
7+
8+
export default defineComponent({
9+
name: 'MdDemo',
10+
11+
props: {
12+
/**
13+
* Markdown demo id
14+
*
15+
* Markdown 代码演示 id
16+
*/
17+
id: {
18+
type: String,
19+
required: true,
20+
},
21+
22+
/**
23+
* Markdown demo title
24+
*
25+
* Markdown 演示标题
26+
*/
27+
title: {
28+
type: String,
29+
default: '',
30+
},
31+
},
32+
33+
slots: Object as SlotsType<{
34+
default: () => VNode[]
35+
code: () => VNode[]
36+
}>,
37+
38+
setup(props, { slots }) {
39+
const [isExpanded, toggleIsExpand] = useToggle(false)
40+
const codeContainer = shallowRef<HTMLDivElement>()
41+
const height = ref('0')
42+
43+
useEventListener('beforeprint', () => {
44+
toggleIsExpand(true)
45+
})
46+
47+
return (): VNode =>
48+
h('div', { class: 'vp-demo-container vp-md-demo', id: props.id }, [
49+
h('div', { class: 'vp-demo-container-header' }, [
50+
h('button', {
51+
'type': 'button',
52+
'title': 'toggle',
53+
'aria-hidden': true,
54+
'class': [
55+
'vp-md-demo-toggle-button',
56+
isExpanded.value ? 'expanded' : '',
57+
],
58+
'onClick': () => {
59+
height.value = isExpanded.value
60+
? '0'
61+
: `${codeContainer.value!.clientHeight + 13.8}px`
62+
toggleIsExpand()
63+
},
64+
}),
65+
props.title
66+
? h(
67+
'div',
68+
{ class: 'vp-demo-container-title' },
69+
decodeURIComponent(props.title),
70+
)
71+
: null,
72+
]),
73+
74+
h('div', { class: 'vp-md-demo-display' }, slots.default()),
75+
76+
h(
77+
'div',
78+
{
79+
class: 'vp-demo-code-wrapper',
80+
style: { height: height.value },
81+
},
82+
h(
83+
'div',
84+
{
85+
ref: codeContainer,
86+
class: 'vp-md-demo-codes',
87+
},
88+
slots.code(),
89+
),
90+
),
91+
])
92+
},
93+
})

0 commit comments

Comments
 (0)