perf(plugin-md-power): add Loading

plugins/plugin-md-power/src/client/components/Loading.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+defineProps<{
+  absolute?: boolean
+  height?: string
+}>()
+</script>
+
+<template>
+  <div class="md-power-loading" :class="{ absolute }" :style="{ height }">
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24">
+      <path
+        fill="none" stroke="currentColor" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round"
+        stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12"
+      >
+        <animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0" />
+        <animateTransform
+          attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+    </svg>
+  </div>
+</template>
+
+<style>
+.md-power-loading {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 36px;
+  color: currentcolor;
+  background-color: var(--vp-c-bg, #fff);
+}
+
+.md-power-loading.absolute {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 2;
+}
+</style>

plugins/plugin-md-power/src/client/components/Replit.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed, getCurrentInstance, ref } from 'vue'
 import type { ReplitTokenMeta } from '../../shared/replit.js'
+import Loading from './Loading.vue'
 
 const props = defineProps<ReplitTokenMeta>()
 
 const current = getCurrentInstance()
 // magic height
 const height = ref('47px')
+const loaded = ref(false)
 
 const REPLIT_LINK = 'https://replit.com/'
 
@@ -23,6 +25,7 @@ const link = computed(() => {
 })
 
 function onload() {
+  loaded.value = true
   height.value = props.height || '450px'
 }
 </script>
@@ -38,6 +41,7 @@ function onload() {
       allowfullscree="true"
       @load="onload"
     />
+    <Loading v-if="!loaded" />
   </ClientOnly>
 </template>
 
@@ -46,7 +50,7 @@ function onload() {
   width: 100%;
   margin: 16px auto;
   border: none;
-  border-top: 1px solid var(--vp-c-divider);
+  border-top: 1px solid var(--vp-c-divider, #e2e2e3);
   border-bottom-right-radius: 8px;
   border-bottom-left-radius: 8px;
   transition: border 0.25s;

plugins/plugin-md-power/src/client/components/Youtube.vue

@@ -21,7 +21,7 @@ const { el, width, height, resize } = useSize(options)
   <ClientOnly>
     <iframe
       ref="el"
-      class="video_youtube_iframe"
+      class="video-youtube-iframe"
       :src="src"
       :title="title || 'Youtube'"
       :style="{ width, height }"
@@ -32,7 +32,7 @@ const { el, width, height, resize } = useSize(options)
 </template>
 
 <style>
-.video_youtube_iframe {
+.video-youtube-iframe {
   width: 100%;
   margin: 16px auto;
   border: none;

plugins/plugin-md-power/src/client/composables/setupCanIUse.ts

@@ -12,7 +12,7 @@ export function setupCanIUse(): void {
       const el = document.querySelector(`.ciu_embed[data-feature="${feature}"]:not([data-skip])`)
       if (el) {
         const h = Number.parseInt(height) + 30
-          ; (el.childNodes[0] as any).height = `${h}px`
+          ;(el.childNodes[0] as any).height = `${h}px`
         el.setAttribute('data-skip', 'true')
       }
     }

plugins/plugin-md-power/src/node/features/caniuse.ts

@@ -81,7 +81,7 @@ function resolveCanIUse({ feature, mode, versions }: CanIUseTokenMeta): string {
   const url = 'https://caniuse.bitsofco.de/embed/index.html'
   const src = `${url}?feat=${feature}&periods=${periods}&accessible-colours=${accessible}&image-base=${image}`
 
-  return `<ClientOnly><div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px" title="Can I use${feature}"></iframe></div></ClientOnly>`
+  return `<ClientOnly><div class="ciu_embed" style="margin:16px 0" data-feature="${feature}"><iframe src="${src}" frameborder="0" width="100%" height="400px" title="Can I use ${feature}"></iframe></div></ClientOnly>`
 }
 
 function resolveVersions(versions: string): string {

readme.md

@@ -24,8 +24,9 @@
 - 👀 支持 搜索、文章评论
 - 👨‍💻‍ 支持 浅色/深色 主题 （包括代码高亮）
 - 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
-
-### [查看文档](https://plume.pengzhanbo.cn)
+- 📚 代码演示，支持 CodePen, Replit
+- 📊 嵌入图标，支持 chart.js，Echarts，Mermaid，flowchart
+- 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频等
 
 ## Install