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

package/lib/client/components/Plot.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { onClickOutside, useMediaQuery } from '@vueuse/core'
+import { computed, ref, shallowRef } from 'vue'
+import { usePageFrontmatter } from 'vuepress/client'
+import { pluginOptions } from '../options.js'
+import type { PlotOptions } from '../../shared/index.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/components/Replit.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, ref } from 'vue'
+import Loading from './Loading.vue'
+import type { ReplitTokenMeta } from '../../shared/index.js'
+
+const props = defineProps<ReplitTokenMeta>()
+
+const current = getCurrentInstance()
+// magic height
+const height = ref('47px')
+const loaded = ref(false)
+
+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() {
+  loaded.value = true
+  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"
+    />
+    <Loading v-if="!loaded" />
+  </ClientOnly>
+</template>
+
+<style>
+.replit-iframe-wrapper {
+  width: 100%;
+  margin: 16px auto;
+  border: none;
+  border-top: 1px solid var(--vp-c-divider, #e2e2e3);
+  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/codeRepl.d.ts

@@ -0,0 +1,22 @@
+import { Ref } from 'vue';
+
+type Lang = 'kotlin' | 'go' | 'rust';
+declare function resolveCode(el: HTMLElement): string;
+declare function resolveCodeInfo(el: HTMLDivElement): {
+    lang: Lang;
+    code: string;
+};
+declare function useCodeRepl(el: Ref<HTMLDivElement | null>): {
+    onRunCode: () => Promise<void>;
+    onCleanRun: () => void;
+    lang: Ref<Lang | undefined, Lang | undefined>;
+    backendVersion: Ref<string, string>;
+    firstRun: Ref<boolean, boolean>;
+    stderr: Ref<string[], string[]>;
+    stdout: Ref<string[], string[]>;
+    loaded: Ref<boolean, boolean>;
+    finished: Ref<boolean, boolean>;
+    error: Ref<string, string>;
+};
+
+export { resolveCode, resolveCodeInfo, useCodeRepl };

package/lib/client/composables/codeRepl.js

@@ -0,0 +1,266 @@
+// src/client/composables/codeRepl.ts
+import { onMounted, ref } from "vue";
+import { http } from "../utils/http.js";
+import { sleep } from "../utils/sleep.js";
+
+// src/client/composables/rustRepl.ts
+import { tryOnScopeDispose } from "@vueuse/core";
+var wsUrl = "wss://play.rust-lang.org/websocket";
+var payloadType = {
+  connected: "websocket/connected",
+  request: "output/execute/wsExecuteRequest",
+  execute: {
+    begin: "output/execute/wsExecuteBegin",
+    // status: 'output/execute/wsExecuteStatus',
+    stderr: "output/execute/wsExecuteStderr",
+    stdout: "output/execute/wsExecuteStdout",
+    end: "output/execute/wsExecuteEnd"
+  }
+};
+var ws = null;
+var isOpen = false;
+var uuid = 0;
+function connect() {
+  if (isOpen)
+    return Promise.resolve();
+  ws = new WebSocket(wsUrl);
+  uuid = 0;
+  ws.addEventListener("open", () => {
+    isOpen = true;
+    send(
+      payloadType.connected,
+      { iAcceptThisIsAnUnsupportedApi: true },
+      { websocket: true, sequenceNumber: uuid }
+    );
+  });
+  ws.addEventListener("close", () => {
+    isOpen = false;
+    ws = null;
+  });
+  tryOnScopeDispose(() => ws?.close());
+  return new Promise((resolve) => {
+    function connected(e) {
+      const data = JSON.parse(e.data);
+      if (data.type === payloadType.connected) {
+        ws?.removeEventListener("message", connected);
+        resolve();
+      }
+    }
+    ws?.addEventListener("message", connected);
+  });
+}
+function send(type, payload, meta) {
+  const msg = { type, meta, payload };
+  ws?.send(JSON.stringify(msg));
+}
+async function rustExecute(code, { onEnd, onError, onStderr, onStdout, onBegin }) {
+  await connect();
+  const meta = { sequenceNumber: uuid++ };
+  const payload = {
+    backtrace: false,
+    channel: "stable",
+    crateType: "bin",
+    edition: "2021",
+    mode: "release",
+    tests: false,
+    code
+  };
+  send(payloadType.request, payload, meta);
+  let stdout = "";
+  let stderr = "";
+  function onMessage(e) {
+    const data = JSON.parse(e.data);
+    const { type, payload: payload2, meta: _meta = {} } = data;
+    if (_meta.sequenceNumber !== meta.sequenceNumber)
+      return;
+    if (type === payloadType.execute.begin)
+      onBegin?.();
+    if (type === payloadType.execute.stdout) {
+      stdout += payload2;
+      if (stdout.endsWith("\n")) {
+        onStdout?.(stdout);
+        stdout = "";
+      }
+    }
+    if (type === payloadType.execute.stderr) {
+      stderr += payload2;
+      if (stderr.endsWith("\n")) {
+        if (stderr.startsWith("error:")) {
+          const index = stderr.indexOf("\n");
+          onStderr?.(stderr.slice(0, index));
+          onStderr?.(stderr.slice(index + 1));
+        } else {
+          onStderr?.(stderr);
+        }
+        stderr = "";
+      }
+    }
+    if (type === payloadType.execute.end) {
+      if (payload2.success === false)
+        onError?.(payload2.exitDetail);
+      ws?.removeEventListener("message", onMessage);
+      onEnd?.();
+    }
+  }
+  ws?.addEventListener("message", onMessage);
+}
+
+// src/client/composables/codeRepl.ts
+var ignoredNodes = [".diff.remove", ".vp-copy-ignore"];
+var RE_LANGUAGE = /language-(\w+)/;
+var api = {
+  go: "https://api.pengzhanbo.cn/repl/golang/run",
+  kotlin: "https://api.pengzhanbo.cn/repl/kotlin/run"
+};
+var langAlias = {
+  kt: "kotlin",
+  kotlin: "kotlin",
+  go: "go",
+  rust: "rust",
+  rs: "rust"
+};
+var supportLang = ["kotlin", "go", "rust"];
+function resolveLang(lang) {
+  return lang ? langAlias[lang] || lang : "";
+}
+function resolveCode(el) {
+  const clone = el.cloneNode(true);
+  clone.querySelectorAll(ignoredNodes.join(",")).forEach((node) => node.remove());
+  return clone.textContent || "";
+}
+function resolveCodeInfo(el) {
+  const wrapper = el.querySelector("div[class*=language-]");
+  const lang = wrapper?.className.match(RE_LANGUAGE)?.[1];
+  const codeEl = wrapper?.querySelector("pre");
+  let code = "";
+  if (codeEl)
+    code = resolveCode(codeEl);
+  return { lang: resolveLang(lang), code };
+}
+function useCodeRepl(el) {
+  const lang = ref();
+  const loaded = ref(true);
+  const firstRun = ref(true);
+  const finished = ref(true);
+  const stdout = ref([]);
+  const stderr = ref([]);
+  const error = ref("");
+  const backendVersion = ref("");
+  onMounted(() => {
+    if (el.value) {
+      const info = resolveCodeInfo(el.value);
+      lang.value = info.lang;
+    }
+  });
+  const executeMap = {
+    kotlin: executeKotlin,
+    go: executeGolang,
+    rust: executeRust
+  };
+  function onCleanRun() {
+    loaded.value = false;
+    finished.value = false;
+    stdout.value = [];
+    stderr.value = [];
+    error.value = "";
+    firstRun.value = true;
+    backendVersion.value = "";
+  }
+  async function onRunCode() {
+    if (!el.value || !loaded.value)
+      return;
+    const info = resolveCodeInfo(el.value);
+    lang.value = info.lang;
+    if (!lang.value || !info.code || !supportLang.includes(lang.value))
+      return;
+    if (firstRun.value)
+      firstRun.value = false;
+    loaded.value = false;
+    finished.value = false;
+    stdout.value = [];
+    stderr.value = [];
+    error.value = "";
+    await executeMap[lang.value]?.(info.code);
+  }
+  async function executeGolang(code) {
+    const res = await http.post(api.go, { code });
+    backendVersion.value = `v${res.version}`;
+    loaded.value = true;
+    if (res.error) {
+      error.value = res.error;
+      finished.value = true;
+      return;
+    }
+    const events = res.events || [];
+    for (const event of events) {
+      if (event.kind === "stdout") {
+        if (event.delay)
+          await sleep(event.delay / 1e6);
+        stdout.value.push(event.message);
+      } else if (event.kind === "stderr") {
+        stderr.value.push(event.message);
+      }
+    }
+    finished.value = true;
+  }
+  async function executeKotlin(code) {
+    const filename = "File.kt";
+    const res = await http.post(api.kotlin, {
+      args: "",
+      files: [{ name: filename, publicId: "", text: code }]
+    });
+    backendVersion.value = `v${res.version}`;
+    loaded.value = true;
+    if (res.errors) {
+      const errors = Array.isArray(res.errors[filename]) ? res.errors[filename] : [res.errors[filename]];
+      if (errors.length) {
+        errors.forEach(
+          ({ message, severity }) => severity === "ERROR" && stderr.value.push(message)
+        );
+      }
+    }
+    stdout.value.push(res.text);
+    finished.value = true;
+  }
+  async function executeRust(code) {
+    await rustExecute(code, {
+      onBegin: () => {
+        loaded.value = true;
+        finished.value = false;
+        stdout.value = [];
+        stderr.value = [];
+        error.value = "";
+        backendVersion.value = "release";
+      },
+      onError(message) {
+        error.value = message;
+      },
+      onStdout(message) {
+        stdout.value.push(message);
+      },
+      onStderr(message) {
+        stderr.value.push(message);
+      },
+      onEnd: () => {
+        finished.value = true;
+      }
+    });
+  }
+  return {
+    onRunCode,
+    onCleanRun,
+    lang,
+    backendVersion,
+    firstRun,
+    stderr,
+    stdout,
+    loaded,
+    finished,
+    error
+  };
+}
+export {
+  resolveCode,
+  resolveCodeInfo,
+  useCodeRepl
+};

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

@@ -0,0 +1,19 @@
+import { PDFEmbedType, PDFTokenMeta } from '../../shared/index.js';
+
+/**
+ * Fork for https://github.com/vuepress-theme-hope/vuepress-theme-hope/blob/main/packages/components/src/client/utils/viewPDF.ts
+ *
+ * The MIT License (MIT)
+ * Copyright (C) 2021 - PRESENT by Mr.Hope<mister-hope@outlook.com>
+ *
+ * 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.
+ */
+
+declare function renderPDF(el: HTMLElement, url: string, embedType: PDFEmbedType, options: PDFTokenMeta): void;
+declare function usePDF(el: HTMLElement, url: string, options: PDFTokenMeta): void;
+
+export { renderPDF, usePDF };

package/lib/client/composables/pdf.js

@@ -0,0 +1,59 @@
+// src/client/composables/pdf.ts
+import { withBase } from "vuepress/client";
+import { ensureEndingSlash, isLinkHttp } from "vuepress/shared";
+import { pluginOptions } from "../options.js";
+import { checkIsiPad, checkIsMobile, checkIsSafari } 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;
+}
+function renderPDF(el, url, embedType, options) {
+  if (!pluginOptions.pdf)
+    return;
+  url = isLinkHttp(url) ? url : new URL(withBase(url), typeof location !== "undefined" ? location.href : "").toString();
+  const pdfOptions = pluginOptions.pdf === true ? {} : pluginOptions.pdf;
+  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=${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);
+}
+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";
+  const isMobileDevice = checkIsiPad(userAgent) || checkIsMobile(userAgent);
+  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;
+  const supportsPDFs = !isMobileDevice && (isModernBrowser || isFirefoxWithPDFJS);
+  if (!url)
+    return;
+  if (supportsPDFs || !isMobileDevice) {
+    const embedType = isSafariDesktop ? "iframe" : "embed";
+    return renderPDF(el, url, embedType, options);
+  }
+  return renderPDF(el, url, "pdfjs", options);
+}
+export {
+  renderPDF,
+  usePDF
+};

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

@@ -0,0 +1,10 @@
+declare function rustExecute(code: string, { onEnd, onError, onStderr, onStdout, onBegin }: RustExecuteOptions): Promise<void>;
+interface RustExecuteOptions {
+    onBegin?: () => void;
+    onStdout?: (message: string) => void;
+    onStderr?: (message: string) => void;
+    onEnd?: () => void;
+    onError?: (message: string) => void;
+}
+
+export { rustExecute };

package/lib/client/composables/rustRepl.js

@@ -0,0 +1,104 @@
+// src/client/composables/rustRepl.ts
+import { tryOnScopeDispose } from "@vueuse/core";
+var wsUrl = "wss://play.rust-lang.org/websocket";
+var payloadType = {
+  connected: "websocket/connected",
+  request: "output/execute/wsExecuteRequest",
+  execute: {
+    begin: "output/execute/wsExecuteBegin",
+    // status: 'output/execute/wsExecuteStatus',
+    stderr: "output/execute/wsExecuteStderr",
+    stdout: "output/execute/wsExecuteStdout",
+    end: "output/execute/wsExecuteEnd"
+  }
+};
+var ws = null;
+var isOpen = false;
+var uuid = 0;
+function connect() {
+  if (isOpen)
+    return Promise.resolve();
+  ws = new WebSocket(wsUrl);
+  uuid = 0;
+  ws.addEventListener("open", () => {
+    isOpen = true;
+    send(
+      payloadType.connected,
+      { iAcceptThisIsAnUnsupportedApi: true },
+      { websocket: true, sequenceNumber: uuid }
+    );
+  });
+  ws.addEventListener("close", () => {
+    isOpen = false;
+    ws = null;
+  });
+  tryOnScopeDispose(() => ws?.close());
+  return new Promise((resolve) => {
+    function connected(e) {
+      const data = JSON.parse(e.data);
+      if (data.type === payloadType.connected) {
+        ws?.removeEventListener("message", connected);
+        resolve();
+      }
+    }
+    ws?.addEventListener("message", connected);
+  });
+}
+function send(type, payload, meta) {
+  const msg = { type, meta, payload };
+  ws?.send(JSON.stringify(msg));
+}
+async function rustExecute(code, { onEnd, onError, onStderr, onStdout, onBegin }) {
+  await connect();
+  const meta = { sequenceNumber: uuid++ };
+  const payload = {
+    backtrace: false,
+    channel: "stable",
+    crateType: "bin",
+    edition: "2021",
+    mode: "release",
+    tests: false,
+    code
+  };
+  send(payloadType.request, payload, meta);
+  let stdout = "";
+  let stderr = "";
+  function onMessage(e) {
+    const data = JSON.parse(e.data);
+    const { type, payload: payload2, meta: _meta = {} } = data;
+    if (_meta.sequenceNumber !== meta.sequenceNumber)
+      return;
+    if (type === payloadType.execute.begin)
+      onBegin?.();
+    if (type === payloadType.execute.stdout) {
+      stdout += payload2;
+      if (stdout.endsWith("\n")) {
+        onStdout?.(stdout);
+        stdout = "";
+      }
+    }
+    if (type === payloadType.execute.stderr) {
+      stderr += payload2;
+      if (stderr.endsWith("\n")) {
+        if (stderr.startsWith("error:")) {
+          const index = stderr.indexOf("\n");
+          onStderr?.(stderr.slice(0, index));
+          onStderr?.(stderr.slice(index + 1));
+        } else {
+          onStderr?.(stderr);
+        }
+        stderr = "";
+      }
+    }
+    if (type === payloadType.execute.end) {
+      if (payload2.success === false)
+        onError?.(payload2.exitDetail);
+      ws?.removeEventListener("message", onMessage);
+      onEnd?.();
+    }
+  }
+  ws?.addEventListener("message", onMessage);
+}
+export {
+  rustExecute
+};