Add id links to the headers and tweak link formatting

lib/Pandoc.rakumod

@@ -100,10 +100,21 @@ sub markdown-first-paragraph(IO::Path:D $file --> Str:D) is export {
     $para
 }
 
+my regex header { '<h' $<level>=(\d) \s+ 'id="' $<id>=(<-["]>+) '">' $<content>=(<-[<]>+) '</h' $<level> '>'};
+
 #| Use pandoc to render a markdown document to html
 sub markdown-to-html(IO::Path:D $file --> Str:D) is export {
-    # Remove the header, we'll regenerate it later
+    # Have pandoc do its thing
     my $output = pandoc <-f gfm>, $file;
+    # Remove the header, we'll regenerate it later
     $output ~~ s:g/'<h1' .* '</h1>'//;
+    # Make all headers links to themselves
+    $output ~~ s:g[<header>] =
+            do given $<header> {
+                  my $link = "<a href=\"#$_<id>\">{$_<content>}</a>";
+                  my $header ="<h{$_<level>} class=\"heading-id-link\">{$link}</h{$_<level>}>";
+                  $header
+            };
     $output
 }
+

projects/Idris/todo.org

@@ -1,5 +1,4 @@
 * UX improvements
-** TODO Make headers automatically link to themselves
 ** TODO Footnotes on hover
 ** TODO Switch to mastodon powered comments
 * Purely cosmetic improvements

resources/main.css

@@ -110,6 +110,11 @@ body, .post, .series {
     margin: auto var(--box-margin-horz);
     align-self: stretch;
 }
+
+.post-body a {
+    text-decoration: underline dashed;
+}
+
 .post-title h1, .series-title h1 {
     margin-top: 0px;
     margin-bottom: 0px;
@@ -335,3 +340,9 @@ footer i {
 .special-post h3 {
     font-size: 1.5rem;
 }
+
+/* Tweak formatting for header links to make them more or less invisible */
+.heading-id-link a, .heading-id-link a:visited {
+    color: inherit;
+    text-decoration: none;
+}