Skip to content

Commit 7d03ef2

Browse files
guimachiavelliguimachiavelli
committed
proof-of-concept done
1 parent 867af73 commit 7d03ef2

File tree

2 files changed

+96
-35
lines changed

2 files changed

+96
-35
lines changed

‎meilisearch-search-bar.css‎

Lines changed: 72 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,13 @@
3535
font-size: 12px;
3636
}
3737

38+
.meilisearch-flexwrapper {
39+
display: flex;
40+
justify-content: center;
41+
align-items: center;
42+
width: 100%;
43+
}
44+
3845
.meilisearch-modal-overlay {
3946
position: fixed;
4047
top: 0;
@@ -52,43 +59,56 @@
5259
}
5360

5461
.meilisearch-modal {
62+
background-color: #fff;
5563
width: 600px;
5664
max-width: 90%;
5765
max-height: 80vh;
5866
margin-top: 70px; /* Fixed distance from top */
5967
border-radius: 12px;
60-
background-color: #1a1033;
6168
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
6269
display: flex;
6370
flex-direction: column;
6471
border: 1px solid rgba(255, 255, 255, 0.1);
6572
overflow: hidden;
6673
}
6774

75+
.dark .meilisearch-modal {
76+
background-color: #1a1033;
77+
}
78+
6879
.meilisearch-modal__input-container {
6980
display: flex;
7081
align-items: center;
7182
padding: 16px 20px;
7283
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
7384
}
7485

86+
7587
.meilisearch-modal__input {
7688
background: transparent;
7789
border: none;
78-
color: white;
7990
font-size: 16px;
8091
outline: none;
8192
width: 100%;
8293
margin-right: 10px;
94+
color: rgb(var(--gray-700));
95+
}
96+
97+
.dark .meilisearch-modal__input {
98+
color: rgb(var(--gray-100));
8399
}
84100

85101
.meilisearch-modal__escape {
86-
color: rgba(255, 255, 255, 0.5);
87102
font-size: 12px;
88103
padding: 4px 8px;
89104
border-radius: 4px;
90-
background-color: rgba(255, 255, 255, 0.1);
91105
margin-left: auto;
106+
background-color: rgba(0, 0, 0, 0.1);
107+
}
108+
109+
.dark .meilisearch-modal__escape {
110+
color: rgba(255, 255, 255, 0.5);
111+
background-color: rgba(255, 255, 255, 0.1);
92112
}
93113

94114
.meilisearch-modal__results {
@@ -97,19 +117,64 @@
97117
padding: 0;
98118
}
99119

120+
.meilisearch-modal__indicator {
121+
padding: 20px;
122+
text-align: center;
123+
}
124+
125+
.dark .meilisearch-modal__indicator {
126+
color: rgba(255, 255, 255, 0.7);
127+
}
128+
100129
.meilisearch-modal__category-header {
101130
padding: 12px 20px 8px;
102131
font-size: 14px;
103132
font-weight: 600;
104-
color: rgba(255, 255, 255, 0.5);
105133
text-transform: uppercase;
106134
}
107135

108-
.meilisearch-modal__category-link {
136+
.dark .meilisearch-modal__category-header {
137+
color: rgba(255, 255, 255, 0.5);
138+
}
139+
140+
.meilisearch-modal__result {
109141
display: block;
110142
padding: 12px 20px;
111143
text-decoration: none;
112-
color: white;
113144
border-left: 3px solid transparent;
114145
transition: background-color 0.2s, border-color 0.2s;
146+
}
147+
148+
.dark .meilisearch-modal__result {
149+
color: white;
150+
}
151+
152+
.meilisearch-modal__result:hover {
153+
background-color: rgba(255, 255, 255, 0.05);
154+
border-left-color: #f472b6;
155+
}
156+
157+
.meilisearch-modal__result-heading {
158+
font-weight: 500;
159+
margin-bottom: 4px;
160+
}
161+
162+
.meilisearch-modal__result-content {
163+
font-size: 13px;
164+
}
165+
166+
.dark .meilisearch-modal__result-content {
167+
color: rgba(255, 255, 255, 0.6);
168+
}
169+
170+
.meilisearch-modal__category-em {
171+
font-style: normal;
172+
color: #f472b6;
173+
font-weight: bold;
174+
}
175+
176+
.meilisearch-modal__error {
177+
padding: 20px;
178+
text-align: center;
179+
color: #f87171;
115180
}

‎search.js‎

Lines changed: 24 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -133,12 +133,7 @@ function initializeMeilisearchIntegration() {
133133
if (!isFlexContainer) {
134134
// Create a wrapper to center the search bar
135135
const flexWrapper = document.createElement('div');
136-
flexWrapper.style.cssText = `
137-
display: flex;
138-
justify-content: center;
139-
align-items: center;
140-
width: 100%;
141-
`;
136+
flexWrapper.className = 'meilisearch-flexwrapper';
142137
flexWrapper.appendChild(searchBarContainer);
143138
headerContainer.appendChild(flexWrapper);
144139
} else {
@@ -352,7 +347,10 @@ function initializeMeilisearchIntegration() {
352347

353348
debounceTimer = setTimeout(() => {
354349
// Show loading indicator
355-
resultsContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.7);">Searching...</div>';
350+
const indicatorEl = document.createElement('div');
351+
indicatorEl.className = 'meilisearch-modal__indicator';
352+
indicatorEl.innerHTML = 'Searching…';
353+
resultsContainer.appendChild(indicatorEl);
356354

357355
// Perform search
358356
index.search(query, {
@@ -369,7 +367,11 @@ function initializeMeilisearchIntegration() {
369367
resultsContainer.innerHTML = '';
370368

371369
if (response.hits.length === 0) {
372-
resultsContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: rgba(255, 255, 255, 0.5);">No results found</div>';
370+
const noResultsEl = document.createElement('div');
371+
noResultsEl.className = 'meilisearch-modal__indicator';
372+
noResultsEl.innerHTML = 'No results found';
373+
resultsContainer.appendChild(noResultsEl);
374+
373375
return;
374376
}
375377

@@ -398,27 +400,27 @@ function initializeMeilisearchIntegration() {
398400
results.forEach(hit => {
399401
const resultItem = document.createElement('a');
400402
resultItem.href = hit.url || `/${hit.path}`;
401-
resultItem.className = 'meilisearch-modal__category-link';
403+
resultItem.className = 'meilisearch-modal__result';
402404

403405
// Format content nicely
404406
// Build title from hierarchy levels
405407
const hierarchy_lvl1 = hit._formatted?.hierarchy_lvl1
406-
? hit._formatted.hierarchy_lvl1.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
408+
? hit._formatted.hierarchy_lvl1.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
407409
: '';
408410
const hierarchy_lvl2 = hit._formatted?.hierarchy_lvl2
409-
? hit._formatted.hierarchy_lvl2.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
411+
? hit._formatted.hierarchy_lvl2.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
410412
: '';
411413
const hierarchy_lvl3 = hit._formatted?.hierarchy_lvl3
412-
? hit._formatted.hierarchy_lvl3.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
414+
? hit._formatted.hierarchy_lvl3.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
413415
: '';
414416
const hierarchy_lvl4 = hit._formatted?.hierarchy_lvl4
415-
? hit._formatted.hierarchy_lvl4.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
417+
? hit._formatted.hierarchy_lvl4.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
416418
: '';
417419
const hierarchy_lvl5 = hit._formatted?.hierarchy_lvl5
418-
? hit._formatted.hierarchy_lvl5.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
420+
? hit._formatted.hierarchy_lvl5.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
419421
: '';
420422
const content = hit._formatted?.content
421-
? hit._formatted.content.replace(/<em>/g, '<em style="font-style: normal; color: #f472b6; font-weight: bold;">')
423+
? hit._formatted.content.replace(/<em>/g, '<em class="meilisearch-modal__category-em">')
422424
: '';
423425

424426
let title = '';
@@ -439,20 +441,10 @@ function initializeMeilisearchIntegration() {
439441
}
440442

441443
resultItem.innerHTML = `
442-
<div style="font-weight: 500; margin-bottom: 4px;">${title}</div>
443-
${content ? `<div style="font-size: 13px; color: rgba(255, 255, 255, 0.6);">${content}</div>` : ''}
444+
<div class="meilisearch-modal__result-heading">${title}</div>
445+
${content ? `<div class="meilisearch-modal__result-content">${content}</div>` : ''}
444446
`;
445447

446-
resultItem.addEventListener('mouseover', () => {
447-
resultItem.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
448-
resultItem.style.borderLeftColor = '#f472b6';
449-
});
450-
451-
resultItem.addEventListener('mouseout', () => {
452-
resultItem.style.backgroundColor = 'transparent';
453-
resultItem.style.borderLeftColor = 'transparent';
454-
});
455-
456448
// Make clicking the result close the modal
457449
resultItem.addEventListener('click', () => {
458450
document.getElementById('meilisearch-modal-overlay').style.display = 'none';
@@ -465,7 +457,11 @@ function initializeMeilisearchIntegration() {
465457
})
466458
.catch(error => {
467459
console.error('Meilisearch error:', error);
468-
resultsContainer.innerHTML = '<div style="padding: 20px; text-align: center; color: #f87171;">Search error. Please try again.</div>';
460+
const errorEl = document.createElement('div');
461+
errorEl.className = 'meilisearch-modal__error';
462+
errorEl.innerHTML = 'Search error. Please try again.';
463+
464+
resultsContainer.appendChild(errorEl);
469465
});
470466
}, 300);
471467
});

0 commit comments

Comments
 (0)