Fix broken sandbox preview in react-three-fiber

anonymousRecords commented 2 months ago

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 commented 2 months ago

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 commented 2 months ago

@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 commented 2 months ago

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 commented 2 months ago

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

abernier commented 2 months ago

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

abernier commented 2 months ago

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

anonymousRecords commented 2 months ago

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.

pmndrs / docs

Fix broken sandbox preview in react-three-fiber #294