diff --git a/docs.json b/docs.json index e7256dce0d..07af7460f5 100644 --- a/docs.json +++ b/docs.json @@ -20,8 +20,7 @@ } }, "appearance": { - "default": "dark", - "strict": true + "default": "dark" }, "navbar": { "primary": { diff --git a/meilisearch-search-bar.css b/meilisearch-search-bar.css new file mode 100644 index 0000000000..cd7836a74f --- /dev/null +++ b/meilisearch-search-bar.css @@ -0,0 +1,190 @@ +.meilisearch-bar-container { + max-width: 480px; + width: 100%; + margin: 0 auto; + padding: 0 10px; +} + +.meilisearch-search-bar { + background-color: white; + color: rgba(25, 25, 25, 0.7); + border: 1px solid rgba(255, 255, 255, 0.1); + display: flex; + align-items: center; + border-radius: 12px; + padding: 8px 16px; + cursor: pointer; + width: 100%; + transition: all 0.2s ease; + backdrop-filter: blur(8px); + font-size: 14px; +} + +.dark .meilisearch-search-bar { + background-color: rgba(25, 17, 53, 0.5); + color: rgba(255, 255, 255, 0.7); + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.meilisearch-search-bar__text { + flex-grow: 1; +} + +.meilisearch-search-bar__shortcut { + opacity: 0.7; + font-size: 12px; +} + +.meilisearch-flexwrapper { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +.meilisearch-modal-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + backdrop-filter: blur(8px); + background-color: rgba(0, 0, 0, 0.4); + z-index: 9999; + display: none; + align-items: flex-start; /* Align to top */ + justify-content: center; + padding-top: 0; + box-sizing: border-box; +} + +.meilisearch-modal { + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.5); + width: 600px; + max-width: 90%; + max-height: 80vh; + margin-top: 70px; /* Fixed distance from top */ + border-radius: 12px; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); + display: flex; + flex-direction: column; + overflow: hidden; +} + +.dark .meilisearch-modal { + background-color: #1a1033; + border: 1px solid rgba(255, 255, 255, 0.1); +} + +.meilisearch-modal__input-container { + display: flex; + align-items: center; + padding: 16px 20px; + border-bottom: 1px solid rgba(0, 0, 0, 0.1); +} + +.dark .meilisearch-modal__input-container { + border-bottom: 1px solid rgba(255, 255, 255, 0.1); +} + +.meilisearch-modal__input { + background: transparent; + border: none; + font-size: 16px; + outline: none; + width: 100%; + margin-right: 10px; + color: rgb(var(--gray-700)); +} + +.dark .meilisearch-modal__input { + color: rgb(var(--gray-100)); +} + +.meilisearch-modal__escape { + font-size: 12px; + padding: 4px 8px; + border-radius: 4px; + margin-left: auto; + background-color: rgba(0, 0, 0, 0.1); +} + +.dark .meilisearch-modal__escape { + color: rgba(255, 255, 255, 0.5); + background-color: rgba(255, 255, 255, 0.1); +} + +.meilisearch-modal__results { + flex-grow: 1; + overflow-y: auto; + padding: 0; +} + +.meilisearch-modal__indicator { + padding: 20px; + text-align: center; +} + +.dark .meilisearch-modal__indicator { + color: rgba(255, 255, 255, 0.7); +} + +.meilisearch-modal__result { + display: block; + padding: 12px 20px; + text-decoration: none; + border-left: 3px solid transparent; + transition: background-color 0.2s, border-color 0.2s; +} + +.dark .meilisearch-modal__result { + color: white; +} + +.meilisearch-modal__result:hover { + background-color: rgba(0, 0, 0, 0.05); + border-left-color: #f472b6; +} + +.dark .meilisearch-modal__result:hover { + background-color: rgba(255, 255, 255, 0.05); +} + +.meilisearch-modal__category-header { + padding: 12px 20px 8px; + font-size: 14px; + font-weight: 600; + text-transform: uppercase; + color: rgba(0, 0, 0, 0.45); +} + +.dark .meilisearch-modal__category-header { + color: rgba(255, 255, 255, 0.5); +} + +.meilisearch-modal__result-heading { + font-weight: 500; + margin-bottom: 4px; +} + +.meilisearch-modal__result-content { + font-size: 13px; + color: rgba(0, 0, 0, 0.45); +} + +.dark .meilisearch-modal__result-content { + color: rgba(255, 255, 255, 0.6); +} + +.meilisearch-modal__category-em { + font-style: normal; + color: #f472b6; + font-weight: bold; +} + +.meilisearch-modal__error { + padding: 20px; + text-align: center; + color: #f87171; +} \ No newline at end of file diff --git a/search.js b/search.js index 85706d551d..097c1675e6 100644 --- a/search.js +++ b/search.js @@ -103,32 +103,14 @@ function initializeMeilisearchIntegration() { // Create our search input container const searchBarContainer = document.createElement('div'); searchBarContainer.id = 'meilisearch-bar-container'; - searchBarContainer.style.cssText = ` - max-width: 480px; - width: 100%; - margin: 0 auto; - padding: 0 10px; - `; + searchBarContainer.className = 'meilisearch-bar-container'; // Create the search input that looks like Meilisearch's const searchBar = document.createElement('div'); searchBar.id = 'meilisearch-search-bar'; + searchBar.className = 'meilisearch-search-bar'; searchBar.role = 'button'; searchBar.tabIndex = 0; - searchBar.style.cssText = ` - display: flex; - align-items: center; - background-color: rgba(25, 17, 53, 0.5); - border-radius: 12px; - padding: 8px 16px; - color: rgba(255, 255, 255, 0.7); - border: 1px solid rgba(255, 255, 255, 0.1); - cursor: pointer; - width: 100%; - transition: all 0.2s ease; - backdrop-filter: blur(8px); - font-size: 14px; - `; // Add the search icon and placeholder text searchBar.innerHTML = ` @@ -136,8 +118,8 @@ function initializeMeilisearchIntegration() { - Search... - ⌘K + Search… + ⌘K `; // Append the search bar to the container @@ -151,12 +133,7 @@ function initializeMeilisearchIntegration() { if (!isFlexContainer) { // Create a wrapper to center the search bar const flexWrapper = document.createElement('div'); - flexWrapper.style.cssText = ` - display: flex; - justify-content: center; - align-items: center; - width: 100%; - `; + flexWrapper.className = 'meilisearch-flexwrapper'; flexWrapper.appendChild(searchBarContainer); headerContainer.appendChild(flexWrapper); } else { @@ -182,77 +159,32 @@ function initializeMeilisearchIntegration() { // ========= Step 2: Create the modal search overlay ========= const modalOverlay = document.createElement('div'); modalOverlay.id = 'meilisearch-modal-overlay'; - modalOverlay.style.cssText = ` - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - backdrop-filter: blur(8px); - background-color: rgba(0, 0, 0, 0.4); - z-index: 9999; - display: none; - align-items: flex-start; /* Align to top */ - justify-content: center; - padding-top: 0; - box-sizing: border-box; - `; + modalOverlay.className = 'meilisearch-modal-overlay'; // Create the search modal container const searchModal = document.createElement('div'); searchModal.id = 'meilisearch-modal'; - searchModal.style.cssText = ` - width: 600px; - max-width: 90%; - max-height: 80vh; - margin-top: 70px; /* Fixed distance from top */ - border-radius: 12px; - background-color: #1a1033; - box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3); - display: flex; - flex-direction: column; - border: 1px solid rgba(255, 255, 255, 0.1); - overflow: hidden; - `; + searchModal.className = 'meilisearch-modal'; // Create the search input container const searchInputContainer = document.createElement('div'); - searchInputContainer.style.cssText = ` - display: flex; - align-items: center; - padding: 16px 20px; - border-bottom: 1px solid rgba(255, 255, 255, 0.1); - `; + searchInputContainer.className = 'meilisearch-modal__input-container' // Create the search input const searchInput = document.createElement('input'); searchInput.id = 'meilisearch-search-input'; + searchInput.className = 'meilisearch-modal__input'; searchInput.type = 'text'; - searchInput.placeholder = 'Search...'; - searchInput.style.cssText = ` - background: transparent; - border: none; - color: white; - font-size: 16px; - outline: none; - width: 100%; - margin-right: 10px; - `; + searchInput.placeholder = 'Search…'; // Create the ESC key indicator const escIndicator = document.createElement('span'); escIndicator.textContent = 'ESC'; - escIndicator.style.cssText = ` - color: rgba(255, 255, 255, 0.5); - font-size: 12px; - padding: 4px 8px; - border-radius: 4px; - background-color: rgba(255, 255, 255, 0.1); - margin-left: auto; - `; + escIndicator.className = 'meilisearch-modal__escape'; // Create the search icon const searchIcon = document.createElement('div'); + searchIcon.className = 'meilisearch-modal__icon'; searchIcon.innerHTML = ` @@ -268,10 +200,8 @@ function initializeMeilisearchIntegration() { // Create the results container const resultsContainer = document.createElement('div'); resultsContainer.id = 'meilisearch-results'; + resultsContainer.className = 'meilisearch-modal__results'; resultsContainer.style.cssText = ` - flex-grow: 1; - overflow-y: auto; - padding: 0; `; // Append everything to the modal @@ -417,7 +347,10 @@ function initializeMeilisearchIntegration() { debounceTimer = setTimeout(() => { // Show loading indicator - resultsContainer.innerHTML = '
Searching...
'; + const indicatorEl = document.createElement('div'); + indicatorEl.className = 'meilisearch-modal__indicator'; + indicatorEl.innerHTML = 'Searching…'; + resultsContainer.appendChild(indicatorEl); // Perform search index.search(query, { @@ -434,7 +367,11 @@ function initializeMeilisearchIntegration() { resultsContainer.innerHTML = ''; if (response.hits.length === 0) { - resultsContainer.innerHTML = '
No results found
'; + const noResultsEl = document.createElement('div'); + noResultsEl.className = 'meilisearch-modal__indicator'; + noResultsEl.innerHTML = 'No results found'; + resultsContainer.appendChild(noResultsEl); + return; } @@ -455,13 +392,7 @@ function initializeMeilisearchIntegration() { // Only add category header if there are multiple categories if (Object.keys(grouped).length > 1) { const categoryHeader = document.createElement('div'); - categoryHeader.style.cssText = ` - padding: 12px 20px 8px; - font-size: 14px; - font-weight: 600; - color: rgba(255, 255, 255, 0.5); - text-transform: uppercase; - `; + categoryHeader.className = 'meilisearch-modal__category-header'; categoryHeader.textContent = category; resultsContainer.appendChild(categoryHeader); } @@ -469,34 +400,27 @@ function initializeMeilisearchIntegration() { results.forEach(hit => { const resultItem = document.createElement('a'); resultItem.href = hit.url || `/${hit.path}`; - resultItem.style.cssText = ` - display: block; - padding: 12px 20px; - text-decoration: none; - color: white; - border-left: 3px solid transparent; - transition: background-color 0.2s, border-color 0.2s; - `; + resultItem.className = 'meilisearch-modal__result'; // Format content nicely // Build title from hierarchy levels const hierarchy_lvl1 = hit._formatted?.hierarchy_lvl1 - ? hit._formatted.hierarchy_lvl1.replace(//g, '') + ? hit._formatted.hierarchy_lvl1.replace(//g, '') : ''; const hierarchy_lvl2 = hit._formatted?.hierarchy_lvl2 - ? hit._formatted.hierarchy_lvl2.replace(//g, '') + ? hit._formatted.hierarchy_lvl2.replace(//g, '') : ''; const hierarchy_lvl3 = hit._formatted?.hierarchy_lvl3 - ? hit._formatted.hierarchy_lvl3.replace(//g, '') + ? hit._formatted.hierarchy_lvl3.replace(//g, '') : ''; const hierarchy_lvl4 = hit._formatted?.hierarchy_lvl4 - ? hit._formatted.hierarchy_lvl4.replace(//g, '') + ? hit._formatted.hierarchy_lvl4.replace(//g, '') : ''; const hierarchy_lvl5 = hit._formatted?.hierarchy_lvl5 - ? hit._formatted.hierarchy_lvl5.replace(//g, '') + ? hit._formatted.hierarchy_lvl5.replace(//g, '') : ''; const content = hit._formatted?.content - ? hit._formatted.content.replace(//g, '') + ? hit._formatted.content.replace(//g, '') : ''; let title = ''; @@ -517,20 +441,10 @@ function initializeMeilisearchIntegration() { } resultItem.innerHTML = ` -
${title}
- ${content ? `
${content}
` : ''} +
${title}
+ ${content ? `
${content}
` : ''} `; - resultItem.addEventListener('mouseover', () => { - resultItem.style.backgroundColor = 'rgba(255, 255, 255, 0.05)'; - resultItem.style.borderLeftColor = '#f472b6'; - }); - - resultItem.addEventListener('mouseout', () => { - resultItem.style.backgroundColor = 'transparent'; - resultItem.style.borderLeftColor = 'transparent'; - }); - // Make clicking the result close the modal resultItem.addEventListener('click', () => { document.getElementById('meilisearch-modal-overlay').style.display = 'none'; @@ -543,7 +457,11 @@ function initializeMeilisearchIntegration() { }) .catch(error => { console.error('Meilisearch error:', error); - resultsContainer.innerHTML = '
Search error. Please try again.
'; + const errorEl = document.createElement('div'); + errorEl.className = 'meilisearch-modal__error'; + errorEl.innerHTML = 'Search error. Please try again.'; + + resultsContainer.appendChild(errorEl); }); }, 300); }); diff --git a/snippets/samples/code_samples_get_facet_search_settings_1.mdx b/snippets/samples/code_samples_get_facet_search_settings_1.mdx index f3da478401..5ce44b4cda 100644 --- a/snippets/samples/code_samples_get_facet_search_settings_1.mdx +++ b/snippets/samples/code_samples_get_facet_search_settings_1.mdx @@ -16,4 +16,8 @@ $client->index('INDEX_NAME')->getFacetSearch(); ```ruby Ruby client.index('INDEX_UID').facet_search_setting ``` + +```go Go +client.Index("books").GetFacetSearch() +``` \ No newline at end of file diff --git a/snippets/samples/code_samples_get_prefix_search_settings_1.mdx b/snippets/samples/code_samples_get_prefix_search_settings_1.mdx index 0ff93e50bd..4ff1696f4b 100644 --- a/snippets/samples/code_samples_get_prefix_search_settings_1.mdx +++ b/snippets/samples/code_samples_get_prefix_search_settings_1.mdx @@ -16,4 +16,8 @@ $client->index('INDEX_NAME')->getPrefixSearch(); ```ruby Ruby client.index('INDEX_UID').prefix_search ``` + +```go Go +client.Index("books").GetPrefixSearch() +``` \ No newline at end of file diff --git a/snippets/samples/code_samples_getting_started_add_documents.mdx b/snippets/samples/code_samples_getting_started_add_documents.mdx index 5e44c73a36..2fe2d4f67c 100644 --- a/snippets/samples/code_samples_getting_started_add_documents.mdx +++ b/snippets/samples/code_samples_getting_started_add_documents.mdx @@ -78,14 +78,14 @@ $client->index('movies')->addDocuments($movies); // // com.meilisearch.sdk // meilisearch-java -// 0.14.3 +// 0.14.5 // pom // // For Gradle // Add the following line to the `dependencies` section of your `build.gradle`: // -// implementation 'com.meilisearch.sdk:meilisearch-java:0.14.3' +// implementation 'com.meilisearch.sdk:meilisearch-java:0.14.5' // In your .java file: import com.meilisearch.sdk; diff --git a/snippets/samples/code_samples_reset_facet_search_settings_1.mdx b/snippets/samples/code_samples_reset_facet_search_settings_1.mdx index 2f0cf7df8c..67bd5cd328 100644 --- a/snippets/samples/code_samples_reset_facet_search_settings_1.mdx +++ b/snippets/samples/code_samples_reset_facet_search_settings_1.mdx @@ -16,4 +16,8 @@ $client->index('INDEX_NAME')->resetFacetSearch(); ```ruby Ruby client.index('INDEX_UID').reset_facet_search_setting ``` + +```go Go +client.Index("books").ResetFacetSearch() +``` \ No newline at end of file diff --git a/snippets/samples/code_samples_reset_prefix_search_settings_1.mdx b/snippets/samples/code_samples_reset_prefix_search_settings_1.mdx index 4dfc5600ed..d58e25c414 100644 --- a/snippets/samples/code_samples_reset_prefix_search_settings_1.mdx +++ b/snippets/samples/code_samples_reset_prefix_search_settings_1.mdx @@ -16,4 +16,8 @@ $client->index('INDEX_NAME')->resetPrefixSearch(); ```ruby Ruby client.index('INDEX_UID').reset_prefix_search ``` + +```go Go +client.Index("books").ResetPrefixSearch() +``` \ No newline at end of file diff --git a/snippets/samples/code_samples_update_facet_search_settings_1.mdx b/snippets/samples/code_samples_update_facet_search_settings_1.mdx index 999c836f0a..08e6c37053 100644 --- a/snippets/samples/code_samples_update_facet_search_settings_1.mdx +++ b/snippets/samples/code_samples_update_facet_search_settings_1.mdx @@ -18,4 +18,8 @@ $client->index('INDEX_NAME')->updateFacetSearch(false); ```ruby Ruby client.index('INDEX_UID').update_facet_search_setting(false) ``` + +```go Go +client.Index("books").UpdateFacetSearch(false) +``` \ No newline at end of file diff --git a/snippets/samples/code_samples_update_prefix_search_settings_1.mdx b/snippets/samples/code_samples_update_prefix_search_settings_1.mdx index 3afa53eee9..a487467b7d 100644 --- a/snippets/samples/code_samples_update_prefix_search_settings_1.mdx +++ b/snippets/samples/code_samples_update_prefix_search_settings_1.mdx @@ -18,4 +18,8 @@ $client->index('INDEX_NAME')->updatePrefixSearch('disabled'); ```ruby Ruby client.index('INDEX_UID').update_prefix_search('disabled') ``` + +```go Go +client.Index("books").UpdatePrefixSearch("disabled") +``` \ No newline at end of file