codesandbox · acekyd · Mar 8, 2022 · Mar 1, 2022 · Mar 1, 2022 · Mar 7, 2022
diff --git a/packages/app/src/app/overmind/effects/vscode/Workbench.ts b/packages/app/src/app/overmind/effects/vscode/Workbench.ts
@@ -361,7 +361,7 @@ export class Workbench {
     addBrowserNavigationCommand(
       'codesandbox.help.discord',
       'Join our discord server',
-      'https://discord.gg/5BpufEP7MH'
+      'https://discord.gg/C6vfhW3H6e'
     );
 
     this.addWorkbenchAction({
@@ -443,6 +443,15 @@ export class Workbench {
       },
     });
 
+    this.appendMenuItem(MenuId.MenubarHelpMenu, {
+      group: '3_social',
+      order: 3,
+      command: {
+        id: 'codesandbox.help.discord',
+        title: 'Get Help on &&Discord',
+      },
+    });
+
     if (
       this.controller.getState().editor.currentSandbox?.featureFlags.comments
     ) {

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/index.tsx
@@ -5,6 +5,7 @@ import { withTheme } from 'styled-components';
 
 import { Chat } from './Chat';
 import { Container } from './elements';
+import { Help } from './socials';
 import { Comments } from './screens/Comments';
 import { ConfigurationFiles } from './screens/ConfigurationFiles';
 import { Deployment } from './screens/Deployment/index';
@@ -63,8 +64,8 @@ export const WorkspaceComponent = ({ theme }) => {
           >
             {editor.currentSandbox && <Component />}
           </div>
-
           {isLive && roomInfo.chatEnabled && <Chat />}
+          <Help />
         </>
       </ThemeProvider>
     </Container>

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/ProjectInfo/Delete.tsx
@@ -1,23 +1,9 @@
-import { Button, Stack, Element, Link } from '@codesandbox/components';
+import { Button, Stack } from '@codesandbox/components';
 import css from '@styled-system/css';
 import React, { FunctionComponent, MouseEvent } from 'react';
 
 import { useAppState, useActions } from 'app/overmind';
 
-import { DiscordIcon, GithubIcon, TwitterIcon } from './social-icons';
-
-const links = [
-  { href: 'https://twitter.com/codesandbox', Icon: TwitterIcon },
-  {
-    href: 'https://github.com/codesandbox/codesandbox-client',
-    Icon: GithubIcon,
-  },
-  {
-    href: 'https://discord.gg/5BpufEP7MH',
-    Icon: DiscordIcon,
-  },
-];
-
 export const Delete: FunctionComponent = () => {
   const {
     modalOpened,
@@ -38,36 +24,19 @@ export const Delete: FunctionComponent = () => {
   };
 
   return (
-    <Element>
-      <Stack justify="center" marginBottom={6}>
-        <Button
-          css={css({
-            ':hover:not(:disabled),:focus:not(:disabled)': {
-              color: 'errorForeground',
-            },
-          })}
-          // @ts-ignore
-          onClick={onDelete}
-          variant="link"
-        >
-          {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
-        </Button>
-      </Stack>
-
-      <Element marginBottom={3} paddingX={2}>
-        <Stack>
-          {links.map(({ href, Icon }) => (
-            <Link
-              css={css({ color: 'sideBar.border' })}
-              href={href}
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              <Icon />
-            </Link>
-          ))}
-        </Stack>
-      </Element>
-    </Element>
+    <Stack justify="center" marginBottom={6}>
+      <Button
+        css={css({
+          ':hover:not(:disabled),:focus:not(:disabled)': {
+            color: 'errorForeground',
+          },
+        })}
+        // @ts-ignore
+        onClick={onDelete}
+        variant="link"
+      >
+        {`Delete ${customTemplate ? `Template` : `Sandbox`}`}
+      </Button>
+    </Stack>
   );
 };
diff --git a/...pace/screens/ProjectInfo/social-icons.tsx → ...Sandbox/Editor/Workspace/social-icons.tsx b/...pace/screens/ProjectInfo/social-icons.tsx → ...Sandbox/Editor/Workspace/social-icons.tsx
@@ -4,7 +4,7 @@ type IconProps = SVGProps<SVGSVGElement>;
 
 export const DiscordIcon: FunctionComponent<IconProps> = props => (
   <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="url(#clip0)">
+    <g clipPath="">
       <path
         fill="currentColor"
         d="M22.099 9c1.05 0 1.898.805 1.948 1.753V26l-2-1.61-1.1-.948-1.199-.99.501 1.562H9.756c-1.048 0-1.9-.755-1.9-1.754V10.757c0-.948.853-1.755 1.903-1.755h12.334L22.1 9zm-4.574 4.025h-.022l-.151.142c1.55.425 2.3 1.089 2.3 1.089a8.468 8.468 0 00-2.8-.806c-.65-.095-1.3-.045-1.85 0h-.15c-.35 0-1.098.142-2.1.521-.349.144-.549.238-.549.238s.749-.71 2.4-1.089l-.101-.095s-1.25-.046-2.6.9c0 0-1.349 2.226-1.349 4.972 0 0 .748 1.232 2.798 1.28 0 0 .3-.378.602-.71-1.151-.332-1.6-.995-1.6-.995s.1.047.25.141h.046c.022 0 .032.011.044.022v.004c.012.011.023.021.045.021.247.097.494.192.695.284a6.37 6.37 0 001.346.38 8.094 8.094 0 002.4 0c.448-.096.897-.19 1.345-.38.291-.141.65-.283 1.044-.522 0 0-.448.663-1.648.995.247.33.594.708.594.708 2.052-.042 2.848-1.275 2.893-1.223 0-2.74-1.357-4.972-1.357-4.972-1.222-.86-2.366-.893-2.567-.893l.042-.014v.002zm.126 3.126a.948.948 0 110 1.895.949.949 0 01-.95-.945.951.951 0 01.95-.947v-.003zm-3.396 0a.947.947 0 11-.003 1.895.95.95 0 01-.95-.945c0-.524.427-.947.95-.947l.003-.003z"
@@ -20,7 +20,7 @@ export const DiscordIcon: FunctionComponent<IconProps> = props => (
 
 export const TwitterIcon: FunctionComponent<IconProps> = props => (
   <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="url(#clip0)">
+    <g clipPath="">
       <path
         fill="currentColor"
         d="M24 10.82a6.557 6.557 0 01-1.885.517 3.288 3.288 0 001.443-1.816 6.575 6.575 0 01-2.085.796 3.286 3.286 0 00-5.594 2.993 9.319 9.319 0 01-6.765-3.429 3.287 3.287 0 001.015 4.383 3.268 3.268 0 01-1.486-.41c-.036 1.52 1.054 2.943 2.633 3.26a3.289 3.289 0 01-1.483.055 3.285 3.285 0 003.067 2.28A6.6 6.6 0 018 20.809a9.293 9.293 0 005.032 1.474c6.095 0 9.538-5.147 9.33-9.764A6.683 6.683 0 0024 10.82z"
@@ -36,7 +36,7 @@ export const TwitterIcon: FunctionComponent<IconProps> = props => (
 
 export const GithubIcon: FunctionComponent<IconProps> = props => (
   <svg width={32} height={32} fill="none" viewBox="0 0 32 32" {...props}>
-    <g clipPath="url(#clip0)">
+    <g clipPath="">
       <path
         fill="currentColor"
         d="M22.927 12.365a8.068 8.068 0 00-2.912-2.984A7.678 7.678 0 0016 8.28c-1.451 0-2.79.366-4.016 1.1a8.067 8.067 0 00-2.911 2.984A8.177 8.177 0 008 16.481c0 1.787.509 3.394 1.526 4.821 1.017 1.427 2.332 2.415 3.943 2.963.187.036.326.01.416-.075a.423.423 0 00.136-.32l-.006-.576a97.12 97.12 0 01-.005-.95l-.24.042c-.152.029-.345.04-.578.037a4.301 4.301 0 01-.723-.074 1.6 1.6 0 01-.698-.32 1.354 1.354 0 01-.459-.657l-.104-.246a2.68 2.68 0 00-.328-.544c-.15-.2-.3-.335-.453-.406l-.073-.053a.773.773 0 01-.135-.129.592.592 0 01-.094-.15c-.02-.05-.004-.09.052-.122.056-.032.156-.048.302-.048l.208.032c.14.028.311.114.516.256.205.143.373.328.505.555.16.292.352.515.578.668.226.153.453.23.683.23.229 0 .427-.019.593-.054.167-.036.323-.09.469-.16.062-.477.233-.844.51-1.1a6.98 6.98 0 01-1.067-.192 4.192 4.192 0 01-.98-.417 2.82 2.82 0 01-.838-.715c-.222-.285-.405-.659-.547-1.122-.142-.462-.213-.996-.213-1.601 0-.862.274-1.595.823-2.2-.257-.648-.233-1.374.072-2.178.202-.064.5-.016.896.144.396.16.686.297.87.411.184.114.332.21.443.289a7.227 7.227 0 012-.278c.687 0 1.354.092 2 .277l.396-.256c.27-.17.59-.327.958-.47.368-.142.65-.181.844-.117.312.804.34 1.53.083 2.178.549.605.823 1.339.823 2.2 0 .605-.071 1.14-.213 1.607-.143.466-.326.84-.552 1.121a2.929 2.929 0 01-.844.71 4.198 4.198 0 01-.98.416c-.315.086-.671.15-1.067.193.361.32.542.826.542 1.516v2.253a.43.43 0 00.13.32c.087.085.224.11.411.075 1.611-.548 2.926-1.536 3.943-2.963S24 18.268 24 16.48c0-1.488-.358-2.86-1.073-4.116z"

diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/socials.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/socials.tsx
@@ -0,0 +1,31 @@
+import { Stack, Element, Link } from '@codesandbox/components';
+import css from '@styled-system/css';
+import React, { FunctionComponent } from 'react';
+
+import { DiscordIcon, GithubIcon, TwitterIcon } from './social-icons';
+
+const links = [
+  { href: 'https://twitter.com/codesandbox', Icon: TwitterIcon },
+  {
+    href: 'https://github.com/codesandbox/codesandbox-client',
+    Icon: GithubIcon,
+  },
+  { href: 'https://discord.gg/C6vfhW3H6e', Icon: DiscordIcon },
+];
+
+export const Help: FunctionComponent = () => (
+  <Element marginBottom={3} paddingX={2}>
+    <Stack justify="center">
+      {links.map(({ href, Icon }) => (
+        <Link
+          css={css({ color: 'sideBar.border' })}
+          href={href}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <Icon />
+        </Link>
+      ))}
+    </Stack>
+  </Element>
+);
diff --git a/packages/homepage/content/articles/sandpack-announcement/index.md b/packages/homepage/content/articles/sandpack-announcement/index.md
@@ -1,32 +1,50 @@
 ---
 banner: ./images/banner.png
 slug: sandpack-announcement
-authors: ["Ives van Hoorne"]
+authors: ['Ives van Hoorne']
 photo: https://avatars0.githubusercontent.com/u/587016?s=460&v=4
 title: Introducing Sandpack
 description: Introducing Sandpack A Toolkit for Creating In-Browser Live Coding
 date: 2021-12-02
 ---
 
-Today we’re very excited to announce Sandpack, the in-browser bundler that powers CodeSandbox, has been open-sourced for everyone to use! With this release, you can use Sandpack to power any live running code on your website. Essentially, you can build your own CodeSandbox!
+Today we’re very excited to announce Sandpack, the in-browser bundler that
+powers CodeSandbox, has been open-sourced for everyone to use! With this
+release, you can use Sandpack to power any live running code on your website.
+Essentially, you can build your own CodeSandbox!
 
 ## What is Sandpack?
 
-When CodeSandbox started, it ran all projects in the browser using a primitive bundler that runs in an iframe. As projects on CodeSandbox became more advanced, [we kept on working on this in-browser bundler to support more projects and new bundler features](https://codesandbox.io/post/creating-a-parallel-offline-extensible-browser-based-bundler-for-codesandbox). We’re now at the point that the bundler supports npm dependencies, hot module reloading, caching, and a whole lot more.
+When CodeSandbox started, it ran all projects in the browser using a primitive
+bundler that runs in an iframe. As projects on CodeSandbox became more advanced,
+[we kept on working on this in-browser bundler to support more projects and new bundler features](https://codesandbox.io/post/creating-a-parallel-offline-extensible-browser-based-bundler-for-codesandbox).
+We’re now at the point that the bundler supports npm dependencies, hot module
+reloading, caching, and a whole lot more.
 
-At the same time, more and more people wanted to use CodeSandbox for use-cases that we hadn’t thought of before. Sometimes these use cases were so different that we couldn’t make them work for CodeSandbox.
+At the same time, more and more people wanted to use CodeSandbox for use-cases
+that we hadn’t thought of before. Sometimes these use cases were so different
+that we couldn’t make them work for CodeSandbox.
 
-That’s why we decided to open source the bundler, named Sandpack. We’re giving you the power to fully customize the experience behind the live-running code, without depending on CodeSandbox. Want to build a student course with live tests? That’s possible! Want to build a no-code editor with a live preview? That’s possible too!
+That’s why we decided to open source the bundler, named Sandpack. We’re giving
+you the power to fully customize the experience behind the live-running code,
+without depending on CodeSandbox. Want to build a student course with live
+tests? That’s possible! Want to build a no-code editor with a live preview?
+That’s possible too!
 
-Our main goal behind Sandpack is to give you the full power of CodeSandbox, but with the flexibility to use it for any project that you have in mind.
+Our main goal behind Sandpack is to give you the full power of CodeSandbox, but
+with the flexibility to use it for any project that you have in mind.
 
 So, how do you use it? Let’s take a look!
 
 ## How to use Sandpack
 
-With this release, we export two libraries: `@codesandbox/sandpack-client` and `@codesandbox/sandpack-react`. `sandpack-client` is responsible for mounting Sandpack and communicating with it. `sandpack-react` is a wrapper library around `sandpack-client` that makes it possible to use Sandpack with React.
+With this release, we export two libraries: `@codesandbox/sandpack-client` and
+`@codesandbox/sandpack-react`. `sandpack-client` is responsible for mounting
+Sandpack and communicating with it. `sandpack-react` is a wrapper library around
+`sandpack-client` that makes it possible to use Sandpack with React.
 
-You can use `sandpack-client` in plain JS or make your own wrapper for Vue, Svelte, or any other library, really!
+You can use `sandpack-client` in plain JS or make your own wrapper for Vue,
+Svelte, or any other library, really!
 
 Let's take a quick look at some of the examples from `sandpack-react`:
 
@@ -39,50 +57,83 @@ In this example, we render the default editor, and we specify some custom files
 
 ### Customized Editor
 
-What if you want to make something custom? Well, we allow you to write any component that is connected to Sandpack, and you can define the layout yourself. Do you want to use a different code editor? That’s possible:
+What if you want to make something custom? Well, we allow you to write any
+component that is connected to Sandpack, and you can define the layout yourself.
+Do you want to use a different code editor? That’s possible:
 
-<sandpack2></sandpack2>
-<br/>
-Here we have a custom code editor (it’s a `textarea`), and a custom component that shows the compiled code of the current file you’re looking at. As you can see, the preview is hidden here. If we’d like to add it, just add the `<SandpackPreview />` component as well!
+<sandpack2></sandpack2> <br/> Here we have a custom code editor (it’s a
+`textarea`), and a custom component that shows the compiled code of the current
+file you’re looking at. As you can see, the preview is hidden here. If we’d like
+to add it, just add the `<SandpackPreview />` component as well!
 
-As you can see in the examples, you can use the base template of Sandpack to get a running editor with a minimal amount of work. However, if you want to fully customize the experience, that's possible too. You can build your own devtools on top of Sandpack.
+As you can see in the examples, you can use the base template of Sandpack to get
+a running editor with a minimal amount of work. However, if you want to fully
+customize the experience, that's possible too. You can build your own devtools
+on top of Sandpack.
 
 ## Who’s using Sandpack?
 
-The ability to use live-running code opens up a lot of possibilities. Every time you could benefit from live-running code, you can use Sandpack! These are some of the projects using Sandpack for their own purpose:
+The ability to use live-running code opens up a lot of possibilities. Every time
+you could benefit from live-running code, you can use Sandpack! These are some
+of the projects using Sandpack for their own purpose:
 
 ### React Docs
 
-The new [React Docs](https://beta.reactjs.org/) is using Sandpack for its examples and for the challenges. The React team wanted to fully style and customize Sandpack for their new website, and with Sandpack they were able to customize everything. From the editor to how errors are shown:
+The new [React Docs](https://beta.reactjs.org/) is using Sandpack for its
+examples and for the challenges. The React team wanted to fully style and
+customize Sandpack for their new website, and with Sandpack they were able to
+customize everything. From the editor to how errors are shown:
 
 ![](./images/react.png)
 
 ### GitLab Web Editor
 
-GitLab has a web editor that allows you to write code in the browser and directly commit to GitLab. Gitlab is using Sandpack to execute the code of frontend projects so you can see the live results:
+GitLab has a web editor that allows you to write code in the browser and
+directly commit to GitLab. Gitlab is using Sandpack to execute the code of
+frontend projects so you can see the live results:
 
 ![](./images/gitlab-live-preview.png)
 
 ### Codeamigo
 
-[Codeamigo](https://codeamigo.dev/) is a place where you can follow byte-sized interactive coding tutorials. They use Sandpack together with their custom editor for running the code:
+[Codeamigo](https://codeamigo.dev/) is a place where you can follow byte-sized
+interactive coding tutorials. They use Sandpack together with their custom
+editor for running the code:
 
 ![](./images/codeamigo.png)
 
 ### CodeHike
 
-CodeHike is a library that allows you to create guided code walkthroughs. They use Sandpack for showing the live running code. In this case, they only use the preview of Sandpack, which is also a great use-case:
+CodeHike is a library that allows you to create guided code walkthroughs. They
+use Sandpack for showing the live running code. In this case, they only use the
+preview of Sandpack, which is also a great use-case:
 
 ![](./images/codehike.png)
 
 ### Your project?
 
-There's really no limit on what you can use Sandpack for. If you’re using Sandpack, let us know and we’ll add you to our showcase!
+There's really no limit on what you can use Sandpack for. If you’re using
+Sandpack, let us know and we’ll add you to our showcase!
 
 ## Conclusion
 
-When we started CodeSandbox, people used it for many more things than we could imagine. With Sandpack, we’re hoping to see the same thing. Give it a try, take a look at our [new landing page](https://sandpack.codesandbox.io/) and [docs](https://sandpack.codesandbox.io/docs) for it and we'd love to get your feedback on [Discord](https://discord.gg/5BpufEP7MH)! You can also find out more about how it works on [GitHub](https://github.com/codesandbox/sandpack).
+When we started CodeSandbox, people used it for many more things than we could
+imagine. With Sandpack, we’re hoping to see the same thing. Give it a try, take
+a look at our [new landing page](https://sandpack.codesandbox.io/) and
+[docs](https://sandpack.codesandbox.io/docs) for it and we'd love to get your
+feedback on [Discord](https://discord.gg/C6vfhW3H6e)! You can also find out more
+about how it works on [GitHub](https://github.com/codesandbox/sandpack).
 
 ### Thanks
 
-Many people have worked on building Sandpack and making it open source. Credits go to [Adewale](https://twitter.com/ace_kyd), [Alex](https://twitter.com/alexnmoldovan), [Danilo](https://twitter.com/danilowoz), [Danny](https://twitter.com/dannyruchtie), [Jasper](https://twitter.com/JasperDeMoor), [Marco](https://twitter.com/marcovincit), [Maria](https://twitter.com/olarclara), [Sanne,](https://twitter.com/sannekalkman) [Tamas](https://twitter.com/metricbrew), and [Zeh](https://twitter.com/zehf) for making this happen!
+Many people have worked on building Sandpack and making it open source. Credits
+go to [Adewale](https://twitter.com/ace_kyd),
+[Alex](https://twitter.com/alexnmoldovan),
+[Danilo](https://twitter.com/danilowoz),
+[Danny](https://twitter.com/dannyruchtie),
+[Jasper](https://twitter.com/JasperDeMoor),
+[Marco](https://twitter.com/marcovincit),
+[Maria](https://twitter.com/olarclara),
+[Sanne,](https://twitter.com/sannekalkman)
+[Tamas](https://twitter.com/metricbrew), and [Zeh](https://twitter.com/zehf) for
+making this happen!