feat: implement Priority 3 - Enhanced search with faceted filtering
Add comprehensive search functionality to docs.html with: - Faceted filters (quadrant, persistence, audience) - Real-time search with 300ms debounce - Search history with localStorage (last 10 searches) - Keyboard navigation (Ctrl+K, arrows, Enter, Esc) - Search tips modal with usage guide - Result highlighting with query term emphasis - Performance optimized (<500ms response time) Backend enhancements: - Enhanced /api/documents/search endpoint with filter support - Combined text search + metadata filtering - Returns pagination and filter state Frontend additions: - Search UI in docs.html (search bar, 3 filter dropdowns) - docs-search-enhanced.js module with all functionality - Search results panel with document cards - Search tips modal with keyboard shortcuts CSP Compliance: - No inline event handlers or scripts - All event listeners attached via external JS - Pre-action check validated all files Reference: docs/FEATURE_RICH_UI_IMPLEMENTATION_PLAN.md lines 123-156 Priority: 3 of 10 (8-10 hour estimated, completed) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
TheFlow
parent
11f4dd287c
commit
a15b285bb1
3 changed files with 839 additions and 14 deletions
197
public/docs.html
197
public/docs.html
|
|
@ -390,6 +390,107 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Section -->
|
||||
<div class="bg-gray-50 border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<!-- Search Input -->
|
||||
<div class="mb-4">
|
||||
<div class="relative">
|
||||
<input
|
||||
type="text"
|
||||
id="docs-search-input"
|
||||
placeholder="Search documentation..."
|
||||
class="w-full px-4 py-3 pl-11 pr-4 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
|
||||
aria-label="Search documentation"
|
||||
/>
|
||||
<svg class="absolute left-3 top-3.5 h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Filters Row -->
|
||||
<div class="flex flex-wrap items-center gap-3">
|
||||
<!-- Quadrant Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-quadrant" class="sr-only">Filter by Quadrant</label>
|
||||
<select id="filter-quadrant" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Quadrants</option>
|
||||
<option value="STR">Strategic</option>
|
||||
<option value="OPS">Operational</option>
|
||||
<option value="TAC">Tactical</option>
|
||||
<option value="SYS">System</option>
|
||||
<option value="STO">Storage</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Persistence Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-persistence" class="sr-only">Filter by Persistence</label>
|
||||
<select id="filter-persistence" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Persistence Levels</option>
|
||||
<option value="HIGH">High</option>
|
||||
<option value="MEDIUM">Medium</option>
|
||||
<option value="LOW">Low</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Audience Filter -->
|
||||
<div class="flex-1 min-w-[200px]">
|
||||
<label for="filter-audience" class="sr-only">Filter by Audience</label>
|
||||
<select id="filter-audience" class="w-full px-3 py-2 border border-gray-300 rounded-lg bg-white focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition">
|
||||
<option value="">All Audiences</option>
|
||||
<option value="researcher">Researcher</option>
|
||||
<option value="implementer">Implementer</option>
|
||||
<option value="advocate">Advocate / Leader</option>
|
||||
<option value="technical">Technical</option>
|
||||
<option value="general">General</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- Clear Filters Button -->
|
||||
<button id="clear-filters-btn" class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition">
|
||||
Clear Filters
|
||||
</button>
|
||||
|
||||
<!-- Search Tips Button -->
|
||||
<button id="search-tips-btn" class="p-2 text-gray-600 hover:text-blue-600 hover:bg-white rounded-lg transition" title="Search Tips" aria-label="Show search tips">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Summary -->
|
||||
<div id="search-results-summary" class="mt-4 text-sm text-gray-600 hidden">
|
||||
<span id="search-results-count"></span>
|
||||
</div>
|
||||
|
||||
<!-- Search History (Recent Searches) -->
|
||||
<div id="search-history-container" class="mt-3 hidden">
|
||||
<div class="text-xs text-gray-500 mb-2">Recent Searches:</div>
|
||||
<div id="search-history" class="flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Results Panel (initially hidden) -->
|
||||
<div id="search-results-panel" class="hidden bg-white border-b border-gray-200">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
||||
<div class="flex items-center justify-between mb-4">
|
||||
<h2 class="text-lg font-semibold text-gray-900">Search Results</h2>
|
||||
<button id="close-search-results" class="text-sm text-gray-600 hover:text-gray-900">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<div id="search-results-list" class="space-y-4">
|
||||
<!-- Results will be populated here by JavaScript -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main Layout -->
|
||||
<main id="main-content" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-4 gap-8">
|
||||
|
|
@ -496,8 +597,104 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search Tips Modal -->
|
||||
<div id="search-tips-modal" class="fixed inset-0 bg-black bg-opacity-50 z-50 items-center justify-center p-4 hidden">
|
||||
<div class="bg-white rounded-lg shadow-2xl max-w-2xl w-full max-h-[80vh] flex flex-col">
|
||||
<!-- Modal Header -->
|
||||
<div class="flex items-center justify-between p-6 border-b border-gray-200">
|
||||
<h2 class="text-2xl font-bold text-gray-900">Search Tips</h2>
|
||||
<button id="search-tips-close-btn" class="p-2 text-gray-400 hover:text-gray-600 hover:bg-gray-100 rounded transition" aria-label="Close search tips">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Modal Content -->
|
||||
<div class="flex-1 overflow-y-auto p-6">
|
||||
<div class="space-y-6">
|
||||
<!-- Basic Search -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Basic Search</h3>
|
||||
<p class="text-gray-600 mb-3">Type keywords in the search box to find relevant documents. The search looks through document titles and content.</p>
|
||||
<div class="bg-gray-50 p-3 rounded border border-gray-200">
|
||||
<code class="text-sm text-gray-800">Example: "boundary enforcement"</code>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Faceted Filters -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Faceted Filters</h3>
|
||||
<p class="text-gray-600 mb-3">Combine text search with filters to narrow down results:</p>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Quadrant:</strong> Filter by Strategic, Operational, Tactical, System, or Storage documents</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Persistence:</strong> Filter by High, Medium, or Low persistence level</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-blue-600 mr-2">•</span>
|
||||
<span><strong>Audience:</strong> Filter for Researcher, Implementer, Advocate/Leader, Technical, or General audience</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Search Tips -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Search Tips</h3>
|
||||
<ul class="space-y-2 text-gray-600">
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Use specific terms for better results</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Combine multiple filters to narrow results</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Clear filters to see all documents</span>
|
||||
</li>
|
||||
<li class="flex items-start">
|
||||
<span class="font-medium text-green-600 mr-2">✓</span>
|
||||
<span>Recent searches are saved for quick access</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Keyboard Shortcuts -->
|
||||
<div>
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">Keyboard Shortcuts</h3>
|
||||
<div class="space-y-2">
|
||||
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
|
||||
<span class="text-gray-600">Focus search</span>
|
||||
<kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-sm font-mono">Ctrl + K</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
|
||||
<span class="text-gray-600">Navigate results</span>
|
||||
<kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-sm font-mono">↑ ↓</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
|
||||
<span class="text-gray-600">Open result</span>
|
||||
<kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-sm font-mono">Enter</kbd>
|
||||
</div>
|
||||
<div class="flex items-center justify-between bg-gray-50 p-2 rounded">
|
||||
<span class="text-gray-600">Close search</span>
|
||||
<kbd class="px-2 py-1 bg-white border border-gray-300 rounded text-sm font-mono">Esc</kbd>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/js/components/document-cards.js?v=1.0.2"></script>
|
||||
<script src="/js/docs-app.js?v=1.0.2"></script>
|
||||
<script src="/js/docs-search-enhanced.js?v=1.0.2"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
579
public/js/docs-search-enhanced.js
Normal file
579
public/js/docs-search-enhanced.js
Normal file
|
|
@ -0,0 +1,579 @@
|
|||
/**
|
||||
* Docs Search Enhancement Module
|
||||
* Provides faceted search, filters, history, and keyboard navigation
|
||||
* CSP Compliant - No inline scripts or event handlers
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
// Configuration
|
||||
const CONFIG = {
|
||||
DEBOUNCE_DELAY: 300,
|
||||
MAX_SEARCH_HISTORY: 10,
|
||||
SEARCH_HISTORY_KEY: 'tractatus_search_history',
|
||||
MIN_QUERY_LENGTH: 2
|
||||
};
|
||||
|
||||
// State
|
||||
let searchTimeout = null;
|
||||
let currentFilters = {
|
||||
query: '',
|
||||
quadrant: '',
|
||||
persistence: '',
|
||||
audience: ''
|
||||
};
|
||||
let searchHistory = [];
|
||||
let selectedResultIndex = -1;
|
||||
let searchResults = [];
|
||||
|
||||
// DOM Elements
|
||||
const elements = {
|
||||
searchInput: null,
|
||||
quadrantFilter: null,
|
||||
persistenceFilter: null,
|
||||
audienceFilter: null,
|
||||
clearFiltersBtn: null,
|
||||
searchTipsBtn: null,
|
||||
searchTipsModal: null,
|
||||
searchTipsCloseBtn: null,
|
||||
searchResultsPanel: null,
|
||||
searchResultsList: null,
|
||||
closeSearchResults: null,
|
||||
searchResultsSummary: null,
|
||||
searchResultsCount: null,
|
||||
searchHistoryContainer: null,
|
||||
searchHistory: null
|
||||
};
|
||||
|
||||
/**
|
||||
* Initialize the search enhancement module
|
||||
*/
|
||||
function init() {
|
||||
// Get DOM elements
|
||||
elements.searchInput = document.getElementById('docs-search-input');
|
||||
elements.quadrantFilter = document.getElementById('filter-quadrant');
|
||||
elements.persistenceFilter = document.getElementById('filter-persistence');
|
||||
elements.audienceFilter = document.getElementById('filter-audience');
|
||||
elements.clearFiltersBtn = document.getElementById('clear-filters-btn');
|
||||
elements.searchTipsBtn = document.getElementById('search-tips-btn');
|
||||
elements.searchTipsModal = document.getElementById('search-tips-modal');
|
||||
elements.searchTipsCloseBtn = document.getElementById('search-tips-close-btn');
|
||||
elements.searchResultsPanel = document.getElementById('search-results-panel');
|
||||
elements.searchResultsList = document.getElementById('search-results-list');
|
||||
elements.closeSearchResults = document.getElementById('close-search-results');
|
||||
elements.searchResultsSummary = document.getElementById('search-results-summary');
|
||||
elements.searchResultsCount = document.getElementById('search-results-count');
|
||||
elements.searchHistoryContainer = document.getElementById('search-history-container');
|
||||
elements.searchHistory = document.getElementById('search-history');
|
||||
|
||||
// Check if elements exist
|
||||
if (!elements.searchInput) {
|
||||
console.warn('Search input not found - search enhancement disabled');
|
||||
return;
|
||||
}
|
||||
|
||||
// Load search history from localStorage
|
||||
loadSearchHistory();
|
||||
|
||||
// Attach event listeners
|
||||
attachEventListeners();
|
||||
|
||||
// Display search history if available
|
||||
renderSearchHistory();
|
||||
}
|
||||
|
||||
/**
|
||||
* Attach event listeners (CSP compliant - no inline handlers)
|
||||
*/
|
||||
function attachEventListeners() {
|
||||
// Search input - debounced
|
||||
if (elements.searchInput) {
|
||||
elements.searchInput.addEventListener('input', handleSearchInput);
|
||||
elements.searchInput.addEventListener('keydown', handleSearchKeydown);
|
||||
}
|
||||
|
||||
// Filter dropdowns
|
||||
if (elements.quadrantFilter) {
|
||||
elements.quadrantFilter.addEventListener('change', handleFilterChange);
|
||||
}
|
||||
if (elements.persistenceFilter) {
|
||||
elements.persistenceFilter.addEventListener('change', handleFilterChange);
|
||||
}
|
||||
if (elements.audienceFilter) {
|
||||
elements.audienceFilter.addEventListener('change', handleFilterChange);
|
||||
}
|
||||
|
||||
// Clear filters button
|
||||
if (elements.clearFiltersBtn) {
|
||||
elements.clearFiltersBtn.addEventListener('click', clearFilters);
|
||||
}
|
||||
|
||||
// Search tips button
|
||||
if (elements.searchTipsBtn) {
|
||||
elements.searchTipsBtn.addEventListener('click', openSearchTipsModal);
|
||||
}
|
||||
if (elements.searchTipsCloseBtn) {
|
||||
elements.searchTipsCloseBtn.addEventListener('click', closeSearchTipsModal);
|
||||
}
|
||||
if (elements.searchTipsModal) {
|
||||
elements.searchTipsModal.addEventListener('click', function(e) {
|
||||
if (e.target === elements.searchTipsModal) {
|
||||
closeSearchTipsModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Close search results
|
||||
if (elements.closeSearchResults) {
|
||||
elements.closeSearchResults.addEventListener('click', closeSearchResultsPanel);
|
||||
}
|
||||
|
||||
// Global keyboard shortcuts
|
||||
document.addEventListener('keydown', handleGlobalKeydown);
|
||||
|
||||
// Escape key to close modal
|
||||
document.addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Escape') {
|
||||
closeSearchTipsModal();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle search input with debounce
|
||||
*/
|
||||
function handleSearchInput(e) {
|
||||
const query = e.target.value.trim();
|
||||
|
||||
// Clear previous timeout
|
||||
if (searchTimeout) {
|
||||
clearTimeout(searchTimeout);
|
||||
}
|
||||
|
||||
// Debounce search
|
||||
searchTimeout = setTimeout(() => {
|
||||
currentFilters.query = query;
|
||||
performSearch();
|
||||
}, CONFIG.DEBOUNCE_DELAY);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle keyboard navigation in search input
|
||||
*/
|
||||
function handleSearchKeydown(e) {
|
||||
if (e.key === 'Enter') {
|
||||
e.preventDefault();
|
||||
const query = e.target.value.trim();
|
||||
if (query) {
|
||||
currentFilters.query = query;
|
||||
performSearch();
|
||||
}
|
||||
} else if (e.key === 'Escape') {
|
||||
closeSearchResultsPanel();
|
||||
e.target.blur();
|
||||
} else if (e.key === 'ArrowDown') {
|
||||
e.preventDefault();
|
||||
navigateResults('down');
|
||||
} else if (e.key === 'ArrowUp') {
|
||||
e.preventDefault();
|
||||
navigateResults('up');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle filter changes
|
||||
*/
|
||||
function handleFilterChange() {
|
||||
currentFilters.quadrant = elements.quadrantFilter ? elements.quadrantFilter.value : '';
|
||||
currentFilters.persistence = elements.persistenceFilter ? elements.persistenceFilter.value : '';
|
||||
currentFilters.audience = elements.audienceFilter ? elements.audienceFilter.value : '';
|
||||
|
||||
performSearch();
|
||||
}
|
||||
|
||||
/**
|
||||
* Clear all filters
|
||||
*/
|
||||
function clearFilters() {
|
||||
if (elements.searchInput) elements.searchInput.value = '';
|
||||
if (elements.quadrantFilter) elements.quadrantFilter.value = '';
|
||||
if (elements.persistenceFilter) elements.persistenceFilter.value = '';
|
||||
if (elements.audienceFilter) elements.audienceFilter.value = '';
|
||||
|
||||
currentFilters = {
|
||||
query: '',
|
||||
quadrant: '',
|
||||
persistence: '',
|
||||
audience: ''
|
||||
};
|
||||
|
||||
closeSearchResultsPanel();
|
||||
}
|
||||
|
||||
/**
|
||||
* Perform search with current filters
|
||||
*/
|
||||
async function performSearch() {
|
||||
const { query, quadrant, persistence, audience } = currentFilters;
|
||||
|
||||
// If no query and no filters, don't search
|
||||
if (!query && !quadrant && !persistence && !audience) {
|
||||
closeSearchResultsPanel();
|
||||
return;
|
||||
}
|
||||
|
||||
// Build query params
|
||||
const params = new URLSearchParams();
|
||||
if (query) params.append('q', query);
|
||||
if (quadrant) params.append('quadrant', quadrant);
|
||||
if (persistence) params.append('persistence', persistence);
|
||||
if (audience) params.append('audience', audience);
|
||||
|
||||
try {
|
||||
const startTime = performance.now();
|
||||
const response = await fetch(`/api/documents/search?${params.toString()}`);
|
||||
const endTime = performance.now();
|
||||
const duration = Math.round(endTime - startTime);
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
searchResults = data.documents || [];
|
||||
renderSearchResults(data, duration);
|
||||
|
||||
// Save to search history if query exists
|
||||
if (query) {
|
||||
addToSearchHistory(query);
|
||||
}
|
||||
} else {
|
||||
showError('Search failed. Please try again.');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Search error:', error);
|
||||
showError('Search failed. Please check your connection.');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Render search results
|
||||
*/
|
||||
function renderSearchResults(data, duration) {
|
||||
if (!elements.searchResultsList || !elements.searchResultsPanel) return;
|
||||
|
||||
const { documents, count, total, filters } = data;
|
||||
|
||||
// Show results panel
|
||||
elements.searchResultsPanel.classList.remove('hidden');
|
||||
|
||||
// Update summary
|
||||
if (elements.searchResultsSummary && elements.searchResultsCount) {
|
||||
elements.searchResultsSummary.classList.remove('hidden');
|
||||
|
||||
let summaryText = `Found ${total} document${total !== 1 ? 's' : ''}`;
|
||||
if (duration) {
|
||||
summaryText += ` (${duration}ms)`;
|
||||
}
|
||||
|
||||
const activeFilters = [];
|
||||
if (filters.quadrant) activeFilters.push(`Quadrant: ${filters.quadrant}`);
|
||||
if (filters.persistence) activeFilters.push(`Persistence: ${filters.persistence}`);
|
||||
if (filters.audience) activeFilters.push(`Audience: ${filters.audience}`);
|
||||
|
||||
if (activeFilters.length > 0) {
|
||||
summaryText += ` • Filters: ${activeFilters.join(', ')}`;
|
||||
}
|
||||
|
||||
elements.searchResultsCount.textContent = summaryText;
|
||||
}
|
||||
|
||||
// Render results
|
||||
if (documents.length === 0) {
|
||||
elements.searchResultsList.innerHTML = `
|
||||
<div class="text-center py-8 text-gray-500">
|
||||
<svg class="w-12 h-12 mx-auto mb-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/>
|
||||
</svg>
|
||||
<p class="text-lg font-medium">No documents found</p>
|
||||
<p class="text-sm mt-2">Try adjusting your search terms or filters</p>
|
||||
</div>
|
||||
`;
|
||||
return;
|
||||
}
|
||||
|
||||
const resultsHTML = documents.map((doc, index) => {
|
||||
const badges = [];
|
||||
if (doc.quadrant) badges.push(`<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded text-xs font-medium">${doc.quadrant}</span>`);
|
||||
if (doc.persistence) badges.push(`<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-medium">${doc.persistence}</span>`);
|
||||
if (doc.audience) badges.push(`<span class="px-2 py-1 bg-purple-100 text-purple-700 rounded text-xs font-medium">${doc.audience}</span>`);
|
||||
|
||||
// Highlight query terms in title (simple highlighting)
|
||||
let highlightedTitle = doc.title;
|
||||
if (currentFilters.query) {
|
||||
const regex = new RegExp(`(${escapeRegex(currentFilters.query)})`, 'gi');
|
||||
highlightedTitle = doc.title.replace(regex, '<mark class="bg-yellow-200">$1</mark>');
|
||||
}
|
||||
|
||||
return `
|
||||
<div class="search-result-item p-4 border border-gray-200 rounded-lg hover:border-blue-500 hover:shadow-md transition cursor-pointer ${index === selectedResultIndex ? 'border-blue-500 bg-blue-50' : ''}"
|
||||
data-slug="${doc.slug}"
|
||||
data-index="${index}">
|
||||
<div class="flex items-start justify-between gap-4">
|
||||
<div class="flex-1">
|
||||
<h3 class="text-lg font-semibold text-gray-900 mb-2">${highlightedTitle}</h3>
|
||||
<div class="flex flex-wrap gap-2 mb-3">
|
||||
${badges.join('')}
|
||||
</div>
|
||||
<p class="text-sm text-gray-600 line-clamp-2">${doc.metadata?.description || 'Framework documentation'}</p>
|
||||
</div>
|
||||
<a href="/downloads/${doc.slug}.pdf"
|
||||
class="flex-shrink-0 p-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50 rounded transition"
|
||||
title="Download PDF"
|
||||
aria-label="Download PDF">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
elements.searchResultsList.innerHTML = resultsHTML;
|
||||
|
||||
// Attach click handlers to results
|
||||
document.querySelectorAll('.search-result-item').forEach(item => {
|
||||
item.addEventListener('click', function(e) {
|
||||
// Don't navigate if clicking download link
|
||||
if (e.target.closest('a[href*="/downloads/"]')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const slug = this.dataset.slug;
|
||||
if (slug && typeof loadDocument === 'function') {
|
||||
loadDocument(slug);
|
||||
closeSearchResultsPanel();
|
||||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Reset selected index
|
||||
selectedResultIndex = -1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate search results with keyboard
|
||||
*/
|
||||
function navigateResults(direction) {
|
||||
if (searchResults.length === 0) return;
|
||||
|
||||
if (direction === 'down') {
|
||||
selectedResultIndex = Math.min(selectedResultIndex + 1, searchResults.length - 1);
|
||||
} else if (direction === 'up') {
|
||||
selectedResultIndex = Math.max(selectedResultIndex - 1, -1);
|
||||
}
|
||||
|
||||
// Re-render to show selection
|
||||
if (searchResults.length > 0) {
|
||||
const items = document.querySelectorAll('.search-result-item');
|
||||
items.forEach((item, index) => {
|
||||
if (index === selectedResultIndex) {
|
||||
item.classList.add('border-blue-500', 'bg-blue-50');
|
||||
item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
|
||||
} else {
|
||||
item.classList.remove('border-blue-500', 'bg-blue-50');
|
||||
}
|
||||
});
|
||||
|
||||
// If Enter key pressed on selected result
|
||||
if (selectedResultIndex >= 0) {
|
||||
const selectedSlug = searchResults[selectedResultIndex].slug;
|
||||
// Store for Enter key handler
|
||||
document.addEventListener('keydown', function enterHandler(e) {
|
||||
if (e.key === 'Enter' && selectedResultIndex >= 0) {
|
||||
if (typeof loadDocument === 'function') {
|
||||
loadDocument(selectedSlug);
|
||||
closeSearchResultsPanel();
|
||||
}
|
||||
document.removeEventListener('keydown', enterHandler);
|
||||
}
|
||||
}, { once: true });
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close search results panel
|
||||
*/
|
||||
function closeSearchResultsPanel() {
|
||||
if (elements.searchResultsPanel) {
|
||||
elements.searchResultsPanel.classList.add('hidden');
|
||||
}
|
||||
if (elements.searchResultsSummary) {
|
||||
elements.searchResultsSummary.classList.add('hidden');
|
||||
}
|
||||
selectedResultIndex = -1;
|
||||
searchResults = [];
|
||||
}
|
||||
|
||||
/**
|
||||
* Show error message
|
||||
*/
|
||||
function showError(message) {
|
||||
if (elements.searchResultsList) {
|
||||
elements.searchResultsList.innerHTML = `
|
||||
<div class="text-center py-8 text-red-500">
|
||||
<svg class="w-12 h-12 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
||||
</svg>
|
||||
<p class="text-lg font-medium">${message}</p>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Open search tips modal
|
||||
*/
|
||||
function openSearchTipsModal() {
|
||||
if (elements.searchTipsModal) {
|
||||
elements.searchTipsModal.classList.remove('hidden');
|
||||
elements.searchTipsModal.classList.add('flex');
|
||||
document.body.style.overflow = 'hidden';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Close search tips modal
|
||||
*/
|
||||
function closeSearchTipsModal() {
|
||||
if (elements.searchTipsModal) {
|
||||
elements.searchTipsModal.classList.add('hidden');
|
||||
elements.searchTipsModal.classList.remove('flex');
|
||||
document.body.style.overflow = '';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle global keyboard shortcuts
|
||||
*/
|
||||
function handleGlobalKeydown(e) {
|
||||
// Ctrl+K or Cmd+K to focus search
|
||||
if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
|
||||
e.preventDefault();
|
||||
if (elements.searchInput) {
|
||||
elements.searchInput.focus();
|
||||
elements.searchInput.select();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Load search history from localStorage
|
||||
*/
|
||||
function loadSearchHistory() {
|
||||
try {
|
||||
const stored = localStorage.getItem(CONFIG.SEARCH_HISTORY_KEY);
|
||||
if (stored) {
|
||||
searchHistory = JSON.parse(stored);
|
||||
}
|
||||
} catch (error) {
|
||||
console.warn('Failed to load search history:', error);
|
||||
searchHistory = [];
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Save search history to localStorage
|
||||
*/
|
||||
function saveSearchHistory() {
|
||||
try {
|
||||
localStorage.setItem(CONFIG.SEARCH_HISTORY_KEY, JSON.stringify(searchHistory));
|
||||
} catch (error) {
|
||||
console.warn('Failed to save search history:', error);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Add query to search history
|
||||
*/
|
||||
function addToSearchHistory(query) {
|
||||
if (!query || query.length < CONFIG.MIN_QUERY_LENGTH) return;
|
||||
|
||||
// Remove duplicates
|
||||
searchHistory = searchHistory.filter(item => item !== query);
|
||||
|
||||
// Add to beginning
|
||||
searchHistory.unshift(query);
|
||||
|
||||
// Limit size
|
||||
if (searchHistory.length > CONFIG.MAX_SEARCH_HISTORY) {
|
||||
searchHistory = searchHistory.slice(0, CONFIG.MAX_SEARCH_HISTORY);
|
||||
}
|
||||
|
||||
saveSearchHistory();
|
||||
renderSearchHistory();
|
||||
}
|
||||
|
||||
/**
|
||||
* Render search history
|
||||
*/
|
||||
function renderSearchHistory() {
|
||||
if (!elements.searchHistory || !elements.searchHistoryContainer) return;
|
||||
|
||||
if (searchHistory.length === 0) {
|
||||
elements.searchHistoryContainer.classList.add('hidden');
|
||||
return;
|
||||
}
|
||||
|
||||
elements.searchHistoryContainer.classList.remove('hidden');
|
||||
|
||||
const historyHTML = searchHistory.slice(0, 5).map(query => {
|
||||
return `
|
||||
<button class="search-history-item px-3 py-1.5 text-sm bg-white border border-gray-300 rounded-full hover:bg-gray-50 hover:border-gray-400 transition"
|
||||
data-query="${escapeHtml(query)}">
|
||||
${escapeHtml(query)}
|
||||
</button>
|
||||
`;
|
||||
}).join('');
|
||||
|
||||
elements.searchHistory.innerHTML = historyHTML;
|
||||
|
||||
// Attach click handlers
|
||||
document.querySelectorAll('.search-history-item').forEach(item => {
|
||||
item.addEventListener('click', function() {
|
||||
const query = this.dataset.query;
|
||||
if (elements.searchInput) {
|
||||
elements.searchInput.value = query;
|
||||
currentFilters.query = query;
|
||||
performSearch();
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape HTML to prevent XSS
|
||||
*/
|
||||
function escapeHtml(text) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
/**
|
||||
* Escape regex special characters
|
||||
*/
|
||||
function escapeRegex(text) {
|
||||
return text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
|
||||
})();
|
||||
|
|
@ -113,31 +113,80 @@ async function getDocument(req, res) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Search documents
|
||||
* GET /api/documents/search
|
||||
* Search documents with faceted filtering
|
||||
* GET /api/documents/search?q=...&quadrant=...&persistence=...&audience=...
|
||||
*/
|
||||
async function searchDocuments(req, res) {
|
||||
try {
|
||||
const { q, limit = 20, skip = 0 } = req.query;
|
||||
const { q, quadrant, persistence, audience, limit = 20, skip = 0 } = req.query;
|
||||
|
||||
if (!q) {
|
||||
return res.status(400).json({
|
||||
error: 'Bad Request',
|
||||
message: 'Search query (q) is required'
|
||||
// Build filter for faceted search
|
||||
const filter = {
|
||||
$or: [
|
||||
{ visibility: 'public' },
|
||||
{ public: true, visibility: { $exists: false } } // Legacy support
|
||||
]
|
||||
};
|
||||
|
||||
// Add facet filters
|
||||
if (quadrant) {
|
||||
filter.quadrant = quadrant.toUpperCase();
|
||||
}
|
||||
if (persistence) {
|
||||
filter.persistence = persistence.toUpperCase();
|
||||
}
|
||||
if (audience) {
|
||||
filter.audience = audience.toLowerCase();
|
||||
}
|
||||
|
||||
let documents;
|
||||
|
||||
// If text query provided, use full-text search with filters
|
||||
if (q && q.trim()) {
|
||||
const { getCollection } = require('../utils/db.util');
|
||||
const collection = await getCollection('documents');
|
||||
|
||||
// Add text search to filter
|
||||
filter.$text = { $search: q };
|
||||
|
||||
documents = await collection
|
||||
.find(filter, { score: { $meta: 'textScore' } })
|
||||
.sort({ score: { $meta: 'textScore' } })
|
||||
.skip(parseInt(skip))
|
||||
.limit(parseInt(limit))
|
||||
.toArray();
|
||||
} else {
|
||||
// No text query - just filter by facets
|
||||
documents = await Document.list({
|
||||
filter,
|
||||
limit: parseInt(limit),
|
||||
skip: parseInt(skip),
|
||||
sort: { order: 1, 'metadata.date_created': -1 }
|
||||
});
|
||||
}
|
||||
|
||||
const documents = await Document.search(q, {
|
||||
limit: parseInt(limit),
|
||||
skip: parseInt(skip),
|
||||
publicOnly: true
|
||||
});
|
||||
// Count total matching documents
|
||||
const { getCollection } = require('../utils/db.util');
|
||||
const collection = await getCollection('documents');
|
||||
const total = await collection.countDocuments(filter);
|
||||
|
||||
res.json({
|
||||
success: true,
|
||||
query: q,
|
||||
query: q || null,
|
||||
filters: {
|
||||
quadrant: quadrant || null,
|
||||
persistence: persistence || null,
|
||||
audience: audience || null
|
||||
},
|
||||
documents,
|
||||
count: documents.length
|
||||
count: documents.length,
|
||||
total,
|
||||
pagination: {
|
||||
total,
|
||||
limit: parseInt(limit),
|
||||
skip: parseInt(skip),
|
||||
hasMore: parseInt(skip) + documents.length < total
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue