copy button

[Fil]

• client.js only
• visual feedback with css
• uses navigator.clipboard.writeText
• adds the copy button on all PRE > CODE (or even PRE > SPAN) elements
• pass data-copy=off to disable

supersedes #138

For an example of a reactive block with a copy button, you can type this in your page.md:

<pre><code>const a = ${now};</code></pre>

to consider:

• should we put this outside of client.js, so as to make it optional?
• can we add an option in code block syntax (#28) to say copy=no (it should set data-copy=off on the <pre>)? (this could be added later if we want, the js code already backs off if data-copy is not undefined).

closes #17

[mbostock]

I’m also a fan of this inline approach. Thanks @Fil and @trebor.

(And eventually we should have bundling for the client #61 so we can start to organize the client code as it grows… though hopefully it continues to stay pretty small! And maybe we could use lazy loading for enhancements like this if we ever feel we need to reduce the amount of code in the initial load.)

[trebor]

oh, this is much cleaner! i will close out #138. thank you @Fil!

[trebor]

should we put this outside of client.js, so as to make it optional?

is the concern bloat in client.js, or the ability to disable the functionality?

[Fil]

Yes, if someone disables the feature project-wide, it would be nice not to bundle this part of client.js; but it's small anyways.