Merge pull request systeminit#4258 from systeminit/adamhjk/lightbox-docs

docs: add zoom to images on the docs site

app/docs/package.json

@@ -13,8 +13,10 @@
     "@si/tsconfig": "workspace:*",
     "@types/node": "^18.15.11",
     "eslint": "^8.36.0",
+    "medium-zoom": "^1.1.0",
     "typescript": "^4.9.5",
-    "vitepress": "~1.0.2"
+    "vitepress": "~1.0.2",
+    "vitepress-plugin-lightbox": "^1.0.2"
   },
   "volta": {
     "extends": "../../package.json"

app/docs/src/.vitepress/config.ts

@@ -1,6 +1,7 @@
 import { defineConfig } from "vitepress";
 import dotenv from "dotenv";
 import path from "path";
+import lightbox from "vitepress-plugin-lightbox";
 
 dotenv.config();
 
@@ -12,6 +13,9 @@ export default defineConfig({
       light: "github-light",
       dark: "github-dark",
     },
+    config: (md) => {
+      md.use(lightbox, {});
+    }
   },
   head: [
     ['script', {}, `

app/docs/src/.vitepress/theme/Layout.vue

@@ -0,0 +1,37 @@
+<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>

app/docs/src/.vitepress/theme/index.ts

@@ -0,0 +1,7 @@
+import DefaultTheme from "vitepress/theme";
+import Layout from "./Layout.vue";
+
+export default {
+  extends: DefaultTheme,
+  Layout,
+}