feat: Update devbox embedding description + add sandboxes (#217)

* feat: Update devbox embedding description + add sandboxes

Embed a devbox in docs, blog posts, Medium, and other websites. Additionally, Devbox embeds still lack some of the customization options that are available in legacy sandbox embeds.

* fix: fix typos and improve wording

---------

Co-authored-by: Filipe Lima <45261568+filipelima18@users.noreply.github.com>

packages/projects-docs/next.config.js

@@ -530,11 +530,6 @@ module.exports = withNextra({
         destination: "/learn/legacy-sandboxes/deployment",
         permanent: false,
       },
-      {
-        source: "/learn/sandboxes/embedding",
-        destination: "/learn/legacy-sandboxes/embedding",
-        permanent: false,
-      },
       {
         source: "/learn/sandboxes/live-sessions",
         destination: "/learn/legacy-sandboxes/live-sessions",

packages/projects-docs/pages/learn/devboxes/embedding.mdx

@@ -1,7 +1,7 @@
 ---
 title: Embedding
 authors: ['CompuIves']
-description: Embed a sandbox in docs, blog posts, Medium, and other websites.
+description: Embed a devbox in docs, blog posts, Medium, and other websites.
 ---
 
 import { Callout } from 'nextra-theme-docs'
@@ -77,4 +77,4 @@ As Devbox embeds are in beta, some more advanced options are currently unavailab
 
 Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds.
 
-Additionally, Devbox embeds still lack some of the customization options that are available in browser sandbox embeds. 
+Additionally, Devbox embeds still lack some of the customization options that are available in legacy sandbox embeds. 

packages/projects-docs/pages/learn/sandboxes/_meta.json

@@ -2,6 +2,7 @@
   "editor-features": "Editor Features",
   "templates": "Templates",
   "cli-api": "CLI & API",
+  "embedding": "Embedding",
   "custom-npm-registry": "Custom NPM Registry",
   "faq": "FAQ"
 }

packages/projects-docs/pages/learn/sandboxes/embedding.mdx

@@ -0,0 +1,74 @@
+---
+title: Embedding
+authors: ['CompuIves']
+description: Embed a sandbox in docs, blog posts, Medium, and other websites.
+---
+
+import { Callout } from 'nextra-theme-docs'
+import Video from '../../../../../shared-components/Video'
+
+# Embedding
+
+## What is an Embed?
+
+An embed lets you include a running sandbox in your documentation, blog post, or
+website.
+
+### Embedding Sandboxes 
+
+Sandbox embeds enhance the learning and reading experience for anyone by providing a practical, interactive, and hassle-free way to explore and experiment with code examples. In addition, embeds allow users to interact with code examples directly from an article or blog post, from where users can directly run, modify, and experiment with the code in a live environment. Also, embeds can be a great solution if you want to show examples of applications.
+
+
+<Callout>
+Embeds for Sandboxes are currently in beta.
+</Callout>
+
+## Generate an Embed URL
+
+You can generate a URL to embed by clicking the `Share` button inside the editor of a Sandbox and then clicking on 'Copy embed code'.
+
+This will give you HTML code with an iFrame that you can paste into your content.
+
+![Devbox Embed](../images/embed-cloud-sandbox.jpg)
+
+
+## Example Embed
+
+Below is an example of the iFrame to embed a React sandbox:
+
+```html
+<iframe
+  style={{
+    width: "100%",
+    height: 900,
+    outline: "1px solid #252525",
+    border: 0,
+    borderRadius: 8,
+    marginBottom: 16,
+    zIndex: 100
+  }}
+  src="https://codesandbox.io/p/sandbox/react-new?file=/src/index.js"
+></iframe>
+```
+
+This code outputs the following embed:
+
+<iframe
+  style={{
+    width: "100%",
+    height: 900,
+    outline: "1px solid #252525",
+    border: 0,
+    borderRadius: 8,
+    marginBottom: 16,
+    zIndex: 100
+  }}
+  src="https://codesandbox.io/p/sandbox/react-new?file=/src/index.js"
+></iframe>
+
+## Limitations
+As Sandbox embeds are in beta, some more advanced options are currently unavailable.
+
+Notably, the embed viewer cannot change the sandbox before forking it, so inline editing is not currently supported on these embeds.
+
+Additionally, Sandbox embeds still lack some of the customization options available in legacy sandbox embeds.