Merge pull request #78 from Misaka-L/main

bump dependencies, fix home layout, image zoom

docs/.vitepress/config/index.ts

@@ -25,7 +25,8 @@ import markdownItMark from "markdown-it-mark" // @ts-expect-error
 import markdownItVideo from "@vrcd-community/markdown-it-video"
 import markdownItFootnote from "markdown-it-footnote"
 import { align } from "@mdit/plugin-align"
-import { figure } from "@mdit/plugin-figure"
+// @ts-expect-error
+import figure from "markdown-it-image-figures"
 
 // refer https://vitepress.dev/reference/site-config for details
 export default withPwa(
@@ -241,7 +242,12 @@ export default withPwa(
           })
           .use(markdownItFootnote)
           .use(align)
-          .use(figure)
+          .use(figure, {
+            lazy: true,
+            async: true,
+            classes: "doc-content-image",
+            figcaption: "alt",
+          })
       },
     },
 

docs/.vitepress/theme/components/ImagePreviewRegister.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { onMounted, watch, nextTick } from 'vue'
+import { useRoute } from 'vitepress'
+import mediumZoom from 'medium-zoom'
+
+// https://bddxg.top/article/note/vitepress%E4%BC%98%E5%8C%96/%E7%82%B9%E5%87%BB%E5%9B%BE%E7%89%87%E6%94%BE%E5%A4%A7.html
+
+const route = useRoute()
+const initZoom = () => {
+    mediumZoom('.doc-content-image', { background: 'var(--vp-c-bg-soft)' })
+}
+onMounted(() => {
+    initZoom()
+})
+watch(
+    () => route.path,
+    () => nextTick(() => initZoom())
+)
+</script>

docs/.vitepress/theme/css/components.css

@@ -43,3 +43,11 @@ figcaption {
 .vp-doc img {
   margin: 0 auto;
 }
+
+.medium-zoom-overlay {
+  z-index: 9990 !important;
+}
+
+.medium-zoom-image {
+  z-index: 9999 !important;
+}

docs/.vitepress/theme/css/theme.css

@@ -20,3 +20,9 @@
   --vp-button-brand-hover-text: var(--vp-c-black);
   --vp-button-brand-active-text: var(--vp-c-black);
 }
+
+.vp-doc.container {
+  padding: 0;
+  margin: 0;
+  max-width: none;
+}

docs/.vitepress/theme/index.ts

@@ -1,29 +1,31 @@
-import { h } from 'vue'
+import { h } from "vue"
 
-import DefaultTheme from 'vitepress/theme'
-import type { Theme } from 'vitepress'
+import DefaultTheme from "vitepress/theme"
+import type { Theme } from "vitepress"
 
-import Home from './components/Home.vue'
-import CreatorsHome from './components/CreatorsHome.vue'
-import RegisterSW from './components/RegisterSW.vue'
-import ToOfficialDocs from './components/ToOfficialDocs.vue'
+import Home from "./components/Home.vue"
+import CreatorsHome from "./components/CreatorsHome.vue"
+import RegisterSW from "./components/RegisterSW.vue"
+import ToOfficialDocs from "./components/ToOfficialDocs.vue"
+import ImagePreviewRegister from "./components/ImagePreviewRegister.vue"
 
-import './css/theme.css'
-import './css/components.css'
+import "./css/theme.css"
+import "./css/components.css"
 import "vue-draggable-resizable/style.css"
 
 const customTheme: Theme = {
-    extends: DefaultTheme,
-    enhanceApp({ app }) {
-        app.component('Home', Home)
-        app.component('CreatorsHome', CreatorsHome)
-    },
-    Layout() {
-        return h(DefaultTheme.Layout, null, {
-            'layout-bottom': () => h(RegisterSW),
-            'aside-outline-after': () => h(ToOfficialDocs)
-        })
-    }
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component("Home", Home)
+    app.component("CreatorsHome", CreatorsHome)
+  },
+  Layout() {
+    return h(DefaultTheme.Layout, null, {
+      "layout-bottom": () => h(RegisterSW),
+      "aside-outline-after": () => h(ToOfficialDocs),
+      "doc-bottom": () => h(ImagePreviewRegister),
+    })
+  },
 }
 
-export default customTheme;
+export default customTheme

package.json

@@ -11,12 +11,11 @@
   "packageManager": "[email protected]",
   "devDependencies": {
     "@mdit/plugin-align": "^0.8.0",
-    "@mdit/plugin-figure": "^0.8.0",
-    "@tsconfig/node18": "^18.2.2",
+    "@tsconfig/node18": "^18.2.4",
     "@types/imagemin-gifsicle": "^7.0.4",
     "@types/imagemin-svgo": "^10.0.5",
     "@types/markdown-it-footnote": "^3.0.4",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.12.4",
     "@vheemstra/vite-plugin-imagemin": "^2.0.0",
     "@vite-pwa/vitepress": "^0.4.0",
     "@vrcd-community/markdown-it-video": "^1.1.1",
@@ -30,13 +29,15 @@
     "markdown-it-abbr": "^2.0.0",
     "markdown-it-block-embed": "^0.0.3",
     "markdown-it-footnote": "^4.0.0",
+    "markdown-it-image-figures": "^2.1.1",
     "markdown-it-mark": "^4.0.0",
     "markdown-it-sub": "^2.0.0",
     "markdown-it-sup": "^2.0.0",
-    "sharp": "^0.33.2",
+    "medium-zoom": "^1.1.0",
+    "sharp": "^0.33.3",
     "svgo": "^3.2.0",
-    "vite-plugin-pwa": "^0.19.0",
-    "vitepress": "^1.0.0-rc.44",
+    "vite-plugin-pwa": "^0.19.7",
+    "vitepress": "^1.0.2",
     "vue-draggable-resizable": "^3.0.0"
   }
 }