add a filter search

Author: raymondk

public/styles.css

@@ -173,6 +173,20 @@ h4 { font-size: 1.05rem; }
   font-size: 0.85rem; margin-top: 0.4rem;
 }
 
+/* ---------- Search bar ---------- */
+.search-bar {
+  display: flex; align-items: center; gap: 0.6rem;
+  padding: 0.6rem 1rem; border-radius: 8px;
+  border: 1px solid var(--rule); background: var(--bg-elev);
+  margin-bottom: 1rem;
+}
+.search-bar svg { color: var(--meta); flex-shrink: 0; }
+.search-bar input {
+  flex: 1; border: none; background: transparent; outline: none;
+  font-size: 0.95rem; color: var(--fg); font-family: inherit;
+}
+.search-bar input::placeholder { color: var(--meta); }
+
 /* ---------- Category heads & skill rows ---------- */
 .category { margin: 3rem 0; }
 .cat-head {

src/pages/index.astro

@@ -65,6 +65,11 @@ const collectionLd = {
     <cite>— ICP Skills protocol, <a href="/llms.txt"><code>/llms.txt</code></a></cite>
   </blockquote>
 
+  <div class="search-bar">
+    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+    <input id="skill-search" type="text" placeholder="Filter skills…" autocomplete="off" />
+  </div>
+
   {grouped.map(({ category, skills }) => (
     <section class="category" id={`category-${encodeURIComponent(category)}`} aria-labelledby={`cat-h-${category}`}>
       <div class="cat-head">
@@ -105,3 +110,27 @@ const collectionLd = {
     });
   })();
 </script>
+
+<script is:inline>
+  (function () {
+    var input = document.getElementById('skill-search');
+    if (!input) return;
+    input.addEventListener('input', function () {
+      var q = input.value.toLowerCase().trim();
+      var sections = document.querySelectorAll('section.category');
+      sections.forEach(function (section) {
+        var rows = section.querySelectorAll('.skill-row');
+        var visible = 0;
+        rows.forEach(function (row) {
+          var title = row.querySelector('.skill-title');
+          var desc = row.querySelector('.skill-desc');
+          var text = ((title ? title.textContent : '') + ' ' + (desc ? desc.textContent : '')).toLowerCase();
+          var match = !q || text.indexOf(q) !== -1;
+          row.style.display = match ? '' : 'none';
+          if (match) visible++;
+        });
+        section.style.display = visible ? '' : 'none';
+      });
+    });
+  })();
+</script>