feat: add pagefind search

[miketheman]

Instead of using sphinx's built-in search which has some challenges in its implementation, as well as the integration with the customized builder and theme, use a different approach.

Pagefind will generate fragments that can be loaded client-side efficiently.

Refs: https://pagefind.app/
Refs: https://pypi.org/project/pagefind/
Resolves #4083

---

📚 Documentation preview 📚: https://pep-previews--4247.org.readthedocs.build/

[miketheman]

Definitely needs more styling, and I put it at the top of the sidebar since that made sense to me, but it might be better elsewhere.

Left a TODO - I'm not sure how/when the nodes attributes are getting cleared after PEPTitle.apply() - something else is removing anything non-classes and I wasn't able to figure it out yet.

But give it a whirl!

[nineteendo]

The search box looks a little big to me, and it displays "Python Enhancement Proposals" instead of the page titles. But it already looks promising.

[willingc]

@miketheman I'm not familiar with pagefind. I tried the preview site and it works well. Thank you!

[miketheman]

Thanks gang!

Definitely needs some styling, and mobile theme integration, since that doesn't appear to work on my phone yet.

[miketheman]

Ready for a second round of review. Default styling removed, so that inline/inherited styles work "just well enough".

[nineteendo]

The titles are now correct, but it seems the numbering resets every 10 entries.

[miketheman]

The titles are now correct, but it seems the numbering resets every 10 entries.

Thanks for checking! Can you share a search that repeats, and maybe a screenshot of the results?

[nineteendo]

"Style Guide for C Code":

I also think it doesn't search in the title.

[miketheman]

@nineteendo Thanks! That looks to be a Safari-specific behavior, and poking around the HTML it looks like the numbers are accurate, but the first digit is being visually trimmed by not having enough room to display. I'd appreciate it if you can confirm my finding by testing another browser.

I'll keep poking at it for bit longer, to see if there's a "good enough" CSS directive that will fix.

[miketheman]

@nineteendo I've padded the numbers a little, should display correctly in Safari now.

I've also added an exclusion for non-relevant pages, so results should be better.

Searching for "Style Guide for C Code" surfaces a single result now, and unquoted Style Guide for C Code will return based on default search weights and rankings.

[nineteendo]

Note that still breaks at 100 (on Chrome the "1" is partially cut off):

[miketheman]

Note that still breaks at 100 (on Chrome the "1" is partially cut off):

I'll bump it up to 1.8rem in the next commits. Note this this will have the same problem at 1000 results, but I'm also okay, since anyone having to navigate down that far is probably using the wrong search term anyways (and we only have ~708 pages today).

[miketheman]

It's taken some time, but I believe I have a reasonable changeset now - let me know if you'd prefer me to rearrange the commits in any way.
The page to test on is (still): https://pep-previews--4247.org.readthedocs.build/

[nineteendo]

The clear button seems to be in a weird place:

[miketheman]

The clear button seems to be in a weird place:

Thanks, I thought I had fixed that. 🤔 What browser is this?

[nineteendo]

Safari.

[hugovk]

Pressing "/" pops open the Read the Docs search box, which doesn't show any results when typing in the box.

I was expecting it instead to focus the cursor in the new search box at the top left, similar to https://docs.python.org and https://pypi.org.

[miketheman]

@nineteendo Thanks - super helpful! I've added a change to make the clear button placement static.

@hugovk My changes did not add a slash shortcut yet - I wanted to get the basics running before adding more JavaScript.
The observed behavior is probably due to the Preview builds running on RTD platform (and the search setting is still enabled) whereas production hosted on GH Pages.
I'd recommend that if you have the RTD admin UI to disable the Server-Side Search so that there's more parity between the PR previews and production. If you consider that a merge blocker, please let me know!