[docs-infra] Implement search engine in v5 documentation page

[PabloLION]

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

• In chrome, after using stack overflow, an search engine (managed with uri chrome://settings/searchEngines) is added to chrome omnibar, so when user types stack then with [tab] key a search on stack overflow can start directly. (when I search abcdef it will open the page https://stackoverflow.com/search?q=abcdef)
• I want to use this same function on https://mui.com/ maybe https://mui.com/search?q=abcdef can redirect to the homepage with the popup with abcdef typed in the pop-up.

Examples 🌈

• MDN: https://twitter.com/chantastic/status/1704924964804334064 Using DuckDuckGo Bang feature.
• Wikipedia:

Motivation 🔦

Usability

[PabloLION]

This is also about the search function although its not about the search bar component on the web. Linking it with #28415.

Also I'm thinking about making an PR to solve this issue. So if there's no one doing this right now, maybe @mnajdova can assign this to me?
I asked because it might take more time to discuss about the PR than assigning someone inside the team to do it. For example, I don't know how do you think about the idea "direct to the homepage with abcdef inputed in search pop-up." Maybe you want another way to achieve the effect?

[PabloLION]

Hi @mnajdova. Recently I've been busy. I will try it next week on Christmas vacation.

[mnajdova]

@siriwatknp @hbjORbj before @PabloLION starts do you have some tips/doubts around this?

[siriwatknp]

@siriwatknp @hbjORbj before @PabloLION starts do you have some tips/doubts around this?

From my understanding, the intention of @PabloLION is to improve the UX of the search. If there is no impact on the current behavior, I don't have any objection.

[PabloLION]

I confirm what @siriwatknp said, that my PR will not change any function of current function. I just took a look at the repo and it's so clean! I like it a lot! (although there's a typo in docs/pages/index.tsx, you'll see it in the PR)

However, I'm failing to locate where does the route happens:
I see in docs/pages/_app.js there's a findActivePage methods seems to do this job, yet it is in a JS file. Does the _app.js imply that it's outdated and needs updating to JS? or you are keeping it deliberately a JS file?

• Should I change this docs/pages/_app.js file to add a new route?

My plan would be to first change https://mui.com/search to the homepage with the <DeferredAppSearch> opened.
Then add the query string to the search box. And do some exact match like when search keyword isbutton api.
Then add the search engine function of chrome (I've never used mozilla or other browsers, maybe you need to add it yourself, maybe it's a tag which works cross-browser)

• How does the plan sound to you?

[mnajdova]

Should I change this docs/pages/_app.js file to add a new route?

all pages are inside docs/src/pages.ts

How does the plan sound to you?

Sounds good, let's start and once we have something working we can polish it :)

[PabloLION]

Hi, @mnajdova

Should I change this docs/pages/_app.js file to add a new route?

Now I clearly see why this file doesn't need to be changed. It seems a next.js wrapper.

• I noticed the file docs/src/pages.ts ​but it's for static routing to the pages.​ Not sure if I can use dynamic routes.

• added a docs/pages/search.tsx page

  • reason, tl;dr

    The feature I want is like said in the summary, to parse URLs like `https://github.com/search?q=material-ui`. Lots of platforms use `/search` as the search page route but since we don't have a real search page.

• What should I do to avoid this? Adding a props to docs/pages/index.tsx like in docs/pages/versions.js with interface {withSearchPopup: boolean; keyword: string}. It seems like a wrong way to pass props through Home -> AppHeader -> DeferredAppSearch.

  • My approach: I used a new DeferredAppSearch component, but I cannot import it. So I copied the code. (I left a reverted commit for you to test/fix)

• Add query to Next Router

  • With error Url '/search' defines a query parameter 'q' that is missing in exportPathMap

• Adding Search engine

[PabloLION]

I didn't finish the part of automatic adding to search engine. It seems I need to create a new "OpenSearch description file". Yet I don't have the access to your netlify or other servers.

@siriwatknp, maybe you can consider doing this.

[oliviertassinari]

This seems to be a continuation of #16764, great.