andatoshiki/toshiki-notebook
1
0
Fork 0
mirror of https://github.com/andatoshiki/toshiki-notebook.git synced 2026-06-06 09:16:45 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix(optimize): ammend medium zoom components by ejecting vue components ith custom setup script with fading variables in stylesheets but applying native vue & vuepress components to directly register zooming environment on page load without refresh to initiate

Browse Source
This commit is contained in:
Anda Toshiki 2023-09-13 19:57:53 -07:00
parent 05b57564b0
commit 2758cc94be
3 changed files with 25 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
docs/.vitepress/theme/components/MediumZoom.vue
View File

@ -1,4 +1,4 @@
<script setup> <!-- <script setup>
import { onMounted } from 'vue' import { onMounted } from 'vue'
import mediumZoom from 'medium-zoom' import mediumZoom from 'medium-zoom'
@ -15,4 +15,4 @@ onMounted(() => {
.medium-zoom-image { .medium-zoom-image {
z-index: 21; z-index: 21;
} }
</style> </style> -->

19
docs/.vitepress/theme/index.ts
View File

@ -1,7 +1,6 @@
// vitepress custom theme component configs // vitepress custom theme component configs
// deafult deps and packages for configuration // deafult deps and packages for configuration
import { onMounted } from 'vue'
import { h, App } from 'vue' import { h, App } from 'vue'
import { useData } from 'vitepress' import { useData } from 'vitepress'
import Theme from 'vitepress/theme' import Theme from 'vitepress/theme'
@ -10,6 +9,9 @@ import mediumZoom from 'medium-zoom'
import vitepressNprogress from '@andatoshiki/vitepress-plugin-nprogress' import vitepressNprogress from '@andatoshiki/vitepress-plugin-nprogress'
import '@andatoshiki/vitepress-plugin-nprogress/lib/css/index.css' import '@andatoshiki/vitepress-plugin-nprogress/lib/css/index.css'
import { nextTick, onMounted, watch } from 'vue'
import { inBrowser, useRoute } from 'vitepress'
import '@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css' import '@andatoshiki/vitepress-plugin-shiki-twoslash/styles.css'
// custom styles import // custom styles import
@ -77,14 +79,17 @@ export default {
// medium zoom custom markdown attributes components // medium zoom custom markdown attributes components
setup() { setup() {
const route = useRoute()
const initZoom = () => {
mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) // Should there be a new?
}
onMounted(() => { onMounted(() => {
// medium zoom for images manually added with data-zoomable attribute initZoom()
// mediumZoom('[data-zoomable]', {
// background: 'var(--vp-c-bg)',
// scrollOffset: 40,
// })
mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) // register global component to make image zoom globally with the class
}) })
watch(
() => route.path,
() => nextTick(() => initZoom()),
)
}, },
enhanceApp(ctx) { enhanceApp(ctx) {