Show checkmark after copying/selecting heading

themes/maik-blog/assets/js/main.js

@@ -35,7 +35,18 @@ window.addEventListener("load", () => {
             heading.classList.add("article-heading");
 
             anchor.addEventListener("click", (e) => {
+                e.preventDefault();
+
+                window.history.replaceState({}, "", anchor.href);
                 navigator.clipboard.writeText(anchor.href);
+
+                document
+                    .querySelectorAll(".current-heading")
+                    .forEach((elem) =>
+                        elem.classList.remove("current-heading")
+                    );
+
+                anchor.classList.add("current-heading");
             });
         }
     }

themes/maik-blog/assets/scss/_main.scss

@@ -508,8 +508,14 @@ table {
         position: relative;
         text-decoration: none;
 
+        --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
+
+        &.current-heading {
+            --background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22green%22%20stroke-width=%224%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-check%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22%3E%3C/polyline%3E%3C/svg%3E");
+        }
+
         &:hover {
-            &::after {
+            &::before {
                 content: " ";
                 display: inline-block;
                 position: absolute;
@@ -517,7 +523,7 @@ table {
                 transform: translateY(-50%);
                 height: 100%;
 
-                background-image: url("data:image/svg+xml, %3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%2224%22%20height=%2224%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22currentColor%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%20class=%22feather%20feather-link%22%3E%3Cpath%20d=%22M10%2013a5%205%200%200%200%207.54.54l3-3a5%205%200%200%200-7.07-7.07l-1.72%201.71%22%3E%3C/path%3E%3Cpath%20d=%22M14%2011a5%205%200%200%200-7.54-.54l-3%203a5%205%200%200%200%207.07%207.07l1.71-1.71%22%3E%3C/path%3E%3C/svg%3E");
+                background-image: var(--background-image);
                 background-repeat: no-repeat;
                 background-position: center;
                 background-size: auto 50%;
@@ -526,7 +532,7 @@ table {
 
         @media #{$media-size-tablet-min} {
             &:hover {
-                &::after {
+                &::before {
                     right: 100%;
                     width: 1.5em;
                 }
@@ -535,7 +541,7 @@ table {
 
         @media #{$media-size-tablet} {
             &:hover {
-                &::after {
+                &::before {
                     left: 100%;
                     width: 1.2em;
                 }