andatoshiki/toshiki-notebook
1
0
Fork 0
mirror of https://github.com/andatoshiki/toshiki-notebook.git synced 2026-06-06 05:55:56 +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 mediumZoom from 'medium-zoom'
@ -15,4 +15,4 @@ onMounted(() => {
.medium-zoom-image {
z-index: 21;
}
</style>
</style> -->

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

@ -1,7 +1,6 @@
// vitepress custom theme component configs
// deafult deps and packages for configuration
import { onMounted } from 'vue'
import { h, App } from 'vue'
import { useData } from 'vitepress'
import Theme from 'vitepress/theme'
@ -10,6 +9,9 @@ import mediumZoom from 'medium-zoom'
import vitepressNprogress from '@andatoshiki/vitepress-plugin-nprogress'
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'
// custom styles import
@ -77,15 +79,18 @@ export default {
// medium zoom custom markdown attributes components
setup() {
const route = useRoute()
const initZoom = () => {
mediumZoom('.main img', { background: 'var(--vp-c-bg)' }) // Should there be a new?
}
onMounted(() => {
// medium zoom for images manually added with data-zoomable attribute
// 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
initZoom()
})
},
watch(
() => route.path,
() => nextTick(() => initZoom()),
)
},
enhanceApp(ctx) {
// custom component tag/slot

20
docs/components.d.ts vendored
View File

@ -8,14 +8,14 @@ import '@vue/runtime-core'
export {}
declare module '@vue/runtime-core' {
export interface GlobalComponents {
AsideSponsors: typeof import('./.vitepress/theme/components/AsideSponsors.vue')['default']
CardLink: typeof import('./.vitepress/theme/components/CardLink.vue')['default']
CodeTitle: typeof import('./.vitepress/theme/components/layout/CodeTitle.vue')['default']
Comment: typeof import('./.vitepress/theme/components/layout/Comment.vue')['default']
Copyright: typeof import('./.vitepress/theme/components/Copyright.vue')['default']
Footer: typeof import('./.vitepress/theme/components/layout/Footer.vue')['default']
MediumZoom: typeof import('./.vitepress/theme/components/MediumZoom.vue')['default']
Mermaid: typeof import('./.vitepress/theme/components/Mermaid.vue')['default']
}
export interface GlobalComponents {
AsideSponsors: typeof import('./.vitepress/theme/components/AsideSponsors.vue')['default']
CardLink: typeof import('./.vitepress/theme/components/CardLink.vue')['default']
CodeTitle: typeof import('./.vitepress/theme/components/layout/CodeTitle.vue')['default']
Comment: typeof import('./.vitepress/theme/components/layout/Comment.vue')['default']
Copyright: typeof import('./.vitepress/theme/components/Copyright.vue')['default']
Footer: typeof import('./.vitepress/theme/components/layout/Footer.vue')['default']
MediumZoom: typeof import('./.vitepress/theme/components/MediumZoom.vue')['default']
Mermaid: typeof import('./.vitepress/theme/components/Mermaid.vue')['default']
}
}