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 22, 2024 4:14am

[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.14% (576/639)	72.08% (173/240)	93.91% (108/115)

Unit Test Report

Tests	Skipped	Failures	Errors	Time
131	0 💤	0 ❌	0 🔥	5.336s ⏱️

[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 We've rebased the code and fixed the tab cycle.

About the broken Links, it may be a deeper discussion.
Is there any chance that inside the doc APP, we default the no-language URLs to a default language (english, for example)?

[ovflowd]

Is there any chance that inside the doc APP, we default the no-language URLs to a default language (english, for example)?

I didn't get your question; could you rephrase it?

[RedYetiDev]

I didn't get your question; could you rephrase it?

I think they mean that https://nodejs.org/some-url will default to https://nodejs.org/en/some-url.

[rjborba]

I didn't get your question; could you rephrase it?

I think they mean that https://nodejs.org/some-url will default to https://nodejs.org/en/some-url.

Exactly it. Sorry, I dropped the message pretty late yesterday.

[ovflowd]

I didn't get your question; could you rephrase it?

I think they mean that nodejs.org/some-url will default to nodejs.org/en/some-url.

Exactly it. Sorry, I dropped the message pretty late yesterday.

That's fine by me if these are the links within the MDX AI results

[ovflowd]

Can you extract this from an inline type? Thanks

[rjborba]

✅

[ovflowd]

No return statement and arrow needed just direct => getFormattedPath(path, pageSectionTitle);

[rjborba]

✅

[ovflowd]

I'm happy with this landing as it is. Please just address the final comments and if possible, discard the package-lock.json changes from this PR and rerun npm i and then commit the package-lock

You can do that by doing: git checkout origin/main -- package-lock.json

[ovflowd]

Can the hover colour of this be the same of the other buttons on the right? 🙏

[ovflowd]

Also @micheleriva any chance your Search component can allow us to override the anchor <a> element? Any link you click on the Searchbox causes a hard refresh of the page as it is not using Next.js's router :) -- that is bad UX and also makes the experience be less smooth.

I'm fine merging as it is, but would appreciate that change ✨

[ovflowd]

Ah, I thought the fix for the Markdown links was here already? I still see these being broken, is that intended?

[micheleriva]

@ovflowd I completely understand and agree with you. Will provide a way to avoid full-page refreshes with an update in the coming weeks

[ovflowd]

@ovflowd I completely understand and agree with you. Will provide a way to avoid full-page refreshes with an update in the coming weeks

Oh yeah, no rush, we can follow-up on that <3

[rjborba]

Also @micheleriva any chance your Search component can allow us to override the anchor <a> element? Any link you click on the Searchbox causes a hard refresh of the page as it is not using Next.js's router :) -- that is bad UX and also makes the experience be less smooth.

I'm fine merging as it is, but would appreciate that change ✨

Is it fine if you are able to prevent default behavior and use router programatically? Like:

<OramaSearchBox
    onSearchResultClick={(e) => {
        e.preventDefault()
        // Call router to navigate
    }} />

[rjborba]

Also @micheleriva any chance your Search component can allow us to override the anchor <a> element? Any link you click on the Searchbox causes a hard refresh of the page as it is not using Next.js's router :) -- that is bad UX and also makes the experience be less smooth.
I'm fine merging as it is, but would appreciate that change ✨

Is it fine if you are able to prevent default behavior and use router programatically? Like:

<OramaSearchBox
    onSearchResultClick={(e) => {
        e.preventDefault()
        // Call router to navigate
    }} />

@ovflowd hi! I think you missed this message

[ovflowd]

Also @micheleriva any chance your Search component can allow us to override the anchor <a> element? Any link you click on the Searchbox causes a hard refresh of the page as it is not using Next.js's router :) -- that is bad UX and also makes the experience be less smooth.
I'm fine merging as it is, but would appreciate that change ✨

Is it fine if you are able to prevent default behavior and use router programatically? Like:

<OramaSearchBox
    onSearchResultClick={(e) => {
        e.preventDefault()
        // Call router to navigate
    }} />

@ovflowd hi! I think you missed this message

Oh, apologies, yeah feel free to implement this :)