From 18e1aa916d8af6a41a73f58a644c8fc698f01820 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?=
 <bjorn.erik.pedersen@gmail.com>
Date: Sun, 16 Feb 2025 20:27:58 +0100
Subject: [PATCH] theme: Add anchor links via JS

---
 assets/js/alpinejs/data/navbar.js            | 17 +++++++++++++++++
 hugo.toml                                    |  3 ++-
 layouts/_default/_markup/render-heading.html | 11 +----------
 layouts/_default/baseof.html                 |  2 ++
 layouts/partials/layouts/header/header.html  |  2 +-
 layouts/partials/layouts/templates.html      |  7 +++++++
 6 files changed, 30 insertions(+), 12 deletions(-)
 create mode 100644 layouts/partials/layouts/templates.html

diff --git a/assets/js/alpinejs/data/navbar.js b/assets/js/alpinejs/data/navbar.js
index d2b119f0c..ecf31af0e 100644
--- a/assets/js/alpinejs/data/navbar.js
+++ b/assets/js/alpinejs/data/navbar.js
@@ -1,6 +1,23 @@
 export const navbar = (Alpine) => ({
 	init: function () {
 		Alpine.bind(this.$root, this.root);
+
+		return this.$nextTick(() => {
+			let contentEl = document.querySelector('.content:not(.content--ready)');
+			if (contentEl) {
+				contentEl.classList.add('content--ready');
+				let anchorTemplate = document.getElementById('anchor-heading');
+				if (anchorTemplate) {
+					let els = contentEl.querySelectorAll('h2[id], h3[id], h4[id], h5[id], h6[id], dt[id]');
+					for (let i = 0; i < els.length; i++) {
+						let el = els[i];
+						let a = anchorTemplate.content.cloneNode(true).firstElementChild;
+						a.href = '#' + el.id;
+						el.appendChild(a);
+					}
+				}
+			}
+		});
 	},
 	root: {
 		['@scroll.window.debounce.10ms'](event) {
diff --git a/hugo.toml b/hugo.toml
index 8c43c8a04..71316a456 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -88,7 +88,8 @@ disableAliases = true
 
     [markup.goldmark.parser]
         autoHeadingID     = true
-        autoHeadingIDType = "github"
+        autoDefinitionTermID = true
+        autoIDType = "github"
 
         [markup.goldmark.parser.attribute]
             block = true
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index c0e6c63ec..eb3a38f8e 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1,10 +1 @@
-<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
-  {{- if in (slice 2 3 4 6) .Level }}{{" " -}}
-  <a class="anchor" name="{{ .Anchor }}"></a>
-  <a class="inline-flex items-center" href="#{{ .Anchor | safeURL }}" aria-label="Anchor">
-    <svg class="fill-primary hover:fill-primary/70 w-4 h-4">
-      <use href="#icon--anchor"></use>
-    </svg>
-  </a>
-{{- end -}}
-</h{{ .Level }}>
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 20b9e7d9d..2193dd7fb 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -60,6 +60,8 @@
     </div>
     {{/* Common icons. */}}
     {{ partial "layouts/icons.html" . }}
+    {{/* Common templates. */}}
+    {{ partial "layouts/templates.html" . }}
     {{/* Footer. */}}
     {{ block "footer" . }}
       {{ partial "layouts/footer.html" . }}
diff --git a/layouts/partials/layouts/header/header.html b/layouts/partials/layouts/header/header.html
index 079c40bae..0d2e720d7 100644
--- a/layouts/partials/layouts/header/header.html
+++ b/layouts/partials/layouts/header/header.html
@@ -2,7 +2,7 @@
   x-data="navbar"
   class="print:hidden sticky top-0 z-50 bg-blue-950 flex flex-none flex-wrap items-center justify-between px-4 py-5 shadow-md shadow-slate-900/5 transition duration-500 sm:px-6 lg:px-8 dark:shadow-none"
   :class="$store.nav.scroll.atTop ? '': 'bg-blue-950/80'">
-  <div class="relative flex basis-0 items-cente mr-2 lg:mr-8">
+  <div class="relative flex basis-0 items-center mr-2 lg:mr-8">
     {{ with site.Home }}
       <a
         class="text-white text-xl font-bold upper"
diff --git a/layouts/partials/layouts/templates.html b/layouts/partials/layouts/templates.html
new file mode 100644
index 000000000..d6d217251
--- /dev/null
+++ b/layouts/partials/layouts/templates.html
@@ -0,0 +1,7 @@
+<template id="anchor-heading">
+  <a class="inline-flex items-center" aria-label="Anchor">
+    <svg class="ml-2 fill-primary hover:fill-primary/70 w-4 h-4">
+      <use href="#icon--anchor"></use>
+    </svg>
+  </a>
+</template>