yuriy/quartz-website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(search): experimental telescope layout (closes #718) (#722)

Browse Source 
* feat(search): telescope-style search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore(search): cleanup some basis and borders

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix(search): make sure to set overflow-y

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* feat(search): shows preview on desktop only search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* perf: add options to control layout through config

cache memoize results to avoid fetching

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: use the default configuration

* fix: correct minor type for search

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: use datasets to query for preview

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: layout changes

show preview on normal layout, and only show previous layout in list page.

* fix(type): annotate search with types

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* chore: apply jacky's suggestion

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

* chore: using map API and scss

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* fix: styling on search container view on phones

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>

* Update quartz.layout.ts

Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>

---------

Signed-off-by: Aaron <29749331+aarnphm@users.noreply.github.com>
Co-authored-by: Jacky Zhao <j.zhao2k19@gmail.com>
This commit is contained in:
Aaron Pham
2024-01-31 04:16:14 -05:00
committed by GitHub
parent 4e5643fb49
commit a29fadb046
3 changed files with 208 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
quartz/components/Search.tsx
View File

@@ -4,8 +4,18 @@ import style from "./styles/search.scss"
import script from "./scripts/search.inline"
import { classNames } from "../util/lang"
export default (() => {
export interface SearchOptions {
enablePreview: boolean
}
const defaultOptions: SearchOptions = {
enablePreview: true,
}
export default ((userOpts?: Partial<SearchOptions>) => {
function Search({ displayClass }: QuartzComponentProps) {
const opts = { ...defaultOptions, ...userOpts }
return (
<div class={classNames(displayClass, "search")}>
<div id="search-icon">
@@ -36,7 +46,7 @@ export default (() => {
aria-label="Search for something"
placeholder="Search for something"
/>
<div id="results-container"></div>
<div id="search-layout" data-preview={opts.enablePreview}></div>
</div>
</div>
</div>