Skip to content

Commit

Permalink
chore: tweak
Browse files Browse the repository at this point in the history
  • Loading branch information
pengzhanbo committed Jan 8, 2025
1 parent 52ea37c commit 657d2fd
Show file tree
Hide file tree
Showing 12 changed files with 203 additions and 35 deletions.
32 changes: 26 additions & 6 deletions docs/1.示例/示例文章7.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ permalink: /article/5xbhl125/

### normal 嵌入语法

@[demo normal title="示例" desc="这是一个示例"](./normal.html)

1
@[demo normal title="示例" desc="这是一个示例" expanded](./normal.html)

### normal 容器语法

Expand Down Expand Up @@ -42,9 +40,9 @@ const app = document.querySelector('#app')
app.appendChild(window.document.createElement('div')).textContent = a
```

@tab Less
@tab SCSS

``` less
``` scss
#app {
font-size: 2em;
text-align: center;
Expand Down Expand Up @@ -94,7 +92,7 @@ button {

:::

### .ts + .css demo
### vue .ts + .css demo

:::: demo vue
::: code-tabs
Expand Down Expand Up @@ -128,3 +126,25 @@ export default defineComponent({

:::
::::

### markdown 嵌入语法

@[demo markdown title="示例" desc="这是一个示例"](/.vuepress/bulletin.md)

### markdown 容器语法

:::: demo markdown title="示例" desc="这是一个示例"

```md
::: center

**QQ 交流群:** [792882761](https://qm.qq.com/q/FbPPoOIscE)

![QQ qr_code](/images/qq_qrcode.png){width="618" height="616" style="width: 200px"}

您在使用过程中遇到任何问题,欢迎通过 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues/new/choose) 反馈。也欢迎加入我们的 QQ 交流群一起讨论。

:::
```

::::
Original file line number Diff line number Diff line change
@@ -1,19 +1,23 @@
<script setup lang="ts">
import { ref } from 'vue'
defineProps<{
import '../styles/demo.css'
const props = defineProps<{
type?: 'vue' | 'markdown'
title?: string
desc?: string
expanded?: boolean
}>()
const showCode = ref(false)
const showCode = ref(props.expanded ?? true)
function toggleCode() {
showCode.value = !showCode.value
}
</script>

<template>
<div class="vp-demo-wrapper vue">
<div class="vp-demo-wrapper">
<div class="demo-draw">
<slot />
</div>
Expand Down
72 changes: 70 additions & 2 deletions plugins/plugin-md-power/src/client/components/VPDemoNormal.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import '../styles/demo.css'
const props = defineProps<{
title?: string
desc?: string
expanded?: boolean
config?: {
html: string
css: string
Expand Down Expand Up @@ -48,7 +49,40 @@ onMounted(() => {
}, { immediate: true })
})
const showCode = ref(false)
const fence = useTemplateRef<HTMLDivElement>('fence')
const data = ref<{
js: string
css: string
html: string
jsType: string
cssType: string
}>({ js: '', css: '', html: '', jsType: '', cssType: '' })
onMounted(() => {
if (!fence.value)
return
data.value.html = props.config?.html ?? ''
const els = Array.from(fence.value.querySelectorAll('div[class*="language-"]'))
for (const el of els) {
const lang = el.className.match(/language-(\w+)/)?.[1] ?? ''
const content = (el.querySelector('pre')?.textContent ?? '')
if (lang === 'js' || lang === 'javascript') {
data.value.js = content
data.value.jsType = 'js'
}
if (lang === 'ts' || lang === 'typescript') {
data.value.js = content
data.value.jsType = 'ts'
}
if (lang === 'css' || lang === 'scss' || lang === 'less' || lang === 'stylus' || lang === 'styl') {
data.value.css = content
data.value.cssType = lang === 'styl' ? 'stylus' : lang
}
}
})
const showCode = ref(props.expanded ?? false)
function toggleCode() {
showCode.value = !showCode.value
}
Expand All @@ -68,9 +102,43 @@ function toggleCode() {
</p>
</div>
<div class="demo-ctrl">
<div class="extra">
<form action="https://codepen.io/pen/define" method="POST" target="_blank">
<input
type="hidden" name="data" :value="JSON.stringify({
title: title || 'Demo',
description: desc || '',
html: data.html,
css: data.css,
js: data.js,
js_pre_processor: data.jsType === 'ts' ? 'typescript' : 'none',
css_pre_processor: data.cssType,
css_external: config?.cssLib?.join(';'),
js_external: config?.jsLib?.join(';'),
})"
>
<button type="submit" title="CodePen" aria-label="CodePen">
<span class="vpi-demo-codepen" />
</button>
</form>
<form action="https://jsfiddle.net/api/post/library/pure/" method="POST" target="_blank">
<button type="submit" title="jsFiddle" aria-label="jsFiddle">
<span class="vpi-demo-jsfiddle bg" />
</button>
<input type="hidden" name="wrap" value="b">
<input type="hidden" name="html" :value="data.html">
<input type="hidden" name="js" :value="data.js">
<input type="hidden" name="css" :value="data.cssType === 'scss' || data.cssType === 'css' ? data.css : config?.css || ''">
<input type="hidden" name="panel_css" :value="data.cssType === 'scss' ? 1 : 0">
<input type="hidden" name="panel_js" :value="data.jsType === 'ts' ? 4 : 0">
<input type="hidden" name="title" :value="title || 'Demo'">
<input type="hidden" name="description" :value="desc || ''">
<input type="hidden" name="resources" :value="[...(config?.jsLib || []), ...(config?.cssLib || [])].join(',')">
</form>
</div>
<span class="vpi-demo-code" @click="toggleCode" />
</div>
<div v-show="showCode" class="demo-code">
<div v-show="showCode" ref="fence" class="demo-code">
<slot />
</div>
</div>
Expand Down
29 changes: 26 additions & 3 deletions plugins/plugin-md-power/src/client/styles/demo.css
Original file line number Diff line number Diff line change
Expand Up @@ -56,17 +56,32 @@
transition: border-color var(--vp-t-color);
}

.vp-demo-wrapper .demo-ctrl > [class*="vpi-"] {
font-size: 1.2em;
.vp-demo-wrapper .demo-ctrl .extra {
display: flex;
flex: 1;
gap: 16px;
align-items: center;
justify-content: flex-start;
}

.vp-demo-wrapper .demo-ctrl [class*="vpi-"] {
font-size: 20px;
color: var(--vp-c-text-2);
cursor: pointer;
transition: color var(--vp-t-color);
}

.vp-demo-wrapper .demo-ctrl > [class*="vpi-"]:hover {
.vp-demo-wrapper .demo-ctrl [class*="vpi-"]:hover {
color: var(--vp-c-text-1);
}

.vp-demo-wrapper .demo-ctrl form,
.vp-demo-wrapper .demo-ctrl button {
padding: 0;
margin: 0;
line-height: 1;
}

.vp-demo-wrapper .demo-code {
border-top: 1px solid var(--vp-c-divider);
transition: border-color var(--vp-t-color);
Expand All @@ -91,3 +106,11 @@
.vpi-demo-code {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.18 4.276a.75.75 0 0 1 .531.918l-3.973 14.83a.75.75 0 0 1-1.45-.389l3.974-14.83a.75.75 0 0 1 .919-.53m2.262 3.053a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.662 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 0 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.818s-.072-.424-.402-.817c-.344-.409-.875-.89-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 1 0-1.004-1.115L4.761 8.836c-.737.662-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 0 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.818s.072-.424.402-.817c.344-.409.875-.89 1.663-1.598z'/%3E%3C/svg%3E");
}

.vpi-demo-codepen {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1024' height='1024' viewBox='0 0 1024 1024'%3E%3Cpath fill='%23000' d='m911.7 385.3l-.3-1.5c-.2-1-.3-1.9-.6-2.9c-.2-.6-.4-1.1-.5-1.7c-.3-.8-.5-1.7-.9-2.5c-.2-.6-.5-1.1-.8-1.7c-.4-.8-.8-1.5-1.2-2.3c-.3-.5-.6-1.1-1-1.6c-.8-1.2-1.7-2.4-2.6-3.6c-.5-.6-1.1-1.3-1.7-1.9c-.4-.5-.9-.9-1.4-1.3c-.6-.6-1.3-1.1-1.9-1.6c-.5-.4-1-.8-1.6-1.2c-.2-.1-.4-.3-.6-.4L531.1 117.8a34.3 34.3 0 0 0-38.1 0L127.3 361.3c-.2.1-.4.3-.6.4c-.5.4-1 .8-1.6 1.2c-.7.5-1.3 1.1-1.9 1.6c-.5.4-.9.9-1.4 1.3c-.6.6-1.2 1.2-1.7 1.9c-1 1.1-1.8 2.3-2.6 3.6c-.3.5-.7 1-1 1.6c-.4.7-.8 1.5-1.2 2.3c-.3.5-.5 1.1-.8 1.7c-.3.8-.6 1.7-.9 2.5c-.2.6-.4 1.1-.5 1.7c-.2.9-.4 1.9-.6 2.9l-.3 1.5q-.3 2.25-.3 4.5v243.5q0 2.25.3 4.5l.3 1.5l.6 2.9c.2.6.3 1.1.5 1.7c.3.9.6 1.7.9 2.5c.2.6.5 1.1.8 1.7c.4.8.7 1.5 1.2 2.3c.3.5.6 1.1 1 1.6c.5.7.9 1.4 1.5 2.1l1.2 1.5c.5.6 1.1 1.3 1.7 1.9c.4.5.9.9 1.4 1.3c.6.6 1.3 1.1 1.9 1.6c.5.4 1 .8 1.6 1.2c.2.1.4.3.6.4L493 905.7c5.6 3.8 12.3 5.8 19.1 5.8c6.6 0 13.3-1.9 19.1-5.8l365.6-243.5c.2-.1.4-.3.6-.4c.5-.4 1-.8 1.6-1.2c.7-.5 1.3-1.1 1.9-1.6c.5-.4.9-.9 1.4-1.3c.6-.6 1.2-1.2 1.7-1.9l1.2-1.5l1.5-2.1c.3-.5.7-1 1-1.6c.4-.8.8-1.5 1.2-2.3c.3-.5.5-1.1.8-1.7c.3-.8.6-1.7.9-2.5c.2-.5.4-1.1.5-1.7c.3-.9.4-1.9.6-2.9l.3-1.5q.3-2.25.3-4.5V389.8c-.3-1.5-.4-3-.6-4.5M546.4 210.5l269.4 179.4l-120.3 80.4l-149-99.6V210.5zm-68.8 0v160.2l-149 99.6l-120.3-80.4zM180.7 454.1l86 57.5l-86 57.5zm296.9 358.5L208.3 633.2l120.3-80.4l149 99.6zM512 592.8l-121.6-81.2L512 430.3l121.6 81.2zm34.4 219.8V652.4l149-99.6l120.3 80.4zM843.3 569l-86-57.5l86-57.5z'/%3E%3C/svg%3E");
}

.vpi-demo-jsfiddle {
--icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='180' viewBox='0 0 256 180'%3E%3Cpath fill='%230084ff' d='M148.1 0c42.8 0 77.598 34.087 78.393 76.452l.014 1.481l-.011.866l1.46.76c16.183 8.773 26.938 25.332 27.964 44.018l.061 1.52l.019 1.418c0 29.117-23.397 52.75-52.428 53.295l-1.365.008H54.053C24.094 179.357 0 155.102 0 125.276c0-17.387 8.273-33.328 21.838-43.511l1.287-.938l.271-.19l-.135-.684a39 39 0 0 1-.438-3.347l-.11-1.694l-.037-1.705c0-21.519 17.547-38.95 39.173-38.95a39 39 0 0 1 16.063 3.445l1.483.706l.915.478l.978-1.623A78.37 78.37 0 0 1 144.718.072l1.721-.055zm0 11.13a67.24 67.24 0 0 0-60.69 38.113c-1.53 3.187-5.607 4.157-8.41 2c-4.908-3.776-10.875-5.856-17.151-5.856c-15.495 0-28.043 12.465-28.043 27.82c0 2.852.43 5.638 1.261 8.27a5.565 5.565 0 0 1-2.473 6.468c-13.215 7.815-21.464 21.854-21.464 37.33c0 23.308 18.526 42.367 41.76 43.376l1.249.038h148.103c23.526.144 42.628-18.783 42.628-42.174c0-17.244-10.49-32.572-26.266-39.1a5.57 5.57 0 0 1-3.43-4.87l.002-.586l.15-2.415l.047-1.246l-.012-1.798c-.768-36.225-30.578-65.37-67.262-65.37m16.167 70.493c17.519 0 31.876 13.362 31.876 30.052s-14.357 30.053-31.876 30.053c-10.548 0-19.386-5.284-31.203-16.729l-2.58-2.547l-3.436-3.525q-6.525-6.955-6.774-7.468l-1.321-1.363l-2.384-2.395a140 140 0 0 0-4.457-4.226l-2.087-1.835c-7.155-6.106-12.769-8.886-18.292-8.886c-11.543 0-20.746 8.564-20.746 18.921c0 10.358 9.203 18.922 20.746 18.922c6.002 0 10.482-1.965 14.584-5.612a35 35 0 0 0 1.57-1.491l2.941-3.133a5.565 5.565 0 0 1 8.5 7.161l-.51.591l-2.033 2.191a50 50 0 0 1-3.072 2.998c-6.013 5.348-13.03 8.426-21.98 8.426c-17.519 0-31.876-13.362-31.876-30.053c0-16.69 14.357-30.052 31.876-30.052c11.678 0 21.26 6.476 35.11 20.62q8.632 9.135 8.88 9.644l2.53 2.59c11.124 11.178 18.65 16.12 26.014 16.12c11.543 0 20.746-8.564 20.746-18.922c0-10.357-9.203-18.921-20.746-18.921c-6.002 0-10.482 1.965-14.584 5.612a35 35 0 0 0-1.57 1.49l-1.311 1.373l-1.63 1.76a5.565 5.565 0 0 1-8.108-7.625l2.15-2.318a50 50 0 0 1 3.073-2.998c6.013-5.347 13.03-8.425 21.98-8.425'/%3E%3C/svg%3E");
}
10 changes: 8 additions & 2 deletions plugins/plugin-md-power/src/node/demo/demo.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@ import type { DemoContainerRender, DemoMeta, MarkdownDemoEnv } from '../../share
import container from 'markdown-it-container'
import { createEmbedRuleBlock } from '../embed/createEmbedRuleBlock.js'
import { resolveAttrs } from '../utils/resolveAttrs.js'
import { markdownContainerRender, markdownEmbed } from './markdown.js'
import { normalContainerRender, normalEmbed } from './normal.js'
import { normalizeAlias } from './supports/alias.js'
import { vueContainerRender, vueEmbed } from './vue.js'

export function demoEmbed(app: App, md: Markdown) {
createEmbedRuleBlock<DemoMeta>(md, {
type: 'demo',
syntaxPattern: /^@\[demo(?:\s(vue|normal))?\s?(.*)\]\((.*)\)/,
syntaxPattern: /^@\[demo(?:\s(vue|normal|markdown))?\s?(.*)\]\((.*)\)/,
meta: ([, type, info, url]) => ({
type: (type || 'normal') as DemoMeta['type'],
url,
Expand All @@ -33,15 +34,20 @@ export function demoEmbed(app: App, md: Markdown) {
return normalEmbed(app, md, env, meta)
}

if (type === 'markdown') {
return markdownEmbed(app, md, env, meta)
}

return content
},
})
}

const INFO_RE = /(vue|normal)?\s?(.*)/
const INFO_RE = /(vue|normal|markdown)?\s?(.*)/
const renderMap: Record<string, DemoContainerRender> = {
vue: vueContainerRender,
normal: normalContainerRender,
markdown: markdownContainerRender,
}

export function demoContainer(app: App, md: Markdown) {
Expand Down
10 changes: 5 additions & 5 deletions plugins/plugin-md-power/src/node/demo/extendPage.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ export function extendsPageWithDemo(page: Page): void {
const markdownEnv = page.markdownEnv as MarkdownDemoEnv
const demoFiles = markdownEnv.demoFiles ?? []

// page.deps.push(
// ...demoFiles
// .filter(({ type }) => type !== 'vue')
// .map(({ path }) => path),
// )
page.deps.push(
...demoFiles
.filter(({ type }) => type === 'markdown')
.map(({ path }) => path),
)

;((page.frontmatter.gitInclude as string[] | undefined) ??= []).push(
...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path }) => path),
Expand Down
43 changes: 43 additions & 0 deletions plugins/plugin-md-power/src/node/demo/markdown.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
import type { App } from 'vuepress'
import type { Markdown } from 'vuepress/markdown'
import type { DemoContainerRender, DemoFile, DemoMeta, MarkdownDemoEnv } from '../../shared/demo.js'
import { findFile, readFileSync } from './supports/file.js'

export function markdownEmbed(
app: App,
md: Markdown,
env: MarkdownDemoEnv,
{ url, title, desc, codeSetting = '', expanded = false }: DemoMeta,
): string {
const filepath = findFile(app, env, url)
const code = readFileSync(filepath)
if (code === false) {
console.warn('[vuepress-plugin-md-power] Cannot read markdown file:', filepath)
return ''
}
const demo: DemoFile = { type: 'markdown', path: filepath }

env.demoFiles ??= []

if (!env.demoFiles.some(d => d.path === filepath)) {
env.demoFiles.push(demo)
}

return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>
${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
<template #code>
${md.render(`\`\`\`md ${codeSetting}\n${code}\n\`\`\``, {})}
</template>
</VPDemoBasic>`
}

export const markdownContainerRender: DemoContainerRender = {
before(app, md, env, meta, codeMap) {
const { title, desc, expanded = false } = meta
const code = codeMap.md || ''
return `<VPDemoBasic type="markdown"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>
${md.render(code, { filepath: env.filePath, filepathRelative: env.filePathRelative })}
<template #code>`
},
after: () => '</template></VPDemoBasic>',
}
8 changes: 4 additions & 4 deletions plugins/plugin-md-power/src/node/demo/normal.ts
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export function normalEmbed(
app: App,
md: Markdown,
env: MarkdownDemoEnv,
{ url, title, desc, codeSetting = '' }: DemoMeta,
{ url, title, desc, codeSetting = '', expanded = false }: DemoMeta,
): string {
const filepath = findFile(app, env, url)
const code = readFileSync(filepath)
Expand All @@ -126,14 +126,14 @@ export function normalEmbed(
insertSetupScript({ ...demo, path: output }, env)
}

return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}>
return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>
${codeToHtml(md, source, codeSetting)}
</VPDemoNormal>`
}

export const normalContainerRender: DemoContainerRender = {
before(app, md, env, meta, codeMap) {
const { url, title, desc } = meta
const { url, title, desc, expanded = false } = meta
const name = `DemoContainer${url}`
const prefix = (env.filePathRelative || '').replace(/\.md$/, '').replace(/\//g, '-')
const output = app.dir.temp(path.join(target, `${prefix}-${name}.js`))
Expand All @@ -148,7 +148,7 @@ export const normalContainerRender: DemoContainerRender = {
const source = parseContainerCode(codeMap)
compileCode(source, output)

return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}>`
return `<VPDemoNormal :config="${name}"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>`
},

after: () => '</VPDemoNormal>',
Expand Down
3 changes: 3 additions & 0 deletions plugins/plugin-md-power/src/node/demo/supports/alias.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,9 @@ export function normalizeAlias(info: string): string {
case 'stylus':
case 'styl':
return 'stylus'
case 'md':
case 'markdown':
return 'md'
}
return lang
}
Loading

0 comments on commit 657d2fd

Please sign in to comment.