From 7b3e572d25166b6275e091f226b4ea0689b26dd1 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 2 Dec 2024 20:11:41 -0500
Subject: [PATCH] [reference] Update outline links when searching

---
 docs/docs/components/reference.njk | 29 ++++++++++++++++++-----------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/docs/docs/components/reference.njk b/docs/docs/components/reference.njk
index 3f97d3a58..7d788852d 100644
--- a/docs/docs/components/reference.njk
+++ b/docs/docs/components/reference.njk
@@ -12,7 +12,15 @@ table code {
 <wa-input type=search label="Filter by name:" clearable id="name_search"></wa-input>
 <script>
 {
-
+	let url = new URL(location);
+	if (url.searchParams.get("name")) {
+		name_search.value = url.searchParams.get("name");
+	}
+}
+</script>
+<script type=module>
+	let url = new URL(location);
+	let pushedURL = false;
 
 	function filterByName (value) {
 		let previousFilter = url.searchParams.get("name") || "";
@@ -43,21 +51,20 @@ table code {
 			let table = h2.nextElementSibling;
 			let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
 			count.textContent = visibleRows;
+			let outlineLink = document.querySelector(`#outline-standard a[href="#${ h2.id }"]`);
+			if (outlineLink) {
+				// Why not just = h2.textContent? To skip the "Jump to heading" link
+				outlineLink.textContent = "";
+				outlineLink.append(...[...h2.childNodes].slice(0, 3).map(n => n.cloneNode(true)));
+			}
 		}
 	}
 
-	let url = new URL(location);
-
-	if (url.searchParams.get("name")) {
-		filterByName(name_search.value = url.searchParams.get("name"));
+	if (name_search.value) {
+		filterByName(name_search.value);
 	}
 
-	let pushedURL = false;
-
-	name_search.addEventListener("wa-input", e => {
-		filterByName(e.target.value);
-	});
-}
+	name_search.addEventListener("wa-input", e => filterByName(e.target.value));
 </script>
 
 {% for type, all in componentsBy -%}