Header anchor links: more compact, customizable & reusable

CHANGELOG.md

@@ -42,6 +42,11 @@ For the full list of changes, see the [0.9.0] release notes.
   [render-heading.html](https://gohugo.io/templates/render-hooks/) hook. This is
   _potentially_ a breaking change for projects that override the hook.
 
+  The default heading-link symbol is `#`, but it can be customized via the
+  `.td-header-link` class. Projects can also _reuse_ (in their own heading
+  render hooks) or _override_ the heading anchor-link template
+  `docsy/header-link.html` under `layouts`.
+
 - The footer layout has been factored into parts: left, right, and center, with
   copyright a subpart of center. Each part has its own style tag, for example:
   `td-footer__left`. Note that the style `td-footer__copyright-etc` has been

assets/scss/_content.scss

@@ -94,3 +94,27 @@
     font-size: 3rem;
   }
 }
+
+.td-header-link {
+  &::before {
+    content: '#';
+  }
+
+  font-size: 90%;
+  padding-left: 0.25em;
+  text-decoration: none;
+  visibility: hidden;
+
+  // Always visible on touch devices and small screens
+  @media (hover: none) and (pointer: coarse),
+  (max-width: map-get($grid-breakpoints, sm)) {
+    visibility: visible;
+  }
+
+}
+
+@for $i from 1 through 6 {
+  h#{$i}:hover>.td-header-link {
+    visibility: visible;
+  }
+}

layouts/_default/_markup/render-heading.html

@@ -1,3 +1,8 @@
-<h{{ .Level }} id="{{- .Anchor | safeURL -}}" onmouseenter="this.firstElementChild.style.visibility='visible';"  onmouseleave="this.firstElementChild.style.visibility='hidden';">{{ .Text | safeHTML }}
-<a class="header-link" href="#{{ .Anchor | safeURL }}" style="visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/></svg></a>
-</h{{ .Level }}>
+<h{{ .Level }} id="{{- .Anchor | safeURL -}}">
+  {{- .Text | safeHTML -}}
+  {{ template "docsy/header-link.html" . -}}
+</h{{ .Level }}>
+
+{{- define "docsy/header-link.html" -}}
+<a class="td-header-link" href="#{{ .Anchor | safeURL }}"></a>
+{{- end -}}