Add a copy button to each code panel

The whole point of the site is lifting a snippet into your own notebook,
which until now meant selecting the pygments markup by hand. One
delegated click handler covers all 101 panels and falls back to a
"Press ⌘C" hint where the clipboard API is unavailable.

Also drops the $.bigfoot() call: the library was never loaded, so it threw
on every page load.

Author: tdhopper

templates/t_index.html

@@ -135,7 +135,10 @@ <h3 class="card-title mb-1"><a href="#{{ slug }}"><i class="fa fa-link" aria-hid
                           </a>
                         </div>
                         <div class="col-lg-6 col-xs-12 p-0 right-col d-inline-flex flex-column">
-                          <h6 class="text-muted mb-0 pb-0 pt-3 px-3">Code:</h6>
+                          <div class="code-head d-flex justify-content-between align-items-center pt-3 px-3">
+                            <h6 class="text-muted mb-0 pb-0">Code:</h6>
+                            <button type="button" class="copy-btn" data-copy aria-label="Copy code for {{ name }} with {{ plot['package'] }}">Copy</button>
+                          </div>
                           {% if plot['package'] == "ggplot" %}
                             <code class="p-0 mb-auto">{% highlight 'R' %}{{ plot['content'] }}{% endhighlight %}</code>
                           {% else %}
@@ -181,7 +184,30 @@ <h6 class="text-muted">Note:</h6>
           event.preventDefault();
           $(this).ekkoLightbox({alwaysShowClose: true});
       });
-      $.bigfoot();
+    </script>
+
+    <script type="text/javascript">
+      document.addEventListener('click', function (event) {
+        var button = event.target.closest('[data-copy]');
+        if (!button) { return; }
+        var panel = button.closest('.right-col');
+        var code = panel && panel.querySelector('code');
+        if (!code) { return; }
+        var text = code.textContent.replace(/\s+$/, '');
+        var done = function (label) {
+          button.textContent = label;
+          setTimeout(function () { button.textContent = 'Copy'; }, 1500);
+        };
+        if (navigator.clipboard && navigator.clipboard.writeText) {
+          navigator.clipboard.writeText(text).then(function () {
+            done('Copied');
+          }, function () {
+            done('Press ⌘C');
+          });
+        } else {
+          done('Press ⌘C');
+        }
+      });
     </script>
   </body>
 </html>

web/css/custom.css

@@ -27,6 +27,27 @@ table {
     font-family: monospace;
 }
 
+/* Copy button sitting in the dark code panel header. */
+.copy-btn {
+    background: transparent;
+    border: 1px solid #4a4a4a;
+    border-radius: 3px;
+    color: #9a9a9a;
+    cursor: pointer;
+    font-size: .75rem;
+    line-height: 1.2;
+    min-width: 4.5rem;
+    padding: .15rem .5rem;
+    transition: color .15s ease, border-color .15s ease;
+}
+
+.copy-btn:hover,
+.copy-btn:focus {
+    border-color: #7a7a7a;
+    color: #e6e6e6;
+    outline: none;
+}
+
 @media (min-width: 1600px) {
   .container {
     width: 1440px;