From 411690e7219eab84cba90d9adb9cf2141aea20f3 Mon Sep 17 00:00:00 2001 From: xsf0105 Date: Mon, 29 May 2023 14:40:55 +0800 Subject: [PATCH] feat: add search --- package-lock.json | 2 +- src/main.css | 108 ++++++++++++++++++++++++++++++++++++++++++---- src/main.tsx | 18 ++++---- vite.config.js | 5 ++- 4 files changed, 113 insertions(+), 20 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6a3dbbb..d65c7dc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "quark-doc-header", - "version": "0.0.1", + "version": "0.0.13", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/src/main.css b/src/main.css index 52182f3..a7c5e0f 100644 --- a/src/main.css +++ b/src/main.css @@ -52,14 +52,6 @@ button { height: 2rem; } - -.left-bar span { - display: flex; - margin-right: 2rem; - align-items: center; - color: rgb(156 163 175); -} - .header >div { margin-left: auto; margin-right: auto; @@ -211,4 +203,104 @@ button { opacity: 1; visibility: visible; transform: translateY(0); +} + +/* search css */ +:root { + --docsearch-primary-color: #5468ff; + --docsearch-text-color: #1c1e21; + --docsearch-spacing: 12px; + --docsearch-icon-stroke-width: 1.4; + --docsearch-highlight-color: var(--docsearch-primary-color); + --docsearch-muted-color: #969faf; + --docsearch-container-background: rgba(101,108,133,0.8); + --docsearch-logo-color: #5468ff; + --docsearch-modal-width: 560px; + --docsearch-modal-height: 600px; + --docsearch-modal-background: #f5f6f7; + --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0,0%,100%,0.5),0 3px 8px 0 #555a64; + --docsearch-searchbox-height: 56px; + --docsearch-searchbox-background: #ebedf0; + --docsearch-searchbox-focus-background: #fff; + --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color); + --docsearch-hit-height: 56px; + --docsearch-hit-color: #444950; + --docsearch-hit-active-color: #fff; + --docsearch-hit-background: #fff; + --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1; + --docsearch-key-gradient: linear-gradient(-225deg,#d5dbe4,#f8f8f8); + --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); + --docsearch-footer-height: 44px; + --docsearch-footer-background: #fff; + --docsearch-footer-shadow: 0 -1px 0 0 #e0e3e8,0 -3px 6px 0 rgba(69,98,155,0.12); +} + +.DocSearch-Button-Container { + align-items: center; + display: flex; +} + +.DocSearch-Button { + align-items: center; + background: var(--docsearch-searchbox-background, #969faf); + border: 0; + border-radius: 40px; + color: var(--docsearch-muted-color, #969faf); + cursor: pointer; + display: flex; + font-weight: 500; + height: 36px; + justify-content: space-between; + margin: 0 0 0 16px; + padding: 0 8px; + user-select: none; +} + +.DocSearch-Button .DocSearch-Search-Icon { + color: var(--docsearch-text-color); +} + +.DocSearch-Button-Placeholder { + font-size: 1rem; + padding: 0 12px 0 6px; +} + +.DocSearch-Search-Icon { + stroke-width: 1.6; +} + +.left-bar span { + display: flex; + align-items: center; + color: rgb(156 163 175); + font-size: 14px; +} + +.DocSearch-Button-Keys { + display: flex; + min-width: calc(40px + 0.8em); +} + +.DocSearch-Button-Key { + align-items: center; + background: var(--docsearch-key-gradient); + border-radius: 3px; + box-shadow: var(--docsearch-key-shadow); + color: var(--docsearch-muted-color); + display: flex; + height: 18px; + justify-content: center; + margin-right: 0.4em; + position: relative; + padding: 0 0 2px; + border: 0; + top: -1px; + width: 20px; +} + +.DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover { + background: var(--docsearch-searchbox-focus-background); + box-shadow: var(--docsearch-searchbox-shadow); + color: var(--docsearch-text-color); + outline: none; } \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index a0873de..4268534 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,4 +1,4 @@ -import { QuarkElement, Fragment, property, state, customElement } from "quarkc" +import { QuarkElement, Fragment, createRef, customElement } from "quarkc" import style from "./main.css" import "./dark-light-mode.mjs" @@ -52,6 +52,8 @@ class MyComponent extends QuarkElement { #ecosystemLangs #isSearchShow + searchRef = createRef() + constructor() { super() this.#isZhLang = localStorage.getItem("language") === "zh-CN" @@ -61,10 +63,10 @@ class MyComponent extends QuarkElement { componentDidMount(): void { - console.log(location, 333); + const container = this.searchRef.current; if(location.host.indexOf("vue-quarkdesign") > -1) { docsearch({ - container: "#docsearch", + container, appId: "EA4BY59U66", indexName: localStorage.getItem("language") === "en-US" ? "ENDoc" : "CNDoc", @@ -72,14 +74,12 @@ class MyComponent extends QuarkElement { }); } else if(location.host.indexOf("react-quarkdesign") > -1) { docsearch({ - container: "#docsearch", + container, appId: "EA4BY59U66", indexName: localStorage.getItem("language") === "en-US" ? "react-ENDoc" : "react-CNDoc", apiKey: "5d1fd7c976a98a74421011f1374dd200", }); - } else { - this.#isSearchShow = false } } @@ -106,10 +106,8 @@ class MyComponent extends QuarkElement { - {/* @2023 */} - { - this.#isSearchShow ?
: null - } + +
diff --git a/vite.config.js b/vite.config.js index be89a5c..f4b2424 100644 --- a/vite.config.js +++ b/vite.config.js @@ -1,6 +1,9 @@ import { defineConfig } from 'vite'; +import FullReload from 'vite-plugin-full-reload' // https://vitejs.dev/config/ export default defineConfig({ - plugins: [], + plugins: [ + FullReload(['src/**/*.css']) + ], });