(website redesign) Feat(shellbox): migration

[AugustinMauroy]

• Introduce shellBox in commonComponents

---

Related to #5193

[ovflowd]

BTW as mentioned in other PRs the folder should be components/Common

[tniessen]

Is there some context on this somewhere? I don't see any helpful comments or documentation, nor a reference to previous related work. Is this effectively a fancy <pre> for shell code?

[AugustinMauroy]

@tniessen It's an component form nodejs.dev use on index page.
So if you have any question say it.

[tniessen]

So if you have any question say it.

@AugustinMauroy I did:

Is this effectively a fancy <pre> for shell code?

[AugustinMauroy]

Is this effectively a fancy <pre> for shell code?

yes and no. it's use to do this.

So it's never use to do this

  ```js
  const a = 42
  '``

[manishprivet]

Is there some context on this somewhere? I don't see any helpful comments or documentation, nor a reference to previous related work.

@tniessen The reference issue for this PR is here at #5193

[ovflowd]

Left a few comments, but good work so far :)

[ovflowd]

We're almost there. Left some more comments and I'm curious about the similarities of ShellBox and CodeBox and if the two should be just one component with two different flavours

[AugustinMauroy]

If I have understood correctly, I have answered your questions @mikeesto 😁

[mikeesto]

Thanks @AugustinMauroy . Sorry to be a pain but the Without Text to Copy Jsx story doesn't seem quite right. When I copy that, I get <span><strong>$</strong>hello world</span> on my clipboard?

Could you also confirm if the syntax highlighting is meant to be part of this PR?

[AugustinMauroy]

Yup they are a problem with JSX and copy. and style is not an highlight it's style adde by InstallTabs.
But for the JSX copy I don't have any idea. RenderToString from react-server so it will increase the bundle size so no good. createRoot was not good because it's create a root 😆. So I'm void of idea.

[ovflowd]

story doesn't seem quite right. When I copy that, I get $hello world on my clipboard?

The purpose of that Story is just to remove the "textToCopy" and use the children as the "text" to copy. So the Story is working correctly, of course the children could be updated to remove the $, but it's just an example.

[ovflowd]

LGTM! We're ready to get this merged, but I left two little comments if they could be addressed :)

[AugustinMauroy]

I thinks we can merge