Assign all headers an id when layout mounts instead of waiting for Ta…

…bleOfContents (which doesn't mount on mobile initially)
techniq · Jun 30, 2024 · 47712a6 · 47712a6
1 parent 882129d
commit 47712a6
Showing 1 changed file with 7 additions and 0 deletions.
diff --git a/packages/svelte-ux/src/routes/docs/+layout.svelte b/packages/svelte-ux/src/routes/docs/+layout.svelte
@@ -56,6 +56,13 @@
 
   onMount(() => {
     showTableOfContents = !hideTableOfContents && $xlScreen;
+
+    // Assign an `id` to every header element
+    const headers = document.querySelectorAll('h1, h2, h3, h4, h5, h6');
+    headers.forEach((header) => {
+      const id = header.innerHTML.toLowerCase().replace(/\s+/g, '_'); // Lowercase and convert spaces to underscores
+      header.setAttribute('id', id);
+    });
   });
 
   function getRelated(r: string) {