improve screen styling

.vitepress/config.mts

@@ -74,5 +74,17 @@ export default defineConfig({
       },
       link: '/fr/'
     },
+  },
+  vite: {
+    optimizeDeps: {
+      exclude: [
+        "@nolebase/vitepress-plugin-enhanced-readabilities/client",
+      ],
+    },
+    ssr: {
+      noExternal: [
+        "@nolebase/vitepress-plugin-enhanced-readabilities",
+      ],
+    },
   }
 })

.vitepress/theme/index.css

@@ -4,4 +4,8 @@
 
 .medium-zoom-image {
   z-index: 21;
+}
+
+.VPSocialLinks.VPNavBarSocialLinks.social-links {
+  margin-right: 0;
 }

.vitepress/theme/index.mts

@@ -1,14 +1,34 @@
 import DefaultTheme from 'vitepress/theme';
-import { onMounted } from 'vue';
-import mediumZoom from 'medium-zoom';
+import { h } from 'vue';
 
 import './index.css';
+import {
+  NolebaseEnhancedReadabilitiesMenu,
+  NolebaseEnhancedReadabilitiesScreenMenu,
+} from "@nolebase/vitepress-plugin-enhanced-readabilities/client";
+import "@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css";
+import type { Options as NolebaseReadOptions } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
+import { InjectionKey as NolebaseReadInjectionKey } from '@nolebase/vitepress-plugin-enhanced-readabilities/client'
 
 export default {
-  ...DefaultTheme,
-  setup() {
-    onMounted(() => {
-      mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+      "nav-screen-content-after": () => h(NolebaseEnhancedReadabilitiesScreenMenu),
+      "nav-bar-content-after": () => h(NolebaseEnhancedReadabilitiesMenu),
     });
   },
+  enhanceApp({ app }) {
+    app.provide(NolebaseReadInjectionKey, {
+      layoutSwitch: {
+        defaultMode: 5,
+        contentLayoutMaxWidth: {
+          defaultMaxWidth: 85
+        },
+        pageLayoutMaxWidth: {
+          defaultMaxWidth: 85
+        }
+      }
+    } as NolebaseReadOptions);
+  }
 };

package.json

@@ -7,6 +7,7 @@
   "author": "Kaito Sugimoto <[email protected]>",
   "license": "Apache-2.0",
   "devDependencies": {
+    "@nolebase/vitepress-plugin-enhanced-readabilities": "^2.5.0",
     "markdown-it-footnote": "^4.0.0",
     "vitepress": "^1.3.4"
   },
@@ -15,7 +16,5 @@
     "docs:build": "vitepress build",
     "docs:preview": "vitepress preview"
   },
-  "dependencies": {
-    "medium-zoom": "^1.1.0"
-  }
+  "dependencies": {}
 }