From 1f8a2829710c569954b9e8151c029bc645dff9b6 Mon Sep 17 00:00:00 2001
From: Lea Verou <lea@verou.me>
Date: Mon, 2 Dec 2024 19:57:10 -0500
Subject: [PATCH] [reference] Support filtering permalinks

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

diff --git a/docs/docs/components/reference.njk b/docs/docs/components/reference.njk
index 8d3779130..3f97d3a58 100644
--- a/docs/docs/components/reference.njk
+++ b/docs/docs/components/reference.njk
@@ -11,30 +11,53 @@ table code {
 
 <wa-input type=search label="Filter by name:" clearable id="name_search"></wa-input>
 <script>
-name_search.addEventListener("wa-input", e => {
-	let value = e.target.value;
+{
 
-	if (value) {
-		for (let th of document.querySelectorAll("table tbody th:first-child")) {
-			let tr = th.parentNode;
-			tr.toggleAttribute("hidden", !th.textContent.includes(value));
+
+	function filterByName (value) {
+		let previousFilter = url.searchParams.get("name") || "";
+		url = new URL(location);
+
+		if (value) {
+			for (let th of document.querySelectorAll("table tbody th:first-child")) {
+				let tr = th.parentNode;
+				tr.toggleAttribute("hidden", !th.textContent.includes(value));
+			}
+			url.searchParams.set("name", value);
 		}
-	}
-	else {
-		for (let tr of document.querySelectorAll("table tbody tr[hidden]")) {
-			tr.removeAttribute("hidden");
+		else {
+			for (let tr of document.querySelectorAll("table tbody tr[hidden]")) {
+				tr.removeAttribute("hidden");
+			}
+			url.searchParams.delete("name");
+		}
+
+		if (value !== previousFilter) {
+			history[pushedURL ? "replaceState" : "pushState"](null, "", url);
+		}
+
+		// Update heading counts
+		for (let h2 of document.querySelectorAll("h2:has(+ table)")) {
+			let count = h2.querySelector(".count");
+			if (!count) continue;
+			let table = h2.nextElementSibling;
+			let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
+			count.textContent = visibleRows;
 		}
 	}
 
-	// Update heading counts
-	for (let h2 of document.querySelectorAll("h2:has(+ table)")) {
-		let count = h2.querySelector(".count");
-		if (!count) continue;
-		let table = h2.nextElementSibling;
-		let visibleRows = table.querySelectorAll("tbody tr:not([hidden])").length;
-		count.textContent = visibleRows;
+	let url = new URL(location);
+
+	if (url.searchParams.get("name")) {
+		filterByName(name_search.value = url.searchParams.get("name"));
 	}
-});
+
+	let pushedURL = false;
+
+	name_search.addEventListener("wa-input", e => {
+		filterByName(e.target.value);
+	});
+}
 </script>
 
 {% for type, all in componentsBy -%}