@leed-ai/cli 0.0.0-stage → 6.19.0

package/dist/static/javascript/lunr-search.js

@@ -0,0 +1,843 @@
+/**
+ * Client-side search implementation using the generated search index
+ *
+ * This is an example of how to use the search index generated by the search plugin.
+ * Include this script in your site and call initializeSearch() when the page loads.
+ *
+ * Dependencies:
+ * - lunr.js (https://lunrjs.com/)
+ *
+ * Usage:
+ * 1. Include lunr.js in your page
+ * 2. Include this script
+ * 3. Call initializeSearch() when DOM is ready
+ * 4. Use performSearch(query) to search
+ */
+
+let searchIndex = null;
+let searchDocuments = [];
+
+/**
+ * Initialize the search functionality by loading the search index and documents
+ */
+async function initializeSearch() {
+  // Safely check if variables are defined (they may not be if search is not configured)
+  if (
+    typeof searchIndexId === "undefined" ||
+    typeof searchIndexHash === "undefined" ||
+    typeof searchDocumentsHash === "undefined"
+  ) {
+    return false;
+  }
+
+  const indexPath = `/static/search/${searchIndexId}-index.json?v=${searchIndexHash}`;
+  const documentsPath = `/static/search/${searchIndexId}-documents.json?v=${searchDocumentsHash}`;
+
+  // Guard on the MODAL, not the trigger button. The docs shell always renders the
+  // modal, while the button lives in the header — which a site can replace via
+  // `_includes/docs-header.hbs`. Guarding on the button meant a custom header
+  // without it skipped index loading entirely, so Ctrl+K opened a dead modal.
+  const searchElement = document.querySelector("#document-search-modal");
+  if (!searchElement) {
+    // Silent: a page without a search component is not an error, and this script
+    // is copied verbatim to the customer site, so a log here prints in every
+    // reader's console on every page. console.warn/error below are kept.
+    return false;
+  }
+
+  try {
+    // Load the search index and documents in parallel
+    const [indexResponse, documentsResponse] = await Promise.all([fetch(indexPath), fetch(documentsPath)]);
+
+    if (!indexResponse.ok) {
+      throw new Error(`Failed to load search index ${indexPath}: ${indexResponse.status}`);
+    }
+    if (!documentsResponse.ok) {
+      throw new Error(`Failed to load search documents ${documentsPath}: ${documentsResponse.status}`);
+    }
+
+    const [indexData, documentsData] = await Promise.all([indexResponse.json(), documentsResponse.json()]);
+
+    // Load the pre-built lunr index
+    searchIndex = lunr.Index.load(indexData.index);
+    searchDocuments = documentsData.documents;
+
+    return true;
+  } catch (error) {
+    console.error("Failed to initialize search:", error);
+    return false;
+  }
+}
+
+/**
+ * Perform a search query
+ * @param {string} query - The search query
+ * @param {Object} options - Search options
+ * @param {number} options.limit - Maximum number of results (default: 10)
+ * @param {string[]} options.pageTypes - Filter by page types
+ * @returns {Array} Array of search results
+ */
+function performSearch(query, options = {}) {
+  if (!searchIndex || !query.trim()) {
+    return [];
+  }
+
+  const { limit = 10, pageTypes = [] } = options;
+
+  try {
+    // Perform the search using lunr
+    const results = searchIndex.search(query);
+
+    // Map results to full document data
+    let searchResults = results
+      .map((result) => {
+        const document = searchDocuments.find((doc) => doc.id === result.ref);
+        if (!document) return null;
+
+        return {
+          ...document,
+          score: result.score,
+          matches: result.matchData,
+        };
+      })
+      .filter(Boolean);
+
+    // Filter by page types if specified
+    if (pageTypes.length > 0) {
+      searchResults = searchResults.filter((result) => pageTypes.includes(result.pageType));
+    }
+
+    // Limit results
+    return searchResults.slice(0, limit);
+  } catch (error) {
+    console.error("Search error:", error);
+    return [];
+  }
+}
+
+/**
+ * Get search suggestions based on partial query
+ * @param {string} partialQuery - Partial search query
+ * @param {number} limit - Maximum number of suggestions
+ * @returns {Array} Array of search suggestions
+ */
+function getSearchSuggestions(partialQuery, limit = 5) {
+  if (!searchDocuments || !partialQuery.trim()) {
+    return [];
+  }
+
+  const query = partialQuery.toLowerCase();
+  const suggestions = [];
+
+  // Simple suggestion algorithm - match titles and excerpts
+  for (const doc of searchDocuments) {
+    if (suggestions.length >= limit) break;
+
+    const title = doc.title.toLowerCase();
+    const summary = doc.summary.toLowerCase();
+
+    if (title.includes(query) || summary.includes(query)) {
+      suggestions.push({
+        title: doc.title,
+        url: doc.url,
+        summary: doc.summary,
+        pageTypeName: doc.pageTypeName,
+      });
+    }
+  }
+
+  return suggestions;
+}
+
+/**
+ * Search UI integration for existing modal
+ */
+class SearchUI {
+  constructor(options = {}) {
+    this.searchInput = null;
+    this.searchResults = null;
+    this.searchTimeout = null;
+    this.saveTimeout = null;
+    this.isInitialized = false;
+
+    // Selection tracking
+    this.selectedIndex = -1;
+    this.selectableItems = [];
+
+    // Search history configuration
+    this.maxHistoryItems = options.maxHistoryItems || 5;
+    this.historyStorageKey = options.historyStorageKey || "searchHistory";
+    this.searchHistory = this.loadSearchHistory();
+  }
+
+  /**
+   * Initialize search UI with existing modal elements
+   */
+  initialize() {
+    // Find the search input in the existing modal
+    this.searchInput = document.querySelector('#document-search-modal input[type="text"]');
+    this.searchResults = document.querySelector("#document-search-modal .search-results-container");
+
+    if (!this.searchInput || !this.searchResults) {
+      console.warn("Search modal elements not found");
+      return false;
+    }
+
+    this.setupEventListeners();
+
+    // Show recent searches by default
+    this.showRecentSearches();
+
+    // Set up modal open listener to clear input
+    this.setupModalOpenListener();
+
+    this.isInitialized = true;
+    return true;
+  }
+
+  /**
+   * Setup listener for when modal opens to clear input
+   */
+  setupModalOpenListener() {
+    // Listen for clicks on search trigger buttons
+    const searchTriggers = document.querySelectorAll("#document-search, #document-search-container");
+    searchTriggers.forEach((trigger) => {
+      trigger.addEventListener("click", () => {
+        // Clear input when modal opens via click and show recent searches
+        setTimeout(() => {
+          if (this.searchInput) {
+            this.searchInput.value = "";
+            this.searchInput.focus();
+            // Show recent searches when input is cleared
+            this.showRecentSearches();
+          }
+        }, 100);
+      });
+    });
+  }
+
+  /**
+   * Setup event listeners for search functionality
+   */
+  setupEventListeners() {
+    // Handle search input
+    this.searchInput.addEventListener("input", (e) => {
+      const query = e.target.value.trim();
+      this.handleSearchInput(query);
+    });
+
+    // Handle keyboard events
+    this.searchInput.addEventListener("keydown", (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.handleEnterKey();
+      } else if (e.key === "ArrowDown") {
+        e.preventDefault();
+        this.navigateSelection(1);
+      } else if (e.key === "ArrowUp") {
+        e.preventDefault();
+        this.navigateSelection(-1);
+      } else if (e.key === "Escape") {
+        // Let Alpine.js handle the escape key
+        return;
+      }
+    });
+
+    // Handle result clicks
+    this.searchResults.addEventListener("click", (e) => {
+      const resultItem = e.target.closest("[data-url]");
+      if (resultItem) {
+        const url = resultItem.getAttribute("data-url");
+        // Save to history before navigating
+        this.addToSearchHistory(this.searchInput.value.trim());
+        this.navigateToUrl(url);
+        return;
+      }
+
+      // Handle search history item clicks
+      const historyItem = e.target.closest("[data-query]");
+      if (historyItem) {
+        const query = historyItem.getAttribute("data-query");
+        this.searchInput.value = query;
+        this.performSearch(query, true); // Save to history when clicking history item
+      }
+    });
+  }
+
+  /**
+   * Handle search input with debouncing
+   */
+  handleSearchInput(query) {
+    clearTimeout(this.searchTimeout);
+    clearTimeout(this.saveTimeout);
+
+    // Quick search for live results
+    this.searchTimeout = setTimeout(() => {
+      if (query.length >= 2) {
+        this.performSearch(query, false); // Don't save to history on live search
+      } else {
+        this.showRecentSearches();
+      }
+    }, 300);
+
+    // Longer timeout to save to history if user stops typing
+    if (query.length >= 2) {
+      this.saveTimeout = setTimeout(() => {
+        this.addToSearchHistory(query);
+      }, 2000); // Save to history after 2 seconds of no typing
+    }
+  }
+
+  /**
+   * Handle Enter key press
+   */
+  handleEnterKey() {
+    const query = this.searchInput.value.trim();
+
+    // If we have a selected item, navigate to it (regardless of input length)
+    if (this.selectedIndex >= 0 && this.selectedIndex < this.selectableItems.length) {
+      const selectedItem = this.selectableItems[this.selectedIndex];
+      const url = selectedItem.getAttribute("data-url");
+      const historyQuery = selectedItem.getAttribute("data-query");
+
+      if (url) {
+        this.addToSearchHistory(query);
+        this.navigateToUrl(url);
+        return;
+      } else if (historyQuery) {
+        // Handle history item selection
+        this.searchInput.value = historyQuery;
+        this.performSearch(historyQuery, true);
+        return;
+      }
+    }
+
+    // Only check for minimum query length if no item is selected
+    if (query.length < 2) {
+      return; // Don't do anything for short queries
+    }
+
+    // Fallback: check if there are search results
+    const firstResult = this.searchResults.querySelector("[data-url]");
+    if (firstResult) {
+      // Navigate to first result and save to history
+      const url = firstResult.getAttribute("data-url");
+      this.addToSearchHistory(query);
+      this.navigateToUrl(url);
+    } else {
+      // No results, just save the search to history
+      this.addToSearchHistory(query);
+      // Optionally show a "no results" message
+      this.displayResults([], query);
+    }
+  }
+
+  /**
+   * Navigate selection with arrow keys
+   */
+  navigateSelection(direction) {
+    if (this.selectableItems.length === 0) {
+      return;
+    }
+
+    // Update selected index
+    this.selectedIndex += direction;
+
+    // Wrap around
+    if (this.selectedIndex < 0) {
+      this.selectedIndex = this.selectableItems.length - 1;
+    } else if (this.selectedIndex >= this.selectableItems.length) {
+      this.selectedIndex = 0;
+    }
+
+    // Update visual selection
+    this.updateSelection();
+  }
+
+  /**
+   * Update visual selection highlighting
+   */
+  updateSelection() {
+    // Remove all selection classes
+    this.selectableItems.forEach((item) => {
+      item.classList.remove("search-result-selected");
+    });
+
+    // Add selection class to current item
+    if (this.selectedIndex >= 0 && this.selectedIndex < this.selectableItems.length) {
+      const selectedItem = this.selectableItems[this.selectedIndex];
+      selectedItem.classList.add("search-result-selected");
+
+      // Scroll the selected item into view
+      selectedItem.scrollIntoView({
+        behavior: "smooth",
+        block: "nearest",
+        inline: "nearest",
+      });
+    }
+  }
+
+  /**
+   * Reset selection
+   */
+  resetSelection() {
+    this.selectedIndex = -1;
+    this.selectableItems = [];
+  }
+
+  /**
+   * Navigate to a URL, handling current page case by closing modal
+   */
+  navigateToUrl(url) {
+    const currentUrl = window.location.pathname + window.location.search + window.location.hash;
+
+    // If the URL is exactly the same as current page (including hash), close the modal
+    if (url === currentUrl || url === window.location.href) {
+      this.closeModal();
+    } else {
+      // Check if it's the same page but with a different hash fragment
+      const currentPathAndQuery = window.location.pathname + window.location.search;
+      const targetPathAndQuery = url.split("#")[0]; // Remove hash for comparison
+
+      if (currentPathAndQuery === targetPathAndQuery) {
+        // Same page but different hash - navigate to the new hash and close modal
+        window.location.href = url;
+        // Close modal after navigation
+        setTimeout(() => this.closeModal(), 100);
+      } else {
+        // Different page - navigate normally
+        window.location.href = url;
+      }
+    }
+  }
+
+  /**
+   * Close the search modal
+   */
+  closeModal() {
+    const searchModal = document.getElementById("document-search-modal");
+    if (searchModal && window.Alpine) {
+      // Find the parent Alpine.js component that contains headerSearchShow
+      // The headerSearchShow variable is in the header component, not the modal
+      let currentElement = searchModal;
+      let alpineData = null;
+
+      // Walk up the DOM tree to find the Alpine.js component with headerSearchShow
+      while (currentElement && currentElement !== document.body) {
+        alpineData = Alpine.$data(currentElement);
+        if (alpineData && typeof alpineData.headerSearchShow !== "undefined") {
+          alpineData.headerSearchShow = false;
+          return;
+        }
+        currentElement = currentElement.parentElement;
+      }
+
+      // Fallback: try to find any Alpine.js component with headerSearchShow
+      if (!alpineData || typeof alpineData.headerSearchShow === "undefined") {
+        const allElements = document.querySelectorAll("[x-data]");
+        for (const element of allElements) {
+          const data = Alpine.$data(element);
+          if (data && typeof data.headerSearchShow !== "undefined") {
+            data.headerSearchShow = false;
+            return;
+          }
+        }
+      }
+    }
+  }
+
+  /**
+   * Perform search and display results
+   */
+  performSearch(query, saveToHistory = false) {
+    const results = performSearch(query, { limit: 10 });
+    this.displayResults(results, query);
+
+    // Only add to search history if explicitly requested
+    if (saveToHistory) {
+      this.addToSearchHistory(query);
+    }
+  }
+
+  /**
+   * Load search history from localStorage
+   */
+  loadSearchHistory() {
+    try {
+      const history = localStorage.getItem(this.historyStorageKey);
+      return history ? JSON.parse(history) : [];
+    } catch (error) {
+      console.warn("Failed to load search history:", error);
+      return [];
+    }
+  }
+
+  /**
+   * Save search history to localStorage
+   */
+  saveSearchHistory() {
+    try {
+      localStorage.setItem(this.historyStorageKey, JSON.stringify(this.searchHistory));
+    } catch (error) {
+      console.warn("Failed to save search history:", error);
+    }
+  }
+
+  /**
+   * Add a search query to history
+   */
+  addToSearchHistory(query) {
+    if (!query || query.trim().length < 2) return;
+
+    const trimmedQuery = query.trim();
+
+    // Remove if already exists
+    this.searchHistory = this.searchHistory.filter((item) => item.query !== trimmedQuery);
+
+    // Add to beginning
+    this.searchHistory.unshift({
+      query: trimmedQuery,
+      timestamp: Date.now(),
+    });
+
+    // Keep only the most recent items
+    this.searchHistory = this.searchHistory.slice(0, this.maxHistoryItems);
+
+    // Save to localStorage
+    this.saveSearchHistory();
+  }
+
+  /**
+   * Clear search history
+   */
+  clearSearchHistory() {
+    this.searchHistory = [];
+    this.saveSearchHistory();
+  }
+
+  /**
+   * Display search results
+   */
+  displayResults(results, query) {
+    // Reset selection when displaying new results
+    this.resetSelection();
+
+    if (results.length === 0) {
+      this.searchResults.innerHTML = `
+        <div class="search-no-results">
+          <div class="search-no-results-title">No results found for "${query}"</div>
+          <div class="search-no-results-subtitle">Try different keywords or check your spelling</div>
+        </div>
+      `;
+      return;
+    }
+
+    const resultsHTML = `
+      <div class="search-results-header">Search results (${results.length})</div>
+      ${results.map((result) => this.createResultHTML(result, query)).join("")}
+    `;
+
+    this.searchResults.innerHTML = resultsHTML;
+
+    // Set up selectable items for keyboard navigation
+    this.selectableItems = Array.from(this.searchResults.querySelectorAll("[data-url]"));
+
+    // Set first item as selected by default
+    if (this.selectableItems.length > 0) {
+      this.selectedIndex = 0;
+      this.updateSelection();
+    }
+  }
+
+  /**
+   * Create HTML for a single search result
+   */
+  createResultHTML(result, query = "") {
+    const breadcrumb = this.createBreadcrumb(result);
+    const labels = this.createLabels(result);
+
+    // Highlight matching keywords in title and summary
+    const highlightedTitle = this.highlightKeywords(result.title, query);
+    const highlightedSummary = this.highlightKeywords(result.content, query);
+
+    return `
+      <div class="searched-item" data-url="${result.url}">
+        <i class="search-result-icon"></i>
+        <div class="search-result-content">
+          <div class="search-result-breadcrumb">
+            ${breadcrumb}
+            ${labels}
+          </div>
+          <div class="search-result-title">${highlightedTitle}</div>
+          <div class="search-result-summary">${highlightedSummary}</div>
+        </div>
+        <i class="search-result-goto-icon"></i>
+      </div>
+    `;
+  }
+
+  createLabels(result) {
+    if (!result.labels || result.labels.length === 0) {
+      return "";
+    }
+
+    return `
+        <span class="search-result-labels">${result.labels.map((label) => `<span class="search-label">${label}</span>`).join("")}</span>
+        `;
+  }
+
+  /**
+   * Create breadcrumb navigation for search result
+   */
+  createBreadcrumb(result) {
+    if (!result.pageTypeName) {
+      return "";
+    }
+
+    return `
+      <div class="search-result-breadcrumb">
+        <span>${result.pageTypeName}</span>
+      </div>
+    `;
+  }
+
+  /**
+   * Highlight matching keywords in text
+   */
+  highlightKeywords(text, query) {
+    if (!query || !text) return text;
+
+    // Split query into individual words and filter out common words
+    const queryWords = query
+      .toLowerCase()
+      .split(/\s+/)
+      .filter((word) => word.length > 2) // Only highlight words longer than 2 characters
+      .filter(
+        (word) =>
+          ![
+            "the",
+            "and",
+            "for",
+            "are",
+            "but",
+            "not",
+            "you",
+            "all",
+            "can",
+            "had",
+            "her",
+            "was",
+            "one",
+            "our",
+            "out",
+            "day",
+            "get",
+            "has",
+            "him",
+            "his",
+            "how",
+            "its",
+            "may",
+            "new",
+            "now",
+            "old",
+            "see",
+            "two",
+            "way",
+            "who",
+            "boy",
+            "did",
+            "man",
+            "oil",
+            "sit",
+            "try",
+            "use",
+          ].includes(word),
+      );
+
+    if (queryWords.length === 0) {
+      return text;
+    }
+
+    // Create regex pattern to match any of the query words
+    const pattern = new RegExp(`(${queryWords.map((word) => this.escapeRegExp(word)).join("|")})`, "gi");
+
+    // Replace matches with highlighted spans
+    return text.replace(pattern, '<span class="search-highlight">$1</span>');
+  }
+
+  /**
+   * Escape special regex characters
+   */
+  escapeRegExp(string) {
+    return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  }
+
+  /**
+   * Show recent searches from history
+   */
+  showRecentSearches() {
+    // Reset selection when showing recent searches
+    this.resetSelection();
+
+    if (this.searchHistory.length === 0) {
+      this.searchResults.innerHTML = `
+                <div class="search-recent-header">Recent searches</div>
+                <div class="search-no-results">
+                    <div class="search-no-results-subtitle">No recent searches</div>
+                </div>
+            `;
+      return;
+    }
+
+    const historyHTML = this.searchHistory
+      .map((item) => {
+        const timeAgo = this.getTimeAgo(item.timestamp);
+        return `
+                <div class="searched-item search-history-item" data-query="${item.query}">
+                    <i class="search-history-icon"></i>
+                    <div class="search-result-content">
+                        <div class="search-result-title">${item.query}</div>
+                        <div class="search-result-summary">Searched ${timeAgo}</div>
+                    </div>
+                    <i class="search-result-goto-icon"></i>
+                </div>
+            `;
+      })
+      .join("");
+
+    this.searchResults.innerHTML = `
+            <div class="search-recent-header">Recent searches</div>
+            ${historyHTML}
+        `;
+
+    // Set up selectable items for keyboard navigation (history items)
+    this.selectableItems = Array.from(this.searchResults.querySelectorAll("[data-query]"));
+
+    // Set first item as selected by default
+    if (this.selectableItems.length > 0) {
+      this.selectedIndex = 0;
+      this.updateSelection();
+    }
+  }
+
+  /**
+   * Get human-readable time ago string
+   */
+  getTimeAgo(timestamp) {
+    const now = Date.now();
+    const diff = now - timestamp;
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(diff / 3600000);
+    const days = Math.floor(diff / 86400000);
+
+    if (minutes < 1) {
+      return "just now";
+    }
+    if (minutes < 60) {
+      return `${minutes} minute${minutes === 1 ? "" : "s"} ago`;
+    }
+    if (hours < 24) {
+      return `${hours} hour${hours === 1 ? "" : "s"} ago`;
+    }
+
+    return `${days} day${days === 1 ? "" : "s"} ago`;
+  }
+}
+
+// Global search UI instance with configurable options
+const searchUI = new SearchUI({
+  maxHistoryItems: 7, // Number of recent searches to keep
+  historyStorageKey: "leedSearchHistory", // localStorage key
+});
+
+// Export functions for use in other scripts
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = {
+    initializeSearch,
+    performSearch,
+    getSearchSuggestions,
+    searchUI,
+  };
+}
+
+// Auto-initialize search when DOM is ready
+if (typeof document !== "undefined") {
+  function initializeSearchUI() {
+    // Initialize the search index first
+    initializeSearch().then((success) => {
+      if (success) {
+        // Then initialize the UI
+        searchUI.initialize();
+
+        // Only add global Ctrl+K handler if search initialization was successful
+        document.addEventListener(
+          "keydown",
+          (e) => {
+            if (e.ctrlKey && e.key === "k") {
+              e.preventDefault();
+              e.stopPropagation();
+
+              // Trigger the search modal if it exists
+              const searchModal = document.getElementById("document-search-modal");
+              if (searchModal && window.Alpine) {
+                // Find the parent Alpine.js component that contains headerSearchShow
+                let currentElement = searchModal;
+                let alpineData = null;
+
+                // Walk up the DOM tree to find the Alpine.js component with headerSearchShow
+                while (currentElement && currentElement !== document.body) {
+                  alpineData = Alpine.$data(currentElement);
+                  if (alpineData && typeof alpineData.headerSearchShow !== "undefined") {
+                    alpineData.headerSearchShow = true;
+                    // Clear the search input when opening the modal and show recent searches
+                    setTimeout(() => {
+                      const searchInput = document.querySelector('#document-search-modal input[type="text"]');
+                      if (searchInput) {
+                        searchInput.value = "";
+                        searchInput.focus();
+                        // Show recent searches when input is cleared
+                        searchUI.showRecentSearches();
+                      }
+                    }, 50);
+                    return;
+                  }
+                  currentElement = currentElement.parentElement;
+                }
+
+                // Fallback: try to find any Alpine.js component with headerSearchShow
+                if (!alpineData || typeof alpineData.headerSearchShow === "undefined") {
+                  const allElements = document.querySelectorAll("[x-data]");
+                  for (const element of allElements) {
+                    const data = Alpine.$data(element);
+                    if (data && typeof data.headerSearchShow !== "undefined") {
+                      data.headerSearchShow = true;
+                      // Clear the search input when opening the modal and show recent searches
+                      setTimeout(() => {
+                        const searchInput = document.querySelector('#document-search-modal input[type="text"]');
+                        if (searchInput) {
+                          searchInput.value = "";
+                          searchInput.focus();
+                          // Show recent searches when input is cleared
+                          searchUI.showRecentSearches();
+                        }
+                      }, 50);
+                      return;
+                    }
+                  }
+                }
+              }
+            }
+          },
+          true,
+        ); // Use capture phase to intercept before other handlers
+      }
+    });
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", initializeSearchUI);
+  } else {
+    initializeSearchUI();
+  }
+}