add anchor links to content sub-headings

forked anchor-js: https://github.com/jakejarvis/simple-anchor

assets/js/index.js

@@ -2,6 +2,7 @@ import "./src/dark-mode.js";
 import "./src/emoji.js";
 import "./src/counter.js";
 import "./src/clipboard.js";
+import "./src/anchor.js";
 import "./src/projects.js";
 
 export default () => {};

assets/js/src/anchor.js

@@ -0,0 +1,7 @@
+import SimpleAnchor from "simple-anchor";
+
+const anchors = new SimpleAnchor({
+  icon: "",
+});
+
+anchors.add("article #content h2, article #content h3, article #content h4");

assets/sass/components/_content.scss

@@ -55,6 +55,35 @@ div#content {
       padding-left: 0.25em;
     }
   }
+
+  // AnchorJS styles
+  h2,
+  h3,
+  h4 {
+    a.anchorjs-link {
+      display: inline-block;
+      margin-left: 0.25em;
+      padding-left: 0.25em;
+      padding-right: 0.5em;
+      opacity: 0;
+      font-weight: 300;
+      background: none;
+
+      &::before {
+        content: "\0023"; // pound sign
+      }
+
+      @include themes.themed(color, "medium-light");
+
+      &:hover {
+        @include themes.themed(color, "links");
+      }
+    }
+
+    &:hover > a.anchorjs-link {
+      opacity: 1;
+    }
+  }
 }
 
 // Responsive