Add heading id automatically

And treat table captions as headings

Author: royalicing

assets/js/customElements/enhanced-navigation.js

@@ -23,8 +23,11 @@ customElements.define('enhanced-navigation', class extends HTMLElement {
       const liTemplate = navItemsTemplates.querySelector('li');
 
       const article = this.querySelector('article');
-      const headings = article.querySelectorAll('h2');
-      const items = Array.from(headings, (headingEl) => {
+      const headings = article.querySelectorAll('h2, table caption');
+      const items = Array.from(headings, (headingEl, index) => {
+        if (!headingEl.id) {
+          headingEl.id = article.id + "-" + index;
+        }
         return El(liTemplate, {}, El(linkTemplate, { href: '#' + headingEl.id }, headingEl.innerText));
       });
 

lib/components_guide_web/templates/accessibility_first/index.html.heex

@@ -3,7 +3,7 @@
     <div class="md:sticky top-0 md:h-screen pl-4 pt-16 text-white">
       <%= render view_module(@conn), "_nav.html", conn: @conn %>
     </div>
-    <article class="text-white bg-gray-900 px-4 md:px-0">
+    <article class="text-white bg-gray-900 px-4 md:px-0" id="main-article">
       <div class="prose md:prose-xl prose-invert max-w-4xl mx-auto py-16">
         <%= render(view_module(@conn), @article <> ".html", conn: @conn) %>
       </div>