Replace AnchorJS with a Hugo render hook (#32953)

* Replace AnchorJS with a Hugo render hook

* docs(anchors): improve aria-label on anchor links

* docs(anchors): show anchor link when ed

* docs(anchors): add hash in pseudo-element

Co-authored-by: Gaël Poupard <ffoodd@users.noreply.github.com>

config.yml

@@ -83,3 +83,7 @@ params:
     js_bundle_hash:   "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
     popper:           "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.2/dist/umd/popper.min.js"
     popper_hash:      "sha384-q9CRHqZndzlxGLOj+xrdLDJa9ittGte1NksRmgJKeCV9DrM7Kz868XYqsKWPpAmn"
+
+  anchors:
+    min: 2
+    max: 5

site/assets/js/application.js

@@ -10,7 +10,7 @@
  * For details, see https://creativecommons.org/licenses/by/3.0/.
  */
 
-/* global ClipboardJS: false, anchors: false, bootstrap: false */
+/* global ClipboardJS: false, bootstrap: false */
 
 (function () {
   'use strict'
@@ -163,9 +163,4 @@
       tooltipBtn.setContent({ '.tooltip-inner': btnTitle })
     }, { once: true })
   })
-
-  anchors.options = {
-    icon: '#'
-  }
-  anchors.add('.bd-content > h2, .bd-content > h3, .bd-content > h4, .bd-content > h5')
 })()

site/assets/scss/_anchor.scss

@@ -1,11 +1,21 @@
-.anchorjs-link {
+.anchor-link {
+  padding: 0 .175rem;
   font-weight: 400;
   color: rgba($link-color, .5);
-  @include transition(color .15s ease-in-out);
+  text-decoration: none;
+  opacity: 0;
+  @include transition(color .15s ease-in-out, opacity .15s ease-in-out);
+
+  &::after {
+    content: "#";
+  }
 
   &:focus,
-  &:hover {
+  &:hover,
+  :hover > &,
+  :target > & {
     color: $link-color;
     text-decoration: none;
+    opacity: 1;
   }
 }

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

@@ -0,0 +1,5 @@
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
+{{- if and (ge .Level .Page.Site.Params.anchors.min) (le .Level .Page.Site.Params.anchors.max) }}{{" " -}}
+<a class="anchor-link" href="#{{ .Anchor | safeURL }}" aria-label="Link to this section: {{ .Text | safeHTML }}"></a>
+{{- end -}}
+</h{{ .Level }}>