Add heading anchors (#38)

neoforged · Jun 5, 2024 · b26d79f · b26d79f
1 parent e37612f
commit b26d79f
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		includes icons from the bootstrap project - discord and opencollective
		includes icons from octicons (distributed under MIT license) - link