Merge pull request #606 from HIMU-2001/heading-permalinks

Implemented Heading Permalinks with Hover/Visible Chain Icon #596

Author: zihanKuang

assets/scss/_elements_project.scss

@@ -149,4 +149,26 @@ div.tip {
   font-size: 1rem;
   font-weight: 600;
   word-break: break-word;
-}
+}
+
+.heading-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+
+  .heading-anchor {
+    font-size: 0.6em;
+    opacity: 0;
+    transform: translateY(2px);
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    margin-left: 0.25rem;
+    text-decoration: none;
+  }
+
+  &:hover .heading-anchor {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+

assets/scss/_styles_project.scss

@@ -11,6 +11,7 @@
 @import "_videos_project.scss";
 @import "subscription.scss";
 @import "_video-landing_project.scss";
+@import "elements_project";
 
 .navbar-dark {
   min-height: 5rem;

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,9 @@
+{{- $level := .Level -}}
+{{- $text := .Text | safeHTML -}}
+{{- $anchor := .Anchor | safeURL -}}
+
+{{ $level := .Level }}
+<h{{ $level }} id="{{ .Anchor | safeURL }}" class="heading-link">
+  {{ .Text }}
+  <a href="#{{ .Anchor | safeURL }}" class="heading-anchor" aria-label="Permalink to this heading">🔗</a>
+</h{{ $level }}>