'Copy' button created on download page

[joogps]

The button, which is located to the right of the code block, copies the shell command to the user's clipboard:

[msurguy]

@joogps Hello and thanks for the pull request! Sorry it's taken me a while to review this!

A feature like this would be very handy indeed and would improve usability of the site.

I'm sorry if this is disappointing news, I have been working on a feature like this for all code blocks on the site but haven't created a PR yet. I'll finish up the pull request and tag you on it so that you could see how it's implemented.

[joogps]

Okay! You've probably found a better way to implement it than me! Is there anything else I can help you guys with? :)

[msurguy]

@joogps Thanks for your interest in helping out! There are some issues that might need your help! The first one that I'd like figured out is adding the image for social media sharing: https://github.com/processing/processing-pi-website/issues/21. For now I'd like just one single image to work across the whole site, but in the future it would be nice to be able to specify different image for each tutorial. Let me know if you need more details on that and I'll provide some info for you!

About the copy functionality, there were a couple principles that I thought would be necessary:

• providing a label for the "copy to clipboard" icon since just the icon by itself is not very clear
• embedding the button inside each code block in a way that is easily accessible and doesn't take away the space from the code blocks (being unobtrusive).

Here's my PR for the copy functionality that works across the site (most of that PR code has been done in Sept 2018 and I just had a chance to finish it this weekend): https://github.com/processing/processing-pi-website/pull/39