feat(search): implements Orama searchbox

[micheleriva]

Description

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

Validation

Related Issues

Check List

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

[vercel]

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

Name	Status	Preview	Updated (UTC)
nodejs-org	✅ Ready (Inspect)	Visit Preview	Nov 29, 2024 4:38pm

[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]

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 💤	0 ❌	0 🔥	4.9s ⏱️

[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

[rjborba]

@ovflowd FYI we also started using next router to navigate. Experience should be smoother now. ✅

[ovflowd]

@rjborba, this is just an FYI: the AI-generated Markdown links are still broken. This can be done in a follow-up PR, but just a FYI, They don't have the language prefixes.

[ovflowd]

Also, I wonder how much extra bundle is added just for the search box. Can you give us some insights? We want to ensure that the users' experience is smooth.

[rjborba]

@rjborba, this is just an FYI: the AI-generated Markdown links are still broken. This can be done in a follow-up PR, but just a FYI, They don't have the language prefixes.

Hi @ovflowd it is actually fixed. But it takes in consideration the BASE_URL constant, which is resolving for something different than the ones on the Markdown answer on Next Preview.

We've added a callback to the Markdown URL so we have a opportunity to modify the HREF in runtime, after the LLM generates it. We want to add the locale when URL starts with the base URL (https://nodejs.org) and does not have /docs as initial path.

We could enhance it by using something like window.location.host instead, but current implementations works just fine when the host URL matches the one generated by the chat.

[ovflowd]

Can we not use window. APIs here at all, I'm pretty sure @/navigation's useRouter and usePathname have everything you need. Using global environment-based APIs hinders the ability of us to optimise this in the future.

[rjborba]

Hi!
I'm sorry, but I could not find a proper way to get current host through neither usePathname nor useRouter.
Also checked the other methods from createNavigation. Would you mind to let me know what API should I use?

Another solution would be go back to use "BASE_URL" from constants.

Please let me know

[ovflowd]

As mentioned before, you don't need to retrieve the host.

[ovflowd]

Explain why this is set to undefined within inline docs

[rjborba]

The URL provided on the callback event (event.details.result.path) always contains the locale because of the resultMap property. URLs are already good to be clicked on searchbox, with the locale being dynamically appended.

In summary, router.push from @navigator always append the locale for not undefined locale. It is bad because:
A) For /docs paths, we can not have the locale
B) We already add the locale on resultMap

[ovflowd]

I think you misunderstood me. I am asking you to add inline commentary on the code of why you passed this undefined; other people might not understand the why. (You don't need to explain the code; I 100% get how it works)

[ovflowd]

Let's ensure we always use brackets on if statements.

[rjborba]

Thanks! Should we add it to lint rules?

[ovflowd]

Feel free to do so 💯

[ovflowd]

Can you add the reasoning? This whole URL logic seems unnecessary, you can simply check if the href's pathname startsWith docs. You can accomplish that by

const { pathname } = new URL(href);

[rjborba]

Hi! The problem with your approach is that you are assuming that LLM will always reply with URLs related under nodes domain. What if one asks: can you give me the documentation URL from some companies that uses NodeJs?

Does it make sense to you?

[ovflowd]

Why do we care about comparing content from other domains? That's a pretty easy, if the URL does not start with https://nodejs.org then simply return href

That can be 100% hardcoded there and it is the simplest yet best approach here; You can add inline documentary explaining why and that the href can be other domains but we only care about nodejs.org domain

[ovflowd]

(Alternatively you can check against BASE_URL), the point is, these checks need to be deterministic. Using window.* is not deterministic and environment-specific.

[ovflowd]

OOC - Is there any way we can style the search button on the Navigation bar? It feels a bit fatty and different from the OG design 👀

[rjborba]

OOC - Is there any way we can style the search button on the Navigation bar? It feels a bit fatty and different from the OG design 👀

Currently we do not provide all possible customizations. We are going to work on it soon.
But if you want to costumize the roundness of the button you can define --radius-m variable.

[rjborba]

@ovflowd I've addressed you new comments, but dropped a reply on one of them. Would you mind to check? Thank you!

[ovflowd]

OOC - Is there any way we can style the search button on the Navigation bar? It feels a bit fatty and different from the OG design 👀

Currently we do not provide all possible customizations. We are going to work on it soon. But if you want to costumize the roundness of the button you can define --radius-m variable.

I see, it would be cool to allow we defining CSS variables; Like a templating system --ormama-button-something-something