Fix broken sandbox preview in react-three-fiber

[anonymousRecords]

related to pmndrs/react-three-fiber#3290, pmndrs/react-three-fiber#3154

Currently, there are issues that the 'react-three-fiber' official document does not show the preview screen of the Codesandbox properly.(e.g. https://r3f.docs.pmnd.rs/getting-started/your-first-scene#the-result)

So I solved the above error by changing the embed of Codesandbox to true.

However, I think Codesandbox is also using it in other off-source besides react-three-fiber, so I would like to ask for your opinion if there will be no problem.

export function Codesandbox({
  id,
  title = '',
  description = '',
  screenshot_url,
  tags = [],
  //
  hideTitle = false,
  embed = true, // false -> true

before	after

If you are concerned about the side effects of modifying the code of Codesandbox, I think there is also a way to modify the code of the mdx file of react-three-fiber as below.

// https://github.com/pmndrs/react-three-fiber/blob/master/docs/getting-started/your-first-scene.mdx?plain=1#L159C1-L159C27

<Codesandbox id="12q81" embed />

[abernier]

I've added the embed option lately, but hadn't enabled it until now, since it automatically "runs" the CSB which is ressource intensive (specially when there are many CSBs in the page)

we should rather investigate why there is a broken screenshot I think... (or how to regenerate them)

[anonymousRecords]

@abernier

I've added the embed option lately, but hadn't enabled it until now, since it automatically "runs" the CSB which is ressource intensive (specially when there are many CSBs in the page)

we should rather investigate why there is a broken screenshot I think... (or how to regenerate them)

Preview O	Preview X
https://r3f.docs.pmnd.rs/advanced/scaling-performance	https://r3f.docs.pmnd.rs/getting-started/your-first-scene
https://codesandbox.io/p/sandbox/color-grading-wvgxp	https://codesandbox.io/p/sandbox/getting-started-01-12q81?file=%2Fpackage.json

Currently, there are both cases in which the react-three-fiber official document has a preview or not.
So I compared 'Scaling performance > On-demand rendering with preview' and 'Your first scene > The result without preview'.

I think the preview looks different depending on whether thumbnail.png is ready or not.
To troubleshoot an issue that does not currently show a preview of the react-three-fiber official document

1. Add a thumbnail image to all examples, or
2. adding embed
   I think there are two ways.

I think it's a cumbersome task to add thumbnail to every example, so I'd like you to consider the embed.

[abernier]

in your 2 examples:

• one CSB screenshot is ok: https://codesandbox.io/api/v1/sandboxes/wvgxp/screenshot.png
  

• one is broken: https://codesandbox.io/api/v1/sandboxes/12q81/screenshot.png
  

What I'm saying, is: we could just ask codesandbox to regenerate the broken screenshot (to a new/updated one)

NB: the 2nd screenshot is not really broken, it is actually a screenshot, but with an error displayed on the page when it was generated => so it has to be updated

[abernier]

@drcmda as the owner of this CSB, can you force this? (the regeneration of its screenshot)

[abernier]

so I close the PR, as enabling preview does not really solve the png screenshot issue -- but thank you

[abernier]

@anonymousRecords if you know a way of individually forcing csb screenshot regeneration, please share it here

[anonymousRecords]

if you know a way of individually forcing csb screenshot regeneration, please share it here

Thank you! I will share when I find a way of individually forcing CSB screenshot regeneration.