feat: add docusaurus-search-local plugin for search (#636)

Author: delei

website/docusaurus.config.js

@@ -206,7 +206,25 @@ const config = {
             jsLoader: 'matomo.js',
         }
     }),
-    themes: ['@docusaurus/theme-mermaid'],
+    themes: [
+        '@docusaurus/theme-mermaid',
+        [
+            require.resolve("@easyops-cn/docusaurus-search-local"),
+            /** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
+            ({
+                hashed: true,
+                indexDocs: true,
+                indexBlog: true,
+                indexPages: true,
+                highlightSearchTermsOnTargetPage: false,
+                explicitSearchResultPath: true,
+                searchBarPosition: "right",
+                searchBarShortcutHint: false,
+                language: ["zh", "en"],
+                hideSearchBarWithNoSearchContext: true,
+            }),
+        ],
+    ],
     headTags: [],
     markdown: {
         format: 'md',

website/package.json

@@ -21,6 +21,7 @@
     "@docusaurus/core": "^3.9.1",
     "@docusaurus/preset-classic": "^3.9.1",
     "@docusaurus/theme-mermaid": "^3.9.1",
+    "@easyops-cn/docusaurus-search-local": "^0.52.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "docusaurus-plugin-matomo": "^0.0.8",

website/src/css/custom.css

@@ -28,6 +28,9 @@
     --ifm-code-font-size: 95%;
     --ifm-navbar-height: 80px;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+    --search-local-modal-width: 480px;
+    --search-local-modal-width-sm: 300px;
+    --search-local-highlight-color: #2e8555;
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -41,6 +44,7 @@
     --ifm-color-primary-lightest: #4fddbf;
     --ifm-footer-background-color: #242526;
     --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+    --search-local-highlight-color: #25c2a0;
 }
 
 .hero {