Add permalinks for headings

2024-12-25 06:19:27 +01:00 · 2018-05-24 12:27:09 +02:00 · 2018-05-24 12:27:09 +02:00 · 5a6b10911b
commit 5a6b10911b
parent 2d1c051d1c
2 changed files with 31 additions and 4 deletions
--- a/_layouts/common.html
+++ b/_layouts/common.html
@ -19,5 +19,14 @@
    </head>
    <body>
 {{ content }}
+        <script>
+         // add permalink on headings
+         document.querySelectorAll('h2, h3, h4, h5, h5').forEach((heading) => {
+             const link = document.createElement('a');
+             link.className = 'permalink';
+             link.href = `#${heading.id}`;
+             heading.appendChild(link);
+         });
+        </script>
    </body>
 </html>
--- a/style.scss
+++ b/style.scss
@ -46,11 +46,29 @@ a:hover {
    color: $hover;
 }

-// fragment targets
+// permalink on headings

-*:target {
-    border-left: 5px solid $accent;
-    padding-left: 5px;
+h2, h3, h4, h5, h5 {
+    .permalink {
+        margin-left: 5px;
+        text-decoration: none;
+        visibility: hidden;
+
+        &::before {
+            content: "#";
+        }
+    }
+
+    &:target {
+        border-left: 5px solid $accent;
+        padding-left: 5px;
+    }
+
+    &:hover {
+        .permalink {
+            visibility: visible;
+        }
+    }
 }

 // binary list and search