feat: add search

hellof2e · May 29, 2023 · 99ba4f7 · 99ba4f7
1 parent 411690e
commit 99ba4f7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/lib/index.js b/lib/index.js
@@ -2107,7 +2107,7 @@ var QuarkElement = /*#__PURE__*/function (_HTMLElement) {
 }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 _defineProperty(QuarkElement, "h", createElement);
 
-var css_248z = "* {\n  font-family: \"Inter var\", \"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";;\n}\nhtml, body, a, button, input {\n  outline: 0 none;\n  border: 0;\n  text-decoration: none;\n}\n\np {\n  margin: 0;\n}\n\na {\n  color: #4c4c52;\n  transition: all .25s;\n}\n\nbutton {\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.header {\n  z-index: 30;\n  top: 0px;\n  position: sticky;\n  min-width: 860px;\n  width: 100%;\n  background: #fff;\n}\n.toper-bar,\n.left-bar {\n  display: flex;\n  align-items: center;\n}\n\n.menu-group {\n  display: flex;\n  gap: 2rem;\n}\n\n.left-bar a {\n  color: rgb(107 114 128);\n  display: flex;\n  align-items: center;\n  margin-right: 0.5rem;\n}\n\n\n.left-bar img {\n    height: 2rem;\n}\n\n\n.left-bar span {\n  display: flex;\n  margin-right: 2rem;\n  align-items: center;\n  color: rgb(156 163 175);\n}\n\n.header >div {\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.header  .container {\n  margin: 0 auto;\n  padding: 1.25rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--line-light);\n  background-color: var(--main-bg);\n}\n\n.nav-item a {\n  font-size: 14px;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.nav-item a:hover {\n  color: var(--nav-link-color);\n}\n\n.nav-item button {\n  color: var(--text-font-color-light, rgba(60, 60, 67, .92));\n  font-family: var(--font-family-base);\n  transition: color 0.5s;\n}\n\n.nav-item button:hover {\n  color: var(--nav-link-color);\n}\n\n.translations,\n.appearance,\n.social-links {\n  display: flex;\n}\n\n.translations:before ,\n.appearance:before ,\n.social-links:before  {\n    margin: 0 16px;\n    width: 1px;\n    height: 24px;\n    background-color: rgba(60, 60, 67, 0.12);\n    content: \"\";\n}\n\n.social-links,\n.translate-lang {\n  display: flex;\n  align-items: center;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.social-links a {\n  width: 40px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.social-links a:hover {\n  color: var(--nav-link-color);\n}\n.translate-lang:hover {\n  color: var(--nav-link-color);\n}\n\n.social-links svg,\n.translate-lang svg {\n  width: 20px;\n  height: 20px;\n  fill: currentColor;\n}\n\n.flyout {\n  position: relative;\n}\n.flyout a {\n  display: flex;\n  align-items: center;\n}\n\n.flyout svg {\n  margin-left: 4px;\n  width: 14pxpx;\n  height: 14px;\n  fill: currentColor;\n}\n.flyout-menu {\n  position: absolute;\n  top: calc(var(--nav-height) / 2 + 15px);\n  right: 0;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-4px);\n  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;\n}\n\n.menu-wrap {\n  border-radius: 8px;\n  padding: 12px 0;\n  min-width: 192px;\n  border: 1px solid transparent;\n  background: var(--main-bg);\n  box-shadow: var(--main-shadow);\n  transition: background-color 0.5s;\n}\n\n.menu-items {\n  transition: border-color 0.5s;\n}\n\n.flyout-menu .menu-wrap .menu-item-group {\n  padding: 0 0 12px;\n}\n\n.menu-group-title {\n  padding: 0 18px;\n  line-height: 28px;\n  font-size: 10px;\n  font-weight: 600;\n  color: #cacaca;\n  text-transform: uppercase;\n  transition: color 0.25s;\n}\n\n.menu-link {\n  display: block;\n  padding: 0 18px;\n  line-height: 28px;\n  font-size: 13px;\n  font-weight: 400;\n  color: var(--c-text-1);\n  white-space: nowrap;\n  transition: color 0.25s;\n}\n\n.flyout:hover .flyout-menu,\n.flyout-button + .flyout-menu {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}";
+var css_248z = "* {\n  font-family: \"Inter var\", \"Inter\", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Helvetica, Arial, \"Noto Sans\", sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";;\n}\nhtml, body, a, button, input {\n  outline: 0 none;\n  border: 0;\n  text-decoration: none;\n}\n\np {\n  margin: 0;\n}\n\na {\n  color: #4c4c52;\n  transition: all .25s;\n}\n\nbutton {\n  background-color: transparent;\n  cursor: pointer;\n}\n\n.header {\n  z-index: 30;\n  top: 0px;\n  position: sticky;\n  min-width: 860px;\n  width: 100%;\n  background: #fff;\n}\n.toper-bar,\n.left-bar {\n  display: flex;\n  align-items: center;\n}\n\n.menu-group {\n  display: flex;\n  gap: 2rem;\n}\n\n.left-bar a {\n  color: rgb(107 114 128);\n  display: flex;\n  align-items: center;\n  margin-right: 0.5rem;\n}\n\n\n.left-bar img {\n    height: 2rem;\n}\n\n.header >div {\n    margin-left: auto;\n    margin-right: auto;\n}\n\n.header  .container {\n  margin: 0 auto;\n  padding: 1.25rem;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  border-bottom: 1px solid var(--line-light);\n  background-color: var(--main-bg);\n}\n\n.nav-item a {\n  font-size: 14px;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.nav-item a:hover {\n  color: var(--nav-link-color);\n}\n\n.nav-item button {\n  color: var(--text-font-color-light, rgba(60, 60, 67, .92));\n  font-family: var(--font-family-base);\n  transition: color 0.5s;\n}\n\n.nav-item button:hover {\n  color: var(--nav-link-color);\n}\n\n.translations,\n.appearance,\n.social-links {\n  display: flex;\n}\n\n.translations:before ,\n.appearance:before ,\n.social-links:before  {\n    margin: 0 16px;\n    width: 1px;\n    height: 24px;\n    background-color: rgba(60, 60, 67, 0.12);\n    content: \"\";\n}\n\n.social-links,\n.translate-lang {\n  display: flex;\n  align-items: center;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.social-links a {\n  width: 40px;\n  height: 36px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--text-font-color-light);\n  font-family: var(--font-family-base);\n}\n\n.social-links a:hover {\n  color: var(--nav-link-color);\n}\n.translate-lang:hover {\n  color: var(--nav-link-color);\n}\n\n.social-links svg,\n.translate-lang svg {\n  width: 20px;\n  height: 20px;\n  fill: currentColor;\n}\n\n.flyout {\n  position: relative;\n}\n.flyout a {\n  display: flex;\n  align-items: center;\n}\n\n.flyout svg {\n  margin-left: 4px;\n  width: 14pxpx;\n  height: 14px;\n  fill: currentColor;\n}\n.flyout-menu {\n  position: absolute;\n  top: calc(var(--nav-height) / 2 + 15px);\n  right: 0;\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(-4px);\n  transition: opacity 0.25s, visibility 0.25s, transform 0.25s;\n}\n\n.menu-wrap {\n  border-radius: 8px;\n  padding: 12px 0;\n  min-width: 192px;\n  border: 1px solid transparent;\n  background: var(--main-bg);\n  box-shadow: var(--main-shadow);\n  transition: background-color 0.5s;\n}\n\n.menu-items {\n  transition: border-color 0.5s;\n}\n\n.flyout-menu .menu-wrap .menu-item-group {\n  padding: 0 0 12px;\n}\n\n.menu-group-title {\n  padding: 0 18px;\n  line-height: 28px;\n  font-size: 10px;\n  font-weight: 600;\n  color: #cacaca;\n  text-transform: uppercase;\n  transition: color 0.25s;\n}\n\n.menu-link {\n  display: block;\n  padding: 0 18px;\n  line-height: 28px;\n  font-size: 13px;\n  font-weight: 400;\n  color: var(--c-text-1);\n  white-space: nowrap;\n  transition: color 0.25s;\n}\n\n.flyout:hover .flyout-menu,\n.flyout-button + .flyout-menu {\n  opacity: 1;\n  visibility: visible;\n  transform: translateY(0);\n}\n\n/* search css */\n:root {\n  --docsearch-primary-color: #5468ff;\n  --docsearch-text-color: #1c1e21;\n  --docsearch-spacing: 12px;\n  --docsearch-icon-stroke-width: 1.4;\n  --docsearch-highlight-color: var(--docsearch-primary-color);\n  --docsearch-muted-color: #969faf;\n  --docsearch-container-background: rgba(101,108,133,0.8);\n  --docsearch-logo-color: #5468ff;\n  --docsearch-modal-width: 560px;\n  --docsearch-modal-height: 600px;\n  --docsearch-modal-background: #f5f6f7;\n  --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64;\n  --docsearch-searchbox-height: 56px;\n  --docsearch-searchbox-background: #ebedf0;\n  --docsearch-searchbox-focus-background: #fff;\n  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);\n  --docsearch-hit-height: 56px;\n  --docsearch-hit-color: #444950;\n  --docsearch-hit-active-color: #fff;\n  --docsearch-hit-background: #fff;\n  --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;\n  --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8);\n  --docsearch-key-shadow: inset 0 -2px 0 0 #cdcde6,inset 0 0 1px 1px #fff,0 1px 2px 1px rgba(30,35,90,0.4);\n  --docsearch-footer-height: 44px;\n  --docsearch-footer-background: #fff;\n  --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12);\n}\n\n.DocSearch-Button-Container {\n  align-items: center;\n  display: flex;\n}\n\n.DocSearch-Button {\n  align-items: center;\n  background: var(--docsearch-searchbox-background, #969faf);\n  border: 0;\n  border-radius: 40px;\n  color: var(--docsearch-muted-color, #969faf);\n  cursor: pointer;\n  display: flex;\n  font-weight: 500;\n  height: 36px;\n  justify-content: space-between;\n  margin: 0 0 0 16px;\n  padding: 0 8px;\n  user-select: none;\n}\n\n.DocSearch-Button .DocSearch-Search-Icon {\n  color: var(--docsearch-text-color);\n}\n\n.DocSearch-Button-Placeholder {\n  font-size: 1rem;\n  padding: 0 12px 0 6px;\n}\n\n.DocSearch-Search-Icon {\n  stroke-width: 1.6;\n}\n\n.left-bar span {\n  display: flex;\n  align-items: center;\n  color: rgb(156 163 175);\n  font-size: 14px;\n}\n\n.DocSearch-Button-Keys {\n  display: flex;\n  min-width: calc(40px + 0.8em);\n}\n\n.DocSearch-Button-Key {\n  align-items: center;\n  background: var(--docsearch-key-gradient);\n  border-radius: 3px;\n  box-shadow: var(--docsearch-key-shadow);\n  color: var(--docsearch-muted-color);\n  display: flex;\n  height: 18px;\n  justify-content: center;\n  margin-right: 0.4em;\n  position: relative;\n  padding: 0 0 2px;\n  border: 0;\n  top: -1px;\n  width: 20px;\n}\n\n.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {\n  background: var(--docsearch-searchbox-focus-background);\n  box-shadow: var(--docsearch-searchbox-shadow);\n  color: var(--docsearch-text-color);\n  outline: none;\n}";
 
 // enjoy it
 const template = document.createElement("template");
@@ -2288,30 +2288,29 @@ let MyComponent = class MyComponent extends QuarkElement {
   #isZhLang;
   #ecosystemLangs;
   #isSearchShow;
+  searchRef = createRef();
   constructor() {
     super();
     this.#isZhLang = localStorage.getItem("language") === "zh-CN";
     this.#ecosystemLangs = this.#isZhLang ? langs["zh-CN"] : langs["en-US"];
     this.#isSearchShow = true;
   }
   componentDidMount() {
-    console.log(location, 333);
+    const container = this.searchRef.current;
     if (location.host.indexOf("vue-quarkdesign") > -1) {
       Ro({
-        container: "#docsearch",
+        container,
         appId: "EA4BY59U66",
         indexName: localStorage.getItem("language") === "en-US" ? "ENDoc" : "CNDoc",
         apiKey: "5d1fd7c976a98a74421011f1374dd200"
       });
     } else if (location.host.indexOf("react-quarkdesign") > -1) {
       Ro({
-        container: "#docsearch",
+        container,
         appId: "EA4BY59U66",
         indexName: localStorage.getItem("language") === "en-US" ? "react-ENDoc" : "react-CNDoc",
         apiKey: "5d1fd7c976a98a74421011f1374dd200"
       });
-    } else {
-      this.#isSearchShow = false;
     }
   }
   _switchLang = () => {
@@ -2338,9 +2337,10 @@ let MyComponent = class MyComponent extends QuarkElement {
     }, QuarkElement.h("img", {
       src: "https://quark.hellobike.com/assets/quark-logo.f9a6a307.png",
       alt: ""
-    })), this.#isSearchShow ? QuarkElement.h("div", {
+    })), QuarkElement.h("div", {
+      ref: this.searchRef,
       id: "docsearch"
-    }) : null), QuarkElement.h("div", {
+    })), QuarkElement.h("div", {
       class: "toper-bar"
     }, QuarkElement.h("div", {
       class: "menu-group"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "quark-doc-header",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "files": [