Replace AnchorJS with static links

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-    {{ .Content }}
+    {{ partial "anchor.html" .Content }}
 
     {{ range .Data.Pages.ByDate.Reverse }}
         <p>

layouts/_default/single.html

@@ -1,3 +1,3 @@
 {{ define "main" }}
-    {{ .Content }}
+    {{ partial "anchor.html" .Content }}
 {{ end }}

layouts/blog/single.html

@@ -6,7 +6,7 @@
     <h1>{{ .Title }}</h1>
     <small>Published on {{.Date.Format "2006-01-02"}}</small>
 
-    {{ .Content }}
+    {{ partial "anchor.html" .Content }}
 
     <hr class="comments-separator">
 

layouts/partials/anchor.html

@@ -0,0 +1,3 @@
+{{/* Adapted from https://discourse.gohugo.io/t/adding-anchor-next-to-headers/1726 */}}
+
+{{ . | replaceRE "(<h[2-6] id=\"([^\"]+)\".+)(</h[2-6]+>)" `${1}<a aria-label="Anchor" class="anchor" href="#${2}"><svg class="icon icon-link"><use xlink:href="/images/icons.svg#icon-link"></use></svg></a>${3}` | safeHTML }}

layouts/partials/js.html

@@ -1,12 +1,8 @@
-<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
-
 <script type="text/javascript">
     var greetings = ['Hello', '你好', 'Hola', 'Namaste', 'Marhabaan',
                      'Bonjour', 'Hallå', 'こんにちは', '안녕하세요'];
     document.getElementById('greeting').innerHTML =
         greetings[Math.floor(Math.random() * greetings.length)];
-
-    anchors.add();
 </script>
 
 {{ template "_internal/google_analytics_async.html" . }}

static/css/general.css

@@ -27,18 +27,24 @@ a {
 
 /* Animated link underline on hover
    Adapted from https://codepen.io/shshaw/details/pdyJBW */
-a:not(.anchorjs-link):not(.link-button) {
+a:not(.anchor):not(.link-button) {
   background-image: linear-gradient(currentColor, currentColor);
   background-position: 0 100%;
   background-repeat: no-repeat;
   background-size: 0% 2px;
   transition: background-size .3s;
 }
 
-a:not(.anchorjs-link):not(.link-button):hover {
+a:not(.anchor):not(.link-button):hover {
   background-size: 100% 2px;
 }
 
+.icon-link {
+  font-size: 0.7em;
+  margin-left: 0.6em;
+  margin-bottom: 1px;
+}
+
 body {
   color: #333;
   font-family: 'Open Sans', sans-serif;
@@ -170,3 +176,12 @@ img {
 .email:hover {
   background-color: #920126;
 }
+
+.icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+}

static/images/icomoon.json

@@ -0,0 +1,82 @@
+{
+  "IcoMoonType": "selection",
+  "icons": [
+    {
+      "icon": {
+        "paths": [
+          "M440.236 635.766c-13.31 0-26.616-5.076-36.77-15.23-95.134-95.136-95.134-249.934 0-345.070l192-192c46.088-46.086 107.36-71.466 172.534-71.466s126.448 25.38 172.536 71.464c95.132 95.136 95.132 249.934 0 345.070l-87.766 87.766c-20.308 20.308-53.23 20.308-73.54 0-20.306-20.306-20.306-53.232 0-73.54l87.766-87.766c54.584-54.586 54.584-143.404 0-197.99-26.442-26.442-61.6-41.004-98.996-41.004s-72.552 14.562-98.996 41.006l-192 191.998c-54.586 54.586-54.586 143.406 0 197.992 20.308 20.306 20.306 53.232 0 73.54-10.15 10.152-23.462 15.23-36.768 15.23z",
+          "M256 1012c-65.176 0-126.45-25.38-172.534-71.464-95.134-95.136-95.134-249.934 0-345.070l87.764-87.764c20.308-20.306 53.234-20.306 73.54 0 20.308 20.306 20.308 53.232 0 73.54l-87.764 87.764c-54.586 54.586-54.586 143.406 0 197.992 26.44 26.44 61.598 41.002 98.994 41.002s72.552-14.562 98.998-41.006l192-191.998c54.584-54.586 54.584-143.406 0-197.992-20.308-20.308-20.306-53.232 0-73.54 20.306-20.306 53.232-20.306 73.54 0.002 95.132 95.134 95.132 249.932 0.002 345.068l-192.002 192c-46.090 46.088-107.364 71.466-172.538 71.466z"
+        ],
+        "tags": [
+          "link",
+          "chain",
+          "url",
+          "uri",
+          "anchor"
+        ],
+        "defaultCode": 59851,
+        "grid": 16,
+        "attrs": []
+      },
+      "attrs": [],
+      "properties": {
+        "ligatures": "link, chain",
+        "name": "link",
+        "order": 5,
+        "id": 204,
+        "prevSize": 32,
+        "code": 59851
+      },
+      "setIdx": 0,
+      "setId": 1,
+      "iconIdx": 203
+    }
+  ],
+  "height": 1024,
+  "preferences": {
+    "showGlyphs": true,
+    "showQuickUse": true,
+    "showQuickUse2": true,
+    "showSVGs": true,
+    "fontPref": {
+      "prefix": "icon-",
+      "metadata": {
+        "fontFamily": "dannyguo",
+        "majorVersion": 1,
+        "minorVersion": 0
+      },
+      "metrics": {
+        "emSize": 1024,
+        "baseline": 6.25,
+        "whitespace": 50
+      },
+      "embed": false,
+      "autoHost": true,
+      "showMetrics": true,
+      "showSelector": true,
+      "showMetadata": true,
+      "noie8": true,
+      "ie7": false,
+      "selector": "",
+      "classSelector": ".icon"
+    },
+    "imagePref": {
+      "prefix": "icon-",
+      "png": false,
+      "useClassSelector": true,
+      "color": 0,
+      "bgColor": 16777215,
+      "classSelector": ".icon",
+      "height": 32,
+      "columns": 16,
+      "margin": 16
+    },
+    "historySize": 50,
+    "showCodes": true,
+    "gridSize": 16,
+    "quickUsageToken": {
+      "dannyguo": "MGU5Yzg0MDI4ZWIzNWVjZGYyNmQ4ZGU3YWFhNTg3MGUjMSMxNTI3NDUzNTY1IyMj"
+    },
+    "showLiga": true
+  }
+}