feat: 🎸 search

[benhalverson]

Initial implementation of a client side search.
It current only searches through the /learn material.
The search bar is only visible on /learn or /learn/* at the moment.

Things todo in future PR's

• allow keyboard shortcuts to open and close the search dropdown
• improved accessibility
• make it a global site search instead of just the learn docs

co-author: @Mpaulo95

[github-actions]

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

[manishprivet]

Functionality-wise, it looks good to me.

We'll have to deal with these console errors though

One other thing I noticed is that the primary js file in the production bundle increased from 27.7KB to 52.6 KB, maybe because for client-side search it must have been bundling the data about all the learn pages everywhere.

If that's the case, this size is likely to increase a lot more when we start indexing docs and blogs, and that might be a concern.

nodejs.dev

This PR

[benhalverson]

If that's the case, this size is likely to increase a lot more when we start indexing docs and blogs, and that might be a concern.

Good point... I didn't look at the bundle sizes. I did see an option to lazy load in the docs for https://www.gatsbyjs.com/plugins/gatsby-plugin-local-search/ but I get a cross-origin react error when I try to use it.
🤷🏻‍♂️
I think the current implementation is ok for now.

[github-actions]

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

[github-actions]

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

[github-actions]

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

[codecov-commenter]

Codecov Report

Merging #1677 (2537fa9) into main (f85dbb3) will decrease coverage by 1.78%.
The diff coverage is 55.55%.

@@            Coverage Diff             @@
##             main    #1677      +/-   ##
==========================================
- Coverage   90.67%   88.88%   -1.79%     
==========================================
  Files          81       83       +2     
  Lines         879      927      +48     
  Branches      241      262      +21     
==========================================
+ Hits          797      824      +27     
- Misses         81      102      +21     
  Partials        1        1              

Impacted Files	Coverage Δ
src/components/SearchBar/index.tsx	33.33% <33.33%> (ø)
src/components/SearchBar/SearchInput.tsx	52.77% <52.77%> (ø)
src/components/Header/index.tsx	95.23% <75.00%> (-4.77%)	⬇️
src/containers/Navigation/index.tsx	68.18% <100.00%> (-1.59%)	⬇️
src/hooks/useMediaQuery.tsx	100.00% <0.00%> (ø)
util-node/createDocPages.js	100.00% <0.00%> (ø)
src/util/scrollTo.tsx	35.13% <0.00%> (+1.80%)	⬆️

---

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 f85dbb3...2537fa9. Read the comment docs.

[github-actions]

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

[github-actions]

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

[designMoreWeb]

LGTM