Chore: upgrade to vuepress@next-beta.11

docs/.vuepress/config.ts

@@ -3,9 +3,27 @@ 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"],
+  plugins: [
+    ["@vuepress/back-to-top"],
+    ["vuepress-plugin-mermaidjs"],
+    [
+      "@vuepress/plugin-search",
+      {
+        locales: {
+          "/": {
+            placeholder: "Search",
+          },
+          "/zh/": {
+            placeholder: "搜索",
+          },
+        },
+      },
+    ],
+  ],
   base: "/Xray-docs-next/",
   locales: {
     "/": {
@@ -71,6 +89,7 @@ export default defineUserConfig<DefaultThemeOptions>({
   extendsMarkdown: (md) => {
     md.use(require("markdown-it-footnote"));
   },
+  //bundler: isProduction ? "@vuepress/webpack" : "@vuepress/vite",
   bundlerConfig: {
     chainWebpack: (config) => {
       config.module

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

@@ -59,7 +59,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);
+    }
+  }
+}

package.json

@@ -6,15 +6,16 @@
   "author": "Arthur Morgan, Project X Community",
   "license": "CC-BY-SA-4.0",
   "devDependencies": {
-    "@types/bootstrap": "^5.0.11",
+    "@types/bootstrap": "^5.0.13",
     "@types/jquery": "^3.5.5",
-    "@vuepress/plugin-back-to-top": "^2.0.0-beta.8",
+    "@vuepress/plugin-back-to-top": "^2.0.0-beta.11",
+    "@vuepress/plugin-search": "^2.0.0-beta.11",
     "postcss-loader": "^5.2.0",
     "prettier": "^2.2.1",
-    "sass": "^1.32.8",
+    "sass": "^1.32.12",
     "sass-loader": "^11.0.1",
     "vue-property-decorator": "^9.1.2",
-    "vuepress": "^2.0.0-beta.8"
+    "vuepress": "^2.0.0-beta.11"
   },
   "scripts": {
     "docs:dev": "vuepress dev docs",