Semantic changes to prepare for embed seo (codesandbox#3687)

Author: siddharthkp

packages/app/src/embed/components/Sidebar/Dependencies/elements.js

@@ -15,3 +15,10 @@ export const Row = styled.div(
     lineHeight: '24px',
   })
 );
+
+export const Link = styled.a(
+  css({
+    color: 'inherit',
+    textDecoration: 'none',
+  })
+);

packages/app/src/embed/components/Sidebar/Dependencies/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { formatVersion } from '@codesandbox/common/lib/utils/ci';
-import { Container, Row } from './elements';
+import { Container, Row, Link } from './elements';
 
 function Dependencies({ sandbox }) {
   let { npmDependencies } = sandbox;
@@ -23,7 +23,13 @@ function Dependencies({ sandbox }) {
     <Container>
       {Object.keys(npmDependencies).map(dep => (
         <Row key={dep}>
-          <span>{dep}</span>
+          <Link
+            href={`https://npmjs.com/package/${dep}`}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {dep}
+          </Link>
           <span>{formatVersion(npmDependencies[dep])}</span>
         </Row>
       ))}

packages/app/src/embed/components/Sidebar/SandboxInfo/elements.ts

@@ -9,7 +9,7 @@ export const Container = styled.div(
   })
 );
 
-export const Title = styled.h2(
+export const Title = styled.h1(
   css({
     fontSize: 3,
     fontWeight: 'medium',
@@ -18,9 +18,10 @@ export const Title = styled.h2(
   })
 );
 
-export const Description = styled.div(
+export const Description = styled.h2(
   css({
     fontSize: 2,
+    fontWeight: 'normal',
     color: 'sideBar.foreground',
     marginBottom: 4,
   })
@@ -30,6 +31,7 @@ export const Stats = styled(CommonStats)(
   css({
     fontSize: 2,
     color: 'grays.400',
+    marginBottom: 2,
     // ouch ouch ouch, modifying a child of
     // a common element is just pure evil
     // this will definitely break on the
@@ -41,3 +43,25 @@ export const Stats = styled(CommonStats)(
     },
   })
 );
+
+export const Button = styled.a(
+  css({
+    transition: '0.3s ease background-color',
+    backgroundColor: theme => (theme.light ? 'grays.200' : 'grays.500'),
+    padding: 2,
+    display: 'block',
+    color: theme => (theme.light ? 'grays.800' : 'white'),
+    border: 'none',
+    outline: 'none',
+    borderRadius: 2,
+    width: '100%',
+    fontSize: 3,
+    boxSizing: 'border-box',
+    cursor: 'pointer',
+    textDecoration: 'none',
+    textAlign: 'center',
+    ':hover': {
+      backgroundColor: theme => (theme.light ? 'grays.300' : 'grays.600'),
+    },
+  })
+);

packages/app/src/embed/components/Sidebar/SandboxInfo/index.tsx

@@ -1,10 +1,11 @@
 import { Sandbox } from '@codesandbox/common/lib/types';
 import { getSandboxName } from '@codesandbox/common/lib/utils/get-sandbox-name';
+import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import React, { FunctionComponent } from 'react';
 
 import AvatarBlock from '../AvatarBlock';
 
-import { Container, Description, Stats, Title } from './elements';
+import { Container, Description, Stats, Title, Button } from './elements';
 
 type Props = {
   sandbox: Sandbox;
@@ -23,6 +24,13 @@ export const SandboxInfo: FunctionComponent<Props> = ({ sandbox }) => {
         />
       )}
       <Stats {...sandbox} />
+      <Button
+        href={sandboxUrl(sandbox) + '?from-embed'}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Edit Sandbox
+      </Button>
     </Container>
   );
 };

packages/app/src/embed/components/Sidebar/elements.js

@@ -19,25 +19,3 @@ export const Container = styled.div(
     height: isIOS ? '100%' : '100vh',
   })
 );
-
-export const Button = styled.a(
-  css({
-    transition: '0.3s ease background-color',
-    backgroundColor: theme => (theme.light ? 'grays.200' : 'grays.500'),
-    padding: 2,
-    display: 'block',
-    color: theme => (theme.light ? 'grays.800' : 'white'),
-    border: 'none',
-    outline: 'none',
-    borderRadius: 2,
-    width: '100%',
-    fontSize: 3,
-    boxSizing: 'border-box',
-    cursor: 'pointer',
-    textDecoration: 'none',
-    textAlign: 'center',
-    ':hover': {
-      backgroundColor: theme => (theme.light ? 'grays.300' : 'grays.600'),
-    },
-  })
-);

packages/app/src/embed/components/Sidebar/index.js

@@ -1,15 +1,13 @@
 import * as React from 'react';
 import type { Sandbox } from '@codesandbox/common/lib/types';
 
-import Margin from '@codesandbox/common/lib/components/spacing/Margin';
-import { sandboxUrl } from '@codesandbox/common/lib/utils/url-generator';
 import Section from './Section';
 import { SandboxInfo } from './SandboxInfo';
 import FileTree from './FileTree';
 import Dependencies from './Dependencies';
 import ExternalResources from './ExternalResources';
 
-import { Container, Button } from './elements';
+import { Container } from './elements';
 
 type Props = {
   sandbox: Sandbox,
@@ -23,14 +21,15 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
       <Section title="CodeSandbox" openByDefault>
         <SandboxInfo sandbox={sandbox} />
       </Section>
+
       <Section title="Files" openByDefault>
         <FileTree
           sandbox={sandbox}
           currentModuleId={currentModule}
           setCurrentModuleId={setCurrentModule}
         />
       </Section>
-      <Section title="Dependencies">
+      <Section title="Dependencies" openByDefault>
         <Dependencies sandbox={sandbox} />
       </Section>
       <Section
@@ -39,16 +38,6 @@ function Sidebar({ sandbox, setCurrentModule, currentModule }: Props) {
       >
         <ExternalResources sandbox={sandbox} />
       </Section>
-
-      <Margin horizontal={0.5} vertical={1}>
-        <Button
-          href={sandboxUrl(sandbox) + '?from-embed'}
-          target="_blank"
-          rel="noreferrer noopener"
-        >
-          Edit Sandbox
-        </Button>
-      </Margin>
     </Container>
   );
 }