Add success indicator for code block copy button

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Enhancements
+
+- Change the icon of a copy button into a tick for 1.5 seconds on successful copy.
+
 ## [4.26.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.26.0)
 
 ### Bug Fixes

_sass/minimal-mistakes/_utilities.scss

@@ -613,6 +613,8 @@ pre {
     position: absolute;
     top: 0.6em;
     right: 0.5em;
+    width: 1.8em;
+    height: 1.5em;
     z-index: 1;
     background: none;
     border: none;
@@ -637,6 +639,22 @@ pre {
       z-index: 2;
     }
 
+    i {
+      position: absolute;
+      top: 0.25em;
+      right: 0.25em;
+      &.copied {
+        opacity: 0;
+      }
+    }
+
+    &.copied i {
+      opacity: 0;
+      &.copied {
+        opacity: 1;
+      }
+    }
+
     @at-root {
       .no-copy & {
         display: none;

assets/js/_main.js

@@ -190,6 +190,17 @@ $(document).ready(function () {
     var result = copyText(codeBlock.innerText);
     // Restore the focus to the button
     thisButton.focus();
+    if (result) {
+      if (thisButton.interval !== null) {
+        clearInterval(thisButton.interval);
+      }
+      thisButton.classList.add('copied');
+      thisButton.interval = setTimeout(function () {
+        thisButton.classList.remove('copied');
+        clearInterval(thisButton.interval);
+        thisButton.interval = null;
+      }, 1500);
+    }
     return result;
   };
 
@@ -206,7 +217,7 @@ $(document).ready(function () {
         var copyButton = document.createElement("button");
         copyButton.title = "Copy to clipboard";
         copyButton.className = "clipboard-copy-button";
-        copyButton.innerHTML = '<span class="sr-only">Copy code</span><i class="far fa-copy"></i>';
+        copyButton.innerHTML = '<span class="sr-only">Copy code</span><i class="far fa-fw fa-copy"></i><i class="fas fa-fw fa-check copied"></i>';
         copyButton.addEventListener("click", copyButtonEventListener);
         container.prepend(copyButton);
       });

docs/_docs/18-history.md

@@ -5,7 +5,7 @@ permalink: "/docs/history/"
 excerpt: Change log of enhancements and bug fixes made to the theme.
 sidebar:
   nav: docs
-last_modified_at: '2024-05-05T19:50:49+08:00'
+last_modified_at: '2024-05-06T01:20:38+08:00'
 toc: false
 ---
 
@@ -17,6 +17,12 @@ toc: false
 {% raw %}
 ## Unreleased
 
+### Enhancements
+
+- Change the icon of a copy button into a tick for 1.5 seconds on successful copy.
+
+## [4.26.0](https://github.com/mmistakes/minimal-mistakes/releases/tag/4.26.0)
+
 ### Bug Fixes
 
 - Fix an unclosed `<p>` tag in `page__hero.html`, near `page.header.actions`.