feat(codebox): adding possibility to switch between lang

[AugustinMauroy]

Description

Adding possibility to switch between lang.
The label lang it's obligatory in lower case. It's more beautiful (personally) and it's better for dyslexia.
Modifying about content (```javascript -> ``js).

Todo list:

• Switch lang
• Update unit test
• Modifying about content (```javascript -> ``js)
• Add possibility to use sync|async in "Lang" of code box

Demo:

code:

  '''cjs|esm
  const { createServer } = require('http');
  -------
  import { createServer } from 'http';
  '''

Enregistrement.de.l.ecran.2023-03-05.a.12.15.33.mov

Feature unsupported

  '''sync|async
  CODE sync
  -------
  CODE async
  '''

Related Issues

Related #2844 (feature of switching not for parsing of dock)

[AugustinMauroy]

Need help:

• When I click to switch to another language (on the button with the writing language) for the first time nothing happens. I have to click twice to switch and then everything is fine.
  It is as if the code had to heat up.
• Design: I find that if you don't know it's a switcher you can't see it. Any ideas?

[ovflowd]

Quick Note: This PR should only land after the changes in the generator are done so that if any change happens there, this PR can be updated accordingly.

I see a few fundamental logic problems in this PR, such as how you're handling switching from another language and how you store the current language. Here's my suggestion 🙂

1. From the go, you should have "languageOptions"; this is what you should store from the matches?.groups?.lang
2. You should only have a state for langIndex
3. Getting the current language and current label should come from languageOptions[langIndex]

Last, I believe you're in the right direction, but still you need to revise a little bit your logic here :)

[codecov-commenter]

Codecov Report

Patch coverage has no change and project coverage change: -0.49 ⚠️

Comparison is base (fd57b87) 66.02% compared to head (6fdca4d) 65.53%.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3249      +/-   ##
==========================================
- Coverage   66.02%   65.53%   -0.49%     
==========================================
  Files         118      145      +27     
  Lines        1351     1741     +390     
  Branches      342      407      +65     
==========================================
+ Hits          892     1141     +249     
- Misses        422      555     +133     
- Partials       37       45       +8     

Impacted Files	Coverage Δ
src/templates/blog.tsx	0.00% <0.00%> (-100.00%)	⬇️
src/hooks/useNodeJsContributorsApi.tsx	73.61% <0.00%> (-26.39%)	⬇️
src/hooks/useDetectOs.ts	80.00% <0.00%> (-20.00%)	⬇️
util-node/getNodeReleasesData.js	91.30% <0.00%> (-6.32%)	⬇️
src/__fixtures__/page.tsx	94.11% <0.00%> (-5.89%)	⬇️
src/pages/index.tsx	100.00% <0.00%> (ø)
src/templates/api.tsx	0.00% <0.00%> (ø)
src/templates/learn.tsx	100.00% <0.00%> (ø)
util-node/createSlug.js	100.00% <0.00%> (ø)
util-node/getNvmData.js	100.00% <0.00%> (ø)
... and 187 more

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

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[ovflowd]

An unrelated comment, can we update the interface Props to be something like:

type Props = PropsWithChildren<PropsWithChildren<{ className: string | null }>>

[AugustinMauroy]

What do you think about allowing an sync|async entry?

[github-actions]

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

[ovflowd]

This PR is ready. I would just ask to reply to my questions and remove the writing content doc from this PR and I think I can approve it :)

[ovflowd]

Superb work, @AugustinMauroy. It took a while, but we got to the right direction :)