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

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (C) 2021 - PRESENT by pengzhanbo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

package/README.md

@@ -0,0 +1,201 @@
+# vuepress-plugin-md-power
+
+为 vuepress 提供 丰富的 markdown 语法支持。
+
+## 功能
+
+- caniuse 支持，提供前端各种特性在各个浏览器版本中的支持情况查看器
+- 嵌入 PDF 支持
+- 嵌入 视频支持，当前支持嵌入 bilibili 和 youtube 的视频
+- 内联 iconify 图标支持
+
+## 安装
+
+```sh
+pnpm add vuepress-plugin-md-power
+```
+
+## 使用
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { md } from 'vuepress-plugin-md-power'
+
+export default defineUserConfig({
+  plugins: [
+    markdownPowerPlugin({
+      caniuse: true,
+      pdf: true,
+      bilibili: true,
+      youtube: true,
+      icons: true,
+    })
+  ]
+})
+```
+
+### caniuse
+
+插件默认不启用该功能，你需要手动设置 `caniuse` 为 `true`
+
+#### 语法
+
+```md
+@[caniuse](feature)
+@[caniuse image](feature)
+@[caniuse embed{versions}](feature)
+```
+
+你可以从 [caniuse](https://caniuse.bitsofco.de/) 获取 feature 的值。
+
+默认情况下，插件通过 `iframe` 嵌入 `caniuse` 的支持情况查看器。
+你也可以使用 `@[caniuse image](feature)` 直接嵌入图片。
+
+caniuse 默认查看最近的5个浏览器版本。你可以通过 `{versions}` 手动设置查看的浏览器版本。
+格式为 `{number,number,...}`。取值范围为 `-5 ~ 3` 。
+
+- 小于0 表示低于当前浏览器版本的支持情况
+- 0 表示当前浏览器版本的支持情况
+- 大于0 表示高于当前浏览器版本的支持情况
+
+如 `{-2,-1,1,2}` 表示查看低于当前 2 个版本 到 高于当前 2 个版本的支持情况。
+
+### pdf
+
+插件默认不启用该功能，你需要手动设置 `pdf` 为 `true`
+
+#### 语法
+
+```md
+@[pdf](url)
+@[pdf 1](url)
+@[pdf 1 no-toolbar width="100%" height="600px" zoom="1" ratio="16:9"](url)
+```
+
+`url` 只支持绝对路径以及完整的资源链接地址，请勿传入相对路径。
+
+你可以在 `pdf` 后紧跟空格，设置一个数字表示默认显示的  pdf 页码
+
+- `no-toolbar` 表示不显示工具栏
+- `width` 设置宽度
+- `height` 设置高度
+- `zoom` 设置缩放
+- `ratio` 设置宽高比， 仅当 `width` 有值， `height` 未设置时有效
+
+### icons
+
+插件默认不启用该功能，你需要手动设置 `icons` 为 `true`。
+
+你还需要手动安装 `@iconify/json` 依赖。
+
+```sh
+pnpm add @iconify/json
+```
+
+#### 语法
+
+```md
+:[collect:icon]:
+:[collect:icon size]:
+:[collect:icon /color]:
+:[collect:icon size/color]:
+```
+
+你可以从 [icon-sets.iconify](https://icon-sets.iconify.design/) 获取 图标集。
+
+显示 `logos` 图标集合下的 `vue` 图标
+
+```md
+:[logos:vue]:
+```
+
+图标默认大小为 `1em` ，你可以通过 `size` 设置图标大小
+
+```md
+:[logos:vue 1.2em]:
+```
+
+图标默认颜色为 `currentColor` 你可以通过 `/color` 设置图标颜色
+
+```md
+:[logos:vue /blue]:
+```
+
+也可以通过 `size/color` 设置图标大小和颜色
+
+```md
+:[logos:vue 1.2em/blue]:
+```
+
+### bilibili
+
+插件默认不启用该功能，你需要手动设置 `bilibili` 为 `true`
+
+#### 语法
+
+```md
+@[bilibili](bvid)
+@[bilibili autoplay time="0"](bvid)
+@[bilibili p1 autoplay time="0" ratio="16:9"](aid cid)
+```
+
+- 设置 `autoplay` 以自动播放视频。
+- 设置 `time` 以指定开始播放的时间点，单位为秒。还可以传入 `mm:ss` 或者 `hh:mm:ss`。
+- 如果为 分p（非合集），还可以设置 `p\d` （第\d 个分p），此时可以只传入 `aid` 和 `cid`。
+- 设置 `ratio` 以指定视频的宽高比。
+
+### youtube
+
+插件默认不启用该功能，你需要手动设置 `youtube` 为 `true`
+
+#### 语法
+
+```md
+@[youtube](id)
+@[youtube autoplay loop ratio="16:9" star="0" end="0"](id)
+```
+
+- `id` 为 YouTube 视频 ID
+- `autoplay` 为是否自动播放
+- `loop` 为是否循环播放
+- `ratio` 为视频的宽高比
+- `star` 为开始时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
+- `end` 为结束时间，单位为秒，还可以传入 `mm:ss` 或者 `hh:mm:ss`。
+
+### CodePen
+
+插件默认不启用该功能，你需要手动设置 `codepen` 为 `true`
+
+#### 语法
+
+```md
+@[codepen](user/slash)
+@[codepen preview editable title="" height="400px" tab="css,result" theme="dark"](user/slash)
+```
+
+- `user` 为 CodePen 用户名
+- `slash` 为 CodePen slash
+- `preview` 为是否为预览模式
+- `editable` 为是否为可编辑模式
+- `title` 为标题
+- `height` 为高度
+- `tab` 为选项卡，默认为 `result`, 多个以逗号分隔，如 `css,result`
+- `theme` 为主题， 可选值包括 `dark` 和 `light`
+
+### Replit
+
+插件默认不启用该功能，你需要手动设置 `replit` 为 `true`
+
+#### 语法
+
+```md
+@[replit](user/repl-name)
+@[replit title="" height="450px" theme="dark"](user/repl-name#filepath)
+```
+
+- `user` 为 Replit 用户名
+- `repl-name` 为 Replit Repl 名
+- `filepath` 为文件路径
+- `title` 为标题
+- `height` 为高度
+- `theme` 为主题， 可选值包括 `dark` 和 `light`

package/lib/client/components/Bilibili.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useSize } from '../composables/size.js'
+
+const props = defineProps<{
+  src: string
+  title: string
+  width?: string
+  height?: string
+  ratio?: string
+}>()
+
+const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture'
+
+const options = toRefs(props)
+
+const { el, width, height, resize } = useSize(options)
+
+function onLoad() {
+  resize()
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      ref="el"
+      class="video_bilibili_iframe"
+      :src="src"
+      :title="title || 'Bilibili'"
+      :style="{ width, height }"
+      :allow="IFRAME_ALLOW"
+      @load="onLoad"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.video_bilibili_iframe {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-radius: 5px;
+}
+</style>

package/lib/client/components/PDFViewer.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { onMounted, toRefs } from 'vue'
+import type { PDFTokenMeta } from '../../shared/pdf.js'
+import { useSize } from '../composables/size.js'
+import { usePDF } from '../composables/pdf.js'
+
+const props = defineProps<PDFTokenMeta>()
+
+const options = toRefs(props)
+const { el, width, height, resize } = useSize(options)
+
+onMounted(() => {
+  if (!el.value)
+    return
+  usePDF(el.value, props.src!, {
+    page: props.page,
+    zoom: props.zoom,
+    noToolbar: props.noToolbar,
+  })
+  resize()
+})
+</script>
+
+<template>
+  <div ref="el" class="pdf-viewer-wrapper" :style="{ width, height }" />
+</template>
+
+<style>
+.pdf-viewer-wrapper {
+  position: relative;
+  overflow: hidden;
+  border-radius: 4px;
+}
+
+.pdf-viewer {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/lib/client/components/Replit.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue'
+import type { ReplitTokenMeta } from '../../shared/replit.js'
+
+const props = defineProps<ReplitTokenMeta>()
+
+const current = getCurrentInstance()
+// magic height
+const height = ref('47px')
+
+const REPLIT_LINK = 'https://replit.com/'
+
+const isDark = computed(() => current?.appContext.config.globalProperties.$isDark.value)
+
+const link = computed(() => {
+  const url = new URL(`/${props.source}`, REPLIT_LINK)
+  url.searchParams.set('embed', 'true')
+
+  const theme = props.theme || (isDark.value ? 'dark' : 'light')
+  url.searchParams.set('theme', theme)
+
+  return url.toString()
+})
+
+function onload() {
+  height.value = props.height || '450px'
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      class="replit-iframe-wrapper"
+      :src="link"
+      :title="title || 'Replit'"
+      :style="{ width, height }"
+      allowtransparency="true"
+      allowfullscree="true"
+      @load="onload"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.replit-iframe-wrapper {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  transition: border 0.25s;
+}
+</style>

package/lib/client/components/Youtube.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { toRefs } from 'vue'
+import { useSize } from '../composables/size.js'
+
+const props = defineProps<{
+  src: string
+  title: string
+  width?: string
+  height?: string
+  ratio?: string
+}>()
+
+const IFRAME_ALLOW = 'accelerometer; autoplay; clipboard-write; encrypted-media; fullscreen; gyroscope; picture-in-picture'
+
+const options = toRefs(props)
+
+const { el, width, height, resize } = useSize(options)
+</script>
+
+<template>
+  <ClientOnly>
+    <iframe
+      ref="el"
+      class="video_youtube_iframe"
+      :src="src"
+      :title="title || 'Youtube'"
+      :style="{ width, height }"
+      :allow="IFRAME_ALLOW"
+      @load="resize"
+    />
+  </ClientOnly>
+</template>
+
+<style>
+.video_youtube_iframe {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-radius: 5px;
+}
+</style>

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

@@ -0,0 +1,3 @@
+import type { PDFEmbedType, PDFTokenMeta } from '../../shared/pdf.js';
+export declare function renderPDF(el: HTMLElement, url: string, embedType: PDFEmbedType, options: PDFTokenMeta): void;
+export declare function usePDF(el: HTMLElement, url: string, options: PDFTokenMeta): void;

package/lib/client/composables/pdf.js

@@ -0,0 +1,75 @@
+import { ensureEndingSlash } 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) {
+    const { page, noToolbar, zoom } = options;
+    const params = [
+        `page=${page}`,
+        `toolbar=${noToolbar ? 0 : 1}`,
+        `zoom=${zoom}`,
+    ];
+    let queryString = params.join('&');
+    if (queryString)
+        queryString = `#${queryString}`;
+    return queryString;
+}
+export function renderPDF(el, url, embedType, options) {
+    if (!pluginOptions.pdf)
+        return;
+    url = normalizeLink(url);
+    const pdfOptions = pluginOptions.pdf === true ? {} : pluginOptions.pdf;
+    const pdfjsUrl = pdfOptions.pdfjsUrl
+        ? `${ensureEndingSlash(withBase(pdfOptions.pdfjsUrl))}web/viewer.html`
+        : '';
+    const queryString = queryStringify(options);
+    const source = embedType === 'pdfjs'
+        ? `${pdfjsUrl}?file=${encodeURIComponent(url)}${queryString}`
+        : `${url}${queryString}`;
+    const tagName = embedType === 'pdfjs' || embedType === 'iframe'
+        ? 'iframe'
+        : 'embed';
+    el.innerHTML = '';
+    const pdf = document.createElement(tagName);
+    pdf.className = 'pdf-viewer';
+    pdf.type = 'application/pdf';
+    pdf.title = options.title || 'PDF Viewer';
+    pdf.src = source;
+    if (pdf instanceof HTMLIFrameElement)
+        pdf.allow = 'fullscreen';
+    el.appendChild(pdf);
+}
+export function usePDF(el, url, options) {
+    if (typeof window === 'undefined' || !window?.navigator?.userAgent)
+        return;
+    const { navigator } = window;
+    const { userAgent } = navigator;
+    const isModernBrowser = typeof window.Promise === 'function';
+    // Quick test for mobile devices.
+    const isMobileDevice = checkIsiPad(userAgent) || checkIsMobile(userAgent);
+    // Safari desktop requires special handling
+    const isSafariDesktop = !isMobileDevice && checkIsSafari(userAgent);
+    const isFirefoxWithPDFJS = !isMobileDevice
+        && /firefox/iu.test(userAgent)
+        && userAgent.split('rv:').length > 1
+        ? Number.parseInt(userAgent.split('rv:')[1].split('.')[0], 10) > 18
+        : false;
+    // Determines whether PDF support is available
+    const supportsPDFs 
+    // As of Sept 2020 no mobile browsers properly support PDF embeds
+    = !isMobileDevice
+        // We're moving into the age of MIME-less browsers. They mostly all support PDF rendering without plugins.
+        && (isModernBrowser
+            // Modern versions of Firefox come bundled with PDFJS
+            || isFirefoxWithPDFJS);
+    if (!url)
+        return;
+    if (supportsPDFs || !isMobileDevice) {
+        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>`;
+}

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

@@ -0,0 +1 @@
+export declare function setupCanIUse(): void;

package/lib/client/composables/setupCanIUse.js

@@ -0,0 +1,18 @@
+let isBind = false;
+export function setupCanIUse() {
+    if (isBind)
+        return;
+    isBind = true;
+    window.addEventListener('message', (message) => {
+        const data = message.data;
+        if (typeof data === 'string' && data.includes('ciu_embed')) {
+            const [, feature, height] = data.split(':');
+            const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]:not([data-skip])`);
+            if (el) {
+                const h = Number.parseInt(height) + 30;
+                el.childNodes[0].height = `${h}px`;
+                el.setAttribute('data-skip', 'true');
+            }
+        }
+    });
+}

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

@@ -0,0 +1,10 @@
+import type { MaybeRef } from '@vueuse/core';
+import type { Ref, ShallowRef, ToRefs } from 'vue';
+import type { SizeOptions } from '../../shared/size.js';
+export interface SizeInfo<T extends HTMLElement> {
+    el: ShallowRef<T | undefined>;
+    width: Ref<string>;
+    height: Ref<string>;
+    resize: () => void;
+}
+export declare function useSize<T extends HTMLElement>(options: ToRefs<SizeOptions>, extraHeight?: MaybeRef<number>): SizeInfo<T>;

package/lib/client/composables/size.js

@@ -0,0 +1,33 @@
+import { useEventListener } from '@vueuse/core';
+import { computed, isRef, onMounted, ref, shallowRef, toValue, watch } from 'vue';
+export function useSize(options, extraHeight = 0) {
+    const el = shallowRef();
+    const width = computed(() => toValue(options.width) || '100%');
+    const height = ref('auto');
+    const getRadio = (ratio) => {
+        if (typeof ratio === 'string') {
+            const [width, height] = ratio.split(':');
+            const parsedRadio = Number(width) / Number(height);
+            if (!Number.isNaN(parsedRadio))
+                return parsedRadio;
+        }
+        return typeof ratio === 'number' ? ratio : 16 / 9;
+    };
+    const getHeight = (width) => {
+        const height = toValue(options.height);
+        const ratio = getRadio(toValue(options.ratio));
+        return height || `${Number(width) / ratio + toValue(extraHeight)}px`;
+    };
+    const resize = () => {
+        if (el.value)
+            height.value = getHeight(el.value.offsetWidth);
+    };
+    onMounted(() => {
+        resize();
+        if (isRef(extraHeight))
+            watch(extraHeight, resize);
+        useEventListener('orientationchange', resize);
+        useEventListener('resize', resize);
+    });
+    return { el, width, height, resize };
+}

package/lib/client/config.d.ts

@@ -0,0 +1,4 @@
+import type { ClientConfig } from 'vuepress/client';
+import '@internal/md-power/icons.css';
+declare const _default: ClientConfig;
+export default _default;

package/lib/client/config.js

@@ -0,0 +1,27 @@
+import { defineClientConfig } from 'vuepress/client';
+import { pluginOptions } from './options.js';
+import { setupCanIUse } from './composables/setupCanIUse.js';
+import PDFViewer from './components/PDFViewer.vue';
+import Bilibili from './components/Bilibili.vue';
+import Youtube from './components/Youtube.vue';
+import Replit from './components/Replit.vue';
+import '@internal/md-power/icons.css';
+export default defineClientConfig({
+    enhance({ router, app }) {
+        if (pluginOptions.pdf)
+            app.component('PDFViewer', PDFViewer);
+        if (pluginOptions.bilibili)
+            app.component('VideoBilibili', Bilibili);
+        if (pluginOptions.youtube)
+            app.component('VideoYoutube', Youtube);
+        if (pluginOptions.replit)
+            app.component('ReplitViewer', Replit);
+        if (__VUEPRESS_SSR__)
+            return;
+        if (pluginOptions.caniuse) {
+            router.afterEach(() => {
+                setupCanIUse();
+            });
+        }
+    },
+});

package/lib/client/index.d.ts

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

package/lib/client/index.js

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

package/lib/client/options.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownPowerPluginOptions } from '../shared/index.js';
+export declare const pluginOptions: MarkdownPowerPluginOptions;

package/lib/client/options.js

@@ -0,0 +1 @@
+export const pluginOptions = __MD_POWER_INJECT_OPTIONS__;

package/lib/client/shim.d.ts

@@ -0,0 +1,6 @@
+declare module '*.vue' {
+  import type { ComponentOptions } from 'vue'
+
+  const comp: ComponentOptions
+  export default comp
+}

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

@@ -0,0 +1,3 @@
+export declare function checkIsMobile(ua: string): boolean;
+export declare function checkIsSafari(ua: string): boolean;
+export declare function checkIsiPad(ua: string): boolean;

package/lib/client/utils/is.js

@@ -0,0 +1,13 @@
+export function checkIsMobile(ua) {
+    return /\b(?:Android|iPhone)/i.test(ua);
+}
+export function checkIsSafari(ua) {
+    return /version\/([\w.]+) .*(mobile ?safari|safari)/i.test(ua);
+}
+export function checkIsiPad(ua) {
+    return [
+        /\((ipad);[-\w),; ]+apple/i,
+        /applecoremedia\/[\w.]+ \((ipad)/i,
+        /\b(ipad)\d\d?,\d\d?[;\]].+ios/i,
+    ].some(item => item.test(ua));
+}

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

@@ -0,0 +1 @@
+export declare function normalizeLink(url: string): string;

package/lib/client/utils/link.js

@@ -0,0 +1,5 @@
+import { isLinkHttp } from 'vuepress/shared';
+import { withBase } from 'vuepress/client';
+export function normalizeLink(url) {
+    return isLinkHttp(url) ? url : withBase(url);
+}

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

@@ -0,0 +1,25 @@
+/**
+ * @[caniuse embed{1,2,3,4}](feature_name)
+ * @[caniuse image](feature_name)
+ */
+import type { PluginWithOptions } from 'markdown-it';
+import type { Markdown } from 'vuepress/markdown';
+import type { CanIUseOptions } from '../../shared/index.js';
+/**
+ * @example
+ * ```md
+ * @[caniuse](feature_name)
+ * ```
+ */
+export declare const caniusePlugin: PluginWithOptions<CanIUseOptions>;
+/**
+ * @deprecated use caniuse plugin
+ *
+ * 兼容旧语法
+ * @example
+ * ```md
+ * :::caniuse <feature_name>
+ * :::
+ * ```
+ */
+export declare function legacyCaniuse(md: Markdown, { mode }?: CanIUseOptions): void;