vuepress-plugin-md-power 1.0.0-rc.48

package/lib/node/features/video/youtube.js

@@ -0,0 +1,74 @@
+/**
+ * @[youtube](id)
+ */
+import { URLSearchParams } from 'node:url';
+import { resolveAttrs } from '../../utils/resolveAttrs.js';
+import { parseRect } from '../../utils/parseRect.js';
+import { timeToSeconds } from '../../utils/timeToSeconds.js';
+const YOUTUBE_LINK = 'https://www.youtube.com/embed/';
+// @[youtube]()
+const MIN_LENGTH = 13;
+// char codes of '@[youtube'
+const START_CODES = [64, 91, 121, 111, 117, 116, 117, 98, 101];
+// regexp to match the import syntax
+const SYNTAX_RE = /^@\[youtube(?:\s+([^]*?))?\]\(([^)]*)\)/;
+function createYoutubeRuleBlock() {
+    return (state, startLine, endLine, silent) => {
+        const pos = state.bMarks[startLine] + state.tShift[startLine];
+        const max = state.eMarks[startLine];
+        // return false if the length is shorter than min length
+        if (pos + MIN_LENGTH > max)
+            return false;
+        // check if it's matched the start
+        for (let i = 0; i < START_CODES.length; i += 1) {
+            if (state.src.charCodeAt(pos + i) !== START_CODES[i])
+                return false;
+        }
+        // check if it's matched the syntax
+        const match = state.src.slice(pos, max).match(SYNTAX_RE);
+        if (!match)
+            return false;
+        // return true as we have matched the syntax
+        if (silent)
+            return true;
+        const [, info = '', id = ''] = match;
+        const { attrs } = resolveAttrs(info);
+        const meta = {
+            id,
+            autoplay: attrs.autoplay ?? false,
+            loop: attrs.loop ?? false,
+            start: timeToSeconds(attrs.start),
+            end: timeToSeconds(attrs.end),
+            title: attrs.title,
+            width: attrs.width ? parseRect(attrs.width) : '100%',
+            height: attrs.height ? parseRect(attrs.height) : '',
+            ratio: attrs.ratio ? parseRect(attrs.ratio) : '',
+        };
+        const token = state.push('video_youtube', '', 0);
+        token.meta = meta;
+        token.map = [startLine, startLine + 1];
+        token.info = info;
+        state.line = startLine + 1;
+        return true;
+    };
+}
+function resolveYoutube(meta) {
+    const params = new URLSearchParams();
+    meta.autoplay && params.set('autoplay', '1');
+    meta.loop && params.set('loop', '1');
+    meta.start && params.set('start', meta.start.toString());
+    meta.end && params.set('end', meta.end.toString());
+    const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
+    return `<VideoYoutube src="${source}" width="${meta.width}" height="${meta.height}" ratio="${meta.ratio}" title="${meta.title}" />`;
+}
+export const youtubePlugin = (md) => {
+    md.block.ruler.before('import_code', 'video_youtube', createYoutubeRuleBlock(), {
+        alt: ['paragraph', 'reference', 'blockquote', 'list'],
+    });
+    md.renderer.rules.video_youtube = (tokens, index) => {
+        const token = tokens[index];
+        const content = resolveYoutube(token.meta);
+        token.content = content;
+        return content;
+    };
+};

package/lib/node/index.d.ts

@@ -0,0 +1,2 @@
+export * from './plugin.js';
+export * from '../shared/index.js';

package/lib/node/index.js

@@ -0,0 +1,2 @@
+export * from './plugin.js';
+export * from '../shared/index.js';

package/lib/node/markdown-it-container.d.ts

@@ -0,0 +1,6 @@
+declare module 'markdown-it-container' {
+  import type { PluginWithParams } from 'markdown-it'
+
+  const container: PluginWithParams
+  export = container
+}

package/lib/node/plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vuepress/core';
+import type { MarkdownPowerPluginOptions } from '../shared/index.js';
+export declare function markdownPowerPlugin(options?: MarkdownPowerPluginOptions): Plugin;

package/lib/node/plugin.js

@@ -0,0 +1,55 @@
+import { getDirname, path } from 'vuepress/utils';
+import { caniusePlugin, legacyCaniuse } from './features/caniuse.js';
+import { pdfPlugin } from './features/pdf.js';
+import { createIconCSSWriter, iconsPlugin } from './features/icons/index.js';
+import { bilibiliPlugin } from './features/video/bilibili.js';
+import { youtubePlugin } from './features/video/youtube.js';
+import { codepenPlugin } from './features/codepen.js';
+import { replitPlugin } from './features/replit.js';
+const __dirname = getDirname(import.meta.url);
+export function markdownPowerPlugin(options = {}) {
+    return (app) => {
+        const { initIcon, addIcon } = createIconCSSWriter(app, options.icons);
+        return {
+            name: '@vuepress-plume/plugin-md-power',
+            clientConfigFile: path.resolve(__dirname, '../client/config.js'),
+            define: {
+                __MD_POWER_INJECT_OPTIONS__: options,
+            },
+            onInitialized: async () => await initIcon(),
+            extendsMarkdown(md) {
+                if (options.caniuse) {
+                    const caniuse = options.caniuse === true ? {} : options.caniuse;
+                    // @[caniuse](feature_name)
+                    md.use(caniusePlugin, caniuse);
+                    // 兼容旧语法
+                    legacyCaniuse(md, caniuse);
+                }
+                if (options.pdf) {
+                    // @[pdf](url)
+                    md.use(pdfPlugin);
+                }
+                if (options.icons) {
+                    // :[collect:name]:
+                    md.use(iconsPlugin, addIcon);
+                }
+                if (options.bilibili) {
+                    // @[bilibili](bvid aid cid)
+                    md.use(bilibiliPlugin);
+                }
+                if (options.youtube) {
+                    // @[youtube](id)
+                    md.use(youtubePlugin);
+                }
+                if (options.codepen) {
+                    // @[codepen](user/slash)
+                    md.use(codepenPlugin);
+                }
+                if (options.replit) {
+                    // @[replit](user/repl-name)
+                    md.use(replitPlugin);
+                }
+            },
+        };
+    };
+}

package/lib/node/utils/package.d.ts

@@ -0,0 +1,4 @@
+export type Awaitable<T> = T | Promise<T>;
+export declare function interopDefault<T>(m: Awaitable<T>): Promise<T extends {
+    default: infer U;
+} ? U : T>;

package/lib/node/utils/package.js

@@ -0,0 +1,4 @@
+export async function interopDefault(m) {
+    const resolved = await m;
+    return resolved.default || resolved;
+}

package/lib/node/utils/parseRect.d.ts

@@ -0,0 +1 @@
+export declare function parseRect(str: string, unit?: string): string;

package/lib/node/utils/parseRect.js

@@ -0,0 +1,5 @@
+export function parseRect(str, unit = 'px') {
+    if (Number.parseFloat(str) === Number(str))
+        return `${str}${unit}`;
+    return str;
+}

package/lib/node/utils/resolveAttrs.d.ts

@@ -0,0 +1,4 @@
+export declare function resolveAttrs(info: string): {
+    attrs: Record<string, any>;
+    rawAttrs: string;
+};

package/lib/node/utils/resolveAttrs.js

@@ -0,0 +1,29 @@
+const RE_ATTR_VALUE = /(?:^|\s+)(?<attr>[\w\d-]+)(?:=\s*(?<quote>['"])(?<value>.+?)\k<quote>)?(?:\s+|$)/;
+export function resolveAttrs(info) {
+    info = info.trim();
+    if (!info)
+        return { rawAttrs: '', attrs: {} };
+    const attrs = {};
+    const rawAttrs = info;
+    let matched;
+    // eslint-disable-next-line no-cond-assign
+    while (matched = info.match(RE_ATTR_VALUE)) {
+        const { attr, value } = matched.groups || {};
+        attrs[attr] = value ?? true;
+        info = info.slice(matched[0].length);
+    }
+    Object.keys(attrs).forEach((key) => {
+        let value = attrs[key];
+        value = typeof value === 'string' ? value.trim() : value;
+        if (value === 'true')
+            value = true;
+        else if (value === 'false')
+            value = false;
+        attrs[key] = value;
+        if (key.includes('-')) {
+            const _key = key.replace(/-(\w)/g, (_, c) => c.toUpperCase());
+            attrs[_key] = value;
+        }
+    });
+    return { attrs, rawAttrs };
+}

package/lib/node/utils/timeToSeconds.d.ts

@@ -0,0 +1 @@
+export declare function timeToSeconds(time: string): number;

package/lib/node/utils/timeToSeconds.js

@@ -0,0 +1,8 @@
+export function timeToSeconds(time) {
+    if (!time)
+        return 0;
+    if (Number.parseFloat(time) === Number(time))
+        return Number(time);
+    const [s, m, h] = time.split(':').reverse().map(n => Number(n) || 0);
+    return s + m * 60 + h * 3600;
+}

package/lib/shared/caniuse.d.ts

@@ -0,0 +1,18 @@
+export type CanIUseMode = 'embed' | 'image';
+export interface CanIUseTokenMeta {
+    feature: string;
+    mode: CanIUseMode;
+    versions: string;
+}
+export interface CanIUseOptions {
+    /**
+     * 嵌入模式
+     *
+     * embed 通过iframe嵌入，提供可交互视图
+     *
+     * image 通过图片嵌入，静态
+     *
+     * @default 'embed'
+     */
+    mode?: CanIUseMode;
+}

package/lib/shared/caniuse.js

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

package/lib/shared/codepen.d.ts

@@ -0,0 +1,10 @@
+import type { SizeOptions } from './size';
+export interface CodepenTokenMeta extends SizeOptions {
+    title?: string;
+    user?: string;
+    slash?: string;
+    tab?: string;
+    theme?: string;
+    preview?: boolean;
+    editable?: boolean;
+}

package/lib/shared/codepen.js

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

package/lib/shared/icons.d.ts

@@ -0,0 +1,17 @@
+export interface IconsOptions {
+    /**
+     * The prefix of the icon className
+     * @default 'vp-mdi'
+     */
+    prefix?: string;
+    /**
+     * The size of the icon
+     * @default '1em'
+     */
+    size?: string | number;
+    /**
+     * The color of the icon
+     * @default 'currentColor'
+     */
+    color?: string;
+}

package/lib/shared/icons.js

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

package/lib/shared/index.d.ts

@@ -0,0 +1,6 @@
+export * from './caniuse.js';
+export * from './pdf.js';
+export * from './icons.js';
+export * from './video.js';
+export * from './codepen.js';
+export * from './plugin.js';

package/lib/shared/index.js

@@ -0,0 +1,6 @@
+export * from './caniuse.js';
+export * from './pdf.js';
+export * from './icons.js';
+export * from './video.js';
+export * from './codepen.js';
+export * from './plugin.js';

package/lib/shared/pdf.d.ts

@@ -0,0 +1,15 @@
+import type { SizeOptions } from './size';
+export type PDFEmbedType = 'iframe' | 'embed' | 'pdfjs';
+export interface PDFTokenMeta extends SizeOptions {
+    page?: number;
+    noToolbar?: boolean;
+    zoom?: number;
+    src?: string;
+    title?: string;
+}
+export interface PDFOptions {
+    /**
+     * pdfjs url
+     */
+    pdfjsUrl?: string;
+}

package/lib/shared/pdf.js

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

package/lib/shared/plugin.d.ts

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

package/lib/shared/plugin.js

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

package/lib/shared/replit.d.ts

@@ -0,0 +1,6 @@
+import type { SizeOptions } from './size';
+export interface ReplitTokenMeta extends SizeOptions {
+    title?: string;
+    source?: string;
+    theme?: string;
+}

package/lib/shared/replit.js

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

package/lib/shared/size.d.ts

@@ -0,0 +1,5 @@
+export interface SizeOptions {
+    width?: string;
+    height?: string;
+    ratio?: number | string;
+}

package/lib/shared/size.js

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

package/lib/shared/video.d.ts

@@ -0,0 +1,22 @@
+import type { SizeOptions } from './size';
+export interface VideoOptions {
+    bilibili?: boolean;
+    youtube?: boolean;
+}
+export interface BilibiliTokenMeta extends SizeOptions {
+    title?: string;
+    bvid?: string;
+    aid?: string;
+    cid?: string;
+    autoplay?: boolean;
+    time?: string | number;
+    page?: number;
+}
+export interface YoutubeTokenMeta extends SizeOptions {
+    title?: string;
+    id: string;
+    autoplay?: boolean;
+    loop?: boolean;
+    start?: string | number;
+    end?: string | number;
+}

package/lib/shared/video.js

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

package/package.json

@@ -0,0 +1,69 @@
+{
+  "name": "vuepress-plugin-md-power",
+  "type": "module",
+  "version": "1.0.0-rc.48",
+  "description": "The Plugin for VuePres 2 - markdown power",
+  "author": "pengzhanbo <volodymyr@foxmail.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/pengzhanbo/vuepress-theme-plume#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pengzhanbo/vuepress-theme-plume.git",
+    "directory": "plugins/plugin-md-power"
+  },
+  "bugs": {
+    "url": "https://github.com/pengzhanbo/vuepress-theme-plume/issues"
+  },
+  "exports": {
+    ".": {
+      "types": "./lib/node/index.d.ts",
+      "import": "./lib/node/index.js"
+    },
+    "./client": {
+      "types": "./lib/client/index.d.ts",
+      "import": "./lib/client/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "main": "lib/node/index.js",
+  "types": "./lib/node/index.d.ts",
+  "files": [
+    "lib"
+  ],
+  "peerDependencies": {
+    "@iconify/json": "^2",
+    "vuepress": "2.0.0-rc.9"
+  },
+  "peerDependenciesMeta": {
+    "@iconify/json": {
+      "optional": true
+    }
+  },
+  "dependencies": {
+    "@iconify/utils": "^2.1.22",
+    "@vueuse/core": "^10.9.0",
+    "local-pkg": "^0.5.0",
+    "markdown-it-container": "^4.0.0",
+    "nanoid": "^5.0.6",
+    "vue": "^3.4.21"
+  },
+  "devDependencies": {
+    "@iconify/json": "^2.2.196",
+    "@types/markdown-it": "^13.0.7"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keyword": [
+    "VuePress",
+    "vuepress plugin",
+    "markdown power",
+    "vuepress-plugin-md-power"
+  ],
+  "scripts": {
+    "build": "pnpm run copy && pnpm run ts",
+    "clean": "rimraf --glob ./lib ./*.tsbuildinfo",
+    "copy": "cpx \"src/**/*.{d.ts,vue,css,scss,jpg,png}\" lib",
+    "ts": "tsc -b tsconfig.build.json"
+  }
+}