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

Aaron Pham

2024-01-31 a29fadb0460e020ed6e5600fffa7af031d0b5eca

 quartz/components/Search.tsx

@@ -4,8 +4,18 @@
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 @@
              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>