feat(www): Adds CodeSandbox in Try this starter (#20948)

* Add CodeSandbox logo * Adding CodeSandbox 'Try this starter' option * Adding CodeSandbox 'Try this starter' option * Fix icons and add whitespace between options * Add whitespace with space[]
gatsbyjs · Feb 1, 2020 · d10b3e5 · d10b3e5
1 parent 3387b2b
commit d10b3e5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 3 deletions.
diff --git a/www/src/assets/vendor-logos/codesandbox.svg b/www/src/assets/vendor-logos/codesandbox.svg
diff --git a/www/src/templates/template-starter-page.js b/www/src/templates/template-starter-page.js
@@ -111,7 +111,7 @@ class StarterTemplate extends React.Component {
                 alt={`Screenshot of ${repoName}`}
               />
             </div>
-            <StarterSource repoUrl={repoUrl} startersYaml={startersYaml} />
+            <StarterSource repoUrl={repoUrl} startersYaml={startersYaml} starter={starterShowcase} />
             <StarterInstallation repoName={repoName} repoUrl={repoUrl} />
             <StarterDetails
               startersYaml={startersYaml}

diff --git a/www/src/views/starter/source.js b/www/src/views/starter/source.js
@@ -3,9 +3,10 @@ import { jsx } from "theme-ui"
 import { mediaQueries } from "../../gatsby-plugin-theme-ui"
 import TechWithIcon from "../../components/tech-with-icon"
 import GithubIcon from "react-icons/lib/fa/github"
-import { NetlifyIcon } from "../../assets/vendor-logos/netlify.svg"
+import CodesandboxIcon from "../../assets/vendor-logos/codesandbox.svg"
+import NetlifyIcon from "../../assets/vendor-logos/netlify.svg"
 
-const Source = ({ startersYaml, repoUrl }) => (
+const Source = ({ startersYaml, repoUrl, starter }) => (
   <div
     sx={{
       display: `flex`,
@@ -66,6 +67,17 @@ const Source = ({ startersYaml, repoUrl }) => (
       >
         Try this starter
       </span>
+      <a
+        href={`https://codesandbox.io/s/github/${starter.owner}/${starter.stub}`}
+        sx={{
+          "&&": {
+            borderBottom: 0,
+            marginRight: t => t.space[4]
+          },
+        }}
+      >
+        <TechWithIcon icon={CodesandboxIcon}>CodeSandbox</TechWithIcon>
+      </a> &nbsp; 
       <a
         href={`https://app.netlify.com/start/deploy?repository=${repoUrl}`}
         sx={{