vuepress-plugin-md-power 1.0.0-rc.154 → 1.0.0-rc.155

package/lib/client/components/FileTreeNode.vue

@@ -16,7 +16,7 @@ const activeFileTreeNode = inject<Ref<string>>('active-file-tree-node', ref(''))
 
 const onNodeClick = inject<
   (filename: string, type: 'file' | 'folder') => void
->('on-file-tree-node-click', () => {})
+    >('on-file-tree-node-click', () => {})
 
 const active = ref(props.expanded)
 

package/lib/client/components/VPField.vue

@@ -4,15 +4,17 @@ defineProps<{
   type?: string
   required?: boolean
   optional?: boolean
+  deprecated?: boolean
   defaultValue?: string
 }>()
 </script>
 
 <template>
-  <div class="vp-field">
+  <div class="vp-field" :class="{ required, optional, deprecated }">
     <p class="field-meta">
       <span class="name">{{ name }}</span>
       <span v-if="required || optional" :class="{ required, optional }">{{ required ? 'Required' : optional ? 'Optional' : '' }}</span>
+      <span v-if="deprecated" class="deprecated">Deprecated</span>
       <span v-if="type" class="type"><code>{{ type }}</code></span>
     </p>
     <p v-if="defaultValue" class="default-value">
@@ -48,8 +50,13 @@ defineProps<{
   font-weight: 500;
 }
 
+.vp-field.deprecated .field-meta .name {
+  text-decoration: line-through;
+}
+
 .vp-field .field-meta .required,
-.vp-field .field-meta .optional {
+.vp-field .field-meta .optional,
+.vp-field .field-meta .deprecated {
   display: inline-block;
   padding: 2px 8px;
   font-size: 12px;
@@ -68,6 +75,11 @@ defineProps<{
   border: solid 1px var(--vp-c-divider);
 }
 
+.vp-field .field-meta .deprecated {
+  color: var(--vp-c-danger-2);
+  border: solid 1px var(--vp-c-danger-2);
+}
+
 .vp-field .field-meta .type {
   flex: 1 2;
   text-align: right;
@@ -76,7 +88,8 @@ defineProps<{
 .vp-field .default-value {
   margin: 0;
   font-size: 14px;
-  line-height: 1;
+  line-height: 1.7;
+  transform: translateY(-4px);
 }
 
 .vp-field .description :where(p, ul, ol) {

package/lib/client/components/{Youtube.vue → VPVideoEmbed.vue}

@@ -5,6 +5,7 @@ import { useSize } from '../composables/size.js'
 const props = defineProps<{
   src: string
   title: string
+  type?: string
   width?: string
   height?: string
   ratio?: string
@@ -21,9 +22,9 @@ const { el, width, height, resize } = useSize(options)
   <ClientOnly>
     <iframe
       ref="el"
-      class="video-youtube-iframe"
+      class="video-iframe" :class="type"
       :src="src"
-      :title="title || 'Youtube'"
+      :title="title || type"
       :style="{ width, height }"
       :allow="IFRAME_ALLOW"
       @load="resize"
@@ -32,7 +33,7 @@ const { el, width, height, resize } = useSize(options)
 </template>
 
 <style>
-.video-youtube-iframe {
+.video-iframe {
   width: 100%;
   margin: 16px auto;
   border: none;

package/lib/node/index.d.ts

@@ -348,6 +348,14 @@ interface MarkdownPowerPluginOptions {
   field?: boolean;
   // video embed
   /**
+  * 是否启用 acfun 视频嵌入
+  *
+  * `@[acfun](acid)`
+  *
+  * @default false
+  */
+  acfun?: boolean;
+  /**
   * 是否启用 bilibili 视频嵌入
   *
   * `@[bilibili](bid)`
@@ -476,6 +484,10 @@ interface VideoOptions {
   bilibili?: boolean;
   youtube?: boolean;
 }
+interface AcFunTokenMeta extends SizeOptions {
+  title?: string;
+  id: string;
+}
 interface BilibiliTokenMeta extends SizeOptions {
   title?: string;
   bvid?: string;
@@ -517,4 +529,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 { 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, ReplEditorData, ReplOptions, ReplitTokenMeta, SizeOptions, ThemeOptions, VideoOptions, YoutubeTokenMeta, createCodeTabIconGetter, markdownPowerPlugin, resolveImageSize };

package/lib/node/index.js

@@ -17,6 +17,8 @@ import { isPackageExists, resolveModule } from "local-pkg";
 import { LRUCache } from "lru-cache";
 import { watch } from "chokidar";
 import { customAlphabet } from "nanoid";
+import { removeLeadingSlash as removeLeadingSlash$1 } from "@vuepress/shared";
+import { path as path$2 } from "@vuepress/utils";
 import { attrs } from "@mdit/plugin-attrs";
 import { footnote } from "@mdit/plugin-footnote";
 import { mark } from "@mdit/plugin-mark";
@@ -968,7 +970,7 @@ function resolveAttrs(info) {
 	};
 }
 function resolveAttr(info, key) {
-	const pattern = new RegExp(`(?:^|\\s+)${key}(?:=(?<quote>['"])(?<valueWithQuote>.+?)\\k<quote>|=(?<valueWithoutQuote>\\S+))?(?:\\s+|$)`);
+	const pattern = /* @__PURE__ */ new RegExp(`(?:^|\\s+)${key}(?:=(?<quote>['"])(?<valueWithQuote>.+?)\\k<quote>|=(?<valueWithoutQuote>\\S+))?(?:\\s+|$)`);
 	const groups = info.match(pattern)?.groups;
 	return groups?.valueWithQuote || groups?.valueWithoutQuote;
 }
@@ -1151,13 +1153,13 @@ async function resolveImageSize(app, url, remote = false) {
 	if (isLinkHttp(url) && remote) return await fetchImageSize(url);
 	if (url[0] === "/") {
 		const filepath$1 = app.dir.public(url.slice(1));
-		if (fs.existsSync(filepath$1)) {
+		if (fs.existsSync(filepath$1)) try {
 			const { width, height } = imageSize(fs.readFileSync(filepath$1));
 			return {
 				width,
 				height
 			};
-		}
+		} catch {}
 	}
 	return {
 		width: 0,
@@ -1753,11 +1755,12 @@ function fieldPlugin(md) {
 	createContainerPlugin(md, "field", {
 		before: (info) => {
 			const { attrs: attrs$1 } = resolveAttrs(info);
-			const { name, type, required, optional, default: defaultValue } = attrs$1;
+			const { name, type, required, optional, deprecated, default: defaultValue } = attrs$1;
 			const props = stringifyAttrs({
 				name,
 				required,
-				optional
+				optional,
+				deprecated
 			});
 			return `<VPField${props}${!isUndefined(type) ? ` type="${type}"` : ""}${!isUndefined(defaultValue) ? ` default-value="${defaultValue}"` : ""}>`;
 		},
@@ -2674,8 +2677,8 @@ function importer(func) {
 //#endregion
 //#region src/node/demo/supports/insertScript.ts
 const SCRIPT_RE$1 = /<script.*?>/;
-function insertSetupScript({ export: name, path: path$2 }, env) {
-	const imports = `import ${name ? `${name} from ` : ""}'${path$2}';`;
+function insertSetupScript({ export: name, path: path$3 }, env) {
+	const imports = `import ${name ? `${name} from ` : ""}'${path$3}';`;
 	const scriptSetup = env.sfcBlocks.scriptSetup ??= {
 		type: "script",
 		content: "<script setup>\n</script>",
@@ -2723,39 +2726,39 @@ const tasks = {};
 const target$2 = "md-power/demo/watcher.txt";
 function demoWatcher(app, watchers) {
 	if (!watcher) watcher = watch([], { ignoreInitial: true });
-	Object.keys(tasks).forEach((path$2) => {
-		watcher.add(path$2);
+	Object.keys(tasks).forEach((path$3) => {
+		watcher.add(path$3);
 	});
 	const code = readFileSync(app.dir.temp(target$2));
 	if (code) {
 		const paths = JSON.parse(code || "{}");
-		Object.entries(paths).forEach(([path$2, output]) => {
-			watcher.add(path$2);
-			tasks[path$2] = output;
+		Object.entries(paths).forEach(([path$3, output]) => {
+			watcher.add(path$3);
+			tasks[path$3] = output;
 		});
 	}
 	updateWatchFiles(app);
-	watcher.on("change", (path$2) => {
-		if (tasks[path$2]) {
-			const code$1 = readFileSync(path$2);
+	watcher.on("change", (path$3) => {
+		if (tasks[path$3]) {
+			const code$1 = readFileSync(path$3);
 			if (code$1 === false) return;
 			const source = parseEmbedCode(code$1);
-			compileCode(source, tasks[path$2]);
+			compileCode(source, tasks[path$3]);
 		}
 	});
-	watcher.on("unlink", (path$2) => {
-		delete tasks[path$2];
-		watcher.unwatch(path$2);
+	watcher.on("unlink", (path$3) => {
+		delete tasks[path$3];
+		watcher.unwatch(path$3);
 	});
 	watchers.push({ close: () => {
 		watcher.close();
 		watcher = null;
 	} });
 }
-function addTask(app, path$2, output) {
-	if (tasks[path$2]) return;
-	tasks[path$2] = output;
-	if (watcher) watcher.add(path$2);
+function addTask(app, path$3, output) {
+	if (tasks[path$3]) return;
+	tasks[path$3] = output;
+	if (watcher) watcher.add(path$3);
 	updateWatchFiles(app);
 }
 async function updateWatchFiles(app) {
@@ -3168,8 +3171,8 @@ function getContainerMeta(info) {
 function extendsPageWithDemo(page) {
 	const markdownEnv = page.markdownEnv;
 	const demoFiles = markdownEnv.demoFiles ?? [];
-	page.deps.push(...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path$2 }) => path$2));
-	(page.frontmatter.gitInclude ??= []).push(...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path$2 }) => path$2));
+	page.deps.push(...demoFiles.filter(({ type }) => type === "markdown").map(({ path: path$3 }) => path$3));
+	(page.frontmatter.gitInclude ??= []).push(...demoFiles.filter(({ gitignore }) => !gitignore).map(({ path: path$3 }) => path$3));
 }
 
 //#endregion
@@ -3436,6 +3439,39 @@ const pdfPlugin = (md) => {
 	});
 };
 
+//#endregion
+//#region src/node/embed/video/acfun.ts
+const AC_FUN_LINK = "https://www.acfun.cn/player";
+const acfunPlugin = (md) => {
+	createEmbedRuleBlock(md, {
+		type: "acfun",
+		name: "video_acfun",
+		syntaxPattern: /^@\[acfun([^\]]*)\]\(([^)]*)\)/,
+		meta([, info, id]) {
+			const { attrs: attrs$1 } = resolveAttrs(info);
+			return {
+				id,
+				title: attrs$1.title || "AcFun",
+				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
+				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
+				ratio: attrs$1.ratio ?? "16:10"
+			};
+		},
+		content(meta) {
+			const { id, width, height, ratio, title } = meta;
+			const src = `${AC_FUN_LINK}/${id}`;
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
+				width,
+				height,
+				ratio,
+				title,
+				type: "acfun"
+			})} />`;
+		}
+	});
+};
+
 //#endregion
 //#region src/node/embed/video/artPlayer.ts
 const installed = {
@@ -3540,10 +3576,10 @@ const bilibiliPlugin = (md) => {
 				cid,
 				autoplay: attrs$1.autoplay ?? false,
 				time: timeToSeconds(attrs$1.time),
-				title: attrs$1.title,
+				title: attrs$1.title || "Bilibili",
 				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
 				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
-				ratio: attrs$1.ratio ? parseRect(attrs$1.ratio) : void 0
+				ratio: attrs$1.ratio
 			};
 		},
 		content(meta) {
@@ -3555,14 +3591,15 @@ const bilibiliPlugin = (md) => {
 			if (meta.time) params.set("t", meta.time.toString());
 			params.set("autoplay", meta.autoplay ? "1" : "0");
 			params.set("high_quality", "1");
-			const source = `${BILIBILI_LINK}?${params.toString()}`;
+			const src = `${BILIBILI_LINK}?${params.toString()}`;
 			const { width, height, ratio, title } = meta;
-			return `<VideoBilibili${stringifyAttrs({
-				src: source,
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
 				width,
 				height,
 				ratio,
-				title
+				title,
+				type: "bilibili"
 			})} />`;
 		}
 	});
@@ -3584,10 +3621,10 @@ const youtubePlugin = (md) => {
 				loop: attrs$1.loop ?? false,
 				start: timeToSeconds(attrs$1.start),
 				end: timeToSeconds(attrs$1.end),
-				title: attrs$1.title,
+				title: attrs$1.title || "YouTube",
 				width: attrs$1.width ? parseRect(attrs$1.width) : "100%",
 				height: attrs$1.height ? parseRect(attrs$1.height) : void 0,
-				ratio: attrs$1.ratio ? parseRect(attrs$1.ratio) : void 0
+				ratio: attrs$1.ratio
 			};
 		},
 		content(meta) {
@@ -3596,14 +3633,15 @@ const youtubePlugin = (md) => {
 			if (meta.loop) params.set("loop", "1");
 			if (meta.start) params.set("start", meta.start.toString());
 			if (meta.end) params.set("end", meta.end.toString());
-			const source = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
+			const src = `${YOUTUBE_LINK}/${meta.id}?${params.toString()}`;
 			const { width, height, ratio, title } = meta;
-			return `<VideoYoutube${stringifyAttrs({
-				src: source,
+			return `<VPVideoEmbed${stringifyAttrs({
+				src,
 				width,
 				height,
 				ratio,
-				title
+				title,
+				type: "youtube"
 			})} />`;
 		}
 	});
@@ -3618,6 +3656,7 @@ function embedSyntaxPlugin(md, options) {
 		legacyCaniuse(md, caniuse);
 	}
 	if (options.pdf) md.use(pdfPlugin);
+	if (options.acfun) md.use(acfunPlugin);
 	if (options.bilibili) md.use(bilibiliPlugin);
 	if (options.youtube) md.use(youtubePlugin);
 	if (options.artPlayer) md.use(artPlayerPlugin);
@@ -3662,7 +3701,7 @@ function parseSource(source) {
 	};
 	else {
 		const end = source.indexOf(`\n${char}`);
-		const len = char.length + 1;
+		const len = 4;
 		return {
 			matter: source.slice(0, end + len),
 			content: source.slice(end + len)
@@ -3679,7 +3718,7 @@ function linksPlugin(md) {
 	};
 	let hasOpenInternalLink = false;
 	const internalTag = "VPLink";
-	function handleLinkOpen(tokens, idx) {
+	function handleLinkOpen(tokens, idx, env) {
 		hasOpenInternalLink = false;
 		const token = tokens[idx];
 		const hrefIndex = token.attrIndex("href");
@@ -3696,9 +3735,19 @@ function linksPlugin(md) {
 		if (hrefLink[0] === "#") return;
 		hasOpenInternalLink = true;
 		token.tag = internalTag;
+		const matched = hrefLink.match(/^([^#?]*?(?:\/|\.md|\.html))([#?].*)?$/);
+		if (matched) {
+			const rawPath = matched[1];
+			const { absolutePath, relativePath } = resolvePaths(rawPath, env.base || "/", env.filePathRelative ?? null);
+			(env.links ??= []).push({
+				raw: rawPath,
+				absolute: absolutePath,
+				relative: relativePath
+			});
+		}
 	}
 	md.renderer.rules.link_open = (tokens, idx, opts, env, self) => {
-		handleLinkOpen(tokens, idx);
+		handleLinkOpen(tokens, idx, env);
 		return self.renderToken(tokens, idx, opts);
 	};
 	md.renderer.rules.link_close = (tokens, idx, opts, _env, self) => {
@@ -3709,6 +3758,31 @@ function linksPlugin(md) {
 		return self.renderToken(tokens, idx, opts);
 	};
 }
+/**
+* Resolve relative and absolute paths according to the `base` and `filePathRelative`
+*/
+function resolvePaths(rawPath, base, filePathRelative) {
+	let absolutePath;
+	let relativePath;
+	if (rawPath.startsWith("/")) if (rawPath.endsWith(".md")) {
+		absolutePath = path$2.join(base, rawPath);
+		relativePath = removeLeadingSlash$1(rawPath);
+	} else {
+		absolutePath = rawPath;
+		relativePath = path$2.relative(base, absolutePath);
+	}
+	else if (filePathRelative) {
+		relativePath = path$2.join(path$2.dirname(encodeURI(filePathRelative)), rawPath);
+		absolutePath = path$2.join(base, relativePath);
+	} else {
+		relativePath = rawPath.replace(/^(?:\.\/)?(.*)$/, "$1");
+		absolutePath = null;
+	}
+	return {
+		absolutePath,
+		relativePath
+	};
+}
 
 //#endregion
 //#region src/node/icon/createIconRule.ts
@@ -3925,7 +3999,7 @@ const abbrPlugin = (md) => {
 		const { abbreviations } = state.env;
 		if (!abbreviations) return;
 		const abbreviationsRegExpText = Object.keys(abbreviations).map((x) => x.substring(1)).sort((a, b) => b.length - a.length).map(escapeRE).join("|");
-		const regexpSimple = new RegExp(`(?:${abbreviationsRegExpText})`);
+		const regexpSimple = /* @__PURE__ */ new RegExp(`(?:${abbreviationsRegExpText})`);
 		const regExp = new RegExp(`(^|${WORDING_REGEXP_TEXT})(${abbreviationsRegExpText})($|${WORDING_REGEXP_TEXT})`, "g");
 		for (const token of tokens) {
 			if (token.type !== "inline") continue;
@@ -4128,13 +4202,9 @@ async function prepareConfigFile(app, options) {
 		imports.add(`import PDFViewer from '${CLIENT_FOLDER}components/PDFViewer.vue'`);
 		enhances.add(`app.component('PDFViewer', PDFViewer)`);
 	}
-	if (options.bilibili) {
-		imports.add(`import Bilibili from '${CLIENT_FOLDER}components/Bilibili.vue'`);
-		enhances.add(`app.component('VideoBilibili', Bilibili)`);
-	}
-	if (options.youtube) {
-		imports.add(`import Youtube from '${CLIENT_FOLDER}components/Youtube.vue'`);
-		enhances.add(`app.component('VideoYoutube', Youtube)`);
+	if (options.acfun || options.bilibili || options.youtube) {
+		imports.add(`import VPVideoEmbed from '${CLIENT_FOLDER}components/VPVideoEmbed.vue'`);
+		enhances.add(`app.component('VPVideoEmbed', VPVideoEmbed)`);
 	}
 	if (options.codepen) {
 		imports.add(`import CodePen from '${CLIENT_FOLDER}components/CodePen.vue'`);

package/lib/shared/index.d.ts

@@ -346,6 +346,14 @@ interface MarkdownPowerPluginOptions {
   field?: boolean;
   // video embed
   /**
+  * 是否启用 acfun 视频嵌入
+  *
+  * `@[acfun](acid)`
+  *
+  * @default false
+  */
+  acfun?: boolean;
+  /**
   * 是否启用 bilibili 视频嵌入
   *
   * `@[bilibili](bid)`
@@ -474,6 +482,10 @@ interface VideoOptions {
   bilibili?: boolean;
   youtube?: boolean;
 }
+interface AcFunTokenMeta extends SizeOptions {
+  title?: string;
+  id: string;
+}
 interface BilibiliTokenMeta extends SizeOptions {
   title?: string;
   bvid?: string;
@@ -502,4 +514,4 @@ interface ArtPlayerTokenMeta extends SizeOptions {
   type?: string;
 }
 //#endregion
-export { 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, 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.154",
+  "version": "1.0.0-rc.155",
   "description": "The Plugin for VuePress 2 - markdown power",
   "author": "pengzhanbo <volodymyr@foxmail.com>",
   "license": "MIT",
@@ -93,7 +93,7 @@
     "lru-cache": "^11.1.0",
     "markdown-it-container": "^4.0.0",
     "nanoid": "^5.1.5",
-    "shiki": "^3.6.0",
+    "shiki": "^3.7.0",
     "tinyglobby": "0.2.13",
     "tm-grammars": "^1.23.26",
     "tm-themes": "^1.10.6",

package/lib/client/components/Bilibili.vue

@@ -1,45 +0,0 @@
-<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>