add a filter text field to the support matrix

conf.py

@@ -489,6 +489,8 @@ class CoreModuleTransform(SphinxTransform):
 
 def setup(app):
     app.add_css_file("customstyle.css")
+    app.add_css_file("filter.css")
+    app.add_js_file("filter.js")
     app.add_config_value('redirects_file', 'redirects', 'env')
     app.connect('builder-inited', generate_redirects)
     app.add_transform(CoreModuleTransform)

docs/static/filter.css

@@ -0,0 +1,17 @@
+#support-matrix-filter-block { position: relative; }
+#support-matrix-filter {
+	width: 100%;
+}
+#support-matrix-filter-num {
+	position: absolute;
+	right: 10px;
+	top: 4px;
+}
+.support-matrix-table .this_module code,
+.support-matrix-table .this_module span {
+	background: black;
+	color: white;
+}
+.support-matrix-table .board_hidden {
+	display: none;
+}

docs/static/filter.js

@@ -0,0 +1,86 @@
+$(() => {
+	var urlTimeout = null;
+	function setURL(query, value) {
+		clearTimeout(urlTimeout);
+
+		urlTimeout = setTimeout(function() {
+			var url = new URL(window.location.href);
+			console.log(query,value,value.length,!value.length);
+			if (!value.length) {
+				console.log
+				url.searchParams.delete(query);
+			} else if (Array.isArray(value)) {
+				url.searchParams.delete(query);
+				value.forEach(function(v) {
+					url.searchParams.append(query, v);
+				})
+			} else {
+				url.searchParams.set(query, value);
+			}
+
+			window.history.pushState(null, document.title, url.href);
+		}, 1000);
+	}
+
+	function handlePageLoad() {
+		var url = new URL(window.location.href);
+		//get values from URL
+		var filters = url.searchParams.getAll('filter');
+		search_terms = filters.join(" ");
+		$("#support-matrix-filter").val(search_terms);
+		run_filter();
+	}
+
+	function filter_boards(search_string) {
+		$(".board_hidden").removeClass("board_hidden");
+		$(".this_module").removeClass("this_module");
+		var nboards = $(".support-matrix-table tbody tr").length;
+		if(search_string.trim() == "") {
+			$("#support-matrix-filter-num").html("(all)");
+			setURL("filter",[]);
+			return;
+		}
+		var list_search = search_string.split(" ").filter(i => i);
+		var nvisible = 0;
+		$(".support-matrix-table tbody tr").each( (index,item) => {
+			var name = $(item).find("td:first-child p").html();
+			var modules = $(item).find("a.reference.internal");
+			var matching_all = true;
+			//
+			list_search.forEach((sstring) => {
+				var matching = (sstring[0] == "-");
+				for(var modi = 0; modi < modules.length; ++modi) {
+					module = modules[modi];
+					var mod_name = module.firstChild.firstChild.textContent;
+					if(sstring[0] == "-") {
+						if(mod_name.match(sstring.substr(1))) {
+							matching = false;
+							break;
+						}
+					} else {
+						if(mod_name.match(sstring)) {
+							$(module).addClass("this_module");
+							matching = true;
+						}
+					}
+				}
+				matching_all = matching_all && matching;
+			});
+			if(!matching_all) {
+				$(item).addClass("board_hidden");
+			} else {
+				nvisible += 1;
+			}
+		});
+		$("#support-matrix-filter-num").html(`(${nvisible}/${nboards})`);
+		setURL("filter",list_search);
+	}
+
+	function run_filter() {
+		var search_string = $("#support-matrix-filter").val();
+		filter_boards(search_string);
+	}
+	$("#support-matrix-filter").on("keyup", run_filter);
+	// $(document).on("keyup", "#support-matrix-filter", run_filter);
+	handlePageLoad();
+});

shared-bindings/support_matrix.rst

@@ -6,6 +6,11 @@ Module Support Matrix - Which Modules Are Available on Which Boards
 The following table lists the available built-in modules for each CircuitPython
 capable board.
 
+.. raw:: html
+
+    <p id="support-matrix-filter-block"><input placeholder="Filter the boards by available modules" id="support-matrix-filter" type="text"/><span id="support-matrix-filter-num">(all)</span></p>
+
+.. rst-class:: support-matrix-table
 .. list-table::
    :header-rows: 1
    :widths: 7, 50