feat(www): Adds CodeSandbox in Try this starter

[garethx]

Description

This PR adds a CodeSandbox option to 'Try this starter' on starter pages. Like Netlify, you can deploy the starter but with the CodeSandbox option folks will also be able to see and edit a copy of the code to test out changes to the starter too.

[pieh]

I will just check how adding more items to "Try this starter" impacts displayed information on narrow viewports (mostly worried about "mobile/portrait" case).

But general feature to add CodeSandbox has "+1" from me!

[garethx]

It looks like that section gets hidden altogether on smaller viewports

[pieh]

It looks like that section gets hidden altogether on smaller viewports

Yeah, seeing same thing. I wonder now about those svg icons that doesn't seem to be displayed anywhere at the moment.

One thing is that it adds "CodeSandbox" link before Netlify, which I'm not sure if something we need to think too much about right now, but worth mentioning:

The CodeSandbox might just make more sense as first option as it's quickly interactive, without having to pull things from fork/clone that Netlify creates on behalf of user.

[pieh]

Hmm, the svg imports seems to just come out as undefined, but this is not directly related to this Pull Request, so let's ignore it in this PR

[pieh]

Ok the import { CodesandboxIcon } from "../../assets/vendor-logos/codesandbox.svg" is trying to get named export, it should just grab default one so we should drop { } from those statements - but it results in:

Which (to me) lacks a bit of whitespace between items

[garethx]

@pieh Thanks for the feedback. I've got the icons working, and added some whitespace between the options.

[pieh]

If you have site running locally - could you paste some screenshots for folks to see? If not, I'll just update mine to use your changes.

[garethx]

[sidharthachatterjee]

Nicely done! Thank you so much ❤️

[gatsbot]

Holy buckets, @garethx — we just merged your PR to Gatsby! 💪💜

Gatsby is built by awesome people like you. Let us say “thanks” in two ways:

1. We’d like to send you some Gatsby swag. As a token of our appreciation, you can go to the Gatsby Swag Store and log in with your GitHub account to get a coupon code good for one free piece of swag. We’ve got Gatsby t-shirts, stickers, hats, scrunchies, and much more. (You can also unlock even more free swag with 5 contributions — wink wink nudge nudge.) See gatsby.dev/swag for details.
2. We just invited you to join the Gatsby organization on GitHub. This will add you to our team of maintainers. Accept the invite by visiting https://github.com/orgs/gatsbyjs/invitation. By joining the team, you’ll be able to label issues, review pull requests, and merge approved pull requests.

If there’s anything we can do to help, please don’t hesitate to reach out to us: tweet at @gatsbyjs and we’ll come a-runnin’.

Thanks again!