search

readthedocs / addons

JavaScript client to integrate with Read the Docs nicely
https://readthedocs-addons.readthedocs.io/
MIT License
22 stars 6 forks source link

Add initial Command Pallette addon #449

Open ericholscher opened 5 days ago

ericholscher commented 5 days ago

This is one I'm pretty excited about. It takes the Command Pallette pattern from Slack, GitHub, etc., and adds it to any documentation page.

I think this could be an interesting UX for our future UX, and enable a lot of really interesting power user features.

The really nice thing is that it's totally based on a keyboard shortcut, so doesn't require any UX, and generally folks won't want to disable it.

Demo

https://github.com/user-attachments/assets/a230d721-1487-4afe-b95a-9df091cff327

Requires https://github.com/readthedocs/readthedocs.org/pull/11791

humitos commented 3 days ago

I think this is an interesting idea to explore more 👍🏼 . It seems we don't need to create a different addon and UI for this and it can probably be integrated with the search addon -- like a feature of the search addon: you type anything and you see the results for the "commands" and for the "search" in the same UI.

ericholscher commented 3 days ago

@humitos Yea, I think the main issue I have with search is just the UX. The really nice thing about the filtering UI is that it's instant, whereas search has a pretty long lag. It's going to be tricky to figure out how to build that UX, but I was wondering if page titles and section titles are in-memory matched, but then page results are queried against ES. I think we could build a reasonable UX there, but it's gonna take a little thought and discussion.

I think there's a huge win of the instant feel of the UX of the filtering UI though, and I really want to make sure we keep that working.

A lot of programs have a similar concept where search and filtering are different UX, for example GitHub and VS Code. So I don't think it's obviously wrong to have 2 different UIs. We could ship a default "Command" that is Search $query that shows at the bottom, for example.