feat(docs): implemented DocSearch (#2525)

Author: ArtBlue

package-lock.json

@@ -75,6 +75,7 @@
         "@changesets/cli": "^2.27.11",
         "@commitlint/cli": "^19.6.1",
         "@commitlint/config-conventional": "^19.6.0",
+        "@docsearch/js": "^3.8.2",
         "@ebay/browserslist-config": "^2.10.0",
         "@floating-ui/dom": "^1.6.13",
         "@marko/run": "^0.5.13",
@@ -126,13 +127,13 @@
         "ncp": "^2",
         "npm-run-all": "^4",
         "postcss": "^8.4.49",
-        "postcss-mixins": "^10.0.1",
-        "postcss-nested": "^6.2.0",
-        "postcss-simple-vars": "^7.0.1",
         "postcss-cli": "^11.0.0",
         "postcss-comment": "^2.0.0",
         "postcss-import": "^16.1.0",
         "postcss-loader": "^8.1.1",
+        "postcss-mixins": "^10.0.1",
+        "postcss-nested": "^6.2.0",
+        "postcss-simple-vars": "^7.0.1",
         "prettier": "^3.4.2",
         "prismjs": "^1.29.0",
         "rimraf": "^6",

package.json

@@ -0,0 +1,6 @@
+export default class {
+    async onMount() {
+        const { init } = await import("./doc-search");
+        init(this.getEl("container"));
+    }
+}

src/components/search/component-browser.js

@@ -0,0 +1,11 @@
+import "@docsearch/css";
+import docsearch from "@docsearch/js";
+
+export function init(container) {
+    docsearch({
+        container,
+        indexName: "skin",
+        appId: "4AG9MNELVM",
+        apiKey: "9b7a33ff8f0985b0f2b66e90c020b459",
+    });
+}

src/components/search/doc-search.js

@@ -0,0 +1,17 @@
+<link rel="preconnect" href="https://R2IYF7ETH7-dsn.algolia.net" crossorigin />
+<div.search key="container"/>
+
+style {
+    .DocSearch-SearchBar {
+        --docsearch-highlight-color: var(--color-foreground-on-inverse);
+    }
+
+    header.DocSearch-SearchBar {
+        min-height: 76px;
+    }
+
+    .DocSearch-LoadingIndicator svg,
+    .DocSearch-MagnifierLabel svg {
+        color: var(--color-foreground-accent);
+    }
+}

src/components/search/index.marko

@@ -27,6 +27,7 @@ import {components} from './components.marko';
                             <li><a role="menuitem" href="/storybook">Storybook</a></li>
                         </ul>
                     </nav>
+                    <search/>
                 </div>
             </div>
         </div>

src/components/site-header.marko

@@ -183,7 +183,8 @@ svg.icon.mobile-menu__close {
     }
 
     .top-bar {
-        grid-template-columns: auto auto auto;
+        display: flex;
+        justify-content: space-between;
     }
 
     .app-bar__title {