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

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/node/index.d.ts

@@ -186,32 +186,22 @@ interface PDFOptions {
 }
 //#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

package/lib/node/index.js

@@ -9,7 +9,7 @@ import imageSize from "image-size";
 import { colors, fs, getDirname, logger, ora, path } from "vuepress/utils";
 import path$1 from "node:path";
 import { globSync } from "tinyglobby";
-import { isLinkHttp as isLinkHttp$1, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
+import { isLinkHttp as isLinkHttp$1, isLinkWithProtocol, removeEndingSlash, removeLeadingSlash } from "vuepress/shared";
 import fs$1, { promises } from "node:fs";
 import process from "node:process";
 import container from "markdown-it-container";
@@ -1113,18 +1113,25 @@ function fetchImageSize(src) {
 			for await (const chunk of stream) {
 				chunks.push(chunk);
 				try {
-					const { width: width$1, height: height$1 } = imageSize(Buffer.concat(chunks));
-					if (width$1 && height$1) return resolve({
-						width: width$1,
-						height: height$1
+					const { width, height } = imageSize(Buffer.concat(chunks));
+					if (width && height) return resolve({
+						width,
+						height
 					});
 				} catch {}
 			}
-			const { width, height } = imageSize(Buffer.concat(chunks));
-			resolve({
-				width,
-				height
-			});
+			try {
+				const { width, height } = imageSize(Buffer.concat(chunks));
+				resolve({
+					width,
+					height
+				});
+			} catch {
+				resolve({
+					width: 0,
+					height: 0
+				});
+			}
 		}).on("error", () => resolve({
 			width: 0,
 			height: 0
@@ -3663,6 +3670,46 @@ function parseSource(source) {
 	}
 }
 
+//#endregion
+//#region src/node/enhance/links.ts
+function linksPlugin(md) {
+	const externalAttrs = {
+		target: "_blank",
+		rel: "noopener noreferrer"
+	};
+	let hasOpenInternalLink = false;
+	const internalTag = "VPLink";
+	function handleLinkOpen(tokens, idx) {
+		hasOpenInternalLink = false;
+		const token = tokens[idx];
+		const hrefIndex = token.attrIndex("href");
+		/* istanbul ignore if -- @preserve */
+		if (hrefIndex < 0) return;
+		const hrefAttr = token.attrs[hrefIndex];
+		const hrefLink = hrefAttr[1];
+		if (isLinkWithProtocol(hrefLink)) {
+			Object.entries(externalAttrs).forEach(([key, val]) => {
+				token.attrSet(key, val);
+			});
+			return;
+		}
+		if (hrefLink[0] === "#") return;
+		hasOpenInternalLink = true;
+		token.tag = internalTag;
+	}
+	md.renderer.rules.link_open = (tokens, idx, opts, env, self) => {
+		handleLinkOpen(tokens, idx);
+		return self.renderToken(tokens, idx, opts);
+	};
+	md.renderer.rules.link_close = (tokens, idx, opts, _env, self) => {
+		if (hasOpenInternalLink) {
+			hasOpenInternalLink = false;
+			tokens[idx].tag = internalTag;
+		}
+		return self.renderToken(tokens, idx, opts);
+	};
+}
+
 //#endregion
 //#region src/node/icon/createIconRule.ts
 function createIconRule([l1, l2, r1, r2], deprecated) {
@@ -4024,18 +4071,18 @@ const plotDef = (state, silent) => {
 	const content = state.src.slice(start + 2, state.pos);
 	state.posMax = state.pos;
 	state.pos = start + 2;
-	const token = state.push("plot_inline", "Plot", 0);
-	token.markup = "!!";
-	token.content = content;
+	const openToken = state.push("plot_inline_open", "Plot", 1);
+	openToken.markup = "!!";
+	openToken.content = content;
+	const contentToken = state.push("text", "", 0);
+	contentToken.content = content;
+	const closeToken = state.push("plot_inline_close", "Plot", -1);
+	closeToken.markup = "!!";
 	state.pos = state.posMax + 2;
 	state.posMax = max;
 	return true;
 };
 const plotPlugin = (md) => {
-	md.renderer.rules.plot_inline = (tokens, idx) => {
-		const token = tokens[idx];
-		return `<Plot>${token.content}</Plot>`;
-	};
 	md.inline.ruler.before("emphasis", "plot", plotDef);
 };
 
@@ -4224,6 +4271,7 @@ function markdownPowerPlugin(options = {}) {
 			]);
 		},
 		extendsMarkdown: async (md, app) => {
+			linksPlugin(md);
 			docsTitlePlugin(md);
 			embedSyntaxPlugin(md, options);
 			inlineSyntaxPlugin(md, options);

package/lib/shared/index.d.ts

@@ -184,32 +184,22 @@ interface PDFOptions {
 }
 //#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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.153",
+  "version": "1.0.0-rc.154",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -39,8 +39,8 @@
     "markdown-it": "^14.1.0",
     "mpegts.js": "^1.7.3",
     "pyodide": "^0.27.7",
-    "sass": "^1.89.1",
-    "sass-embedded": "^1.89.1",
+    "sass": "^1.89.2",
+    "sass-embedded": "^1.89.2",
     "stylus": "^0.64.0",
     "vuepress": "2.0.0-rc.23"
   },
@@ -54,6 +54,9 @@
     "hls.js": {
       "optional": true
     },
+    "less": {
+      "optional": true
+    },
     "markdown-it": {
       "optional": true
     },
@@ -62,20 +65,29 @@
     },
     "pyodide": {
       "optional": true
+    },
+    "sass": {
+      "optional": true
+    },
+    "sass-embedded": {
+      "optional": true
+    },
+    "stylus": {
+      "optional": true
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.21.0",
-    "@mdit/plugin-footnote": "^0.21.0",
-    "@mdit/plugin-mark": "^0.21.0",
-    "@mdit/plugin-sub": "^0.21.0",
-    "@mdit/plugin-sup": "^0.21.0",
-    "@mdit/plugin-tab": "^0.21.0",
-    "@mdit/plugin-tasklist": "^0.21.0",
+    "@mdit/plugin-attrs": "^0.23.1",
+    "@mdit/plugin-footnote": "^0.22.2",
+    "@mdit/plugin-mark": "^0.22.1",
+    "@mdit/plugin-sub": "^0.22.1",
+    "@mdit/plugin-sup": "^0.22.1",
+    "@mdit/plugin-tab": "^0.22.2",
+    "@mdit/plugin-tasklist": "^0.22.1",
     "@pengzhanbo/utils": "^2.1.0",
-    "@vuepress/helper": "2.0.0-rc.108",
-    "@vueuse/core": "^13.3.0",
-    "chokidar": "3.6.0",
+    "@vuepress/helper": "2.0.0-rc.110",
+    "@vueuse/core": "^13.4.0",
+    "chokidar": "4.0.3",
     "image-size": "^2.0.2",
     "local-pkg": "^1.1.1",
     "lru-cache": "^11.1.0",
@@ -85,7 +97,7 @@
     "tinyglobby": "0.2.13",
     "tm-grammars": "^1.23.26",
     "tm-themes": "^1.10.6",
-    "vue": "^3.5.16"
+    "vue": "^3.5.17"
   },
   "devDependencies": {
     "@types/markdown-it": "^14.1.2",