Hugo Copy Button

mkdir -p static/js/

cat << 'EOF' > static/js/copy-code.js
(function() {
  'use strict';

  if(!document.queryCommandSupported('copy')) {
    return;
  }

  function flashCopyMessage(el, msg) {
    el.textContent = msg;
    setTimeout(function() {
      el.textContent = "Copy";
    }, 1000);
  }

  function selectText(node) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
    return selection;
  }

  function addCopyButton(containerEl) {
    var copyBtn = document.createElement("button");
    copyBtn.className = "highlight-copy-btn";
    copyBtn.textContent = "Copy";

    var codeEl = containerEl.firstElementChild;
    copyBtn.addEventListener('click', function() {
      try {
        var selection = selectText(codeEl);
        document.execCommand('copy');
        selection.removeAllRanges();

        flashCopyMessage(copyBtn, 'Copied!')
      } catch(e) {
        console && console.log(e);
        flashCopyMessage(copyBtn, 'Failed :\'(')
      }
    });

    containerEl.appendChild(copyBtn);
  }

  // Add copy button to code blocks
  var highlightBlocks = document.getElementsByClassName('highlight');
  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();
EOF

vim themes/mainroad/layouts/partials/header.html

<script defer language="javascript" type="text/javascript"  src="{{ "/js/copy-code.js" | urlize | relURL }}"></script>

cat << 'EOF' >> themes/mainroad/assets/css/style.css

.highlight {
    position: relative;
}
.highlight pre {
    padding-right: 75px;
}
.highlight-copy-btn {
    position: absolute;
    top: 7px;
    right: 7px;
    border: 0;
    border-radius: 4px;
    padding: 1px;
    font-size: 0.7em;
    line-height: 1.8;
    color: #fff;
    background-color: #777;
    min-width: 55px;
    text-align: center;
}
.highlight-copy-btn:hover {
    background-color: #666;
}

EOF

sed -i 's/1080px/1680px/' themes/mainroad/assets/css/style.css

cat << 'EOF' > patch.txt
commit 426f8f388b8d5e105e53f2cdf05422308567a9be
Author: Daniel Stocker <[email protected]>
Date:   Tue Apr 9 07:14:34 2024 +0200

    update

diff --git a/themes/mainroad/assets/css/style.css b/themes/mainroad/assets/css/style.css
index 651a2c7..591c3f1 100644
--- a/themes/mainroad/assets/css/style.css
+++ b/themes/mainroad/assets/css/style.css
@@ -62,7 +62,7 @@ body {
 .container {
 	position: relative;
 	width: 100%;
-	max-width: 1080px;
+	max-width: 1680px;
 	margin: 0 auto;
 }
 
@@ -1323,3 +1323,27 @@ textarea {
 		font-size: .6875rem;
 	}
 }
+
+.highlight {
+    position: relative;
+}
+.highlight pre {
+    padding-right: 75px;
+}
+.highlight-copy-btn {
+    position: absolute;
+    top: 7px;
+    right: 7px;
+    border: 0;
+    border-radius: 4px;
+    padding: 1px;
+    font-size: 0.7em;
+    line-height: 1.8;
+    color: #fff;
+    background-color: #777;
+    min-width: 55px;
+    text-align: center;
+}
+.highlight-copy-btn:hover {
+    background-color: #666;
+}
diff --git a/themes/mainroad/layouts/partials/header.html b/themes/mainroad/layouts/partials/header.html
index 81b7e14..8133334 100644
--- a/themes/mainroad/layouts/partials/header.html
+++ b/themes/mainroad/layouts/partials/header.html
@@ -1,6 +1,7 @@
 <header class="header">
-	<div class="container header__container">
-		{{ partial "logo.html" . }}
-		{{ partial "menu.html" . }}
-	</div>
-</header>
\ No newline at end of file
+  <div class="container header__container">
+    {{ partial "logo.html" . }}
+    {{ partial "menu.html" . }}
+  </div>
+  <script defer language="javascript" type="text/javascript"  src="{{ "/js/copy-code.js" | urlize | relURL }}"></script>
+</header>
EOF