ergonomic header anchors with visible change on hover

holochain · Mar 28, 2024 · 8acaefd · 8acaefd
1 parent ccff3dc
commit 8acaefd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
diff --git a/11ty-extensions/markdown-it-config.js b/11ty-extensions/markdown-it-config.js
@@ -86,7 +86,11 @@ export default function(eleventyConfig) {
 
     //Configure markdown-it plugins
     mdLib.use(markdownItAttrs);
-    mdLib.use(markdownItAnchor, { tabIndex: false, slugify: s => slugify(s) });
+    mdLib.use(markdownItAnchor, {
+      tabIndex: false,
+      slugify: s => slugify(s),
+      permalink: markdownItAnchor.permalink.headerLink(),
+    });
     mdLib.use(markdownItContainer, "intro");
     mdLib.use(markdownItContainer, "orientation");
     mdLib.use(markdownItContainer, "storystep");

diff --git a/src/scss/_base-element-styles.scss b/src/scss/_base-element-styles.scss
@@ -50,6 +50,23 @@ a {
   svg {
     height: 100%;
   }
+
+  &.header-anchor {
+    text-decoration: none;
+    color: inherit;
+
+    &:hover, &:focus {
+      text-decoration: underline;
+
+      &::before {
+        display: block;
+        float: left;
+        width: 0.75em;
+        margin-left: -0.75em;
+        content: '#';
+      }
+    }
+  }
 }
 
 button {