🔍 💥 Add UX for client-side search

[agoose77]

This PR is a rough stab at a frontend component for client-side search. There are already some sharp edges to rework:

• Remove reference to @myst-theme/search in @myst-theme/common once mystmd exports myst-spec-ext with the latest tyeps
• Handle pagination or scrolling
• Improve highlight renderer to e.g. reduce ellipsis 🤣
• Add "context" e.g. current doc/section and highlight for each entry
• Think about whether this can/should be generalised for a server-side search

2024-09-23.19-51-13.mp4

Note

To test this PR:

1. Build 🔍 Add client-side search index generation mystmd#1530 and run myst start --headless
2. Run theme:book as usual

[changeset-bot]

🦋 Changeset detected

Latest commit: 4fd5216

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 12 packages

Name	Type
@myst-theme/site	Patch
@myst-theme/book	Patch
@myst-theme/providers	Patch
@myst-theme/frontmatter	Patch
@myst-theme/diagrams	Patch
@myst-theme/jupyter	Patch
@myst-theme/styles	Patch
@myst-theme/common	Patch
@myst-theme/icons	Patch
@myst-theme/article	Patch
myst-to-react	Patch
myst-demo	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[agoose77]

@stevejpurves @rowanc1 input always welcome, but I'll keep chipping away at this.

[agoose77]

Phew, made some good progress! My goal here is to build out "an approach", and then we can iterate on the design.

[rowanc1]

In progress comments!

[choldgraf]

From a user's perspective, based on the two videos above, I think that this is ready to ship and consider it an alpha-level feature. I like the UI responsiveness, and the results modal is a great start - +1 to mimicking the UI of Algolia since they've done a lot of UI research already.

I couldn't test this locally (tried to get this theme building for 15 minutes but couldn't figure it out) but my feeling is that we should try to get this into the hands of users for feedback sooner than later, it already feels ready to me from a functionality perspective.

Is there any major technical blocker that we need to work out first? If not, my vote is to ship this and iterate when we get feedback. I'm happy to start trying it out a bit more.