F OpenNebula/one#7635: Add anchor links to all headings (#645)

This PR introduces an anchor link for headings of all levels, such that
developers can easily send clients links to specific documentation
sections, including those that are below the heading level displayed in
the right hand TOC.

(cherry picked from commit 5a9707e)

Author: mattrowe-opennebula

assets/scss/_styles_project.scss

@@ -14,6 +14,7 @@
 @import "image/_styles_project_image.scss";
 @import "dashboard/_styles_project_dashboard.scss";
 @import "search-docs/_styles_project_search_docs.scss";
+@import "heading/styles_project_heading.scss";
 @import "_styles_fonts";
 
 /**

assets/scss/heading/_styles_project_heading.scss

@@ -0,0 +1,37 @@
+// Styles for heading anchor links (h1-h6)
+.td-content {
+    .anchor-link {
+        visibility: hidden !important;
+        opacity: 0 !important;
+        margin-left: 0.4rem;
+        font-size: 0.8em;
+        text-decoration: none !important;
+        transition: opacity 0.2s ease-in-out, color 0.2s ease;
+        
+        /* Light mode default color */
+        color: rgba(0, 0, 0, 0.3) !important;
+    }
+
+    /* Target headers explicitly within the content area */
+    h1, h2, h3, h4, h5, h6 {
+        &:hover .anchor-link {
+            visibility: visible !important;
+            opacity: 1 !important;
+        }
+    }
+
+    /* Hover state for the link itself */
+    .anchor-link:hover {
+        color: #007bff !important; 
+    }
+}
+
+// Dark mode overrides
+html[data-bs-theme="dark"] .td-content {
+    .anchor-link {
+        color: rgba(255, 255, 255, 0.3) !important;
+    }
+    .anchor-link:hover {
+        color: #4dabff !important;
+    }
+}

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,6 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">
+  {{ .Text | safeHTML }}
+  <a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section">
+    <i class="fas fa-link fa-xs"></i>
+  </a>
+</h{{ .Level }}>