Merge pull request #260 from codesandbox/PC-1877/vs-code-update

VS Code default editor docs

Author: necoline

packages/projects-docs/next.config.js

@@ -583,6 +583,64 @@ module.exports = withNextra({
         destination: "/learn/devboxes/overview",
         permanent: false,
       },
+      /*
+           Redirects for switch to vs code editor
+      */
+      {
+        source: "/learn/editors/web/overview",
+        destination: "/learn/editors/web-interface",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/ios/overview",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/vscode/overview",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/ios/setting-up-ios",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/ios/shortcuts",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/vscode/overview",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/web/overview",
+        destination: "/learn/editors/web-interface",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/web/commandpalette",
+        destination: "/learn/editors/web-interface",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/web/shortcuts",
+        destination: "/learn/editors/shortcuts",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/ios/setting-up-ios",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
+      {
+        source: "/learn/editors/themes",
+        destination: "/learn/editors/overview",
+        permanent: false,
+      },
     ];
   },
 });

packages/projects-docs/pages/faq.mdx

@@ -68,7 +68,7 @@ recommend using a [Devbox](/learn/devboxes/overview).
 
 ## Can I change the Node version used in a Devbox?
 
-Yes, we have instructions [here](https://codesandbox.io/docs/learn/environment/vm#configuring-nodejs-version) that tell you how to change the Node version. All recent server sandboxes run in a Devbox.
+Yes, we have instructions on the [VM configuration](https://codesandbox.io/docs/learn/environment/vm#configuring-nodejs-version) page that tell you how to change the Node version. All recent server sandboxes run in a Devbox.
 
 ## How can I change the editor's theme?
 
@@ -118,7 +118,7 @@ Yes, you can use multiple databases in the same project by running multiple Dock
 
 ### Can I use Docker Compose in CodeSandbox?
 
-Yes, you can use Docker Compose in CodeSandbox to orchestrate multiple containers and define the relationships between them. However, you'll need to create a Docker Compose file and run the `docker-compose` command in the terminal to start the containers. We share more about this [here](https://codesandbox.io/docs/tutorial/getting-started-with-docker#4-create-docker-compose-file).
+Yes, you can use Docker Compose in CodeSandbox to orchestrate multiple containers and define the relationships between them. However, you'll need to create a Docker Compose file and run the `docker-compose` command in the terminal to start the containers. We share more about this [in our Docker tutorial](https://codesandbox.io/docs/tutorial/getting-started-with-docker#4-create-docker-compose-file).
 
 ### Is it safe to use a database in CodeSandbox with Docker support?
 
@@ -268,9 +268,10 @@ The user will receive an email invitation and in-app notification asking them to
 You can leave or delete a workspace from the "Overview" tab of your [Workspace Settings](https://codesandbox.io/t/overview), by clicking on "Leave workspace", or "Delete workspace", respectively.
 
 There are some cases where leaving a workspace is not permitted.
-1. You are the only workspace member with admin rights: Every workspace requires at least one admin member. Before you can leave the workspace, you must assign a new admin. 
 
-2. You are trying to leave the only workspace connected to your account: Every account must be associated with at least one workspace. If you want to leave the only workspace connected to your account, you may create a new workspace and then leave the workspace you want to be disassociated with. Alternatively, deleting your account will remove you from any workspaces that you are a member of. 
+1. You are the only workspace member with admin rights: Every workspace requires at least one admin member. Before you can leave the workspace, you must assign a new admin.
+
+2. You are trying to leave the only workspace connected to your account: Every account must be associated with at least one workspace. If you want to leave the only workspace connected to your account, you may create a new workspace and then leave the workspace you want to be disassociated with. Alternatively, deleting your account will remove you from any workspaces that you are a member of.
 
 ## How can I change my account's email address?
 
@@ -343,8 +344,7 @@ If everything seems to be in order but you're still having issues with the payme
 
 ## Can I change my subscription?
 
-Yes, you can upgrade or downgrade your plan at any time from the settings page. 
-
+Yes, you can upgrade or downgrade your plan at any time from the settings page.
 
 ## How can I add more credits?
 

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

@@ -1,13 +1,13 @@
 {
   "index": "Introduction",
   "guides": "Getting Started",
+  "editors": "Editors",
   "-- cloud-development": {
     "type": "separator",
     "title": "Cloud Development"
   },
   "repositories": "Repositories",
   "devboxes": "Devboxes",
-  "editors": "Editors",
   "ai": "AI",
   "environment": "Environment",
   "integrations": "Integrations",

packages/projects-docs/pages/learn/ai/boxy.mdx

@@ -5,61 +5,71 @@ description: Introduction to Boxy the AI-powered coding companion
 
 import { Callout } from 'nextra-theme-docs'
 
-
 # Meet Boxy
 
-Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.  
+<Callout emoji="⚠️">Boxy will be deprecated on July 31, 2024.</Callout>
+
+Boxy is an experimental AI-powered chat tool that is built directly into your editor. Boxy is aware of your code and can answer questions and make suggestions that consider best practices and conventions that are specific to your project.
 
 ![run project with boxy](../images/boxy-overview.jpg)
 
 ## Boxy in the Editor
-If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar. 
 
-![run project with boxy](../images/boxy-avatar.jpg) 
+If you have granted AI permissions in the workspace settings. You will notice the newest addition to your team sitting next to your avatar.
+
+![run project with boxy](../images/boxy-avatar.jpg)
 
 The easiest way to work with Boxy is to select a piece of code and choose a saved prompt. When you select the code, you will see a toolbar hover above the top line of the selected code. From there, you can either open the DevTool to chat with Boxy or run a saved prompt.
 
 ![run project with boxy](../images/boxy-toolbar.jpg)
 
-
 - **Edit** shows prompts related to refactoring code.
 - **Ask** shows prompts related to chat actions.
 - The **AI icon** opens a chat DevTool.
 
 ### Command Palette
-Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`. 
- 
-From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to. 
- 
+
+Saved prompts are listed in the command palette. You can access them from the toolbar using `⌘ + ⇧ + H`.
+
+From here, you can search for or select a prompt from the list. Alternatively, you can type a custom prompt, which Boxy will quickly respond to.
+
 When you ask Boxy to perform an action like `Document Code` or `Improve Readability` and you have code selected in the editor, Boxy will make suggestions directly in the file.
 
 If you ask Boxy to `Explain Code` or `Consider Security`, the chat DevTool will automatically open with Boxy's response.
- 
 
 ## Boxy Chat
+
 Open a chat DevTool to have a conversation with Boxy. You can open a chat in two different ways:
+
 - select the AI icon in the toolbar.
 - open a new DevTool and select `Chat with Boxy`.
 
-You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat. 
+You can have multiple chats open at the same time. If you need to change topics but don't want to lose your progress in your last conversation, simply select `+` in the input to create a new chat.
 
 Below are a few tips and tricks that can help you make the most of your interactions with Boxy.
 
 ## Tips and Tricks
+
 ### Tips
+
 **Keep chatting**
 Boxy remembers your previous conversations and takes them into account when providing responses. For example, if you have asked Boxy to include the file path for the suggested code repeatedly in the past, it will include it in future responses.
 
 **Request response formats**
-Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like. 
+Do you prefer that Boxy always provides suggestions in insertable snippets? Or do you prefer to see the code situated within the full file? Ask Boxy to `"always respond with ___"` to receive suggestions in the way you like.
 
 **When in doubt, provide more context**
 Boxy will give you what you ask for. They may make suggestions based on the way your frame your question. Boxy may have better responses when you ask them to consider specific files or libraries that may contain useful context for your question.
 
 ### Tricks
+
 - use backticks for keywords or code segments
 - use "again" to repeat your last prompt
 
 ## Commit suggestions
+
 Say goodbye to nondescriptive or confusing commit messages. When you enable AI to work on repositories, Boxy will automatically generate commit messages based on the files changed in your branch. You can easily edit or remove these suggestions according to your preference.
 
+## Boxy for Sandboxes
+
+Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your Sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.

packages/projects-docs/pages/learn/ai/faqs.mdx

@@ -21,4 +21,4 @@ Yes. Boxy is available in all plans.
 
 No. Boxy is exclusively available in devboxes and repositories. However, you can easily [convert a Sandbox into a Devbox](/tutorial/convert-browser-sandbox-cloud) to get access to Boxy. This is available through the "Convert to Devbox" button at the top right of the Sandbox editor.
 
-![Convert browser sandbox](../images/convert-sandbox-from-ai.png)
+![Convert Sandbox to Devbox](../images/convert-sandbox-to-devbox.jpg)

packages/projects-docs/pages/learn/ai/getting-started.mdx

@@ -4,19 +4,13 @@ description: Instructions for getting started with AI
 ---
 
 # Getting Started
-All CodeSandbox AI tools are available for Pro users. To enable these features, admins need to grant permissions in the workspace settings.
-
-![run project with boxy](../images/boxy-permission.jpg)
 
+All CodeSandbox AI tools are available to Free and Pro users. To enable these features, admins need to grant permissions in the [workspace settings](https://codesandbox.io/t/permissions).
 
+![AI Permissions](../images/ai-permissions.jpg)
 
 Once you grant AI permissions, CodeSandbox will send information about the event to OpenAI for analysis. Under no circumstances will we send any event data to OpenAI without explicit instruction to do so. We will only share selected event data with OpenAI after you toggle on these permissions. OpenAI does not use the event data shared via this feature to train its AI models. To learn more about our privacy agreement with OpenAI, check out our [Privacy page](https://codesandbox.io/legal/privacy).
 
 ## Running AI
-Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.		
-
-## Boxy for Sandboxes
-Boxy is available only on repositories and Devboxes. If you want the support of Boxy in your Sandbox, you can easily [convert your sandbox](/tutorial/convert-browser-sandbox-cloud) using the options in the toolbar.
-
-
 
+Once permissions have been granted, you need to restart the VMs for the changes to take effect. You can do this by selecting `Restart Branch` in the main menu. If you are in a Devbox, the option will read `Restart Sandbox`.

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

@@ -1,57 +1,30 @@
 ---
-title: DevTools - The Basics
-description: 
+title: DevTools
+description: Learn how CodeSandbox DevTools work and how they can be useful to boost your productivity.
 ---
 
 import { Callout } from 'nextra-theme-docs'
-import Video from '../../../../../shared-components/Video'
 
 # DevTools
- 
-DevTools allow you to work faster and more efficiently. They are useful for debugging, testing, and developing. They are collaborative by default, allowing you to share their content: a terminal output, a preview error, a console log...
 
+The CodeSandbox DevTools panel aggregates a series of tools that allow you to work faster and more efficiently. Among these tools, you will find Previews, Tasks and Shared Terminals.
 
-<Video src="../../devtools-management.mp4" />
-
-Add as many DevTools as you want. Each one lives in its own tab and each tab can be moved around, reordered or dropped into another tab to split the view.
-
-When a tab is closed, the layout will re-arrange to fill up all the available space. Your layout is persisted in the browser, so you will see the same DevTools when you come back later to your VM.
-
-<Callout emoji="→">
-Closing a DevTool will not stop it—it will keep running in the background. If you want to stop the process, you must select the option `Close and stop` from the dropdown menu `...`. 
-</Callout>
+![CodeSandbox DevTools](../images/devtools.jpg)
 
-## Open a DevTool
+## Previews
+Any [previews](./preview) associated with your project, namely those spun up by tasks, will be accessible in a port listed under `Previews` in the DevTools tab. Each preview will show a tag next to it to identify its associated task, or show `Unconfigured` if no task is tied to it.
 
-There are three main ways to open a new DevTool:
+Clicking on a listed preview will open it on the right side of the editor.
 
-1. Clicking on the `+` sign on the right side of any tabbed panel. This presents a list of available DevTools—and clicking on any DevTool will open it in the current tab.
-2. Double-clicking anywhere between the tabs and the `+` button.
-3. Pressing <kbd>Cmd/Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>.
-
-
-## DevTools configuration
-
-You can control the name and position of your DevTools, as well as define which DevTools run when you open the Web Editor. Check the [Tasks](./task) documentation for more information on how to configure the DevTools.
-
-<Callout emoji="⭑">
-Setting up the DevTools makes it easier for non-developers to access and run your project.
+<Callout emoji="💡">
+You can also see the list of ports in the terminal panel under the `Ports` tab at the bottom of the editor.
 </Callout>
 
-## Available DevTools
-
-- **[Preview](./preview)**
-- **[Task](./task)**
-- **[Terminal](./terminal)**
-- **VM resource usage**
-- **Debug ([Chrome DevTools](https://developer.chrome.com/docs/devtools/))**
+## Tasks
 
-We are working on supporting other DevTools in the future, which may include:
+[Tasks](./task) set in the `tasks.json` file will be listed in the DevTools tab. This lists all the configured tasks and allow you to run, stop or restart them. Any tasks that are running will display a `Running...` tag next to them.
 
-- Test runner UI
-- Viewing / editing [Design Tokens](https://css-tricks.com/what-are-design-tokens/) in a project
-- Viewing components in isolation and changing their props from a UI
-- [Postman](https://www.postman.com/) integration
-- Bundle size analyzer
+## Shared Terminals
+Any active shared terminals will be listed under `Shared Terminals` in the DevTools tab. These are a specific type of [terminal](./terminal) that is managed by Pitcher, which means that other users with access to the project can see them.
 
-If you would like to collaborate on building a DevTool, please select 'something else' on our [support form](https://codesandbox.io/support) and get in touch!
+From this tab, you can also create new shared terminals, which will open in the Terminal tab at the bottom of the editor.

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

@@ -16,7 +16,7 @@ website.
 
 Embeds are now supported as a beta feature for Devboxes. There are a few distinctions between Sandbox and Devbox embeds worth noting. Devboxes have more computing power because they run in VMs. They also support any programming language, not just JavaScript. That said, Devbox embeds are currently limited in terms of interactions compared to Sandboxes, as explained further below.
 
-### Embedding Devboxes 
+### Embedding Devboxes
 
 Devbox embeds are a great solution if you want to show examples of applications that go beyond front-end JavaScript (namely, Python, Go, Rust and more).
 
@@ -32,11 +32,7 @@ You can generate a URL to embed by clicking the `Share` button inside the editor
 
 This will give you HTML code with an iFrame that you can paste into your content.
 
-![Devbox Embed](../images/embed-cloud-sandbox.jpg)
-
-<Callout>
-MicroVM embeds are a feature of Devboxes. If you have an example from a repository you want to embed, you can import the repository as a [synced template](/learn/sandboxes/synced-templates), which allows you to access (and embed) the code as a Devbox.
-</Callout>
+![Devbox Embed](../images/embed-vs-code-web.jpg)
 
 ## Example Embed
 
@@ -73,8 +69,9 @@ This code outputs the following embed:
 ></iframe>
 
 ## Limitations
+
 As Devbox embeds are in beta, some more advanced options are currently unavailable.
 
-Notably, the embed viewer cannot make changes to the sandbox before forking it, so inline editing is not currently supported on these embeds.
+Notably, the embed viewer cannot make changes to the Devbox 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 legacy sandbox embeds. 
+Additionally, Devbox embeds still lack some of the customization options that are available in Sandbox embeds.