Add copy button

daprdocs/assets/scss/_code.scss

@@ -1,14 +1,53 @@
 // Code formatting.
 
+.copy-code-button {
+    color: #272822;
+    background-color: #FFF;
+    border-color: #0D2192;
+    border: 2px solid;
+    border-radius: 3px 3px 0px 0px;
+
+    /* right-align */
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
+
+    margin-bottom: -2px;
+    padding: 3px 8px;
+    font-size: 0.8em;
+}
+
+.copy-code-button:hover {
+    cursor: pointer;
+    background-color: #F2F2F2;
+}
+
+.copy-code-button:focus {
+    /* Avoid an ugly focus outline on click in Chrome,
+       but darken the button for accessibility.
+       See https://stackoverflow.com/a/25298082/1481479 */
+    background-color: #E6E6E6;
+    outline: 0;
+}
+
+.copy-code-button:active {
+    background-color: #D9D9D9;
+}
+
+.highlight pre {
+    /* Avoid pushing up the copy buttons. */
+    margin: 0;
+}
+
 .td-content {
 	// Highlighted code.
     .highlight {
         @extend .card;
 	
-        margin: 2rem 0;
-        padding: 0;
+        margin: 0rem 0;
+        padding: 0rem;
 
-        max-width: 80%;
+        max-width: 100%;
 	    
         pre {
             margin: 0;
@@ -37,7 +76,8 @@
         word-wrap: normal;
         background-color: $gray-100;
         padding: $spacer;
-     
+    
+        max-width: 100%;
 
         > code {
 	    background-color: inherit !important;

daprdocs/layouts/partials/hooks/body-end.html

@@ -14,4 +14,6 @@
     debug: false,
   });
 </script>
-{{ end }}
+{{ end }}
+
+<script src="/js/copy-code-button.js"></script>

daprdocs/static/js/copy-code-button.js

@@ -0,0 +1,49 @@
+function addCopyButtons(clipboard) {
+    document.querySelectorAll('pre > code').forEach(function(codeBlock) {
+        var button = document.createElement('button');
+        button.className = 'copy-code-button';
+        button.type = 'button';
+        button.innerText = 'Copy';
+
+        button.addEventListener('click', function() {
+            clipboard.writeText(codeBlock.textContent).then(
+                function() {
+                    button.blur();
+
+                    button.innerText = 'Copied!';
+                    setTimeout(function() {
+                        button.innerText = 'Copy';
+                    }, 2000);
+                },
+                function(error) {
+                    button.innerText = 'Error';
+                    console.error(error);
+                }
+            );
+        });
+
+        var pre = codeBlock.parentNode;
+        if (pre.parentNode.classList.contains('highlight')) {
+            var highlight = pre.parentNode;
+            highlight.parentNode.insertBefore(button, highlight);
+        } else {
+            pre.parentNode.insertBefore(button, pre);
+        }
+    });
+}
+
+if (navigator && navigator.clipboard) {
+    addCopyButtons(navigator.clipboard);
+} else {
+    var script = document.createElement('script');
+    script.src =
+        'https://cdnjs.cloudflare.com/ajax/libs/clipboard-polyfill/2.7.0/clipboard-polyfill.promise.js';
+    script.integrity = 'sha256-waClS2re9NUbXRsryKoof+F9qc1gjjIhc2eT7ZbIv94=';
+    script.crossOrigin = 'anonymous';
+
+    script.onload = function() {
+        addCopyButtons(clipboard);
+    };
+
+    document.body.appendChild(script);
+}