chore(code-window): Enhance copy button and language label

Author: jeanjerome

_plugins/highlight-linedivs.rb

@@ -73,15 +73,19 @@ def render(context)
                     </g>
                 </svg>
             </div>
-            <button class=\"window-copy\">
-                <svg xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">
-                  <path d=\"M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z\"/>
+            <div class=\"window-copy\">
+                <svg xmlns=\"http://www.w3.org/2000/svg\" class=\"window-copy-icon\" height=\"24\" width=\"24\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"1.5\">
+                  <path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"></path>
+                  <path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"></path>
                 </svg>
-            </button>
+            </div>
         </div>
 "
         suffix = " " \
 "
+        <div class=\"code-label\">
+            #{@lang.capitalize}
+        </div>
     </div>
 </div>
 "

_sass/_highlight.scss

@@ -53,7 +53,23 @@ $background: var(--code-background);
     &:hover {
         transform: translate(0px, -4px);
         box-shadow: 0 10px 50px rgba(var(--shadow-color-flashy), .2);
-      }
+    }
+}
+
+.code-label {
+  display: flex;
+  align-items: flex-end;
+  padding-bottom: 10px;
+  padding-right: 20px;
+  width: 100%;
+  justify-content: flex-end;
+  color: #fbfbfb;
+  //font-size: 14px;
+  font-family: "Mulish", sans-serif;
+  font-weight: 800;
+  opacity: 0.5;
+  line-height: 1;
+  position: relative;
 }
 
 .window-header {
@@ -70,11 +86,47 @@ $background: var(--code-background);
     }
 
     .window-copy {
-        color: #fbfbfb;
-        fill: #fbfbfb;
-        float: right;
-        margin-right: 14px;
+      color: #fbfbfb;
+      float: right;
+      margin-right: 14px;
+      cursor: pointer;
+
+      .window-copy-icon {
+        position: absolute;
+        top: 0;
+        right: 14px;
+        left: auto;
+        border: none;
         cursor: pointer;
+        opacity: 0.5;
+        transition: opacity 200ms ease-in-out;
+        background: none;
+        box-shadow: none;
+
+        &:hover {
+          opacity: 0.8;
+        }
+
+        .without-check {
+          display: block;
+        }
+
+        .with-check {
+          display: none;
+        }
+
+        &.copied {
+          opacity: 1;
+
+          .without-check {
+            display: none;
+          }
+
+          .with-check {
+            display: block;
+          }
+        }
+      }
     }
 }
 
@@ -102,25 +154,6 @@ figure.highlight {
             flex: 0 0 auto;
             /* Use a counter to generate the line numbers */
             counter-reset: code;
-            
-            /* Display language name */
-            &[data-lang]::before {
-                font-family: 'metropolisbold',sans-serif;
-                color: #f8f8f2;
-                content: "</>" " " attr(data-lang);
-                position: absolute;
-                margin: 0px;
-                top: -37px;
-                left: -9px;
-                width: 100%;
-                text-align: center;
-                &[data-lang="zsh"] {
-                  content: "%_ Zsh";
-                }
-                &[data-lang="bash"] {
-                  content: "$_ Bash";
-                }
-            }
 
             div {
             /* Increment the counter for each div */
@@ -129,7 +162,7 @@ figure.highlight {
             &:before {
                 content: counter(code);
 
-                /* Hacky, but necessary. Without these lines, single-digit line 
+                /* Hacky, but necessary. Without these lines, single-digit line
                 /* numbers will not line up with double-digit ones. Change width
                 /* to suit your font. */
                 width: 1.8em;

_sass/parts/_post-page.scss

@@ -401,7 +401,7 @@
   align-items: center;
   justify-content: space-between;
   margin-top: 50px;
-  margin-bottom: 50px;
+//  margin-bottom: 50px;
   margin-bottom: 20px;
   line-height: 15px;
   h4 {

darkmode.js

@@ -44,7 +44,7 @@ initDarkMode();
 
 // This assumes that you're using Rouge; if not, update the selector
 const codeBlocks = document.querySelectorAll('.highlight');
-const copyCodeButtons = document.querySelectorAll('.window-copy');
+const copyCodeButtons = document.querySelectorAll('.window-copy-icon');
 
 copyCodeButtons.forEach((copyCodeButton, index) => {
   const code = codeBlocks[index].innerText;
@@ -54,16 +54,16 @@ copyCodeButtons.forEach((copyCodeButton, index) => {
     window.navigator.clipboard.writeText(code);
 
     // Update the button text visually
-    const { innerHTML: originalText } = copyCodeButton;
-    copyCodeButton.innerText = 'Copied!';
+    ////const { innerHTML: originalText } = copyCodeButton;
+    ////copyCodeButton.innerText = 'Copied!';
 
     // (Optional) Toggle a class for styling the button
-    //copyCodeButton.classList.add('copied');
+    copyCodeButton.classList.add('copied');
 
     // After 2 seconds, reset the button to its initial UI
     setTimeout(() => {
-      copyCodeButton.innerHTML = originalText;
-      //copyCodeButton.classList.remove('copied');
+      ////copyCodeButton.innerHTML = originalText;
+      copyCodeButton.classList.remove('copied');
     }, 1000);
   });
 });