fix(demo): correctly scroll to, and highlight, the given row when target in URL

Author: grega

docs/index.html

@@ -169,6 +169,9 @@ <h1>Python Friendly Error Messages - Demo</h1>
             </div>
           </section>
         `;
+
+        applyHashTarget();
+        window.addEventListener('hashchange', applyHashTarget);
       } catch (err) {
         container.innerHTML = `<div class="demo__error">Failed to load demo: ${escapeHtml(err.message)}</div>`;
       }
@@ -188,6 +191,24 @@ <h1>Python Friendly Error Messages - Demo</h1>
       return `example-${index + 1}-${slug}`;
     }
 
+    function applyHashTarget() {
+      document.querySelectorAll('.demo__row-target').forEach((el) => {
+        el.classList.remove('demo__row-target');
+      });
+
+      const hash = window.location.hash;
+      if (!hash || hash.length <= 1) return;
+
+      const targetId = decodeURIComponent(hash.slice(1));
+      const targetRow = document.getElementById(targetId);
+      if (!targetRow) return;
+
+      targetRow.classList.add('demo__row-target');
+      requestAnimationFrame(() => {
+        targetRow.scrollIntoView({ block: 'center', behavior: 'auto' });
+      });
+    }
+
     initDemo();
   </script>
 </body>

docs/styles.css

@@ -231,6 +231,12 @@ h1 {
   background: #fff8eb;
 }
 
+.demo__table tbody tr.demo__row-target {
+  outline: 2px solid #c98a2e;
+  outline-offset: -2px;
+  background: #fff8eb;
+}
+
 .demo__row-link {
   color: #8a5a00;
   text-decoration: underline;