feat(search): introduced search bar functionality

[ovflowd]

Description

This PR introduces (again) a search box for searching content from the Learn Tab. It indexes in the same way and it uses Elastic Lunr.

The original SearchBox component was copied from #1677 and modified both in functionality to work with the plugin and design to be more responsive.

Screenshots

Related Issues

Fixes #413

[ovflowd]

Note.: This search box is rendered on all pages. If you folks prefer it to only show on Learn, maybe UX-wise it would fit somewhere else?

[codecov-commenter]

Codecov Report

Merging #2502 (9853cdb) into main (c2d400b) will decrease coverage by 1.36%.
The diff coverage is 63.04%.

@@            Coverage Diff             @@
##             main    #2502      +/-   ##
==========================================
- Coverage   91.54%   90.18%   -1.37%     
==========================================
  Files          85       87       +2     
  Lines         923      968      +45     
  Branches      249      261      +12     
==========================================
+ Hits          845      873      +28     
- Misses         78       95      +17     

Impacted Files	Coverage Δ
src/components/Header/index.tsx	100.00% <ø> (ø)
src/components/SearchBar/SearchInput.tsx	59.52% <59.52%> (ø)
src/components/Layout/index.tsx	100.00% <100.00%> (ø)
src/components/SearchBar/index.tsx	100.00% <100.00%> (ø)

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c2d400b...9853cdb. Read the comment docs.

[github-actions]

Please find a preview at: https://staging.nodejs.dev/2502/

[benhalverson]

Hi @ovflowd Thanks for working on this. I like the global search over the /learn specific one.

I noticed there are horziontal and vertical scrollbars for the search bar divs.

[ovflowd]

Hey @benhalverson quite interesting, let me see if removing the overflow styles could work.

Would you mind telling me if you're using Linux/Windows? Cause on macOS I'm not able to reproduce this, nor on Fedora.

[ovflowd]

Also, thanks for enjoying this approach! I thought that a global approach would be easier for people to notice, and also a version that auto-expands doesn't consume that much real-estate 👀

[ovflowd]

I introduced some style fixes and improved how the search container resizes dynamically based on your screen size 😄

[benhalverson]

Would you mind telling me if you're using Linux/Windows? Cause on macOS I'm not able to reproduce this, nor on Fedora.

I was testing on Windows 10 with Chrome

[github-actions]

Please find a preview at: https://staging.nodejs.dev/2502/

[ovflowd]

I was testing on Windows 10 with Chrome

Gotcha! Hopefully latest changes fix your issue 🙇

[github-actions]

Please find a preview at: https://staging.nodejs.dev/2502/

[github-actions]

Please find a preview at: https://staging.nodejs.dev/2502/

[benhalverson]

👍🏻

[ovflowd]

@benhalverson I updated the SearchInput's CSS to match more the design from the Figma's.

I also fixed the results not clearing when collapsing and added a limit of 20 results, so that it doesn't show an infinitude of results.

[github-actions]

Please find a preview at: https://staging.nodejs.dev/2502/