docs(playground): use CodeSandbox cloud sandboxes

[danilowoz]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This proposes to update the CodeSandbox playground link to the new cloud sandbox experience.

CodeSandbox Cloud sandboxes is a next-generation development environment tool that emphasizes speed and collaboration. It allows multiple users to work on the same project at the same time, is tailored to integrate directly with your project, and is hosted in the cloud on microVMs technology. It also integrates with source control, so every branch has its own development environment with a unique URL that can be shared and accessed even when offline. Repositories also offer quick setup, with new branches and development environments set up in seconds. Additionally, it works with VS Code and has an iOS native app for mobile development.

Test Plan

Test links

Deploy preview: https://deploy-preview-8576--docusaurus-2.netlify.app/docs/playground/

Related issues/PRs

[netlify]

✅ [V2]

Built without sensitive environment variables

Name	Link
🔨 Latest commit	8719d37
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/63d24f6f833e55000889b13b
😎 Deploy Preview	https://deploy-preview-8576--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 70	🟢 97	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 82	🟢 100	🟢 100	🟢 100	🟢 90	Report

[slorber]

Thanks

It looks good to me and loads much faster than before.

We can do this if you think it's better, just curious what's the main outcome for our users using this new technology? Is it stable enough?

Also, do you offer a simple markdown editing + git commit interface like StackBlitz CodeFlow?
https://developer.stackblitz.com/codeflow/content-updates-with-web-publisher

We might want to integrate something like this in our "edit this page" button, presenting a modal with multiple choices to edit.

[slorber]

Is this expected to not have a clean URL?

Will it self-update if we update our examples/classic folder?
(we count on this to make sure the playground is always on the latest version)

[danilowoz]

I just updated the URL to use another sandbox, which will be synced with the repository and with a clear slug.

[danilowoz]

Hey, the previous sandbox/link uses the SSE CodeSandbox technology, which uses dedicated containers, it is in kind of a maintenance mode now due to a lot of technical limitations and costs. So, we're encouraging migrating all these sandboxes to the newest CodeSandbox Micro VM sandboxes, which are way more reliable and faster than anything else.

Edit this page button: We can already support it. For example, you could use the following URL to point the file you want to edit, click fork, edit and then open a PR. But more than just supporting it, we would love to know how we can make this experience even smoother. So please, let us know what's your thought about that.

Example: https://codesandbox.io/p/github/facebook/docusaurus/main?file=%2Fwebsite%2Fdocs%2Fplayground.mdx
Pattern: https://codesandbox.io/p/github/[org]/[repo]/[branch]?file=[file path]

Here's how this would work with two clicks:

Screen.Recording.2023-01-26.at.10.17.56.mov

[slorber]

Thanks for the explanation.

I'll merge this as it's easy to revert anyway in case of problems

---

codesandbox.io/p/github/facebook/docusaurus/main?file=%2Fwebsite%2Fdocs%2Fplayground.mdx

I'm not able to pass the auth screen, the button doesn't seem to work and redirects me to the same page 😅

---

Regarding the edit markdown experience, it's me that suggested to StackBlitz to create a custom experience to edit docs (not using the same layout as their main IDE layout)

I believe the simpler the layout the better for casual docs contributors. We are looking for a better "GitHub edit view" feature here with a real preview, so just 2 panes (markdown/preview) and a big "save" button should be good enough in most cases.

[danilowoz]

Just noted that docusaurus.new is still pointing to the old link, it would be amazing to have the new sandbox link. How can we address that?

[slorber]

@danilowoz I also noticed that and it's already fixed. It's because our netlify serverless deployment for docusaurus.new was stuck and didn't deploy. Now it should be fine.