Codeblock: Add code type and copy button

Use render codeblock hook to add head for code type and copy button
Add code type pulled from render codeblock hook
Add code-copy-v2 which has click handler for new copy button

Author: nginx-jack

assets/css/v2/style.css

@@ -988,16 +988,61 @@ blockquote.side-callout {
 
 /* Codeblocks */
 .highlight {
+  grid-column: 1 / -1 !important;
   position: relative;
   z-index: -1;
 
+  /* mad attempt at a border */
+  /* border: 1px solid #cccccc;
+  padding: 1rem; */
+  /* mad attempt at a border */
+
   code .cl {
     position: relative;
     width: 100%;
     white-space: pre-wrap;
   }
 }
 
+.code-header {
+  grid-column: 1 / -1 !important;
+}
+
+.code-type {
+  margin-left: 1rem;
+  text-transform: uppercase;
+  border: 1px solid #cccccc;
+  border-bottom: 1px solid white;
+  padding: .25rem 1rem; /* Padding for button content */
+  font-size: 12px; /* Font size */
+  z-index: 9999;
+  margin-bottom: -1px;
+}
+
+.code-copy-button {
+  background-color: #f2f2f2;
+  border: none;
+  padding: 5px 10px;
+  cursor: pointer;
+  font-family: "JetBrains Mono", monospace;
+  font-size: 12px;
+  color: #000;
+}
+
+.code-copy-button:hover {
+  background-color: #e0e0e0;
+}
+
+.code-copy-button:focus {
+  outline: none;
+  box-shadow: 0 0 2px 2px #a5a5a5;
+}
+
+.code-header {
+  display: flex;
+  justify-content: space-between;
+}
+
 .highlight-mf {
   grid-column: 1 / -1 !important;
   position: relative;
@@ -1174,6 +1219,7 @@ figure {
 /* FILTHY HACKS END */
 
 /* Hidden temporarily */
+
 .code-copy {
   display: none;
 }

assets/js/code-copy-v2.js

@@ -0,0 +1,38 @@
+// Tightly coupled to `render-codeblock.html` for element targeting
+const copyToClipBoard = ((clipboard) => async (button) => {
+  const codeBlock = button.parentNode.nextElementSibling;
+
+  if (!codeBlock) {
+    console.error('No code block found to copy from.');
+    button.innerHTML = 'Error';
+    return;
+  }
+
+  const cleanCode = codeBlock.textContent
+    .replace(/^\s*\d+\s/gm, '') // Remove line numbers
+    .trim();
+
+  try {
+    await clipboard.writeText(cleanCode);
+
+    updateButtonState(button, 'Copied!', 2000, true);
+  } catch (error) {
+    updateButtonState(button, 'Error');
+    console.error(error);
+  }
+})(navigator.clipboard);
+
+const updateButtonState = (button, message, revertDelay, disable = false) => {
+  button.innerHTML = message;
+
+  if (disable) {
+    button.disabled = true;
+  }
+
+  if (revertDelay) {
+    setTimeout(() => {
+      button.innerHTML = 'Copy';
+      button.disabled = false;
+    }, revertDelay);
+  }
+};

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,7 @@
+<div class="code-header">
+    <span class="code-type">{{ .Type }}</span>
+    <button onclick="copyToClipBoard(this)" class="code-copy-button" type="button">Copy</button>
+</div>
+
+{{ $result := transform.HighlightCodeBlock . }}
+{{ $result.Wrapped }}

layouts/partials/scripts.html

@@ -13,6 +13,10 @@
 {{ $codecopy := resources.Get "/js/code-copy.js" | fingerprint "sha512" }}
 <script src="{{ $codecopy.RelPermalink }}" type="text/javascript"></script>
 
+<!-- load code copy v2 js -->
+{{ $codecopyv2 := resources.Get "/js/code-copy-v2.js" | fingerprint "sha512" }}
+<script src="{{ $codecopyv2.RelPermalink }}" type="text/javascript"></script>
+
 <!-- load mermaid.js -->
 {{ if .Page.Store.Get "hasMermaid" }}
 {{ $mermaid := resources.Get "js/mermaid.min.js" | fingerprint "sha512" }}