feat(search): implements Orama searchbox

[micheleriva]

Description

As discussed with @ovflowd, this PR implements the official Orama Searchbox.

Validation

Related Issues

Check List

• [x] I have read the Contributing Guidelines and made commit messages that follow the guideline.
• [x] I have run npm run format to ensure the code follows the style guide.
• [x] I have run npm run test to check if all tests are passing.
• [x] I have run npx turbo build to check if the website builds without errors.
• [x] I've covered new added functionality with unit tests if necessary.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Dec 3, 2024 4:10pm

[bmuenzenmeyer]

Sorry @micheleriva this has been idle for too long - it's been a messy few weeks. Are you looking for any particular feedback on the approach?

[ovflowd]

Looks like this is a draft yet, and most of the styles feel broken 🤔

[github-actions[bot]]

Unit Test Coverage Report

Lines	Statements	Branches	Functions
	90.2% (580/643)	72.08% (173/240)	93.96% (109/116)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
137	0 :zzz:	0 :x:	0 :fire:	4.924s :stopwatch:

[micheleriva]

Hey @bmuenzenmeyer, @ovflowd I'm sorry, I completely missed your comments. We found some bugs in the searchbox and dedicated more time to stabilize it.

We've been testing it for weeks on other websites so we believe it is finally ready. I still have to fix a small couple of things, then I'll open it for review 🙏

[ovflowd]

FYI @micheleriva build is failing:

@nodejs/website:build: Error: 
@nodejs/website:build:   x Expression expected
@nodejs/website:build:      ,-[128:1]

Did you try a prod build locally?

[ovflowd]

It feels like the results are less obvious.

[ovflowd]

Also it'd be great if there was some margin between the results

[ovflowd]

It also feels like the all results page should be removed? Not used anymore.

[ovflowd]

@micheleriva have you abandoned the PR? 🤔 -- do you need some assistance here?

[github-actions[bot]]

[!NOTE]
Your Pull Request seems to be updating Translations of the Node.js Website.

Whilst we appreciate your intent; Any Translation update should be done through our Crowdin Project. We recommend giving a read on our Translation Guidelines.

Thank you!

[rjborba]

Hi @ovflowd! Sorry it took so long to get back to you. As @micheleriva mentioned, we’ve been working on stabilizing the Searchbox. I’ve upgraded the version of Searchbox, which should fix the issue with the styles. I also removed the unused “All Results” page. However, we’re currently facing some issues with the build process, specifically during the minification step (Terser). We’re still investigating, and I’ll get back to you as soon as possible!

[github-actions[bot]]

Lighthouse Results

URL	Performance	Accessibility	Best Practices	SEO	Report
/en	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/about/previous-releases	🟢 100	🟢 100	🟢 100	🟢 92	🔗
/en/download	🟢 100	🟢 100	🟢 100	🟢 91	🔗
/en/blog	🟢 100	🟢 100	🟢 96	🟢 92	🔗

[micheleriva]

Hi @ovflowd, we believe this PR is ready for review and merge 🙏

[AugustinMauroy]

@micheleriva Is it possible to disable IA thing ?

[micheleriva]

Hey @AugustinMauroy, may I ask you what you don't like about it? I may be wrong, but I think @ovflowd wanted it on the website actually... Claudio, please tell me if I'm mistaken! We would really love to have it on the Node.js website.

[AugustinMauroy]

My fear is that this will answer something wrong and that there will be plenty of open issues because of it.

[micheleriva]

@AugustinMauroy, that's understandable. And that's our main area of focus. You can test it and see that if Orama is not 100% sure of the answer, it will just say "I don't know how to answer" rather than reply with something wrong. Also, we perform quality checks on every single conversation, and you'll have a way to determine how Orama is performing from this point of view.

We've been using this on some very big tech websites (TanStack, Deno, Solid.js, and more) without any real problem!

[AugustinMauroy]

Okay good to know. I'm currently doing some manual test. Is it possible to add a mention that orama's output may be inaccurate?

[micheleriva]

Right there already :)

[ovflowd]

@micheleriva as I mentioned before:

These all show the word fs but the previous behaviour was showing the actual name of the method,etc.

Also the links for API docs are broken, it attempts to prefix the language ie /en/docs -- on the previous one we had code that would check if the target is API docs and then remove the language prefix.

[ovflowd]

Also the AI links are broken, it is doing the opposite, not adding the language 🤔

[micheleriva]

@ovflowd, @rjborba and I are looking at this today. Will keep you posted

[AugustinMauroy]

I kept testing but was surprised. To summarise, I did a search with ai but I noticed that between each re-search, it kept the content as if it were the same discussion even though I had left the response view to return to the search mode.

[canerakdas]

If the hooks below are no longer used, can we remove them along with their tests? AFAIK, they were only used for searchbox and search results;

apps/site/hooks/react-client/useKeyboardCommands.ts
apps/site/hooks/react-client/__tests__/useKeyboardCommands.test.mjs

apps/site/hooks/react-client/useClickOutside.ts
apps/site/hooks/react-client/__tests__/useClickOutside.test.mjs

apps/site/hooks/react-client/useBottomScrollListener.ts
apps/site/hooks/react-client/__tests__/useBottomScrollListener.test.mjs

Also, the following files seem to be unused;

apps/site/components/Common/Search/index.module.css
apps/site/types/search.ts

[micheleriva]

@ovflowd what are we missing to merge this? Can we open separate issues for the remaining items?

[bmuenzenmeyer]

[important]

the latest code deployment doesn't construct urls correctly

1. https://nodejs-5wcfs9ie6-openjs.vercel.app/en
2. cmd+k
3. type Buffer
4. first result is https://nodejs-5wcfs9ie6-openjs.vercel.appundefined/

[bmuenzenmeyer]

[less important] clicking the overlay to dismiss the search modal does not clear out the input. I think most users would expect this to be a full cancel operation

1. https://nodejs-5wcfs9ie6-openjs.vercel.app/en
2. cmd+k
3. type Buffer
4. click off the modal, into the overlay, which dismisses the search modal
5. cmd+k again
6. Buffer still in input

[rjborba]

[important]

the latest code deployment doesn't construct urls correctly

1. https://nodejs-5wcfs9ie6-openjs.vercel.app/en
2. cmd+k
3. type Buffer
4. first result is https://nodejs-5wcfs9ie6-openjs.vercel.appundefined/

Hi! It supposed to be fixed now. Can you take a look? Thank you!

[rjborba]

[less important] clicking the overlay to dismiss the search modal does not clear out the input. I think most users would expect this to be a full cancel operation

1. https://nodejs-5wcfs9ie6-openjs.vercel.app/en
2. cmd+k
3. type Buffer
4. click off the modal, into the overlay, which dismisses the search modal
5. cmd+k again
6. Buffer still in input

Thanks for the feedback! We have that on our radar. We will address it on next releases