feat: add search knowledge base title

cdn/dev/css/kb-search.css

@@ -0,0 +1,33 @@
+.search-bar {
+  display: flex;
+  align-items: center;
+  width: 40vw;
+  height: 56px;
+  padding: 0 10px;
+  margin-bottom: 20px;
+  margin-left: 10px;
+  background-color: #eceef3;
+  border: 1px solid gray;
+}
+
+.search-icon {
+  font-size: 20px;
+  opacity: 0.6;
+  margin-right: 10px;
+}
+
+.search-bar form {
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+}
+
+.search-bar input {
+  flex: 1;
+  background: transparent;
+  border: none;
+  outline: none;
+  font-size: 18px;
+  width: 100%;
+  padding: 0 10px;
+}

knowledge-base/index.php

@@ -38,11 +38,11 @@
   // Required
   head([
     'title' =>'Keyman Support | ' . $title,
-    'css' => ['template.css','prism.css'],
+    'css' => ['template.css','prism.css', 'kb-search.css'],
     'showMenu' => true,
     'index' => false
   ]);
-
+  echo "<h1>Knowledge Base index</h1>";
   if($id) {
     echo "<p>";
     $pid = intval($id,10) - 1;
@@ -55,8 +55,15 @@
     $ParsedownAndAlerts = new \Keyman\Site\Common\GFMAlerts();
     echo $ParsedownAndAlerts->text($kb);
   } else {
-    echo "<h1>Knowledge Base index</h1>";
-    echo "<ul>";
+    $query = trim($_GET['q'] ?? '');
+    echo "<div class='search-bar'>";
+    echo "<form>";
+    echo "<span class='search-icon'>🔍</span>";
+    echo "<input type='text' id='searchInput' name='q' value='" .htmlspecialchars($query). "' placeholder='What would you like to find?'>";
+    echo "</form>";
+    echo "</div>";
+
+    echo "<ul id='KMKB'>";
     $kbs = glob("kb*.md");
     foreach($kbs as $kb) {
       if(preg_match("/^kb(\d+)\.md$/", $kb, $matches)) {
@@ -65,9 +72,15 @@
         $title = fgets($handle);
         $title = substr($title, 2);
         fclose($handle);
+
+        $searchTarget = strtolower("KMKB{$id} {$title}");
+        if ($query !== '' && stripos($searchTarget, $query) === false) {
+          continue; // skip this if there isn't a query and a query match
+        }
+
         echo "<li><a href='".link_from_id($id)."'>KMKB{$matches[1]}: " . htmlspecialchars($title) . "</a></li>";
       }
     }
-
+  }
     echo "</ul>";
-  }
+?>