feat: basic command search

Author: ThisAMJ

generate.py

@@ -68,6 +68,7 @@ def generate_nav(sections):
 
 def generate_command_table():
     out = """
+    <input type="text" id="command-search" onkeyup="searchCommands()" placeholder="Search commands...">
     <table class="commands">
         <tr>
             <th>Command</th>

out/command-table.js

@@ -0,0 +1,24 @@
+function searchCommands() {
+    let query = document.getElementById("command-search").value.toLowerCase();
+    let commands = document.querySelectorAll(".commands tr:not(:first-child)");
+    let anyMatch = false;
+    commands.forEach(command => {
+        let commandName = command.children[0].textContent.toLowerCase();
+        let commandType = command.children[1].textContent.toLowerCase();
+        let commandDescription = command.children[2].textContent.toLowerCase();
+        if (commandName.includes(query) || commandType.includes(query) || commandDescription.includes(query)) {
+            anyMatch = true;
+            command.classList.remove('hidden');
+        } else {
+            command.classList.add('hidden');
+        }
+    });
+    // if no matches, display all
+    if (!anyMatch) {
+        commands.forEach(command => command.classList.remove('hidden'));
+    }
+}
+
+window.addEventListener('load', () => {
+    searchCommands();
+});

out/style.css

@@ -98,10 +98,14 @@ td, th {
     text-align: left;
 }
 
-tr:nth-child(odd) {
+tr.hidden {
+    display: none;
+}
+
+:nth-child(odd of tr:not(.hidden)) {
     background: #383838;
 }
-tr:nth-child(even) {
+:nth-child(even of tr:not(.hidden)) {
     background: #2a2a2a;
 }
 

template.html

@@ -23,4 +23,5 @@ <h1>Portal 2 Rules</h1>
 
     <script src="scroll.js"></script>
     <script src="mobile-menu.js"></script>
+    <script src="command-table.js"></script>
 </html>