Add article heading anchors

Adds heading anchors (#) that appear when user hovers over headings in articles. Clicking the anchor will scroll viewport until heading is aligned to top and update the address bar with the hash. This makes it easy to copy URLs that link to a specific heading in the article.
imotai · Nov 17, 2024 · 62972cf · 62972cf
1 parent 4e760d1
commit 62972cf
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -37,6 +37,19 @@ h6 {
   margin-bottom: var(--hx-margin-bottom);
 }
 
+.heading {
+  a {
+    text-decoration: none;
+    color: var(--content-secondary);
+    visibility: hidden;
+    font-size: 0.95em;
+  }
+
+  &:hover a {
+    visibility: visible;
+  }
+}
+
 p {
   margin-top: var(--p-margin-top);
   margin-bottom: var(--p-margin-bottom);
@@ -527,4 +540,4 @@ blockquote {
 blockquote p {
   margin-left: 1rem;
   margin-right: 1rem;
-}
+}
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,4 @@
+<h{{ .Level }} class="heading" id="{{ .Anchor }}">
+  {{ .Text }}
+  <a href="#{{ .Anchor }}">#</a>
+</h{{ .Level }}>