From 3a522997f7b87d342df63917753eddeddac96c9c Mon Sep 17 00:00:00 2001
From: Fredrik Jonsson <frjo@xdeb.org>
Date: Sun, 12 Jan 2025 19:09:34 +0100
Subject: [PATCH] Improve render hook example for headings.

---
 assets/sass/_zen.scss                         | 30 +++++++++++++++++++
 .../_markup/render-heading.html.example       | 11 +++++--
 2 files changed, 38 insertions(+), 3 deletions(-)

diff --git a/assets/sass/_zen.scss b/assets/sass/_zen.scss
index 375fa7a..c41f8b9 100644
--- a/assets/sass/_zen.scss
+++ b/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 {
diff --git a/layouts/_default/_markup/render-heading.html.example b/layouts/_default/_markup/render-heading.html.example
index 415fd42..b2aa03a 100644
--- a/layouts/_default/_markup/render-heading.html.example
+++ b/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>