Add clickable anchors

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

@@ -1,20 +1,42 @@
 window.addEventListener("load", () => {
+    // Enlarged floating figures
     for (let figure of document.getElementsByTagName("figure")) {
-        if (figure.classList.contains("post-cover") || figure.classList.contains("portfolio-cover"))
-            continue
+        if (
+            figure.classList.contains("post-cover") ||
+            figure.classList.contains("portfolio-cover")
+        )
+            continue;
 
         figure.addEventListener("click", () => {
-            figure.classList.toggle("floated-focus")
-        })
+            figure.classList.toggle("floated-focus");
+        });
     }
 
-    document.addEventListener('keydown', (e) => {
-        if (e.keyCode !== 27)
-            return
+    document.addEventListener("keydown", (e) => {
+        if (e.keyCode !== 27) return;
 
         for (let figure of document.getElementsByClassName("floated-focus")) {
-            figure.classList.remove("floated-focus")
+            figure.classList.remove("floated-focus");
         }
+    });
 
-    })
-})
+    // Add anchors to article headings
+    for (let article of document.getElementsByTagName("article")) {
+        for (let heading of article.querySelectorAll(
+            "h1, h2, h3, h4, h5, h6"
+        )) {
+            if (!heading.id) continue;
+
+            let anchor = document.createElement("a");
+            anchor.innerHTML = heading.innerHTML;
+            anchor.href = "#" + heading.id;
+            heading.innerHTML = "";
+            heading.appendChild(anchor);
+            heading.classList.add("article-heading");
+
+            anchor.addEventListener("click", (e) => {
+                navigator.clipboard.writeText(anchor.href);
+            });
+        }
+    }
+});

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

@@ -477,4 +477,46 @@ table {
       display: inline;
     }
   }
-}
+}
+
+.article-heading {
+  a {
+    position: relative;
+    text-decoration: none;
+
+    &:hover {
+      &::after {
+        content: " ";
+        display: inline-block;
+        position: absolute;
+        top: 50%;
+        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-repeat: no-repeat;
+        background-position: center;
+        background-size: auto 50%;
+      }
+    }
+
+    @media #{$media-size-tablet-min} {
+      &:hover {
+        &::after {
+          right: 100%;
+          width: 1.5em;
+
+        }
+      }
+    }
+
+    @media #{$media-size-tablet} {
+      &:hover {
+        &::after {
+          left: 100%;
+          width: 1.2em;
+        }
+      }
+    }
+  }
+}

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

@@ -15,7 +15,9 @@ $dark-color-secondary: #73747b;
 $dark-border-color: #4a4b50;
 
 $media-size-phone: "(max-width: 684px)";
+$media-size-phone-min: "(min-width: 684px)";
 $media-size-tablet: "(max-width: 900px)";
+$media-size-tablet-min: "(min-width: 900px)";
 $media-size-medium: "(max-width: 1200px)";
 $media-size-medium-min: "(min-width: 1200px)";