Add copy button for copying guide code examples [skip ci]

Instead of carefully selecting the code in examples, use a copy button
for copying the code. This uses https://clipboardjs.com/ for copying.

For the bash code examples only line starting with $ prompt are copied.
The $ prompt itself is not copied.

guides/assets/javascripts/guides.js

@@ -67,5 +67,16 @@
         unwrap(moreInfoLinks);
       }
     });
+
+    var clipboard = new ClipboardJS('.clipboard-button');
+    clipboard.on('success', function(e) {
+      var trigger = e.trigger;
+      var triggerLabel = trigger.innerHTML;
+      trigger.innerHTML = 'Copied!';
+      setTimeout(function(){
+        trigger.innerHTML = triggerLabel;
+      }, 3000);
+      e.clearSelection();
+    });
   });
 }).call(this);

guides/assets/stylesheets/main.css

@@ -238,6 +238,26 @@ body {
   }
 }
 
+.clipboard-button {
+  background: #dbdbdb;
+  border: 0;
+  border-radius: 5px;
+  padding: 2px 10px;
+  position: absolute;
+  bottom: 2px;
+  right: 2px
+}
+
+.clipboard-button:active {
+  background: #ccc;
+}
+
+.clipboard-content {
+  opacity:0;
+  position:absolute;
+  z-index:-1;
+}
+
 #header {
   background: #c52f24 url(../images/header_tile.gif) repeat-x;
   color: #FFF;
@@ -670,6 +690,7 @@ only screen and (                min-resolution: 2dppx) {
 div.code_container {
   background: #EEE url(../images/tab_grey.gif) no-repeat left top;
   padding: 0.25em 1em 0.5em 48px;
+  position: relative;
 }
 
 .note {

guides/assets/stylesheets/main.rtl.css

@@ -239,6 +239,26 @@ body {
   }
 }
 
+.clipboard-button {
+  background: #dbdbdb;
+  border: 0;
+  border-radius: 5px;
+  padding: 2px 10px;
+  position: absolute;
+  bottom: 2px;
+  right: 2px
+}
+
+.clipboard-button:active {
+  background: #ccc;
+}
+
+.clipboard-content {
+  opacity:0;
+  position:absolute;
+  z-index:-1;
+}
+
 #header {
   background: #c52f24 url(../images/header_tile.gif) repeat-x;
   color: #FFF;
@@ -671,6 +691,7 @@ only screen and (                min-resolution: 2dppx) {
 div.code_container {
   background: #EEE url(../images/tab_grey.gif) no-repeat right top;
   padding: 0.25em 48px 0.5em 1em;
+  position: relative;
 }
 
 .note {

guides/rails_guides/markdown/renderer.rb

@@ -13,10 +13,13 @@ module RailsGuides
       def block_code(code, language)
         formatter = Rouge::Formatters::HTML.new
         lexer = ::Rouge::Lexer.find_fancy(lexer_language(language))
-        code = formatter.format(lexer.lex(code))
-        <<-HTML
+        formatted_code = formatter.format(lexer.lex(code))
+        clipboard_id = "clipboard-#{SecureRandom.hex(16)}"
+        <<~HTML
           <div class="code_container">
-<pre><code class="highlight #{lexer_language(language)}">#{code}</code></pre>
+          <pre><code class="highlight #{lexer_language(language)}">#{formatted_code}</code></pre>
+          <textarea class="clipboard-content" id="#{clipboard_id}">#{clipboard_content(code, language)}</textarea>
+          <button class="clipboard-button" data-clipboard-target="##{clipboard_id}">Copy</button>
           </div>
         HTML
       end
@@ -79,6 +82,17 @@ module RailsGuides
           end
         end
 
+        def clipboard_content(code, language)
+          if language == "bash"
+            prompt_regexp = /^\$ /
+            code = code.split("\n").
+              select { |line| line =~ prompt_regexp }.
+              map { |line| line.gsub(prompt_regexp, "") }.
+              join("\n")
+          end
+          ERB::Util.h(code)
+        end
+
         def convert_notes(body)
           # The following regexp detects special labels followed by a
           # paragraph, perhaps at the end of the document.

guides/source/layout.html.erb

@@ -9,6 +9,7 @@
   <link rel="stylesheet" type="text/css" href="stylesheets/highlight.css" data-turbolinks-track="reload">
   <link href="images/favicon.ico" rel="shortcut icon" type="image/x-icon" />
   <script src="javascripts/turbolinks.js" data-turbolinks-track="reload"></script>
+  <script src="javascripts/clipboard.js" data-turbolinks-track="reload"></script>
   <script src="javascripts/guides.js" data-turbolinks-track="reload"></script>
   <meta property="og:title" content="<%= yield(:page_title) %>" />
   <meta name="description" content="<%= yield(:description) %>" />