Merge pull request #2 from houselearning/mathsite-search

remove search from index but add it as a src

Author: mathsite

404.html

@@ -8,6 +8,7 @@
     <script src="https://houselearning.github.io/feedback.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="/cookiebanner.js"></script>
+    <script src="/docs/search.js"></script>
 
     <script>
         tailwind.config = {
@@ -91,59 +92,6 @@ <h1 class="text-5xl font-extrabold text-gray-900 mb-4">
             &copy; 2024 HouseLearning Foundation. All Rights Reserved.
         </div>
     </footer>
-<script>
-    let docsData = [];
 
-    // Fetch docs.json on page load
-    fetch("/docs/docs.json")
-        .then(res => res.json())
-        .then(data => docsData = data)
-        .catch(err => console.error("Failed to load docs.json:", err));
-
-    const input = document.getElementById("docsSearchInput");
-    const resultsBox = document.getElementById("docsSearchResults");
-
-    input.addEventListener("input", () => {
-        const q = input.value.trim().toLowerCase();
-
-        if (q.length === 0) {
-            resultsBox.classList.add("hidden");
-            resultsBox.innerHTML = "";
-            return;
-        }
-
-        const matches = docsData.filter(item =>
-            item.title.toLowerCase().includes(q) ||
-            (item.description && item.description.toLowerCase().includes(q))
-        );
-
-        if (matches.length === 0) {
-            resultsBox.innerHTML = `
-                <div class="p-4 text-sm text-gray-500">No results found.</div>
-            `;
-            resultsBox.classList.remove("hidden");
-            return;
-        }
-
-        resultsBox.innerHTML = matches
-            .map(item => `
-                <a href="${item.link}"
-                   class="block p-4 border-b last:border-b-0 border-gray-100 hover:bg-gray-50 transition rounded-lg">
-                    <div class="font-semibold text-gray-900">${item.title}</div>
-                    <div class="text-sm text-gray-600">${item.description || ""}</div>
-                </a>
-            `)
-            .join("");
-
-        resultsBox.classList.remove("hidden");
-    });
-
-    // Click-away close
-    document.addEventListener("click", (e) => {
-        if (!resultsBox.contains(e.target) && e.target !== input) {
-            resultsBox.classList.add("hidden");
-        }
-    });
-</script>
 </body>
 </html>

index.html

@@ -12,6 +12,7 @@
   <script src="https://houselearning.github.io/home/main.js"></script>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="/cookiebanner.js"></script>
+    <script src="/docs/search.js"></script>
     <!-- Configure Tailwind for Inter font and custom colors -->
     <script>
         tailwind.config = {
@@ -178,58 +179,7 @@ <h2 class="text-2xl font-bold text-gray-900 mb-3">Can't Find What You Need?</h2>
         </div>
     </footer>
 <script>
-    let docsData = [];
-
-    // Fetch docs.json on page load
-    fetch("/docs/docs.json")
-        .then(res => res.json())
-        .then(data => docsData = data)
-        .catch(err => console.error("Failed to load docs.json:", err));
-
-    const input = document.getElementById("docsSearchInput");
-    const resultsBox = document.getElementById("docsSearchResults");
-
-    input.addEventListener("input", () => {
-        const q = input.value.trim().toLowerCase();
-
-        if (q.length === 0) {
-            resultsBox.classList.add("hidden");
-            resultsBox.innerHTML = "";
-            return;
-        }
-
-        const matches = docsData.filter(item =>
-            item.title.toLowerCase().includes(q) ||
-            (item.description && item.description.toLowerCase().includes(q))
-        );
-
-        if (matches.length === 0) {
-            resultsBox.innerHTML = `
-                <div class="p-4 text-sm text-gray-500">No results found.</div>
-            `;
-            resultsBox.classList.remove("hidden");
-            return;
-        }
-
-        resultsBox.innerHTML = matches
-            .map(item => `
-                <a href="${item.link}"
-                   class="block p-4 border-b last:border-b-0 border-gray-100 hover:bg-gray-50 transition rounded-lg">
-                    <div class="font-semibold text-gray-900">${item.title}</div>
-                    <div class="text-sm text-gray-600">${item.description || ""}</div>
-                </a>
-            `)
-            .join("");
-
-        resultsBox.classList.remove("hidden");
-    });
-
-    // Click-away close
-    document.addEventListener("click", (e) => {
-        if (!resultsBox.contains(e.target) && e.target !== input) {
-            resultsBox.classList.add("hidden");
-        }
-    });
+    
 </script>
 
 </body>

search.js

@@ -0,0 +1,52 @@
+let docsData = [];
+
+    // Fetch docs.json on page load
+    fetch("/docs/docs.json")
+        .then(res => res.json())
+        .then(data => docsData = data)
+        .catch(err => console.error("Failed to load docs.json:", err));
+
+    const input = document.getElementById("docsSearchInput");
+    const resultsBox = document.getElementById("docsSearchResults");
+
+    input.addEventListener("input", () => {
+        const q = input.value.trim().toLowerCase();
+
+        if (q.length === 0) {
+            resultsBox.classList.add("hidden");
+            resultsBox.innerHTML = "";
+            return;
+        }
+
+        const matches = docsData.filter(item =>
+            item.title.toLowerCase().includes(q) ||
+            (item.description && item.description.toLowerCase().includes(q))
+        );
+
+        if (matches.length === 0) {
+            resultsBox.innerHTML = `
+                <div class="p-4 text-sm text-gray-500">No results found.</div>
+            `;
+            resultsBox.classList.remove("hidden");
+            return;
+        }
+
+        resultsBox.innerHTML = matches
+            .map(item => `
+                <a href="${item.link}"
+                   class="block p-4 border-b last:border-b-0 border-gray-100 hover:bg-gray-50 transition rounded-lg">
+                    <div class="font-semibold text-gray-900">${item.title}</div>
+                    <div class="text-sm text-gray-600">${item.description || ""}</div>
+                </a>
+            `)
+            .join("");
+
+        resultsBox.classList.remove("hidden");
+    });
+
+    // Click-away close
+    document.addEventListener("click", (e) => {
+        if (!resultsBox.contains(e.target) && e.target !== input) {
+            resultsBox.classList.add("hidden");
+        }
+    });