vuepress-plugin-md-power 1.0.0-rc.51 → 1.0.0-rc.53

package/lib/client/components/Plot.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { computed, ref, shallowRef } from 'vue'
+import { onClickOutside, useMediaQuery } from '@vueuse/core'
+import { usePageFrontmatter } from 'vuepress/client'
+import type { PlotOptions } from '../../shared/plot.js'
+import { pluginOptions } from '../options.js'
+
+const props = defineProps<Omit<PlotOptions, 'tag'>>()
+
+const matter = usePageFrontmatter()
+
+const options = computed(() => {
+  const plot = typeof pluginOptions.plot === 'object' ? pluginOptions.plot : {}
+
+  return {
+    trigger: props.trigger || matter.value.plotTrigger || plot.trigger || 'hover',
+    color: props.color || plot.color,
+    mask: props.mask || plot.mask,
+  }
+})
+
+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
+    }
+  }
+  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
+    }
+  }
+  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)
+    active.value = false
+})
+
+function onClick() {
+  if (props.trigger === 'click' || isMobile.value)
+    active.value = !active.value
+}
+</script>
+
+<template>
+  <span
+    ref="el"
+    class="vp-plot"
+    :class="{ hover: options.trigger !== 'click', active }"
+    :style="styles"
+    @click="onClick"
+  >
+    <slot />
+  </span>
+</template>
+
+<style>
+.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;
+}
+
+.dark .vp-plot {
+  background-color: var(--vp-c-bg-plot-dark, #fff);
+}
+
+.vp-plot.hover:hover,
+.vp-plot.active {
+  color: var(--vp-c-plot-light, #fff);
+}
+
+.dark .vp-plot.hover:hover,
+.dark .vp-plot.active {
+  color: var(--vp-c-plot-dark, #000);
+}
+</style>

package/lib/client/composables/pdf.js

@@ -1,6 +1,5 @@
-import { ensureEndingSlash } from 'vuepress/shared';
+import { ensureEndingSlash, isLinkHttp } from 'vuepress/shared';
 import { withBase } from 'vuepress/client';
-import { normalizeLink } from '../utils/link.js';
 import { pluginOptions } from '../options.js';
 import { checkIsMobile, checkIsSafari, checkIsiPad } from '../utils/is.js';
 function queryStringify(options) {
@@ -18,14 +17,15 @@ function queryStringify(options) {
 export function renderPDF(el, url, embedType, options) {
     if (!pluginOptions.pdf)
         return;
-    url = normalizeLink(url);
+    url = isLinkHttp(url)
+        ? url
+        : new URL(withBase(url), typeof location !== 'undefined' ? location.href : '').toString();
     const pdfOptions = pluginOptions.pdf === true ? {} : pluginOptions.pdf;
-    const pdfjsUrl = pdfOptions.pdfjsUrl
-        ? `${ensureEndingSlash(withBase(pdfOptions.pdfjsUrl))}web/viewer.html`
-        : '';
+    pdfOptions.pdfjsUrl ??= 'https://static.pengzhanbo.cn/pdfjs/';
+    const pdfjsUrl = `${ensureEndingSlash(withBase(pdfOptions.pdfjsUrl))}web/viewer.html`;
     const queryString = queryStringify(options);
     const source = embedType === 'pdfjs'
-        ? `${pdfjsUrl}?file=${encodeURIComponent(url)}${queryString}`
+        ? `${pdfjsUrl}?file=${url}${queryString}`
         : `${url}${queryString}`;
     const tagName = embedType === 'pdfjs' || embedType === 'iframe'
         ? 'iframe'
@@ -69,7 +69,5 @@ export function usePDF(el, url, options) {
         const embedType = isSafariDesktop ? 'iframe' : 'embed';
         return renderPDF(el, url, embedType, options);
     }
-    if (typeof pluginOptions.pdf === 'object' && pluginOptions.pdf.pdfjsUrl)
-        return renderPDF(el, url, 'pdfjs', options);
-    el.innerHTML = `<p>This browser does not support embedding PDFs. Please download the PDF to view it: <a href='${url}' target='_blank'>Download PDF</a></p>`;
+    return renderPDF(el, url, 'pdfjs', options);
 }

package/lib/client/config.js

@@ -6,6 +6,7 @@ import Bilibili from './components/Bilibili.vue';
 import Youtube from './components/Youtube.vue';
 import Replit from './components/Replit.vue';
 import CodeSandbox from './components/CodeSandbox.vue';
+import Plot from './components/Plot.vue';
 import '@internal/md-power/icons.css';
 export default defineClientConfig({
     enhance({ router, app }) {
@@ -19,6 +20,8 @@ export default defineClientConfig({
             app.component('ReplitViewer', Replit);
         if (pluginOptions.codeSandbox)
             app.component('CodeSandboxViewer', CodeSandbox);
+        if (pluginOptions.plot)
+            app.component('Plot', Plot);
         if (__VUEPRESS_SSR__)
             return;
         if (pluginOptions.caniuse) {

package/lib/node/features/icons/plugin.js

@@ -1,10 +1,11 @@
 import { parseRect } from '../../utils/parseRect.js';
+const [openTag, endTag] = [':[', ']:'];
 function createTokenizer(addIcon) {
     return (state, silent) => {
         let found = false;
         const max = state.posMax;
         const start = state.pos;
-        if (state.src.slice(start, start + 2) !== ':[')
+        if (state.src.slice(start, start + 2) !== openTag)
             return false;
         if (silent)
             return false;
@@ -13,7 +14,7 @@ function createTokenizer(addIcon) {
             return false;
         state.pos = start + 2;
         while (state.pos < max) {
-            if (state.src.slice(state.pos, state.pos + 2) === ']:') {
+            if (state.src.slice(state.pos, state.pos + 2) === endTag) {
                 found = true;
                 break;
             }
@@ -35,7 +36,7 @@ function createTokenizer(addIcon) {
         const [iconName, options = ''] = content.split(/\s+/);
         const [size, color] = options.split('/');
         const open = state.push('iconify_open', 'span', 1);
-        open.markup = ':[';
+        open.markup = openTag;
         const className = addIcon(iconName);
         if (className)
             open.attrSet('class', className);
@@ -49,7 +50,7 @@ function createTokenizer(addIcon) {
         const text = state.push('text', '', 0);
         text.content = className ? '' : iconName;
         const close = state.push('iconify_close', 'span', -1);
-        close.markup = ']:';
+        close.markup = endTag;
         state.pos = state.posMax + 2;
         state.posMax = max;
         return true;

package/lib/node/features/pdf.js

@@ -37,7 +37,7 @@ function createPDFRuleBlock() {
             src,
             page: +page || 1,
             noToolbar: Boolean(attrs.noToolbar ?? false),
-            zoom: +attrs.zoom || 1,
+            zoom: +attrs.zoom || 50,
             width: attrs.width ? parseRect(attrs.width) : '100%',
             height: attrs.height ? parseRect(attrs.height) : '',
             ratio: attrs.ratio ? parseRect(attrs.ratio) : '',

package/lib/node/features/plot.d.ts

@@ -0,0 +1,5 @@
+/**
+ * =|这里的文本将被黑幕隐藏，通过点击或者 hover 才可重现|=
+ */
+import type { PluginWithOptions } from 'markdown-it';
+export declare const plotPlugin: PluginWithOptions<never>;

package/lib/node/features/plot.js

@@ -0,0 +1,48 @@
+const [openTag, endTag] = ['=|', '|='];
+function createTokenizer() {
+    return (state, silent) => {
+        let found = false;
+        const max = state.posMax;
+        const start = state.pos;
+        if (state.src.slice(start, start + 2) !== openTag)
+            return false;
+        if (silent)
+            return false;
+        // =||=
+        if (max - start < 5)
+            return false;
+        state.pos = start + 2;
+        while (state.pos < max) {
+            if (state.src.slice(state.pos - 1, state.pos + 1) === endTag) {
+                found = true;
+                break;
+            }
+            state.md.inline.skipToken(state);
+        }
+        if (!found || start + 2 === state.pos) {
+            state.pos = start;
+            return false;
+        }
+        const content = state.src.slice(start + 2, state.pos - 1);
+        // 不允许前后带有空格
+        if (/^\s|\s$/.test(content)) {
+            state.pos = start;
+            return false;
+        }
+        // found!
+        state.posMax = state.pos - 1;
+        state.pos = start + 2;
+        const open = state.push('plot_open', 'Plot', 1);
+        open.markup = openTag;
+        const text = state.push('text', '', 0);
+        text.content = content;
+        const close = state.push('plot_close', 'Plot', -1);
+        close.markup = endTag;
+        state.pos = state.posMax + 2;
+        state.posMax = max;
+        return true;
+    };
+}
+export const plotPlugin = (md) => {
+    md.inline.ruler.before('emphasis', 'plot', createTokenizer());
+};

package/lib/node/plugin.js

@@ -8,6 +8,7 @@ import { codepenPlugin } from './features/codepen.js';
 import { replitPlugin } from './features/replit.js';
 import { codeSandboxPlugin } from './features/codeSandbox.js';
 import { jsfiddlePlugin } from './features/jsfiddle.js';
+import { plotPlugin } from './features/plot.js';
 const __dirname = getDirname(import.meta.url);
 export function markdownPowerPlugin(options = {}) {
     return (app) => {
@@ -59,6 +60,11 @@ export function markdownPowerPlugin(options = {}) {
                     // @[jsfiddle](user/id)
                     md.use(jsfiddlePlugin);
                 }
+                if (options.plot === true
+                    || (typeof options.plot === 'object' && options.plot.tag !== false)) {
+                    // =|plot|=
+                    md.use(plotPlugin);
+                }
             },
         };
     };

package/lib/shared/index.d.ts

@@ -6,4 +6,5 @@ export * from './codepen.js';
 export * from './codeSandbox.js';
 export * from './replit.js';
 export * from './jsfiddle.js';
+export * from './plot.js';
 export * from './plugin.js';

package/lib/shared/index.js

@@ -6,4 +6,5 @@ export * from './codepen.js';
 export * from './codeSandbox.js';
 export * from './replit.js';
 export * from './jsfiddle.js';
+export * from './plot.js';
 export * from './plugin.js';

package/lib/shared/plot.d.ts

@@ -0,0 +1,27 @@
+export interface PlotOptions {
+    /**
+     * 是否启用 `=| |=`  markdown （该标记为非标准标记，脱离插件将不生效）
+     * @default true
+     */
+    tag?: boolean;
+    /**
+     * 遮罩层颜色
+     */
+    mask?: string | {
+        light: string;
+        dark: string;
+    };
+    /**
+     * 文本颜色
+     */
+    color?: string | {
+        light: string;
+        dark: string;
+    };
+    /**
+     * 触发方式
+     *
+     * @default 'hover'
+     */
+    trigger?: 'hover' | 'click';
+}

package/lib/shared/plot.js

@@ -0,0 +1 @@
+export {};

package/lib/shared/plugin.d.ts

@@ -1,9 +1,11 @@
 import type { CanIUseOptions } from './caniuse.js';
 import type { PDFOptions } from './pdf.js';
 import type { IconsOptions } from './icons.js';
+import type { PlotOptions } from './plot.js';
 export interface MarkdownPowerPluginOptions {
     pdf?: boolean | PDFOptions;
     icons?: boolean | IconsOptions;
+    plot?: boolean | PlotOptions;
     bilibili?: boolean;
     youtube?: boolean;
     codepen?: boolean;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.51",
+  "version": "1.0.0-rc.53",
   "description": "The Plugin for VuePres 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -40,15 +40,15 @@
     }
   },
   "dependencies": {
-    "@iconify/utils": "^2.1.22",
+    "@iconify/utils": "^2.1.23",
     "@vueuse/core": "^10.9.0",
     "local-pkg": "^0.5.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.0.7",
-    "vue": "^3.4.21"
+    "vue": "^3.4.23"
   },
   "devDependencies": {
-    "@iconify/json": "^2.2.200",
+    "@iconify/json": "^2.2.202",
     "@types/markdown-it": "^14.0.1"
   },
   "publishConfig": {