Improve render hook example for headings.

assets/sass/_zen.scss

@@ -128,6 +128,36 @@ article {
   }
 }
 
+// Anchor
+
+.anchor {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-items: baseline;
+  gap: .5rem;
+
+  a {
+    opacity: 0;
+    text-decoration: none;
+  }
+
+  &:focus-visible,
+  &:hover {
+    a {
+      opacity: .4;
+
+      &:focus-visible,
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+
+  p:has(+ &) {
+    margin-block-end: 0;
+  }
+}
+
 // Search
 
 .search-text {

layouts/_default/_markup/render-heading.html.example

@@ -1,7 +1,12 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="icon-inline"{{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
+<div class="anchor">
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" {{ range $k, $v := .Attributes }}{{ printf " %s=%q" $k $v | safeHTMLAttr }}{{ end }}>
 {{- .Text | safeHTML -}}
-<a class="icon-link" href="#{{ .Anchor | safeURL }}" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
+</h{{ .Level }}>
+<a class="" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "string_permalink" }}: {{ .Text | safeHTML }}">
+  <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
   <path stroke="none" d="M0 0h24v24H0z" fill="none" />
   <path d="M10 14a3.5 3.5 0 0 0 5 0l4 -4a3.5 3.5 0 0 0 -5 -5l-.5 .5" />
   <path d="M14 10a3.5 3.5 0 0 0 -5 0l-4 4a3.5 3.5 0 0 0 5 5l.5 -.5" />
-</svg></a></h{{ .Level }}>
+  </svg>
+</a>
+</div>