[Playground] Code links

[jamesnw]

Adds "Edit in Playground" link to each code example in the documentation. The link will reflect the selected syntax.

If there are multiple sections in the example, for instance in the Modules section, no link is shown. Those examples require importing and a file system, which isn't supported. I'm open to other behavior here if preferred.

[netlify[bot]]

✅ Deploy Preview for sass-lang ready!

Name	Link
🔨 Latest commit	a0ece3dbe01b5e09cdff3d18cbaf3fa9436293bf
🔍 Latest deploy log	https://app.netlify.com/sites/sass-lang/deploys/66e394bbc101b7000830df0a
😎 Deploy Preview	https://deploy-preview-1167--sass-lang.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[nex3]

The functionality looks great, but I'm not sure about the styles. A few considerations that occur to me:

• The link is so much darker than everything else in the page, it really stands out to me in a way that seems contrary to its purpose.
• Since the focus of the examples and the user editing them is the Sass code, it seems like the playground link should be more visually associated with the source block than the output.
• Although the playground doesn't have its own logo, it does have the Sass logo on screen at all times, so using that to visually identify the link with the playground page may be more immediately recognizable than pure text.

All that makes me think that something like this:

or even potentially like this:

would be a better fit.

As prior art here, this is what it looks like in the TypeScript documentation:

...where the "Try" button only shows up when the code is being hovered. I'd be fine with just copying that design as well.

[stacyk]

Style looks good, except it would be nice to add a bit more space between the Sass logo and "Playground".

@nex3 I made a few updates here:

• Added a small gap between the logo and Playground
• Fixed bottom alignment (in some cases the links weren't touching the bottom of the panel)
• The language tabs arrow pseudo elements were sitting under the panel after I added the relative position, so I bumped those up (to avoid the gray border overlapping the arrow)