Upgrade vuepress to beta.12 (#26)

docs/.vuepress/config.ts

@@ -1,12 +1,28 @@
-import { defineUserConfig, DefaultThemeOptions } from "vuepress";
+import { defineUserConfig } from "@vuepress/cli";
+import type { DefaultThemeOptions } from "@vuepress/theme-default";
 import * as sidebar from "./config/sidebar";
 import * as navbar from "./config/navbar";
 import * as path from "path";
 
+const isProduction = process.env.NODE_ENV === "production";
+
 export default defineUserConfig<DefaultThemeOptions>({
   theme: path.join(__dirname, "./theme"),
-  plugins: ["@vuepress/back-to-top", "vuepress-plugin-mermaidjs"],
-  base: "/Xray-docs-next/",
+  plugins: [
+    ["vuepress-plugin-mermaidjs"],
+    [
+      "@vuepress/plugin-search",
+      {
+        locales: {
+          "/": {
+            placeholder: "搜索",
+          },
+        },
+      },
+    ],
+    ["@vuepress/plugin-debug", !isProduction],
+  ],
+  base: isProduction ? "/Xray-docs-next/" : "",
   locales: {
     "/": {
       lang: "zh-CN",
@@ -24,7 +40,7 @@ export default defineUserConfig<DefaultThemeOptions>({
     enableToggle: true,
 
     themePlugins: {
-      git: process.env.NODE_ENV === "production",
+      git: isProduction,
     },
     locales: {
       "/": {
@@ -71,6 +87,7 @@ export default defineUserConfig<DefaultThemeOptions>({
   extendsMarkdown: (md) => {
     md.use(require("markdown-it-footnote"));
   },
+  bundler: isProduction ? "@vuepress/webpack" : "@vuepress/vite",
   bundlerConfig: {
     chainWebpack: (config) => {
       config.module
@@ -82,6 +99,9 @@ export default defineUserConfig<DefaultThemeOptions>({
           name: `assets/img/[name].[hash:8].[ext]`,
         });
     },
+    viteOptions: {
+      base: "/Xray-docs-next/",
+    },
   },
   //postcss: { plugins: [require("autoprefixer")] }
 });

docs/.vuepress/theme/components/Tab.vue

@@ -37,5 +37,5 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "~bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap";
 </style>

docs/.vuepress/theme/components/Tabs.vue

@@ -42,9 +42,12 @@ export default defineComponent({
   },
   mounted() {
     this.$nextTick(function () {
-      const bootstrap = require("bootstrap");
-      let triggerEl = document.getElementById(this.children["0"].$data.labelID);
-      new bootstrap.Tab(triggerEl).show();
+      import("bootstrap").then((b) => {
+        let triggerEl = document.getElementById(
+          this.children["0"].$data.labelID
+        );
+        new b.Tab(triggerEl).show();
+      });
     });
   },
   computed: {
@@ -59,7 +62,7 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-@import "~bootstrap/scss/bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap";
 
 button.nav-link {
   color: var(--textColor);

docs/.vuepress/theme/styles/default/_variables.scss

@@ -25,6 +25,10 @@ html[theme="dark"] {
   --dangerBgDarkColor: #{$dangerBgDarkColor};
   --warningBgDarkColor: #{$warningBgDarkColor};
   --miniCodeBgColor: #{$miniCodeBgDarkColor};
+  --search-border-color: #{$miniCodeBgDarkColor};
+  --search-item-focus-bg-color: #{$kbdBackgroundDarkColor};
+  --search-accent-color: #{$accentDarkColor};
+  --search-text-color: #{$textDarkColor};
 
   --textColorLighten10: #{lighten($textDarkColor, 7%)};
   --textColorLighten25: #{lighten($textDarkColor, 10%)};
@@ -34,7 +38,7 @@ html[theme="dark"] {
   --accentColorLighten30: #{lighten($accentDarkColor, 30%)};
 }
 
-html {
+html[theme="light"] {
   --accentColor: #{$accentLightColor};
   --textColor: #{$textLightColor};
   --borderColor: #{$borderLightColor};
@@ -56,6 +60,7 @@ html {
   --dangerBgDarkColor: #{$dangerBgLightColor};
   --warningBgDarkColor: #{$warningBgLightColor};
   --miniCodeBgColor: #{$miniCodeBgLightColor};
+  --search-accent-color: #{$accentLightColor};
 
   --textColorLighten10: #{lighten($textLightColor, 10%)};
   --textColorLighten25: #{lighten($textLightColor, 20%)};

docs/.vuepress/theme/styles/default/index.scss

@@ -21,3 +21,24 @@
     scroll-behavior: auto;
   }
 }
+html[theme="dark"] {
+  .search-box {
+    input {
+      background-color: var(--backgroundColor);
+    }
+    .suggestions {
+      background: var(--backgroundColor);
+    }
+  }
+}
+
+html[theme="light"] {
+  .search-box {
+    input {
+      background-color: var(--backgroundColor);
+    }
+    .suggestions {
+      background: var(--backgroundColor);
+    }
+  }
+}