<script setup lang="ts">
import DefaultTheme from "vitepress/theme";
import { onMounted } from "vue";
import { useRouter } from "vitepress";
import mediumZoom from "medium-zoom";
const { Layout } = DefaultTheme;
const router = useRouter();
// Setup medium zoom with the desired options
const setupMediumZoom = () => {
mediumZoom("[data-zoomable]", {
background: "transparent",
});
};
// Apply medium zoom on load
onMounted(setupMediumZoom);
// Subscribe to route changes to re-apply medium zoom effect
router.onAfterRouteChanged = setupMediumZoom;
</script>
<template>
<Layout />
</template>
<style>
.medium-zoom-overlay {
backdrop-filter: blur(5rem);
}
.medium-zoom-overlay,
.medium-zoom-image--opened {
z-index: 999;
}
</style>
