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 5, 2024 1:58pm

[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
	89.9% (543/604)	76.12% (169/222)	93.75% (105/112)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
128	0 💤	0 ❌	0 🔥	5.213s ⏱️

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

@rjborba yes, i see it working now 🤷 I'm okay with either prompt (or both)

Good to know!
So, is there anything else missing on this one from your POV?

[bmuenzenmeyer]

@rjborba can you review the keyboard accessibility?

• ✅ I can tab through the search bar from left to right
• ❌ I cannot shift-tab backwards right to left through the search bar
• ❌ I cannot tab to the search bar and start typing

[bmuenzenmeyer]

reviewing the comments - we have some follow ups , but i see the accessibility work and this comment as the last blockers

[rjborba]

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?

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

It feels like the results are less obvious.

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

Hey 👋 docs links are still prepending /en (https://nodejs-jhg3h8lv3-openjs.vercel.app/en/docs/v20.18.0/api/fs.html#fswritefilesyncfile-data-options)

The ones above supposed to be fixed

This one below we do agree with you guys, but we would appreciated if we could handle it in another PR

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

@rjborba can you review the keyboard accessibility?

• ✅ I can tab through the search bar from left to right
• ❌ I cannot shift-tab backwards right to left through the search bar
• ❌ I cannot tab to the search bar and start typing

I'm gonna take a look on it! Let me get back to you

[rjborba]

reviewing the comments - we have some follow ups , but i see the accessibility work and this comment as the last blockers

Hey, about this one, it should be fixed as well.

reviewing the comments - we have some follow ups , but i see the accessibility work and this comment as the last blockers

The comment mentioned here is also fixed.

We're working on tab order for the search button, but regarding start typing from there, what do you think instead we replace the placeholder for something like "Open Search" or "Click to open search"? Our original idea is that the Search Button work as indeed a button.

[bmuenzenmeyer]

We're working on tab order for the search button, but regarding start typing from there, what do you think instead we replace the placeholder for something like "Open Search" or "Click to open search"? Our original idea is that the Search Button work as indeed a button.

I like the idea of having the command - that's a reasonably common convention. cmd+k works - but tabbing to it should too IMO

[ovflowd]

Markdown links on the rendered Markdown doesn't seem to contain the language prefix for URLs on nodejs.org 🤔 which break the links. The links on these cards for pages within the website (except docs, also broken)

[ovflowd]

And when doing ESC the search box should reset IMO; Everything else seems to be working fine ✨ -- after these two fixes I think we are ready to merge :D

[ovflowd]

Apparently, it gets broken on Mobile (?) in terms of size. (Also not sure how helpful having that warning is for the end user xD)

[ovflowd]

We're working on tab order for the search button, but regarding start typing from there, what do you think instead we replace the placeholder for something like "Open Search" or "Click to open search"? Our original idea is that the Search Button work as indeed a button.

I like the idea of having the command - that's a reasonably common convention. cmd+k works - but tabbing to it should too IMO

Tabbing seems to be working for me, just need to hit enter or space.