From 7d2b41ba28806f9a63342cc49961c26a6729f44e Mon Sep 17 00:00:00 2001 From: narumi Date: Fri, 3 May 2024 06:01:16 +0800 Subject: [PATCH] Support zoom image --- docs/.vitepress/theme/index.ts | 20 +++++++++- docs/.vitepress/theme/style.css | 8 ++++ package.json | 3 ++ pnpm-lock.yaml | 71 +++++++++++++++++++-------------- 4 files changed, 71 insertions(+), 31 deletions(-) diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts index 3899c34..d6f22a8 100644 --- a/docs/.vitepress/theme/index.ts +++ b/docs/.vitepress/theme/index.ts @@ -1,12 +1,28 @@ // https://vitepress.dev/guide/custom-theme -import { h } from 'vue' -import type { Theme } from 'vitepress' +import { h, nextTick, onMounted, watch } from 'vue' +import { useRoute, type Theme } from 'vitepress' import DefaultTheme from 'vitepress/theme' import './style.css' +import mediumZoom from 'medium-zoom' // import AdSense from '../../components/AdSense.vue' export default { extends: DefaultTheme, + setup() { + // https://github.com/vuejs/vitepress/issues/854 + const route = useRoute() + const initZoom = () => { + // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); + mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) + } + onMounted(() => { + initZoom() + }) + watch( + () => route.path, + () => nextTick(() => initZoom()) + ) + }, Layout: () => { return h(DefaultTheme.Layout, null, { // 'aside-ads-before': () => h(AdSense), diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index 1bd56ff..be169ce 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -136,3 +136,11 @@ .DocSearch { --docsearch-primary-color: var(--vp-c-brand-1) !important; } + +.medium-zoom-overlay { + z-index: 30; +} + +.medium-zoom-image--opened { + z-index: 31; +} \ No newline at end of file diff --git a/package.json b/package.json index 5c56485..2c86670 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,9 @@ }, "author": "narumi", "license": "MIT", + "dependencies": { + "medium-zoom": "^1.1.0" + }, "devDependencies": { "@types/node": "^20.11.30", "gray-matter": "^4.0.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 0413e22..f4fbf74 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -7,6 +7,10 @@ settings: importers: .: + dependencies: + medium-zoom: + specifier: ^1.1.0 + version: 1.1.0 devDependencies: '@types/node': specifier: ^20.11.30 @@ -22,7 +26,7 @@ importers: version: 3.2.0 vitepress: specifier: ^1.1.4 - version: 1.1.4(@types/node@20.11.30) + version: 1.1.4(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.38)(search-insights@2.13.0) vue: specifier: ^3.4.21 version: 3.4.21 @@ -36,27 +40,18 @@ packages: resolution: {integrity: sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==} peerDependencies: search-insights: '>= 1 < 3' - peerDependenciesMeta: - search-insights: - optional: true '@algolia/autocomplete-preset-algolia@1.9.3': resolution: {integrity: sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==} peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' - peerDependenciesMeta: - '@algolia/client-search': - optional: true '@algolia/autocomplete-shared@1.9.3': resolution: {integrity: sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==} peerDependencies: '@algolia/client-search': '>= 4.9.1 < 6' algoliasearch: '>= 4.9.1 < 6' - peerDependenciesMeta: - '@algolia/client-search': - optional: true '@algolia/cache-browser-local-storage@4.22.1': resolution: {integrity: sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==} @@ -591,6 +586,9 @@ packages: mark.js@8.11.1: resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==} + medium-zoom@1.1.0: + resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==} + minisearch@6.3.0: resolution: {integrity: sha512-ihFnidEeU8iXzcVHy74dhkxh/dn8Dc08ERl0xwoMMGqp4+LvRSCgicb+zGqWthVokQKvCSxITlh3P08OzdTYCQ==} @@ -628,6 +626,9 @@ packages: engines: {node: '>=18.0.0', npm: '>=8.0.0'} hasBin: true + search-insights@2.13.0: + resolution: {integrity: sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==} + section-matter@1.0.0: resolution: {integrity: sha512-vfD3pmTzGpufjScBh50YHKzEu2lxBWhVEHsNGoEXmCmn2hKGfeNLYMzCJpe8cD7gqX7TJluOVpBkAequ6dgMmA==} engines: {node: '>=4'} @@ -732,29 +733,32 @@ packages: snapshots: - '@algolia/autocomplete-core@1.9.3(algoliasearch@4.22.1)': + '@algolia/autocomplete-core@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0)': dependencies: - '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(algoliasearch@4.22.1) - '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.22.1) + '@algolia/autocomplete-plugin-algolia-insights': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0) + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1) transitivePeerDependencies: - '@algolia/client-search' - algoliasearch - search-insights - '@algolia/autocomplete-plugin-algolia-insights@1.9.3(algoliasearch@4.22.1)': + '@algolia/autocomplete-plugin-algolia-insights@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0)': dependencies: - '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.22.1) + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1) + search-insights: 2.13.0 transitivePeerDependencies: - '@algolia/client-search' - algoliasearch - '@algolia/autocomplete-preset-algolia@1.9.3(algoliasearch@4.22.1)': + '@algolia/autocomplete-preset-algolia@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)': dependencies: - '@algolia/autocomplete-shared': 1.9.3(algoliasearch@4.22.1) + '@algolia/autocomplete-shared': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1) + '@algolia/client-search': 4.22.1 algoliasearch: 4.22.1 - '@algolia/autocomplete-shared@1.9.3(algoliasearch@4.22.1)': + '@algolia/autocomplete-shared@1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)': dependencies: + '@algolia/client-search': 4.22.1 algoliasearch: 4.22.1 '@algolia/cache-browser-local-storage@4.22.1': @@ -847,9 +851,9 @@ snapshots: '@docsearch/css@3.6.0': {} - '@docsearch/js@3.6.0': + '@docsearch/js@3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0)': dependencies: - '@docsearch/react': 3.6.0 + '@docsearch/react': 3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0) preact: 10.20.0 transitivePeerDependencies: - '@algolia/client-search' @@ -858,12 +862,14 @@ snapshots: - react-dom - search-insights - '@docsearch/react@3.6.0': + '@docsearch/react@3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0)': dependencies: - '@algolia/autocomplete-core': 1.9.3(algoliasearch@4.22.1) - '@algolia/autocomplete-preset-algolia': 1.9.3(algoliasearch@4.22.1) + '@algolia/autocomplete-core': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1)(search-insights@2.13.0) + '@algolia/autocomplete-preset-algolia': 1.9.3(@algolia/client-search@4.22.1)(algoliasearch@4.22.1) '@docsearch/css': 3.6.0 algoliasearch: 4.22.1 + optionalDependencies: + search-insights: 2.13.0 transitivePeerDependencies: - '@algolia/client-search' @@ -1009,7 +1015,7 @@ snapshots: '@types/web-bluetooth@0.0.20': {} - '@vitejs/plugin-vue@5.0.4(vite@5.2.11)(vue@3.4.26)': + '@vitejs/plugin-vue@5.0.4(vite@5.2.11(@types/node@20.11.30))(vue@3.4.26)': dependencies: vite: 5.2.11(@types/node@20.11.30) vue: 3.4.26 @@ -1153,8 +1159,9 @@ snapshots: dependencies: '@vueuse/core': 10.9.0(vue@3.4.26) '@vueuse/shared': 10.9.0(vue@3.4.26) - focus-trap: 7.5.4 vue-demi: 0.14.7(vue@3.4.26) + optionalDependencies: + focus-trap: 7.5.4 transitivePeerDependencies: - '@vue/composition-api' - vue @@ -1262,6 +1269,8 @@ snapshots: mark.js@8.11.1: {} + medium-zoom@1.1.0: {} + minisearch@6.3.0: {} mitt@3.0.1: {} @@ -1306,6 +1315,8 @@ snapshots: '@rollup/rollup-win32-x64-msvc': 4.17.2 fsevents: 2.3.3 + search-insights@2.13.0: {} + section-matter@1.0.0: dependencies: extend-shallow: 2.0.1 @@ -1333,21 +1344,21 @@ snapshots: vite@5.2.11(@types/node@20.11.30): dependencies: - '@types/node': 20.11.30 esbuild: 0.20.2 postcss: 8.4.38 rollup: 4.17.2 optionalDependencies: + '@types/node': 20.11.30 fsevents: 2.3.3 - vitepress@1.1.4(@types/node@20.11.30): + vitepress@1.1.4(@algolia/client-search@4.22.1)(@types/node@20.11.30)(postcss@8.4.38)(search-insights@2.13.0): dependencies: '@docsearch/css': 3.6.0 - '@docsearch/js': 3.6.0 + '@docsearch/js': 3.6.0(@algolia/client-search@4.22.1)(search-insights@2.13.0) '@shikijs/core': 1.4.0 '@shikijs/transformers': 1.4.0 '@types/markdown-it': 14.1.1 - '@vitejs/plugin-vue': 5.0.4(vite@5.2.11)(vue@3.4.26) + '@vitejs/plugin-vue': 5.0.4(vite@5.2.11(@types/node@20.11.30))(vue@3.4.26) '@vue/devtools-api': 7.1.3(vue@3.4.26) '@vueuse/core': 10.9.0(vue@3.4.26) '@vueuse/integrations': 10.9.0(focus-trap@7.5.4)(vue@3.4.26) @@ -1357,6 +1368,8 @@ snapshots: shiki: 1.4.0 vite: 5.2.11(@types/node@20.11.30) vue: 3.4.26 + optionalDependencies: + postcss: 8.4.38 transitivePeerDependencies: - '@algolia/client-search' - '@types/node'