Add copy to clipboard

[deronjohnson]

Addresses #1070 and #1529.

@jseldess For this to work, we need to add some markup (_includes/copy-clipboard.html) to the code snippets, as well as the class "highlight--clipboard" to the code wrapper. However, I'm not sure how we want to implement this, because the code markup is generated by Redcarpet, which I could not find a way to alter. I noticed a few other places in the repository (ex. /install-cockroachdb) where the snippets were hardcoded, it seems to add analytics attributes to code blocks. We might have to take this same approach for snippets that can be copied, although I'm open to other ideas. For now, I added two plain html examples to /start-a-local-cluster so you could see the functionality. The second example strips backslashes followed by new lines, which you discussed in #1529.

[cockroach-teamcity]

This change is 

[cockroach-teamcity]

http://cockroach-docs-review.s3-website-us-east-1.amazonaws.com/7bb0adca08840de547db0920226759ba5e9c4449/

[jseldess]

@deronjohnson, thanks for this first attempt. The install page is an exception in the way it hardcodes the html for code samples, as you say, for tracking purposes. That's way too burdensome to do throughout the docs, though, so it seems we do need to find another way.

@benesch and @mjibson, do either of you have ideas?

@deronjohnson, is the requirement that the button be inside the block making this difficult? Would it be easier if it were, say, just beyond the right margin?

[cockroach-teamcity]

http://cockroach-docs-review.s3-website-us-east-1.amazonaws.com/ffffb7003048f72e1aefcd924601c60d36b5b6e0/

[deronjohnson]

@jseldess, I was actually able to solve this with CSS. I removed the two examples I hard coded and made the first two code snippets on /start-a-local-cluster copyable. All that is required now is placing {% include copy-clipboard.html %} above a code snippet. You'll notice that the second example doesn't strip the new lines. I wasn't sure if you wanted to concatenate everything to one line only when there were backslashes, or always. Let me know and I can update.

[benesch]

Looks awesome, @deronjohnson!

@jseldess, we want these on essentially every code sample, right? If so, perhaps we can just loop over every <pre> element on document.ready and inject the copy-to-clipboard HTML with JavaScript?

[jseldess]

This is excellent, @deronjohnson!

One request: It's great that you're stripping newlines when there are backslashes! But we seem to also be adding a final newline. When pasted into the terminal, this makes the command immediately execute. Instead, it'd be good for users to be able to review and replace values. So can you strip that final newline from copied code?

@benesch, we actually don't want this feature applied by default. Some code blocks show command responses/outputs. So for now, we'll need the ability to apply the feature only where relevant.

[benesch]

Ah, gotcha. @deronjohnson's solution seems about as terse as it's going to get, in that case!

[cockroach-teamcity]

http://cockroach-docs-review.s3-website-us-east-1.amazonaws.com/41ef33f3f6103eb69fa5f641b447bd38689c1886/

[deronjohnson]

@jseldess, the first example should now paste without the final newline.

[jseldess]

LGTM now. Just one final tweak. Thanks, @deronjohnson!

[jseldess]

Can you remove the include here, since the block shows a command response that users won't need to copy?

[cockroach-teamcity]

http://cockroach-docs-review.s3-website-us-east-1.amazonaws.com/5a0a09355d4dccf67989d585cba605fb8ce541fa/

[jseldess]

Thanks, @deronjohnson! Looks great. I'll merge.

[jseldess]

@deronjohnson, just noticed a bug. The copy function seems to remove periods. For example, copying this:

CREATE TABLE bank.accounts (id INT PRIMARY KEY, balance DECIMAL);

ends up as this:

CREATE TABLE bankaccounts (id INT PRIMARY KEY, balance DECIMAL);

Or copying this:

INSERT INTO bank.accounts VALUES (1, 1000.50);

ends up as this:

INSERT INTO bankaccounts VALUES (1, 100050);

Any ideas?

[benesch]

@jseldess: #1631