Add anchor links to heading (#38)

* Closes #36

assets/scss/style.scss

@@ -22,6 +22,7 @@ html {
   background: $light-grey;
   line-height: 1.6;
   letter-spacing: .06em;
+  scroll-behavior: smooth;
 }
 
 body,
@@ -534,6 +535,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>
 		{{- if .Params.comments }}
 		<div id="comments" class="thin">

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">

resources/_gen/assets/scss/scss/style.scss_c16d144eee185fbddd582cd5e25a4fae.json

@@ -1 +1 @@
-{"Target":"css/style.min.9a30741782203507f3d35fe9cefabad487c72fc82dfbdf59121759fc2fa52f92.css","MediaType":"text/css","Data":{"Integrity":"sha256-mjB0F4IgNQfz01/pzvq61IfHL8gt+99ZEhdZ/C+lL5I="}}
+{"Target":"css/style.min.bf17d429527cc9978ec99e8d5e3a5319fb29fb7f783e39f2fbe1260fabfbb57c.css","MediaType":"text/css","Data":{"Integrity":"sha256-vxfUKVJ8yZeOyZ6NXjpTGfsp+394Pjny++EmD6v7tXw="}}