From 9124f788a3062a518c15d78ce164350e53fb4c9a Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Mon, 1 Apr 2024 02:08:00 +0800
Subject: [PATCH] perf(plugin-md-power): add Loading

---
 .../src/client/components/Loading.vue         | 43 +++++++++++++++++++
 .../src/client/components/Replit.vue          |  6 ++-
 .../src/client/components/Youtube.vue         |  4 +-
 .../src/client/composables/setupCanIUse.ts    |  2 +-
 .../src/node/features/caniuse.ts              |  2 +-
 readme.md                                     |  5 ++-
 6 files changed, 55 insertions(+), 7 deletions(-)
 create mode 100644 plugins/plugin-md-power/src/client/components/Loading.vue

diff --git a/plugins/plugin-md-power/src/client/components/Loading.vue b/plugins/plugin-md-power/src/client/components/Loading.vue
new file mode 100644
index 00000000..9f5f4c0b
--- /dev/null
+++ b/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>
diff --git a/plugins/plugin-md-power/src/client/components/Replit.vue b/plugins/plugin-md-power/src/client/components/Replit.vue
index aff6c02e..e1a11adc 100644
--- a/plugins/plugin-md-power/src/client/components/Replit.vue
+++ b/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;
diff --git a/plugins/plugin-md-power/src/client/components/Youtube.vue b/plugins/plugin-md-power/src/client/components/Youtube.vue
index 04e2e8df..98393e2e 100644
--- a/plugins/plugin-md-power/src/client/components/Youtube.vue
+++ b/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;
diff --git a/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts b/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts
index 713dac08..66bd33ba 100644
--- a/plugins/plugin-md-power/src/client/composables/setupCanIUse.ts
+++ b/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')
       }
     }
diff --git a/plugins/plugin-md-power/src/node/features/caniuse.ts b/plugins/plugin-md-power/src/node/features/caniuse.ts
index 2f5c3b70..9f899165 100644
--- a/plugins/plugin-md-power/src/node/features/caniuse.ts
+++ b/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 {
diff --git a/readme.md b/readme.md
index 81ee3935..34631cb0 100644
--- a/readme.md
+++ b/readme.md
@@ -24,8 +24,9 @@
 - 👀 支持 搜索、文章评论
 - 👨‍💻‍ 支持 浅色/深色 主题 （包括代码高亮）
 - 📠 markdown 增强，支持 代码块分组、提示容器、任务列表、数学公式、代码演示 等
-
-### [查看文档](https://plume.pengzhanbo.cn)
+- 📚 代码演示，支持 CodePen, Replit
+- 📊 嵌入图标，支持 chart.js，Echarts，Mermaid，flowchart
+- 🎛 资源嵌入，支持 PDF, bilibili视频，youtube视频等
 
 ## Install