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

garethx · web-flow · commit d10b3e547426 · 2020-02-01T17:02:01.000+02:00
* 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[]
diff --git a/www/src/assets/vendor-logos/codesandbox.svg b/www/src/assets/vendor-logos/codesandbox.svg
@@ -0,0 +1,4 @@
+<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5 11.6166V22.787C11.6945 22.787 11.8223 22.7448 11.9969 22.6451L20.9414 17.534C21.2945 17.3316 21.4385 17.0182 21.4385 16.6111V6.24691C21.4385 6.04271 21.3955 5.92055 21.2963 5.75L11.7861 11.1235C11.6092 11.2246 11.5 11.4128 11.5 11.6166ZM16.4691 18.0309C16.4691 18.3148 16.3627 18.4568 16.1142 18.5988L13.1327 20.3025C12.9198 20.4444 12.6358 20.3735 12.6358 20.0895V12.4938C12.6358 12.2906 12.8146 12.0273 12.9907 11.9259L19.8056 8.02161C19.9949 7.91267 20.1605 8.08715 20.1605 8.30556V12.3519C20.1605 12.5616 20.0616 12.7501 19.8765 12.8488L16.8241 14.4815C16.639 14.5802 16.4691 14.7686 16.4691 14.9784V18.0309Z" fill="#999999"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.56152 16.611V6.24684C1.56152 5.83925 1.77554 5.45524 2.12942 5.25301L10.7899 0.354864C10.9765 0.255981 11.2868 0.212891 11.4998 0.212891C11.7128 0.212891 12.0413 0.265632 12.2097 0.354866L20.7992 5.25301C20.9691 5.35343 21.2 5.58473 21.2961 5.74993L11.7837 11.145C11.6068 11.2461 11.4998 11.4381 11.4998 11.6419V22.787C11.3053 22.787 11.1065 22.7447 10.9319 22.645L2.20041 17.6049C1.84652 17.4026 1.56152 17.0186 1.56152 16.611ZM2.8393 8.30548V12.3518C2.8393 12.6357 2.91029 12.7777 3.19424 12.9197L6.17572 14.6234C6.45967 14.7654 6.53066 14.9783 6.53066 15.1913V18.0308C6.53066 18.3147 6.60165 18.4567 6.8856 18.5987L9.86708 20.3024C10.151 20.4444 10.364 20.3734 10.364 20.0894V12.4938C10.364 12.2808 10.293 12.0678 10.0091 11.9259L3.33621 8.09252C3.12325 7.95055 2.8393 8.02153 2.8393 8.30548ZM14.4813 3.47832L11.8547 4.96906C11.6418 5.11104 11.3578 5.11104 11.1449 4.96906L8.51831 3.47832C8.34542 3.3806 8.12359 3.3811 7.95041 3.47832L4.68498 5.324C4.40103 5.46598 4.40103 5.74993 4.68498 5.8919L11.2158 9.65425C11.3906 9.75431 11.609 9.75431 11.7837 9.65425L18.3146 5.8919C18.5276 5.74993 18.5986 5.46598 18.3146 5.324L15.0492 3.47832C14.876 3.3811 14.6542 3.3806 14.4813 3.47832Z" fill="#F2F2F2"/>
+</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={{
