From b26d79f70644d01175851fac5eaa5396038b0f8f Mon Sep 17 00:00:00 2001
From: Luke Bemish <lukebemish@lukebemish.dev>
Date: Tue, 4 Jun 2024 22:38:39 -0500
Subject: [PATCH] Add heading anchors (#38)

---
 CONTRIBUTORS                                  |  1 +
 layouts/_default/_markup/render-heading.html  |  5 +++++
 themes/mainroad/assets/css/style.css          | 22 +++++++++++++++++++
 themes/mainroad/layouts/partials/colors.css   |  4 ++++
 themes/mainroad/layouts/partials/svg/link.svg |  1 +
 5 files changed, 33 insertions(+)
 create mode 100644 layouts/_default/_markup/render-heading.html
 create mode 100644 themes/mainroad/layouts/partials/svg/link.svg

diff --git a/CONTRIBUTORS b/CONTRIBUTORS
index 57b9dc4..fd09d85 100644
--- a/CONTRIBUTORS
+++ b/CONTRIBUTORS
@@ -1 +1,2 @@
 includes icons from the bootstrap project - discord and opencollective
+includes icons from octicons (distributed under MIT license) - link
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 0000000..a5a7ffa
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,5 @@
+<a href="#{{ .Anchor | safeURL }}" class="anchor-wrapper">
+    <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}
+        <span class="anchor-icon">{{ partial "svg/link.svg" }}</span>
+    </h{{ .Level }}>
+</a>
diff --git a/themes/mainroad/assets/css/style.css b/themes/mainroad/assets/css/style.css
index 53447ee..8816ba8 100644
--- a/themes/mainroad/assets/css/style.css
+++ b/themes/mainroad/assets/css/style.css
@@ -1346,6 +1346,28 @@ summary code:hover {
 	}
 }
 
+.anchor-wrapper .anchor-icon {
+    visibility: hidden;
+	display: inline-block;
+}
+
+.anchor-wrapper * {
+	transition: none;
+}
+
+.anchor-wrapper .anchor-icon svg {
+	height: 0.75em;
+	width: 0.75em;
+}
+
+.anchor-wrapper:hover .anchor-icon, .anchor-wrapper:focus .anchor-icon {
+    visibility: visible;
+}
+
+a.anchor-wrapper:hover, a.anchor-wrapper:focus {
+	text-decoration: none;
+}
+
 [data-theme="light"] {
 	--color-highlight: #d7742f;
 	--color-background: #d5e0df;
diff --git a/themes/mainroad/layouts/partials/colors.css b/themes/mainroad/layouts/partials/colors.css
index e858949..80f9234 100644
--- a/themes/mainroad/layouts/partials/colors.css
+++ b/themes/mainroad/layouts/partials/colors.css
@@ -32,6 +32,10 @@ h6 {
 	color: var(--color-text);
 }
 
+.anchor-icon {
+	fill: var(--color-text);
+}
+
 a {
 	color: var(--color-text);
 }
diff --git a/themes/mainroad/layouts/partials/svg/link.svg b/themes/mainroad/layouts/partials/svg/link.svg
new file mode 100644
index 0000000..e7fdb6c
--- /dev/null
+++ b/themes/mainroad/layouts/partials/svg/link.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><path d="m7.775 3.275 1.25-1.25a3.5 3.5 0 1 1 4.95 4.95l-2.5 2.5a3.5 3.5 0 0 1-4.95 0 .751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018 1.998 1.998 0 0 0 2.83 0l2.5-2.5a2.002 2.002 0 0 0-2.83-2.83l-1.25 1.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042Zm-4.69 9.64a1.998 1.998 0 0 0 2.83 0l1.25-1.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042l-1.25 1.25a3.5 3.5 0 1 1-4.95-4.95l2.5-2.5a3.5 3.5 0 0 1 4.95 0 .751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018 1.998 1.998 0 0 0-2.83 0l-2.5 2.5a1.998 1.998 0 0 0 0 2.83Z"/></svg>
\ No newline at end of file