docs: rework search UI (#2723)

Reworks search to not be a page and instead to be inline dropdown.

<img width="763" alt="Screenshot 2024-02-05 at 13 22 58"
src="https://github.com/tldraw/tldraw/assets/469604/4e5a8076-62cd-44bb-b8e7-7f5ecdc4af24">


- rework search completely
- rm Search Results css
- uses Ariakit and add appropriate hooks / styling
- I couldn't use Radix unfortunately since they're still working on
adding a Combox: https://github.com/radix-ui/primitives/issues/1342
- I'm open to other suggestions but Ariakit plays nicely with Radix and
keeps things open to migrate to Radix in the future
- fixes bug with not scrolling to right place when having a direct link
- adds categories in the search results - examples / reference / learn
- and adds category icons. Let me know if there's a better policy for
adding new SVG icons cc @steveruizok

### Change Type

- [x] `minor` — New feature

### Test Plan

1. Test searches using normal method for each type (examples, docs,
refs)
2. Test searches using AI for each type (ditto)

### Release Notes

- Docs: rework the search to be an inline dropdown.
This commit is contained in:
Mime Čuvalo 2024-02-05 14:32:50 +00:00 committed by GitHub
parent 591d3129c7
commit 157d24db73
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 11965 additions and 11696 deletions

View file

@ -28,15 +28,7 @@ const linkContext = createContext<{
sectionId: string | null
} | null>(null)
export function Sidebar({
headings,
links,
sectionId,
categoryId,
articleId,
searchQuery,
searchType,
}: SidebarProps) {
export function Sidebar({ headings, links, sectionId, categoryId, articleId }: SidebarProps) {
const activeId = articleId ?? categoryId ?? sectionId
const pathName = usePathname()
@ -45,17 +37,13 @@ export function Sidebar({
document.body.classList.remove('sidebar-open')
document.querySelector('.sidebar__nav [data-active=true]')?.scrollIntoView({ block: 'center' })
// XXX(mime): scrolling the sidebar into position also scrolls the page to the wrong
// spot. this compensates for that but, ugh.
document.documentElement.scrollTop = 0
}, [pathName])
return (
<>
<linkContext.Provider value={{ activeId, articleId, categoryId, sectionId }}>
<div className="sidebar" onScroll={(e) => e.stopPropagation()}>
<Search prevQuery={searchQuery} prevType={searchType} />
<Search />
<div className="sidebar__section__links">
<SectionLinks sectionId={sectionId} />
</div>