feat: add clickable links to readme headings

Author: essenmitsosse

app/components/Readme.vue

@@ -150,6 +150,16 @@ function handleClick(event: MouseEvent) {
   @apply inline i-carbon:launch rtl-flip ms-1 opacity-50;
 }
 
+.readme :deep(a[href^='#']::after) {
+  /* I don't know what kind of sorcery this is, but it ensures this icon can't wrap to a new line on its own. */
+  content: '__';
+  @apply inline i-carbon:link rtl-flip ms-1 opacity-0;
+}
+
+.readme :deep(a[href^='#']:hover::after) {
+  @apply opacity-100;
+}
+
 .readme :deep(code) {
   @apply font-mono;
   font-size: 0.875em;

server/utils/readme.ts

@@ -377,7 +377,8 @@ export async function renderReadmeHtml(
       toc.push({ text: plainText, id, depth })
     }
 
-    return `<h${semanticLevel} id="${id}" data-level="${depth}">${text}</h${semanticLevel}>\n`
+    /** The link href uses the unique slug WITHOUT the 'user-content-' prefix, because that will later be added for all links. */
+    return `<h${semanticLevel} id="${id}" data-level="${depth}"><a href="#${uniqueSlug}">${text}</a></h${semanticLevel}>\n`
   }
 
   // Syntax highlighting for code blocks (uses shared highlighter)