docs: add algolia search

kagol · kagol · commit 7e384ef6a70e · 2024-12-03T11:40:39.000+08:00
diff --git a/examples/sites/index.html b/examples/sites/index.html
@@ -21,12 +21,24 @@
       window.DEPLOY_URL = ''
       window.process = { env: {} }
     </script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
   </head>
 
   <body class="of-hidden">
     <div id="header"></div>
     <app-root></app-root>
     <div id="app" class="wp100 hp100 pt60 of-hidden"></div>
+    <div class="search-box"></div>
+    <script src="https://cdn.jsdelivr.net/npm/@docsearch/js@3"></script>
+    <script type="text/javascript">
+      docsearch({
+        appId: "AGPA5UXHMH",
+        apiKey: "5fa09fc20270efa61d68e2c2eb0f56df",
+        indexName: "opentiny",
+        container: ".search-box",
+        debug: false
+      });
+    </script>
     <!-- prettier-ignore -->
     <script id="tinyui-design-common" src="/static/js/design-common.js"></script>
     <script type="module" src="./src/main.js"></script>
diff --git a/examples/sites/src/style.css b/examples/sites/src/style.css
@@ -25,3 +25,57 @@ b, strong {
 .tiny-grid td,.tiny-grid th {
   vertical-align: middle;
 }
+
+/* Algolia 搜索 */
+
+.search-box {
+  position: absolute;
+  z-index: 1000;
+  top: 12px;
+  left: 360px;
+}
+
+.DocSearch-Button {
+  border-radius: 6px;
+  transition: 0.4s
+}
+
+.DocSearch-Button:hover {
+  box-shadow: inset 0 0 0 1px #1476ff;
+  background-color: #f5f5f5;
+}
+
+.DocSearch-Button .DocSearch-Search-Icon {
+  width: 14px;
+}
+
+.DocSearch-Button-Placeholder {
+  color: #969faf;
+}
+
+:root {
+  --docsearch-primary-color: #1476ff;
+  --docsearch-searchbox-background: #f5f5f5;
+}
+
+@media screen and (max-width: 1023px) {
+  .search-box {
+    left: 420px;
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .DocSearch-Modal {
+    margin-top: 60px;
+  }
+
+  .search-box {
+    left: 360px;
+  }
+}
+
+@media screen and (max-width: 430px) {
+  .search-box {
+    left: 300px;
+  }
+}
diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue
@@ -11,6 +11,7 @@
           :data="menuOptions"
           :menu-collapsible="true"
           :filter-node-method="searchMenu"
+          :show-filter="false"
           @current-change="clickMenu"
           @collapse-change="collapseChange"
         >

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`:data="menuOptions"`
`12`	`12`	`:menu-collapsible="true"`
`13`	`13`	`:filter-node-method="searchMenu"`
	`14`	`+ :show-filter="false"`
`14`	`15`	`@current-change="clickMenu"`
`15`	`16`	`@collapse-change="collapseChange"`
`16`	`17`	`>`