Note.: With this PR the /docs layout will be partially broken. The idea here is anyways to ignore the docs page for now as we're revisiting it and refactoring it in the near future.

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

Update:

• Finished all the migration to CSS modules and even more cleanup
• Now double-checking CSS optimisations and removing redundant things, renaming class names for simpler ones and double-checking components interfaces, style imports and stuff.
• Double checking that the style is still working as intended
• Then finally going to update the tests and finally add tests to the components that don't have ones.

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

Update:

• Finished all previous tasks
• Only need to add some more tests and double-check all existing ones

Would gently ask a review from @benhalverson @rodion-arr @manishprivet @mikeesto

Codecov Report

Merging #2676 (b0f3878) into main (1fcda83) will decrease coverage by 0.74%.
The diff coverage is 83.97%.

@@            Coverage Diff             @@
##             main    #2676      +/-   ##
==========================================
- Coverage   88.25%   87.51%   -0.75%     
==========================================
  Files         100      100              
  Lines         996      977      -19     
  Branches      276      252      -24     
==========================================
- Hits          879      855      -24     
- Misses        110      115       +5     
  Partials        7        7              

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

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

I've noticed that material-icons takes a good amount of bundle, so I'm going to switch from a font-based approach to an SVG one by using https://mui.com/material-ui/icons/#svg-material-icons

Done, updated to the usage of SVG-only icons. Bundle reduced by around 200KB. And the initial content shifting is also reduced, as the icons don't need to be swapped via font family.

Note.: I also enabled font-aliasing here to remove the sharp edges from fonts; it will give the impression on some screens that the font-weight got reduced, whereas it is just the font-aliasing algorithm that also changes from OS-to-OS and screen-to-screen.

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

Thank you, @mikeesto @manishprivet just a heads-up for other minor changes that happened here:

• Some components were fixed as their styles were mixed with globals causing some confusion, for example, the paddings of the search bar were wrong, the lists on the Navigation bar were wrong, the order of display for the recent-posts on desktop was wrong, and many other small styling artifacts and bugs
• There are numerous style changes, as you can see; many styles were removed, classes were renamed, and styles were optimised/"simplified" (some were hacky and messy)

I'm going to add tests on a follow-up PR as otherwise this PR will become way too massive.