Add copy CLI command buttons to templates

[delucis]

This PR adds a “Copy CLI command” button to each template on astro.new to make it easier to run create astro for a specific template (instead of opening in a web IDE).

Closes #70
Closes DX-1474

Looks like this:

(The first relevant commit is f19fb40 — the others are still left over from #74)

Tested in Chrome, Firefox & Safari on macOS, and Firefox Android.

[netlify]

✅ Deploy Preview for astro-new ready!

Name	Link
🔨 Latest commit	26a4256
🔍 Latest deploy log	https://app.netlify.com/sites/astro-new/deploys/674077746b1ea4000882ddce
😎 Deploy Preview	https://deploy-preview-75--astro-new.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.

[sarah11918]

Works for me @delucis ! I tried the copy button on a handful of the repos, including some of the other tabs, and the command worked every time for me! 💪

[HiDeoo]

Won't have time to make a full suggestion before T&D, but wanted to mention that the announcement is not great at the moment, e.g. this demo using VoiceOver with a duplicated label and the useless image.

demo.mp4

[delucis]

Won't have time to make a full suggestion before T&D, but wanted to mention that the announcement is not great at the moment, e.g. this demo using VoiceOver with a duplicated label and the useless image.

Thank you! Was different for me when testing with VoiceOver in Chrome, but I did change some small details since then, so maybe it changed.

[delucis]

OK, at least added aria-hidden="true" to the icons. I confirmed this was an issue in Firefox (not in Chrome for me) with the useless “image” announcement. I’d forgotten astro-icon doesn’t do that by default.

Other icon usage on the site needs this too, but I see a few other a11y issues like that, so will tackle that in a separate PR.

Edit: #77 addresses many accessibility issues, including icons in the accessibility tree.