vuepress-plugin-md-power 1.0.0-rc.152 → 1.0.0-rc.154

package/lib/client/components/CodeEditor.vue

@@ -11,7 +11,7 @@ let container: HTMLPreElement | null = null
 let lineNumbers: HTMLDivElement | null = null
 const { grammars, theme } = editorData
 
-const lang = ref<'go' | 'rust' | 'kotlin'>()
+const lang = ref<'go' | 'rust' | 'kotlin' | 'python'>()
 
 const editorEl = shallowRef<HTMLDivElement>()
 const textAreaEl = shallowRef<HTMLTextAreaElement>()

package/lib/client/components/Plot.vue

@@ -1,61 +1,46 @@
 <script setup lang="ts">
 import type { PlotOptions } from '../../shared/index.js'
 import { onClickOutside, useMediaQuery } from '@vueuse/core'
-import { computed, ref, shallowRef } from 'vue'
+import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import { usePageFrontmatter } from 'vuepress/client'
 import { pluginOptions } from '../options.js'
 
-const props = defineProps<Omit<PlotOptions, 'tag'>>()
+const props = defineProps<PlotOptions>()
 
 const matter = usePageFrontmatter()
+const isMobile = useMediaQuery('(max-width: 768px)')
 
-const options = computed(() => {
-  const plot = typeof pluginOptions.plot === 'object' ? pluginOptions.plot : {}
-
+const plot = computed(() => {
+  const global = typeof pluginOptions.plot === 'object' ? pluginOptions.plot : {}
+  const current = (typeof matter.value.plot === 'object' ? matter.value.plot : {}) as PlotOptions
   return {
-    trigger: props.trigger || matter.value.plotTrigger || plot.trigger || 'hover',
-    color: props.color || plot.color,
-    mask: props.mask || plot.mask,
+    trigger: isMobile.value ? 'click' : props.trigger ?? current.trigger ?? global.trigger ?? 'hover',
+    effect: props.effect ?? current.effect ?? global.effect ?? 'mask',
   }
 })
+const active = ref(false)
+const el = useTemplateRef<HTMLElement>('el')
+const classes = ref<string[]>([])
 
-const styles = computed(() => {
-  const plot = options.value
-  if (!plot.color && !plot.mask)
-    return {}
-  const style: Record<string, string> = {}
-  if (plot.color) {
-    if (typeof plot.color === 'string') {
-      style['--vp-c-plot-light'] = plot.color
-    }
-    else {
-      style['--vp-c-plot-light'] = plot.color.light
-      style['--vp-c-plot-dark'] = plot.color.dark
-    }
+onMounted(() => {
+  if (!el.value)
+    return
+  const classList = el.value.classList
+  if (!classList.contains('hover') && !classList.contains('click')) {
+    classes.value.push(plot.value.trigger)
   }
-  if (plot.mask) {
-    if (typeof plot.mask === 'string') {
-      style['--vp-c-bg-plot-light'] = plot.mask
-    }
-    else {
-      style['--vp-c-bg-plot-light'] = plot.mask.light
-      style['--vp-c-bg-plot-dark'] = plot.mask.dark
-    }
+  if (!classList.contains('mask') && !classList.contains('blur')) {
+    classes.value.push(plot.value.effect)
   }
-  return style
 })
 
-const isMobile = useMediaQuery('(max-width: 768px)')
-const active = ref(false)
-const el = shallowRef<HTMLElement>()
-
 onClickOutside(el, () => {
-  if (options.value.trigger === 'click' || isMobile.value)
+  if (plot.value.trigger === 'click' || el.value?.classList.contains('click'))
     active.value = false
 })
 
 function onClick() {
-  if (props.trigger === 'click' || isMobile.value)
+  if (plot.value.trigger === 'click' || el.value?.classList.contains('click'))
     active.value = !active.value
 }
 </script>
@@ -64,8 +49,7 @@ function onClick() {
   <span
     ref="el"
     class="vp-plot"
-    :class="{ hover: options.trigger !== 'click', active }"
-    :style="styles"
+    :class="[{ active }, ...classes]"
     @click="onClick"
   >
     <slot />
@@ -73,25 +57,39 @@ function onClick() {
 </template>
 
 <style>
+:root {
+  --vp-plot-bg: var(--vp-c-text-1);
+  --vp-plot-c-text: var(--vp-c-neutral-inverse);
+  --vp-plot-blur: 0.2rem;
+}
+
 .vp-plot {
   padding-right: 2px;
   padding-left: 2px;
-  color: transparent;
-  background-color: var(--vp-c-bg-plot-light, #000);
-  transition: color ease 0.25s, background-color ease 0.25s;
 }
 
-[data-theme="dark"] .vp-plot {
-  background-color: var(--vp-c-bg-plot-dark, #fff);
+.vp-plot.click {
+  cursor: pointer;
+}
+
+.vp-plot:where(.blur) {
+  filter: blur(var(--vp-plot-blur));
+  transition: filter var(--vp-t-color);
+}
+
+.vp-plot:where(.mask) {
+  color: transparent;
+  background-color: var(--vp-plot-bg);
+  transition: color var(--vp-t-color), background-color var(--vp-t-color);
 }
 
-.vp-plot.hover:hover,
-.vp-plot.active {
-  color: var(--vp-c-plot-light, #fff);
+.vp-plot:where(.blur.hover):hover,
+.vp-plot:where(.blur).active {
+  filter: blur(0);
 }
 
-[data-theme="dark"] .vp-plot.hover:hover,
-[data-theme="dark"] .vp-plot.active {
-  color: var(--vp-c-plot-dark, #000);
+.vp-plot:where(.mask.hover):hover,
+.vp-plot:where(.mask).active {
+  color: var(--vp-plot-c-text);
 }
 </style>

package/lib/client/composables/audio.d.ts

@@ -36,5 +36,6 @@ interface UseAudioPlayerResult {
   setVolume: (volume: number) => void;
   destroy: () => void;
 }
-declare function useAudioPlayer(source: MaybeRef<string>, options?: AudioPlayerOptions): UseAudioPlayerResult; //#endregion
+declare function useAudioPlayer(source: MaybeRef<string>, options?: AudioPlayerOptions): UseAudioPlayerResult;
+//#endregion
 export { AudioPlayerOptions, BufferedRange, useAudioPlayer };

package/lib/client/composables/codeRepl.d.ts

@@ -1,7 +1,7 @@
 import { Ref } from "vue";
 
 //#region src/client/composables/codeRepl.d.ts
-type Lang = "kotlin" | "go" | "rust";
+type Lang = "kotlin" | "go" | "rust" | "python";
 declare function resolveCode(el: HTMLElement): string;
 declare function resolveCodeInfo(el: HTMLDivElement): {
   lang: Lang;
@@ -20,6 +20,5 @@ interface UseCodeReplResult {
   onRunCode: () => Promise<void>;
 }
 declare function useCodeRepl(el: Ref<HTMLDivElement | null>): UseCodeReplResult;
-
 //#endregion
 export { resolveCode, resolveCodeInfo, useCodeRepl };

package/lib/client/composables/codeRepl.js

@@ -10,17 +10,21 @@ const api = {
 	go: "https://api.pengzhanbo.cn/repl/golang/run",
 	kotlin: "https://api.pengzhanbo.cn/repl/kotlin/run"
 };
+let pyodide = null;
 const langAlias = {
 	kt: "kotlin",
 	kotlin: "kotlin",
 	go: "go",
 	rust: "rust",
-	rs: "rust"
+	rs: "rust",
+	py: "python",
+	python: "python"
 };
 const supportLang = [
 	"kotlin",
 	"go",
-	"rust"
+	"rust",
+	"python"
 ];
 function resolveLang(lang) {
 	return lang ? langAlias[lang] || lang : "";
@@ -59,7 +63,8 @@ function useCodeRepl(el) {
 	const executeMap = {
 		kotlin: executeKotlin,
 		go: executeGolang,
-		rust: executeRust
+		rust: executeRust,
+		python: executePython
 	};
 	function onCleanRun() {
 		loaded.value = false;
@@ -142,6 +147,24 @@ function useCodeRepl(el) {
 			}
 		});
 	}
+	async function executePython(code) {
+		loaded.value = false;
+		finished.value = false;
+		if (pyodide === null) {
+			const { loadPyodide, version } = await import(
+			/* webpackChunkName: "pyodide" */
+			"pyodide");
+			pyodide = await loadPyodide({ indexURL: `https://cdn.jsdelivr.net/pyodide/v${version}/full/` });
+		}
+		pyodide.setStdout({ batched: (msg) => stdout.value.push(msg) });
+		try {
+			stdout.value.push(pyodide.runPython(code));
+		} catch (e) {
+			stderr.value.push(String(e));
+		}
+		loaded.value = true;
+		finished.value = true;
+	}
 	return {
 		onRunCode,
 		onCleanRun,

package/lib/client/composables/demo.d.ts

@@ -36,6 +36,5 @@ declare function useNormalDemo(draw: ShallowRef<HTMLIFrameElement | null>, title
   height: Ref<string>;
 };
 declare function parseData(data: any): any;
-
 //#endregion
 export { DemoConfig, parseData, useExpand, useFence, useNormalDemo, useResources };

package/lib/client/composables/rustRepl.d.ts

@@ -13,6 +13,5 @@ interface RustExecuteOptions {
   onEnd?: () => void;
   onError?: (message: string) => void;
 }
-
 //#endregion
 export { rustExecute };

package/lib/client/composables/size.d.ts

@@ -11,6 +11,5 @@ interface SizeInfo<T extends HTMLElement> {
   resize: () => void;
 }
 declare function useSize<T extends HTMLElement>(options: ToRefs<SizeOptions>, extraHeight?: MaybeRef$1<number>): SizeInfo<T>;
-
 //#endregion
 export { SizeInfo, useSize };

package/lib/client/options.d.ts

@@ -9,5 +9,6 @@ declare const installed: {
 };
 declare const ART_PLAYER_SUPPORTED_VIDEO_TYPES: string[];
 declare const INJECT_TIMELINE_KEY: symbol;
-declare const INJECT_COLLAPSE_KEY: symbol; //#endregion
+declare const INJECT_COLLAPSE_KEY: symbol;
+//#endregion
 export { ART_PLAYER_SUPPORTED_VIDEO_TYPES, INJECT_COLLAPSE_KEY, INJECT_TIMELINE_KEY, installed, pluginOptions };

package/lib/client/utils/http.d.ts

@@ -3,6 +3,5 @@ declare const http: {
   get: <T extends object = object, R = any>(url: string, query?: T) => Promise<R>;
   post: <T extends object = object, R = any>(url: string, data?: T) => Promise<R>;
 };
-
 //#endregion
 export { http };

package/lib/client/utils/link.d.ts

@@ -1,5 +1,4 @@
 //#region src/client/utils/link.d.ts
 declare function normalizeLink(url: string): string;
-
 //#endregion
 export { normalizeLink };

package/lib/client/utils/sleep.d.ts

@@ -1,5 +1,4 @@
 //#region src/client/utils/sleep.d.ts
 declare function sleep(ms: number): Promise<void>;
-
 //#endregion
 export { sleep };

package/lib/node/index.d.ts

@@ -23,14 +23,14 @@ interface CanIUseOptions {
   * @default 'embed'
   */
   mode?: CanIUseMode;
-} //#endregion
+}
+//#endregion
 //#region src/shared/size.d.ts
 interface SizeOptions {
   width?: string;
   height?: string;
   ratio?: number | string;
 }
-
 //#endregion
 //#region src/shared/codepen.d.ts
 interface CodepenTokenMeta extends SizeOptions {
@@ -42,7 +42,6 @@ interface CodepenTokenMeta extends SizeOptions {
   preview?: boolean;
   editable?: boolean;
 }
-
 //#endregion
 //#region src/shared/codeSandbox.d.ts
 interface CodeSandboxTokenMeta extends SizeOptions {
@@ -55,7 +54,6 @@ interface CodeSandboxTokenMeta extends SizeOptions {
   navbar?: boolean;
   console?: boolean;
 }
-
 //#endregion
 //#region src/shared/codeTabs.d.ts
 interface CodeTabsOptions {
@@ -64,7 +62,6 @@ interface CodeTabsOptions {
     extensions?: false | string[];
   };
 }
-
 //#endregion
 //#region src/shared/demo.d.ts
 interface DemoFile {
@@ -89,14 +86,12 @@ interface DemoContainerRender {
   after: () => string;
   token?: (token: Token, tokens: Token[], index: number) => void;
 }
-
 //#endregion
 //#region src/shared/fileTree.d.ts
 type FileTreeIconMode = "simple" | "colored";
 interface FileTreeOptions {
   icon?: FileTreeIconMode;
 }
-
 //#endregion
 //#region src/shared/icon.d.ts
 type IconOptions = IconifyProvider | IconFontProvider | FontAwesomeProvider;
@@ -159,7 +154,6 @@ type IconifyPrefix = "material-symbols" | "material-symbols-light" | "ic" | "mdi
 type LiteralUnion<Union extends Base, Base = string> = Union | (Base & {
   zz_IGNORE_ME?: never;
 });
-
 //#endregion
 //#region src/shared/jsfiddle.d.ts
 interface JSFiddleTokenMeta extends SizeOptions {
@@ -168,14 +162,12 @@ interface JSFiddleTokenMeta extends SizeOptions {
   theme?: string;
   tab?: string;
 }
-
 //#endregion
 //#region src/shared/npmTo.d.ts
 type NpmToPackageManager = "npm" | "pnpm" | "yarn" | "bun" | "deno";
 type NpmToOptions = NpmToPackageManager[] | {
   tabs?: NpmToPackageManager[];
 };
-
 //#endregion
 //#region src/shared/pdf.d.ts
 type PDFEmbedType = "iframe" | "embed" | "pdfjs";
@@ -192,44 +184,31 @@ interface PDFOptions {
   */
   pdfjsUrl?: string;
 }
-
 //#endregion
 //#region src/shared/plot.d.ts
+/**
+* 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
+*/
 interface PlotOptions {
-  /**
-  * 是否启用 `!! !!`  markdown （该标记为非标准标记，脱离插件将不生效）
-  * @default true
-  */
-  tag?: boolean;
-  /**
-  * 遮罩层颜色
-  */
-  mask?: string | {
-    light: string;
-    dark: string;
-  };
-  /**
-  * 文本颜色
-  */
-  color?: string | {
-    light: string;
-    dark: string;
-  };
   /**
   * 触发方式
   *
   * @default 'hover'
   */
   trigger?: "hover" | "click";
+  /**
+  * 遮罩层效果
+  *
+  * @default 'mask'
+  */
+  effect?: "mask" | "blur";
 }
-
 //#endregion
 //#region src/shared/codeTree.d.ts
 interface CodeTreeOptions {
   icon?: FileTreeIconMode;
   height?: string | number;
 }
-
 //#endregion
 //#region src/shared/repl.d.ts
 type ThemeOptions = BuiltinTheme | {
@@ -241,19 +220,20 @@ interface ReplOptions {
   go?: boolean;
   kotlin?: boolean;
   rust?: boolean;
+  python?: boolean;
 }
 interface ReplEditorData {
   grammars: {
     go?: any;
     kotlin?: any;
     rust?: any;
+    python?: any;
   };
   theme: ThemeRegistration | {
     light: ThemeRegistration;
     dark: ThemeRegistration;
   };
 }
-
 //#endregion
 //#region src/shared/plugin.d.ts
 interface MarkdownPowerPluginOptions {
@@ -482,14 +462,14 @@ interface MarkdownPowerPluginOptions {
   * @default false
   */
   imageSize?: boolean | "local" | "all";
-} //#endregion
+}
+//#endregion
 //#region src/shared/replit.d.ts
 interface ReplitTokenMeta extends SizeOptions {
   title?: string;
   source?: string;
   theme?: string;
 }
-
 //#endregion
 //#region src/shared/video.d.ts
 interface VideoOptions {
@@ -523,11 +503,9 @@ interface ArtPlayerTokenMeta extends SizeOptions {
   url: string;
   type?: string;
 }
-
 //#endregion
 //#region src/node/container/codeTabs.d.ts
 declare function createCodeTabIconGetter(options?: CodeTabsOptions): (filename: string) => string | void;
-
 //#endregion
 //#region src/node/enhance/imageSize.d.ts
 interface ImgSize {
@@ -535,10 +513,8 @@ interface ImgSize {
   height: number;
 }
 declare function resolveImageSize(app: App, url: string, remote?: boolean): Promise<ImgSize>;
-
 //#endregion
 //#region src/node/plugin.d.ts
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
-
 //#endregion
 export { ArtPlayerTokenMeta, BilibiliTokenMeta, CanIUseMode, CanIUseOptions, CanIUseTokenMeta, CodeSandboxTokenMeta, CodeTabsOptions, CodepenTokenMeta, DemoContainerRender, DemoFile, DemoMeta, FileTreeIconMode, FileTreeOptions, FontAwesomeAssetBuiltIn, FontAwesomePrefix, FontAwesomeProvider, IconAssetLink, IconFontProvider, IconOptions, IconProviderBase, IconifyPrefix, IconifyProvider, JSFiddleTokenMeta, LiteralUnion, MarkdownDemoEnv, MarkdownPowerPluginOptions, NpmToOptions, NpmToPackageManager, PDFEmbedType, PDFOptions, PDFTokenMeta, PlotOptions, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };