From cd9ade88b36ab56d3adff2062e127fe3902ba4c8 Mon Sep 17 00:00:00 2001
From: Max Litruv Boonzaayer <litruv@gmail.com>
Date: Mon, 24 Mar 2025 16:29:34 +1100
Subject: [PATCH] updated with search

---
 .vscode/settings.json |   3 +
 index.html            |   8 +++
 index.js              | 133 +++++++++++++++++++++++++++++++++++++++++-
 styles.css            | 110 ++++++++++++++++++++++++++++++++++
 4 files changed, 253 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 0000000..6f3a291
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index 3c69553..e636e0b 100644
--- a/index.html
+++ b/index.html
@@ -27,6 +27,14 @@
         </div>
         <div class="content-container">
             <nav class="sidebar left-sidebar">
+                <div class="search-container">
+                    <div class="search-box">
+                        <i class="fas fa-search"></i>
+                        <input type="text" id="search-input" placeholder="Search docs...">
+                        <i class="fas fa-times" id="clear-search"></i>
+                    </div>
+                    <div id="search-results"></div>
+                </div>
                 <div id="file-index"></div>
                 <div class="subtitle">
                     <span class="name"></span>
diff --git a/index.js b/index.js
index 1a5dc57..1c57a3a 100644
--- a/index.js
+++ b/index.js
@@ -32,6 +32,69 @@ class EventBus {
     }
 }
 
+class SearchService {
+    constructor(eventBus, indexService) {
+        this.eventBus = eventBus;
+        this.indexService = indexService;
+        this.searchIndex = [];
+    }
+
+    buildSearchIndex(documents) {
+        this.searchIndex = [];
+        this.processDocuments(documents);
+    }
+
+    processDocuments(documents, parentPath = '') {
+        documents.forEach(doc => {
+            if (doc.type === 'folder') {
+                const currentPath = parentPath ? `${parentPath} / ${doc.title}` : doc.title;
+                if (doc.path) {
+                    this.searchIndex.push({
+                        title: doc.title,
+                        path: doc.path,
+                        slug: doc.slug,
+                        location: currentPath,
+                        type: 'folder'
+                    });
+                }
+                if (doc.items) {
+                    this.processDocuments(doc.items, currentPath);
+                }
+            } else {
+                this.searchIndex.push({
+                    title: doc.title,
+                    path: doc.path,
+                    slug: doc.slug,
+                    location: parentPath,
+                    type: 'file'
+                });
+            }
+        });
+    }
+
+    search(query) {
+        if (!query) return [];
+        query = query.toLowerCase();
+        
+        return this.searchIndex
+            .filter(item => {
+                const titleMatch = item.title.toLowerCase().includes(query);
+                const pathMatch = item.path.toLowerCase().includes(query);
+                const locationMatch = item.location.toLowerCase().includes(query);
+                return titleMatch || pathMatch || locationMatch;
+            })
+            .sort((a, b) => {
+                // Prioritize exact matches in title
+                const aTitle = a.title.toLowerCase();
+                const bTitle = b.title.toLowerCase();
+                if (aTitle === query) return -1;
+                if (bTitle === query) return 1;
+                return aTitle.localeCompare(bTitle);
+            })
+            .slice(0, 10); // Limit to 10 results
+    }
+}
+
 class IndexService {
     findDocumentBySlug(documents, slug) {
         for (const doc of documents) {
@@ -93,7 +156,10 @@ class DOMService {
             titleText: document.querySelector('.title-text .page-title'),
             leftSidebar: document.querySelector('.left-sidebar'),
             menuButton: document.querySelector('.menu-button'),
-            header: document.querySelector('title-bar') // Add header element
+            header: document.querySelector('title-bar'), // Add header element
+            searchInput: document.getElementById('search-input'),
+            searchResults: document.getElementById('search-results'),
+            clearSearch: document.getElementById('clear-search')
         };
         this.headerOffset = 60; // Fixed header heightfsetHeight || 0; // Get header height
     }
@@ -301,6 +367,67 @@ class DOMService {
         
         heading.appendChild(toggleBtn);
     }
+
+    setupSearch(searchService) {
+        let searchTimeout;
+        
+        this.elements.searchInput.addEventListener('input', (e) => {
+            clearTimeout(searchTimeout);
+            const query = e.target.value;
+            
+            searchTimeout = setTimeout(() => {
+                const results = searchService.search(query);
+                this.renderSearchResults(results);
+            }, 200);
+        });
+
+        this.elements.clearSearch.addEventListener('click', () => {
+            this.elements.searchInput.value = '';
+            this.elements.searchResults.innerHTML = '';
+            this.elements.searchResults.style.display = 'none';
+        });
+    }
+
+    renderSearchResults(results) {
+        const container = this.elements.searchResults;
+        container.innerHTML = '';
+        
+        if (results.length === 0 || !this.elements.searchInput.value) {
+            container.style.display = 'none';
+            return;
+        }
+
+        results.forEach(result => {
+            const div = document.createElement('div');
+            div.className = 'search-result';
+            
+            const icon = document.createElement('i');
+            icon.className = result.type === 'folder' ? 'fas fa-folder' : 'fas fa-file-alt';
+            
+            const link = document.createElement('a');
+            link.href = `?${result.slug}`;
+            link.innerHTML = `
+                ${icon.outerHTML}
+                <div class="search-result-content">
+                    <div class="search-result-title">${result.title}</div>
+                    <div class="search-result-path">${result.location}</div>
+                </div>
+            `;
+            
+            link.addEventListener('click', (e) => {
+                e.preventDefault();
+                this.elements.searchInput.value = '';
+                container.style.display = 'none';
+                history.pushState(null, '', link.href);
+                this.eventBus.emit('navigation:requested', { slug: result.slug });
+            });
+            
+            div.appendChild(link);
+            container.appendChild(div);
+        });
+        
+        container.style.display = 'block';
+    }
 }
 
 class DocumentService {
@@ -511,6 +638,7 @@ class Documentation {
     constructor() {
         this.eventBus = new EventBus();
         this.indexService = new IndexService();
+        this.searchService = new SearchService(this.eventBus, this.indexService);
         this.domService = new DOMService(this.eventBus);
         this.documentService = new DocumentService(this.eventBus, this.indexService);
         this.navigationService = new NavigationService(this.eventBus, this.documentService);
@@ -553,6 +681,9 @@ class Documentation {
             this.indexData = data;
             window._indexData = data;
             
+            this.searchService.buildSearchIndex(this.indexData.documents);
+            this.domService.setupSearch(this.searchService);
+            
             this.populateAuthorInfo(data.author);
             window.originalDocTitle = data.metadata.site_name || 'Documentation';
             document.title = window.originalDocTitle;
diff --git a/styles.css b/styles.css
index ebdd362..d85cdb8 100644
--- a/styles.css
+++ b/styles.css
@@ -61,6 +61,116 @@ body {
     z-index: 999;
 }
 
+.search-container {
+    padding: 1rem;
+    border-bottom: 1px solid var(--ifm-border-color);
+    position: relative; /* Add this */
+}
+
+.search-box {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background: var(--ifm-background-color);
+    border: 1px solid var(--ifm-border-color);
+    border-radius: 6px;
+    padding: 0.5rem;
+}
+
+.search-box i {
+    color: var(--ifm-color-content-secondary);
+    font-size: 0.9rem;
+}
+
+.search-box .fa-search {
+    margin-right: 0.5rem;
+}
+
+.search-box .fa-times {
+    cursor: pointer;
+    opacity: 0.6;
+    transition: opacity 0.2s;
+}
+
+.search-box .fa-times:hover {
+    opacity: 1;
+}
+
+.search-box input {
+    background: none;
+    border: none;
+    color: var(--ifm-color-content);
+    font-size: 0.9rem;
+    width: 100%;
+    outline: none;
+}
+
+.search-box input::placeholder {
+    color: var(--ifm-color-content-secondary);
+    opacity: 0.6;
+}
+
+#search-results {
+    position: absolute;
+    top: calc(var(--title-bar-height) + 3.5rem); /* Change this */
+    left: 0;  /* Change this */
+    right: 0; /* Change this */
+    background: var(--ifm-background-surface-color);
+    border: 1px solid var(--ifm-border-color);
+    border-radius: 6px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    z-index: 1001; /* Increase z-index */
+    max-height: calc(100vh - var(--title-bar-height) - 4rem);
+    overflow-y: auto;
+    margin: 0 1rem; /* Add margins */
+    display: none;
+}
+
+.search-result {
+    border-bottom: 1px solid var(--ifm-border-color);
+}
+
+search-result:last-child {
+    border-bottom: none;
+}
+
+.search-result a {
+    display: flex;
+    align-items: center;
+    padding: 0.75rem 1rem;
+    color: var(--ifm-color-content);
+    text-decoration: none;
+    gap: 0.75rem;
+}
+
+.search-result a:hover {
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.search-result i {
+    color: var(--ifm-color-content-secondary);
+    font-size: 0.9rem;
+    width: 16px;
+}
+
+.search-result-content {
+    flex: 1;
+    min-width: 0;
+}
+
+.search-result-title {
+    font-weight: 500;
+    margin-bottom: 0.25rem;
+}
+
+.search-result-path {
+    font-size: 0.8rem;
+    color: var(--ifm-color-content-secondary);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .right-sidebar {
     position: fixed;
     top: var(--title-bar-height);