Add search to website

[aliabd]

Search!

closes: #2121

While this works really well as it is currently, I will probably need to do another pass to clean out all the regex. The challenge was that for docs especially some of the content exists in jsons and some in the templates. So to get the content in a searchable dictionary i need to render it first, which means i need to remove the html code using regex.

There must be a better way to do this, and hopefully its a way that will let us link to specific ids on the page so that the user can get closer to the query. I'm open to changing a lot of the code, especially all the ugly stuff in the search-api, so please leave feedback!

It searches through all the docs and guides

[gradio-pr-bot]

🪼 branch checks and previews

•	Name	Status	URL
	Spaces	ready!	Spaces preview
	Website	ready!	Website preview
	Storybook	ready!	Storybook preview
🦄	Changes	detected!	Details

---

Install Gradio from this PR

pip install https://gradio-builds.s3.amazonaws.com/5c8645ac6c49943aac2db9b1a597672c348d70bb/gradio-4.37.2-py3-none-any.whl

Install Gradio Python Client from this PR

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@5c8645ac6c49943aac2db9b1a597672c348d70bb#subdirectory=client/python"

Install Gradio JS Client from this PR

npm install https://gradio-builds.s3.amazonaws.com/5c8645ac6c49943aac2db9b1a597672c348d70bb/gradio-client-1.2.1.tgz

[gradio-pr-bot]

🦄 change detected

This Pull Request includes changes to the following packages.

Package	Version
website	patch

• Maintainers can select this checkbox to manually select packages to update.

With the following changelog entry.

Add search to website

Maintainers or the PR author can modify the PR title to modify this entry.

Something isn't right?

• Maintainers can change the version label to modify the version bump.
• If the bot has failed to detect any changes, or if this pull request needs to update multiple packages to different versions or requires a more comprehensive changelog entry, maintainers can update the changelog file directly.

[freddyaboulton]

Just looked at the functionality and I think it works well @aliabd ! Sometimes the ranking of the matches was a bit off. For example, I'd expect the Oauth guide to be near the top when searching "oauth" but it's the sixth result. Something we can fix in v2 if it isn't an obvious fix.

[abidlabs]

Heck yeah @aliabd! Works super well in my tests

The only nit I have is: would it be possible to automatically select the first search result, so that you could press enter and it would navigate to that page without having to navigate down and select it?

[abidlabs]

I thought I commented about this, but it seems to have disappeared: navigating to the right section in the page. For some searches, like "iframe" or "WaveformOptions", it would be great if it navigated to the right section in the page. Overall, not a huge pain point though.

[abidlabs]

Ok so one thing I noticed is that when multiple items on a page match a given query, it only selects one of them to show in the search preview. That's fine, but we should prioritize headings over other items. For example, when I search "waveformoptions", I expect it will preview this part of the docs:

However, it shows the parameter instead:

and a user may completely miss the fact that there's a section dedicated to gr.WaveformOptions

[hannahblair]

i'm getting a type error here locally (though the CI seems to pass lol)

Suggested change

	return results
	.map((index) => pages[index as number])
	.map(({ slug, title, content, type }) => {
	return {
	slug,
	title: replace_text_with_marker(title, match),
	content: get_matches(content, match),
	type
	};
	});
	return results
	.map((index: number) => pages[index as number])
	.map(({ slug, title, content, type }: Page) => {
	return {
	slug,
	title: replace_text_with_marker(title, match),
	content: get_matches(content, match),
	type
	};
	});

[aliabd]

weird i get an error with your change:

Argument of type '(index: number) => Page' is not assignable to parameter of type '(value: Id, index: number, array: Id[]) => Page'.
  Types of parameters 'index' and 'value' are incompatible.
    Type 'Id' is not assignable to type 'number'.
      Type 'string' is not assignable to type 'number'.ts(2345)

[aliabd]

but i don't see an error otherwise

[aliabd]

@freddyaboulton @abidlabs you're right that the ranking is a bit off. Maybe on v2 I can rank by # of occurrences on the page. I don't think prioritizing headers makes sense for how the code is structured right now, but will look into it. Navigating to the right spot would be killer imo but i definitely will need to rework how i'm generating the content database for that to work. Will do that in v2.

@abidlabs We can't autofocus the first result because it will take the cursor off the search box.

@hannahblair thanks for the changes! addressed all except for the one on search.ts

[abidlabs]

@abidlabs We can't autofocus the first result because it will take the cursor off the search box.

Not a big deal at all, but could pressing enter automatically go the first link?

[aliabd]

@abidlabs ok I made it work. First link is always in "focus" and pressing enter will go there, otherwise arrow down will move to the next link. Try it out and lmk what you think. I think it's pretty neat!

[abidlabs]

LGTM looks great to me @aliabd!