docs(site): add demo gif skeleton

Zhengqbbb · Aug 7, 2023 · affb328 · affb328
1 parent 0d2deab
commit affb328
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 3 deletions.
diff --git a/docs/.vitepress/theme/components/HomePage.vue b/docs/.vitepress/theme/components/HomePage.vue
@@ -70,7 +70,8 @@ useMediumZoom()
       height="376"
       loading="lazy"
       decoding="async"
-      onerror="this.classList.add('error');"
+      onerror="this.classList.add('error', 'animate-none!');"
+      onload="this.classList.add('animate-none!');"
     >
   </p>
   <div class="mt-14" flex="~ col items-center wrap">

diff --git a/docs/.vitepress/theme/components/markdown/plugins/image.ts b/docs/.vitepress/theme/components/markdown/plugins/image.ts
@@ -41,7 +41,12 @@ export function ImagePlugin(md: MarkdownIt) {
         ],
         [
           'onerror',
-          'this.classList.add(\'error\');',
+          'this.classList.add(\'error\', \'animate-none!\');',
+        ],
+        /* @unocss-include */
+        [
+          'onload',
+          'this.classList.add(\'animate-none!\');',
         ],
       )
       tokens[idx + 2].content = ''

diff --git a/docs/.vitepress/theme/style/main.css b/docs/.vitepress/theme/style/main.css
@@ -76,9 +76,20 @@ kbd {
   margin: 16px 0px;
 }
 
+@keyframes pulser {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
 img[alt="demo-gif"] {
   border: 1px solid var(--vp-code-line-highlight-color);
-  background-color: var(--vp-code-block-bg);
+  background-color: var(--vp-term-block-bg);
+  animation: pulser 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 img.error {

diff --git a/docs/.vitepress/theme/style/vars.css b/docs/.vitepress/theme/style/vars.css
@@ -36,6 +36,7 @@
   --vp-custom-block-danger-text: rgb(196, 46, 46);
   --vp-custom-block-danger-text-deep: rgba(220, 38, 38, 1);
   --vp-code-block-bg: rgba(232, 232, 232, 0.3);
+  --vp-term-block-bg: hsl(0, 1%, 92%);
   --vp-c-text-dark-1: rgb(240, 238, 238);
   --vp-c-text-dark-3: rgb(111, 111, 111);
   --vp-c-gutter: rgba(60, 60, 60, .12);
@@ -78,6 +79,7 @@
   --vp-custom-block-danger-text: rgba(248, 113, 113, 1);
   --vp-custom-block-danger-text-deep: rgba(248, 113, 113, 1);
   --vp-code-block-bg: rgba(0, 0, 0, 0.3);
+  --vp-term-block-bg: hsl(0, 1%, 5%);
   --vp-c-gutter: rgba(84, 84, 84, .48);
   --vp-code-line-highlight-color: rgba(0, 0, 0, 0.5);
   --vp-code-copy-code-hover-bg: rgba(255, 255, 255, 0.05);