feat: add copy button to code blocks (#20)

* feat: add copy button to code blocks

* fix: css update

Author: JTorreG

assets/css/f5-hugo.css

@@ -7,6 +7,37 @@
     padding-left: 8px;
 }
 
+.code-copy {
+    color: #272822;
+    background-color: #fff;
+    border-color: #272822;
+    border: 1px solid;
+    border-radius: 4px 4px 0px 0px;
+    display: block;
+    margin-left: auto;
+    margin-right: 0;
+    margin-bottom: -12px;
+    padding: 3px 8px;
+    font-size: 0.8em;
+}
+
+.code-copy:hover {
+    cursor: pointer;
+    background-color: #009639;
+    color: #ffffff;
+    border-color: #272822!important;
+    border: 1px solid;
+}
+
+.code-copy:focus {
+    outline: 0px solid transparent;
+    background-color: #e6e6e6;
+}
+
+.code-copy:active {
+    background-color: #d9d9d9;
+}
+
 .button {
     text-transform: uppercase;
     font-size: 14px;
@@ -742,6 +773,10 @@ pre {
     border-radius: 4px;
 }
 
+pre.chroma {
+    border-radius: 4px 0px 4px 4px;
+}
+
 code {
     font-family: Courier;
     color: #343434;
@@ -1152,4 +1187,7 @@ ol.breadcrumb > li:first-child {
 
 .fa, .far, .fas {
     padding-right: 4px;    
-}
+}
+
+
+

assets/js/code-copy.js

@@ -0,0 +1,34 @@
+function CopyCode(clipboard) {
+    document.querySelectorAll('pre > code').forEach(function(codeBlock) {
+        var button = document.createElement('button');
+        button.className = 'code-copy';
+        button.type = 'button';
+        button.innerHTML = '<i class="fas fa-copy"></i> Copy';
+
+        button.addEventListener('click', function() {
+            clipboard.writeText(codeBlock.textContent).then(
+                function() {
+                    button.blur(); /* Chrome fix */
+                    button.innerHTML = '<i class="fas fa-check"></i> Copied!';
+                    setTimeout(function() {
+                        button.innerHTML = '<i class="fas fa-copy"></i> Copy';
+                    }, 2000);
+                },
+                function(error) {
+                    button.innerHTML = '<i class="fas fa-exclamation"></i> 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);
+        }
+    });
+}
+
+CopyCode(navigator.clipboard);

layouts/partials/scripts.html

@@ -10,6 +10,9 @@
 {{ $jsBootstrap := resources.Get "js/bootstrap.bundle.min.js" | fingerprint "sha512" }}
 <script src="{{ $jsBootstrap.RelPermalink }}" type="text/javascript" integrity="{{ $jsBootstrap.Data.Integrity }}"></script>
 
+<!-- load code copy js -->
+{{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }}
+<script src="{{ $codecopy.RelPermalink }}" type="text/javascript" ></script>
 
 
 <!-- START COVEO -->