feat(theme): use plugin-photo-swipe instead plugin-medium-zoom

plugins/plugin-shikiji/src/node/markdown/lineNumberPlugin.ts

@@ -6,6 +6,7 @@ import type { LineNumberOptions } from '../types.js'
 
 const LINE_NUMBERS_REGEXP = /:line-numbers\b/
 const NO_LINE_NUMBERS_REGEXP = /:no-line-numbers\b/
+const LINE_NUMBERS_START_REGEXP = /:line-numbers=(\d+)\b/
 
 export function lineNumberPlugin(md: Markdown, { lineNumbers = true }: LineNumberOptions = {}): void {
   const rawFence = md.renderer.rules.fence!
@@ -41,11 +42,15 @@ export function lineNumberPlugin(md: Markdown, { lineNumbers = true }: LineNumbe
     )
       return rawCode
 
+    const startNumbers
+      = Number(info.match(LINE_NUMBERS_START_REGEXP)?.[1] ?? 1) - 1
+    const lineNumbersStyle = `style="counter-reset:line-number ${startNumbers}"`
+
     const lineNumbersCode = [...Array(lines.length)]
       .map(() => `<div class="line-number"></div>`)
       .join('')
 
-    const lineNumbersWrapperCode = `<div class="line-numbers" aria-hidden="true">${lineNumbersCode}</div>`
+    const lineNumbersWrapperCode = `<div class="line-numbers" aria-hidden="true" ${lineNumbersStyle}>${lineNumbersCode}</div>`
 
     const finalCode = rawCode
       .replace(/<\/div>$/, `${lineNumbersWrapperCode}</div>`)

theme/src/client/components/Page.vue

@@ -1,7 +1,5 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
-import { useMediumZoom } from '@vuepress/plugin-medium-zoom/client'
-import { onContentUpdated } from '@vuepress-plume/plugin-content-update/client'
 import { useData, useSidebar } from '../composables/index.js'
 import { usePageEncrypt } from '../composables/encrypt.js'
 import PageAside from './PageAside.vue'
@@ -25,9 +23,6 @@ const enableAside = computed(() => {
 
   return hasAside.value && isPageDecrypted.value
 })
-
-const zoom = useMediumZoom()
-onContentUpdated(() => zoom?.refresh())
 </script>
 
 <template>

theme/src/client/styles/vars.scss

@@ -672,3 +672,11 @@ html.dark {
   --vp-c-plot-dark: var(--vp-c-bg);
   --vp-c-bg-plot-dark: var(--vp-c-text-2);
 }
+
+/**
+ * plugin-photo-swipe
+ * -------------------------------------------------------------------------- */
+:root {
+  --photo-swipe-bullet: var(--vp-c-bg);
+  --photo-swipe-bullet-active: var(--vp-c-brand-1);
+}

theme/src/node/plugins/getPlugins.ts

@@ -2,7 +2,7 @@ import type { App, PluginConfig } from 'vuepress/core'
 import { activeHeaderLinksPlugin } from '@vuepress/plugin-active-header-links'
 import { docsearchPlugin } from '@vuepress/plugin-docsearch'
 import { gitPlugin } from '@vuepress/plugin-git'
-import { mediumZoomPlugin } from '@vuepress/plugin-medium-zoom'
+import { photoSwipePlugin } from '@vuepress/plugin-photo-swipe'
 import { nprogressPlugin } from '@vuepress/plugin-nprogress'
 import { themeDataPlugin } from '@vuepress/plugin-theme-data'
 import { autoFrontmatterPlugin } from '@vuepress-plume/plugin-auto-frontmatter'
@@ -100,10 +100,9 @@ export function getPlugins({
     }))
   }
 
-  if (pluginOptions.mediumZoom !== false) {
-    plugins.push(mediumZoomPlugin({
+  if (pluginOptions.photoSwipe !== false) {
+    plugins.push(photoSwipePlugin({
       selector: '.plume-content > img, .plume-content :not(a) > img',
-      zoomOptions: { background: 'var(--vp-c-bg)' },
       delay: 300,
     }))
   }

theme/src/shared/options/plugins.ts

@@ -45,7 +45,7 @@ export interface PlumeThemePluginOptions {
 
   nprogress?: false
 
-  mediumZoom?: false
+  photoSwipe?: false
 
   markdownEnhance?: false | MarkdownEnhancePluginOptions