vuepress-plugin-md-power 1.0.0-rc.180 → 1.0.0-rc.181

package/lib/client/components/VPQRCode.vue

@@ -0,0 +1,228 @@
+<script setup lang="ts">
+import type { QRCodeToDataURLOptions, QRCodeToStringOptions } from 'qrcode'
+import type { QRCodeProps } from '../../shared/index.js'
+import { isLinkWithProtocol } from '@vuepress/helper/client'
+import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
+import { resolveRoute, usePage, withBase } from 'vuepress/client'
+
+const { title, text, mode, align = 'left', reverse = false, svg = false, width, level, version, mask, margin = 2, scale = 4, light, dark } = defineProps<QRCodeProps>()
+
+const page = usePage()
+
+let qr: typeof import('qrcode') | null = null
+
+const qrcode = ref('')
+const parsedText = ref('')
+const isLink = ref(false)
+
+const styles = computed(() => {
+  const size = typeof width === 'number' ? width : width ? Number.parseInt(width) : undefined
+  return size ? { '--vp-qrcode-size': `${size}px` } : undefined
+})
+
+function parseText(): string | void {
+  isLink.value = false
+  if (!text || __VUEPRESS_SSR__)
+    return ''
+
+  if (text === '.') {
+    isLink.value = true
+    return location.href.split(/[?#]/)[0]
+  }
+
+  if (isLinkWithProtocol(text)) {
+    isLink.value = true
+    return text.startsWith('//') ? `${location.protocol}${text}` : text
+  }
+
+  if (text.startsWith('/') || text.startsWith('./')) {
+    const [routePath, ...rest] = text.split(/([?#])/)
+    const currentPath = page.value.filePathRelative ? `/${page.value.filePathRelative}` : undefined
+    const { notFound, path } = resolveRoute(routePath, currentPath)
+    if (notFound) {
+      return text
+    }
+    isLink.value = true
+    return new URL(`${withBase(path)}${rest.join('')}`, location.href).toString()
+  }
+
+  return text
+}
+
+onMounted(async () => {
+  const callback = (_: any, url: string) => qrcode.value = url
+
+  watch(
+    () => [text, svg, level, version, mask, margin, scale, light, dark],
+    async () => {
+      const text = parseText()
+      parsedText.value = text || ''
+      if (!text) {
+        qrcode.value = ''
+        return
+      }
+
+      qr ??= (await import(/* webpackChunkName: "qrcode" */ 'qrcode')).default
+      const opts: QRCodeToDataURLOptions & QRCodeToStringOptions = {
+        version,
+        maskPattern: mask,
+        errorCorrectionLevel: (level ? level.toUpperCase() : 'M') as any,
+        width: 300 * Math.round(window.devicePixelRatio || 1),
+        margin,
+        scale,
+        color: { dark, light },
+      }
+
+      if (svg)
+        qr.toString(text, { type: 'svg', ...opts }, callback)
+      else
+        qr.toDataURL(text, { type: 'image/png', ...opts }, callback)
+    },
+    { immediate: true },
+  )
+})
+
+onUnmounted(() => {
+  qr = null
+})
+</script>
+
+<template>
+  <div v-if="qrcode" class="vp-qrcode" :class="{ card: mode === 'card', reverse, [align]: true }">
+    <div class="qrcode-content">
+      <div v-if="svg" class="qrcode-svg" :style="styles" :title="parsedText" v-html="qrcode" />
+      <img v-else class="qrcode-img" :src="qrcode" :alt="parsedText" :title="parsedText" :style="styles">
+      <div v-if="title && mode !== 'card'" class="qrcode-label">
+        {{ title }}
+      </div>
+    </div>
+
+    <div v-if="mode === 'card'" class="qrcode-info">
+      <p v-if="title" class="qrcode-title">
+        {{ title }}
+      </p>
+      <p v-if="parsedText">
+        <a v-if="isLink" :href="parsedText" rel="noopener noreferrer" target="_blank">
+          {{ parsedText }}
+        </a>
+        <span v-else v-html="parsedText.replaceAll('\n', '<br>')" />
+      </p>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.vp-qrcode {
+  --vp-qrcode-size: 128px;
+
+  margin: 16px 0;
+  overflow: hidden;
+}
+
+@media (min-width: 768px) {
+  .vp-qrcode {
+    --vp-qrcode-size: 150px;
+  }
+}
+
+.vp-qrcode:not(.card).center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vp-qrcode:not(.card).right {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.vp-qrcode .qrcode-content {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  width: max-content;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.vp-qrcode .qrcode-label {
+  font-size: 14px;
+  color: var(--vp-c-text-2);
+  text-align: center;
+  word-break: break-all;
+}
+
+.vp-qrcode.card {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  align-items: center;
+  justify-content: center;
+  padding: 16px 20px;
+  background-color: var(--vp-c-bg-soft);
+  border-radius: 8px;
+}
+
+.vp-qrcode .qrcode-svg,
+.vp-qrcode .qrcode-img {
+  width: var(--vp-qrcode-size);
+  max-width: 100%;
+  height: var(--vp-qrcode-size);
+  aspect-ratio: 1/1;
+}
+
+.vp-qrcode .qrcode-svg :deep(svg) {
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.vp-qrcode .qrcode-info {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  min-width: 0;
+  text-align: center;
+}
+
+.vp-qrcode .qrcode-info > p {
+  margin: 0;
+  word-break: break-all;
+}
+
+.vp-qrcode .qrcode-info .qrcode-title {
+  font-weight: 600;
+}
+
+@media (min-width: 960px) {
+  .vp-qrcode.card {
+    flex-direction: row;
+    gap: 16px;
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .vp-qrcode.card .qrcode-info {
+    align-self: center;
+    text-align: left;
+  }
+
+  .vp-qrcode.card:where(.reverse, .right) {
+    flex-direction: row-reverse;
+  }
+
+  .vp-qrcode.card:where(.reverse, .right) .qrcode-info {
+    text-align: right;
+  }
+
+  .vp-qrcode.card.center {
+    align-items: center;
+  }
+
+  .vp-qrcode.card.center .qrcode-info {
+    flex: initial;
+  }
+}
+</style>

package/lib/node/index.d.ts

@@ -501,6 +501,12 @@ interface MarkdownPowerPluginOptions {
    * @default false
    */
   table?: boolean | TableContainerOptions;
+  /**
+   * 是否启用 二维码 嵌入语法
+   *
+   * @default false
+   */
+  qrcode?: boolean;
   /**
    * 是否启用 自动填充 图片宽高属性
    *
@@ -521,6 +527,89 @@ interface MarkdownPowerPluginOptions {
   imageSize?: boolean | 'local' | 'all';
 }
 //#endregion
+//#region src/shared/qrcode.d.ts
+interface QRCodeMeta extends QRCodeProps {
+  /**
+   * mode: 'card' 的别名
+   */
+  card?: boolean;
+}
+interface QRCodeProps {
+  /**
+   * 二维码标题
+   * 作为 HTML 标签的 `title` 属性、`alt` 属性
+   */
+  title?: string;
+  /**
+   * 二维码内容
+   */
+  text?: string;
+  /**
+   * 二维码宽度
+   */
+  width?: number | string;
+  /**
+   * 显示模式
+   * - img: 以图片的形式显示二维码
+   * - card: 以卡片的形式显示，卡片以左右布局，左侧二维码，右侧 标题 + 内容
+   * @default 'img'
+   */
+  mode?: 'img' | 'card';
+  /**
+   * 在 card 模式下是否翻转布局
+   */
+  reverse?: boolean;
+  /**
+   * 二维码的对齐方式
+   * @default 'left'
+   */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * 是否渲染为 SVG 格式的二维码
+   * 默认输出为 PNG 格式的 dataURL
+   * @default false
+   */
+  svg?: boolean;
+  /**
+   * 纠错等级。
+   * 可能的取值为低、中、四分位、高，分别对应 L、M、Q、H。
+   * @default 'M'
+   */
+  level?: 'L' | 'M' | 'Q' | 'H' | 'l' | 'm' | 'q' | 'h';
+  /**
+   * 二维码版本。若未指定，将自动计算更合适的值。
+   * 取值范围 1-40
+   */
+  version?: number;
+  /**
+   * 用于遮蔽符号的掩码模式。
+   * 可能的取值为0、1、2、3、4、5、6、7。
+   * 若未指定，系统将自动计算更合适的值。
+   */
+  mask?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  /**
+   * 定义静区应有多宽。
+   * @default 4
+   */
+  margin?: number;
+  /**
+   * 缩放因子。值为1表示每个模块（黑点）对应1像素。
+   */
+  scale?: number;
+  /**
+   * 暗色模块的颜色。值必须为十六进制格式（RGBA）。
+   * 注意：暗色应始终比浅色模块的颜色更深。
+   * @default '#000000ff'
+   */
+  light?: string;
+  /**
+   * 亮色模块的颜色。值必须为十六进制格式（RGBA）。
+   * 注意：亮色应始终比暗色模块的颜色更浅。
+   * @default '#ffffffff'
+   */
+  dark?: string;
+}
+//#endregion
 //#region src/shared/replit.d.ts
 interface ReplitTokenMeta extends SizeOptions {
   title?: string;
@@ -578,4 +667,4 @@ declare function resolveImageSize(app: App, url: string, remote?: boolean): Prom
 //#region src/node/plugin.d.ts
 declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;
 //#endregion
-export { AcFunTokenMeta, 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 };
+export { AcFunTokenMeta, 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, QRCodeMeta, QRCodeProps, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -24,6 +24,7 @@ import { mark } from "@mdit/plugin-mark";
 import { sub } from "@mdit/plugin-sub";
 import { sup } from "@mdit/plugin-sup";
 import { tasklist } from "@mdit/plugin-tasklist";
+import cjsFriendly from "markdown-it-cjk-friendly";
 
 //#region src/node/fileIcons/definitions.ts
 const defaultFolder = "vscode-icons:default-folder";
@@ -3496,6 +3497,36 @@ const pdfPlugin = (md) => {
 	});
 };
 
+//#endregion
+//#region src/node/embed/qrcode.ts
+const qrcodePlugin = (md) => {
+	createEmbedRuleBlock(md, {
+		type: "qrcode",
+		syntaxPattern: /^@\[qrcode([^\]]*)\]\(([^)]*)\)/,
+		meta([, info, text]) {
+			const { attrs: attrs$1 } = resolveAttrs(info);
+			const { card, ...rest } = omit(attrs$1, ["text"]);
+			return {
+				text,
+				...rest,
+				mode: rest.mode || (card ? "card" : "img")
+			};
+		},
+		content(meta) {
+			return `<VPQRCode${stringifyAttrs(meta)} />`;
+		}
+	});
+	createContainerSyntaxPlugin(md, "qrcode", (tokens, index) => {
+		const { content, meta } = tokens[index];
+		const { card, ...rest } = omit(meta, ["text"]);
+		return `<VPQRCode ${stringifyAttrs({
+			text: content?.trim(),
+			...rest,
+			mode: rest.mode || (card ? "card" : "img")
+		})} />`;
+	});
+};
+
 //#endregion
 //#region src/node/embed/video/acfun.ts
 const AC_FUN_LINK = "https://www.acfun.cn/player";
@@ -3720,6 +3751,7 @@ function embedSyntaxPlugin(md, options) {
 	if (options.replit) md.use(replitPlugin);
 	if (options.codeSandbox) md.use(codeSandboxPlugin);
 	if (options.jsfiddle) md.use(jsfiddlePlugin);
+	if (options.qrcode) md.use(qrcodePlugin);
 }
 
 //#endregion
@@ -4209,6 +4241,7 @@ const plotPlugin = (md) => {
 //#endregion
 //#region src/node/inline/index.ts
 function inlineSyntaxPlugin(md, options) {
+	md.use(cjsFriendly);
 	md.use(attrs);
 	md.use(mark);
 	md.use(sub);
@@ -4331,13 +4364,16 @@ async function prepareConfigFile(app, options) {
 		imports.add(`import VPTable from '${CLIENT_FOLDER}components/VPTable.vue'`);
 		enhances.add(`app.component('VPTable', VPTable)`);
 	}
+	if (options.qrcode) {
+		imports.add(`import VPQRCode from '${CLIENT_FOLDER}components/VPQRCode.vue'`);
+		enhances.add(`app.component('VPQRCode', VPQRCode)`);
+	}
 	const setupIcon = prepareIcon(imports, options.icon);
 	const setupStmts = [];
 	const iconSetup = setupIcon.trim();
 	if (iconSetup) setupStmts.push(iconSetup);
-	const markMode = options.mark === "lazy" ? "lazy" : "eager";
 	imports.add(`import { setupMarkHighlight } from '${CLIENT_FOLDER}composables/mark.js'`);
-	setupStmts.push(`setupMarkHighlight(${JSON.stringify(markMode)})`);
+	setupStmts.push(`setupMarkHighlight(${JSON.stringify(options.mark === "lazy" ? "lazy" : "eager")})`);
 	const setupContent = setupStmts.length ? `    ${setupStmts.join("\n    ")}\n` : "";
 	return app.writeTemp("md-power/config.js", `\
 import { defineClientConfig } from 'vuepress/client'
@@ -4396,6 +4432,7 @@ function markdownPowerPlugin(options = {}) {
 				"hls.js",
 				"mpegts.js/dist/mpegts.js"
 			]);
+			if (options.qrcode) addViteOptimizeDepsInclude(bundlerOptions, app, ["qrcode"]);
 		},
 		extendsMarkdown: async (md, app) => {
 			linksPlugin(md);

package/lib/shared/index.d.ts

@@ -499,6 +499,12 @@ interface MarkdownPowerPluginOptions {
    * @default false
    */
   table?: boolean | TableContainerOptions;
+  /**
+   * 是否启用 二维码 嵌入语法
+   *
+   * @default false
+   */
+  qrcode?: boolean;
   /**
    * 是否启用 自动填充 图片宽高属性
    *
@@ -519,6 +525,89 @@ interface MarkdownPowerPluginOptions {
   imageSize?: boolean | 'local' | 'all';
 }
 //#endregion
+//#region src/shared/qrcode.d.ts
+interface QRCodeMeta extends QRCodeProps {
+  /**
+   * mode: 'card' 的别名
+   */
+  card?: boolean;
+}
+interface QRCodeProps {
+  /**
+   * 二维码标题
+   * 作为 HTML 标签的 `title` 属性、`alt` 属性
+   */
+  title?: string;
+  /**
+   * 二维码内容
+   */
+  text?: string;
+  /**
+   * 二维码宽度
+   */
+  width?: number | string;
+  /**
+   * 显示模式
+   * - img: 以图片的形式显示二维码
+   * - card: 以卡片的形式显示，卡片以左右布局，左侧二维码，右侧 标题 + 内容
+   * @default 'img'
+   */
+  mode?: 'img' | 'card';
+  /**
+   * 在 card 模式下是否翻转布局
+   */
+  reverse?: boolean;
+  /**
+   * 二维码的对齐方式
+   * @default 'left'
+   */
+  align?: 'left' | 'center' | 'right';
+  /**
+   * 是否渲染为 SVG 格式的二维码
+   * 默认输出为 PNG 格式的 dataURL
+   * @default false
+   */
+  svg?: boolean;
+  /**
+   * 纠错等级。
+   * 可能的取值为低、中、四分位、高，分别对应 L、M、Q、H。
+   * @default 'M'
+   */
+  level?: 'L' | 'M' | 'Q' | 'H' | 'l' | 'm' | 'q' | 'h';
+  /**
+   * 二维码版本。若未指定，将自动计算更合适的值。
+   * 取值范围 1-40
+   */
+  version?: number;
+  /**
+   * 用于遮蔽符号的掩码模式。
+   * 可能的取值为0、1、2、3、4、5、6、7。
+   * 若未指定，系统将自动计算更合适的值。
+   */
+  mask?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+  /**
+   * 定义静区应有多宽。
+   * @default 4
+   */
+  margin?: number;
+  /**
+   * 缩放因子。值为1表示每个模块（黑点）对应1像素。
+   */
+  scale?: number;
+  /**
+   * 暗色模块的颜色。值必须为十六进制格式（RGBA）。
+   * 注意：暗色应始终比浅色模块的颜色更深。
+   * @default '#000000ff'
+   */
+  light?: string;
+  /**
+   * 亮色模块的颜色。值必须为十六进制格式（RGBA）。
+   * 注意：亮色应始终比暗色模块的颜色更浅。
+   * @default '#ffffffff'
+   */
+  dark?: string;
+}
+//#endregion
 //#region src/shared/replit.d.ts
 interface ReplitTokenMeta extends SizeOptions {
   title?: string;
@@ -563,4 +652,4 @@ interface ArtPlayerTokenMeta extends SizeOptions {
   type?: string;
 }
 //#endregion
-export { AcFunTokenMeta, 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 };
+export { AcFunTokenMeta, 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, QRCodeMeta, QRCodeProps, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vuepress-plugin-md-power",
   "type": "module",
-  "version": "1.0.0-rc.180",
+  "version": "1.0.0-rc.181",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "artplayer": "^5.3.0",
     "dashjs": "^5.1.0",
-    "esbuild": "^0.27.0",
+    "esbuild": "^0.27.1",
     "hls.js": "^1.6.15",
     "less": "^4.4.2",
     "markdown-it": "^14.1.0",
@@ -77,12 +77,12 @@
     }
   },
   "dependencies": {
-    "@mdit/plugin-attrs": "^0.23.3",
+    "@mdit/plugin-attrs": "^0.24.1",
     "@mdit/plugin-footnote": "^0.22.3",
     "@mdit/plugin-mark": "^0.22.1",
-    "@mdit/plugin-sub": "^0.22.2",
-    "@mdit/plugin-sup": "^0.22.2",
-    "@mdit/plugin-tab": "^0.22.3",
+    "@mdit/plugin-sub": "^0.23.0",
+    "@mdit/plugin-sup": "^0.23.0",
+    "@mdit/plugin-tab": "^0.23.0",
     "@mdit/plugin-tasklist": "^0.22.2",
     "@pengzhanbo/utils": "^2.1.2",
     "@vuepress/helper": "2.0.0-rc.120",
@@ -91,9 +91,11 @@
     "image-size": "^2.0.2",
     "local-pkg": "^1.1.2",
     "lru-cache": "^11.2.4",
+    "markdown-it-cjk-friendly": "^1.3.2",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.6",
-    "shiki": "^3.17.0",
+    "qrcode": "^1.5.4",
+    "shiki": "^3.19.0",
     "tm-grammars": "^1.26.0",
     "tm-themes": "^1.10.13",
     "vue": "^3.5.25"