From 478c7b765f7424b54c6f1172887f2279f6f1c82d Mon Sep 17 00:00:00 2001
From: Jan-Erik Rediger <jrediger@mozilla.com>
Date: Mon, 22 Jan 2024 13:12:45 +0100
Subject: [PATCH 1/2] Add a header anchor link to every header rendered from
 commentary

Fixes https://github.com/mozilla/glean-annotations/issues/217
---
 src/components/Markdown.svelte | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index e4917baf9..403e9a13c 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -13,6 +13,15 @@
         start ? `start="${start}"` : ""
       } class="mzp-u-list-styled">${body}</${outerEl}>`;
     },
+    heading(text, level, raw) {
+      const id = raw
+        .toLowerCase()
+        .trim()
+        .replace(/<[!/a-z].*?>/gi, "")
+        .replace(/ +/g, "-");
+
+      return `<h${level} class="annotation-header-link" id="${id}"><a href="#${id}">${text}</a></h${level}>\n`;
+    },
   };
   use({ renderer });
 

From 65edc2d8695f1685dacc9987bffcf75eb230095f Mon Sep 17 00:00:00 2001
From: Jan-Erik Rediger <jrediger@mozilla.com>
Date: Mon, 12 Feb 2024 11:42:55 +0100
Subject: [PATCH 2/2] Add header styling to a markdown block

---
 src/components/Markdown.svelte | 23 ++++++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Markdown.svelte b/src/components/Markdown.svelte
index 403e9a13c..285ca9741 100644
--- a/src/components/Markdown.svelte
+++ b/src/components/Markdown.svelte
@@ -33,5 +33,26 @@
 {#if inline}
   {@html parseInline(text)}
 {:else}
-  {@html parse(text)}
+  <div>
+    {@html parse(text)}
+  </div>
 {/if}
+
+<style lang="scss">
+  div :global(h1 a),
+  div :global(h2 a),
+  div :global(h3 a),
+  div :global(h4 a),
+  div :global(h5 a) {
+    color: black;
+    text-decoration: none;
+  }
+
+  div :global(h1 a:hover),
+  div :global(h2 a:hover),
+  div :global(h3 a:hover),
+  div :global(h4 a:hover),
+  div :global(h5 a:hover) {
+    text-decoration: underline;
+  }
+</style>