Add heading anchors

assets/scss/style.scss

@@ -22,6 +22,7 @@ html {
   background: $light-grey;
   line-height: 1.6;
   letter-spacing: .06em;
+  scroll-behavior: smooth;
 }
 
 body,
@@ -486,6 +487,39 @@ hr.post-end {
     padding: 0;
     margin-left: 1.8em;
   }
+
+  a.anchor {
+    float: left;
+    margin-left: -20px;
+    padding-right: 6px;
+    box-shadow: none;
+    opacity: .8;
+    &:hover {
+      background: none;
+      color: $theme;
+      opacity: 1;
+    }
+
+    svg {
+      display: inline-block;
+      width: 14px;
+      height: 14px;
+      vertical-align: baseline;
+      visibility: hidden;
+    }
+    &:focus svg {
+      visibility: visible;
+    }
+  }
+
+  h1:hover a.anchor svg,
+  h2:hover a.anchor svg,
+  h3:hover a.anchor svg,
+  h4:hover a.anchor svg,
+  h5:hover a.anchor svg,
+  h6:hover a.anchor svg {
+    visibility: visible;
+  }
 }
 
 .footnotes {

layouts/_default/single.html

@@ -19,7 +19,7 @@
 	<main class="site-main section-inner thin animated fadeIn faster">
 		<h1>{{ .Title }}</h1>
 		<div class="content">
-			{{ .Content }}
+			{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
 		</div>
 		{{ with .Params.comments -}}
 		{{ partialCached "comments.html" . }}

layouts/posts/single.html

@@ -23,7 +23,7 @@
 				<h1>{{ .Title }}</h1>
 			</header>
 			<div class="content">
-				{{ .Content }}
+				{{ .Content | replaceRE "(<h[1-6] id=\"([^\"]+)\".+)(</h[1-6]+>)" `${1}<a href="#${2}" class="anchor" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 7h3a5 5 0 0 1 5 5 5 5 0 0 1-5 5h-3m-6 0H6a5 5 0 0 1-5-5 5 5 0 0 1 5-5h3"></path><line x1="8" y1="12" x2="16" y2="12"></line></svg></a>${3}` | safeHTML }}
 			</div>
 			<hr class="post-end">
 			<footer class="post-info">