feat: add DocSearch config

public/css/style.css

@@ -114,7 +114,7 @@ p {
   right: 0;
   left: 0;
   top: 0;
-  z-index: 999;
+  z-index: 99;
   background-color: transparent;
   border: 0;
   -webkit-transition: all 0.5s ease;

src/components/DocSearch.astro

@@ -0,0 +1,43 @@
+---
+interface Props {
+    appId: string;
+    apiKey: string;
+    indexName: string;
+    container?: string;
+    language?: string;
+    debug?: boolean;
+}
+
+const {
+    appId="SOXMYGAM7C",
+    apiKey="64843cbaefbee8de62326b2ae47b8601",
+    indexName="nocobase",
+    container = '#docsearch',
+    language= 'en',
+    debug = false
+} = Astro.props;
+---
+
+<script is:inline src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+<script
+        is:inline
+        type="text/javascript"
+        define:vars={{
+            appId,
+            apiKey,
+            indexName,
+            container,
+            language,
+            debug
+        }}
+        data-astro-rerun
+>
+    docsearch({
+        appId: appId,
+        apiKey: apiKey,
+        indexName: indexName,
+        container: container,
+        language: language,
+        debug: debug
+    });
+</script>

src/layouts/BaseCN.astro

@@ -1,6 +1,7 @@
 ---
 import ShapeFooter from "../components/ShapeFooter.astro";
 import LanguageSwitcher from '../components/LanguageSwitcher.astro';
+import DocSearch from "../components/DocSearch.astro";
 
 const year = new Date().getFullYear();
 const baseClassName = Astro.url.pathname.split("/")?.[2] || "";
@@ -296,6 +297,10 @@ const meta = {
           </div>
         </div>
 
+        <div class="menu-extras" style="margin-top: 20px">
+          <div id="docsearch"></div>
+        </div>
+
         <div id="navigation">
           <!-- Navigation Menu-->
           <ul class="navigation-menu">
@@ -707,24 +712,17 @@ const meta = {
       src="https://sibforms.com/forms/end-form/build/main.js"></script>
     <!--  END Brevo Form -->
 
-    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-
-    <script type="text/javascript">
-
-      docsearch({
-
-        appId: "SOXMYGAM7C",
-
-        apiKey: "64843cbaefbee8de62326b2ae47b8601",
-
-        indexName: "nocobase",
-
-        container: "### REPLACE ME WITH A CONTAINER (e.g. div) ###",
-
-        debug: false
+    <DocSearch/>
+    <script>
+      document.addEventListener("DOMContentLoaded", function() {
+        const searchButton = document.querySelector('.DocSearch-Button');
+        const placeholder = searchButton.querySelector('.DocSearch-Button-Placeholder');
+        const keys = searchButton.querySelector('.DocSearch-Button-Keys');
 
+        // 隐藏文本和快捷键
+        if (placeholder) placeholder.style.display = 'none';
+        if (keys) keys.style.display = 'none';
       });
-
     </script>
   </body>
 </html>

src/layouts/BaseEN.astro

@@ -1,6 +1,7 @@
 ---
 import ShapeFooter from "../components/ShapeFooter.astro";
 import LanguageSwitcher from "../components/LanguageSwitcher.astro";
+import DocSearch from "../components/DocSearch.astro";
 
 const year = new Date().getFullYear();
 const baseClassName = Astro.url.pathname.split("/")?.[2] || "";
@@ -257,6 +258,10 @@ const meta = {
           </div>
         </div>
 
+        <div class="menu-extras" style="margin-top: 20px">
+          <div id="docsearch"></div>
+        </div>
+
         <div id="navigation">
           <!-- Navigation Menu-->
           <ul class="navigation-menu">
@@ -653,25 +658,17 @@ const meta = {
     <script defer src="https://sibforms.com/forms/end-form/build/main.js"
     ></script>
     <!--  END Brevo Form -->
-
-    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-
-    <script type="text/javascript">
-
-      docsearch({
-
-        appId: "SOXMYGAM7C",
-
-        apiKey: "64843cbaefbee8de62326b2ae47b8601",
-
-        indexName: "nocobase",
-
-        container: "### REPLACE ME WITH A CONTAINER (e.g. div) ###",
-
-        debug: false
-
-      });
-
-    </script>
+    <DocSearch/>
+  <script>
+    document.addEventListener("DOMContentLoaded", function() {
+      const searchButton = document.querySelector('.DocSearch-Button');
+      const placeholder = searchButton.querySelector('.DocSearch-Button-Placeholder');
+      const keys = searchButton.querySelector('.DocSearch-Button-Keys');
+
+      // 隐藏文本和快捷键
+      if (placeholder) placeholder.style.display = 'none';
+      if (keys) keys.style.display = 'none';
+    });
+  </script>
   </body>
 </html>

src/layouts/BaseJA.astro

@@ -1,6 +1,7 @@
 ---
 import ShapeFooter from "../components/ShapeFooter.astro";
 import LanguageSwitcher from "../components/LanguageSwitcher.astro";
+import DocSearch from "../components/DocSearch.astro";
 
 const year = new Date().getFullYear();
 const baseClassName = Astro.url.pathname.split("/")?.[2] || "";
@@ -227,6 +228,10 @@ const meta = {
             </div>
         </div>
 
+        <div class="menu-extras" style="margin-top: 20px">
+            <div id="docsearch"></div>
+        </div>
+
         <div id="navigation">
             <!-- Navigation Menu-->
             <ul class="navigation-menu">
@@ -609,24 +614,17 @@ const meta = {
         src="https://sibforms.com/forms/end-form/build/main.js"></script>
 <!-- END Brevo Form -->
 
-<script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
-
-<script type="text/javascript">
-
-    docsearch({
-
-        appId: "SOXMYGAM7C",
-
-        apiKey: "64843cbaefbee8de62326b2ae47b8601",
-
-        indexName: "nocobase",
-
-        container: "### REPLACE ME WITH A CONTAINER (e.g. div) ###",
-
-        debug: false
+<DocSearch/>
+<script>
+    document.addEventListener("DOMContentLoaded", function() {
+        const searchButton = document.querySelector('.DocSearch-Button');
+        const placeholder = searchButton.querySelector('.DocSearch-Button-Placeholder');
+        const keys = searchButton.querySelector('.DocSearch-Button-Keys');
 
+        // 隐藏文本和快捷键
+        if (placeholder) placeholder.style.display = 'none';
+        if (keys) keys.style.display = 'none';
     });
-
 </script>
 </body>
 </html>