Test Algolia Search

	new file:   docs/js/algolia.js
	modified:   mkdocs.yml
	modified:   overrides/main.html

Author: alina-derkach-oaza

docs/css/algolia.css

@@ -0,0 +1,12 @@
+/* Style the Algolia DocSearch input */
+.algolia-docsearch-container {
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: flex;
+    align-items: center;
+  }
+  
+  #docsearch {
+    width: 250px;
+    min-width: 150px;
+  }

docs/css/extra.css

@@ -45,4 +45,76 @@
 /* Select only elements inside the What's new section */
 nav[data-md-level="1"][aria-labelledby="__nav_2_label"] .md-ellipsis {
     text-indent: 0.8rem;
-  }
+  }
+
+/* Algolia Search Configs */
+
+/* Increase font size for the search input */
+.DocSearch-Input {
+    font-size: 0.75rem !important;  /* adjust size as needed */
+  }
+  
+  /* Increase font size for the result title */
+  .DocSearch-Hit-title {
+    font-size: 0.6rem !important;
+  }
+  
+  /* Increase font size for the result content/snippet */
+  .DocSearch-Hit-path,
+  .DocSearch-Hit-text {
+    font-size: 0.7rem !important;
+  }
+  
+  /* Optionally increase font size for breadcrumbs or metadata */
+  .DocSearch-Hit-Tree,
+  .DocSearch-Hit-action {
+    font-size: 0.5rem !important;
+  }
+
+/* 🧭 Section headings like "Documentation", "Recent Searches" */
+.DocSearch-Dropdown-Container .DocSearch-Title {
+    font-size: 0.9rem !important;
+    font-weight: 600;
+  }
+  
+  /* ❌ "No recent searches" or empty state text */
+  .DocSearch-Help {
+    font-size: 0.8rem !important;
+  }
+  
+  /* ⌨️ Shortcut hints like "Press / to search" */
+  .DocSearch-StartScreen .DocSearch-Help,
+  .DocSearch-StartScreen .DocSearch-Label {
+    font-size: 0.8rem !important;
+  }
+  
+  /* 🔣 Placeholder and input */
+  .DocSearch-Input {
+    font-size: 0.9rem !important;
+  }
+  
+  .DocSearch-Button-Keys {
+    display: none !important;
+  }
+  
+  /* Optional: make the overall modal content bigger */
+  .DocSearch-Container {
+    font-size: 0.8rem !important;
+  }
+
+  .DocSearch-Button-Placeholder {
+    font-size: 0.8rem !important;
+  }
+
+  .DocSearch-Button {
+    transition: background-color 0.2s ease;
+  }
+  
+  .DocSearch-Button:hover {
+    border: none !important;
+    box-shadow: none !important; /* Also removes simulated borders */
+  }
+
+  .DocSearch-Button {
+    width: 180px !important;  /* Adjust to desired width */
+  }

docs/js/init-algolia.js

@@ -0,0 +1,6 @@
+docsearch({
+  container: '#docsearch',
+  appId: 'QDKRBCAI99',
+  indexName: 'Percona documentation',
+  apiKey: 'a5222c0ed6e9e6c67a77cfd2e26000e1',
+});

mkdocs.yml

@@ -28,6 +28,7 @@ theme:
       toggle:
         icon: material/brightness-4
         name: Color theme set to Dark Mode. Click to change
+
   features:
     - navigation.indexes
     - navigation.instant
@@ -44,9 +45,13 @@ extra_css:
   - css/landing.css
   - css/osano.css
   - css/extra.css
+  - css/algolia.css
+  - https://cdn.jsdelivr.net/npm/@docsearch/css@3
 
 extra_javascript:
   - js/hide-back-to-index.js
+  - https://cdn.jsdelivr.net/npm/@docsearch/js@latest
+  - js/init-algolia.js
 
 markdown_extensions:
   - admonition
@@ -80,8 +85,8 @@ plugins:
     feed_title: "Percona Documentation What's New Feed"
   tags:
     tags_file: new/tags.md
-  search: 
-    separator: '[\s\-,:!=\[\]()"`/]+|\.(?!\d)|&[lg]t;|(?!\b)(?=[A-Z][a-z])'
+#  search: 
+#    separator: '[\s\-,:!=\[\]()"`/]+|\.(?!\d)|&[lg]t;|(?!\b)(?=[A-Z][a-z])'
   meta-descriptions:
     export_csv: false
     quiet: false
@@ -93,6 +98,10 @@ extra:
   analytics:
     provider: google
     property: G-J4J70BNH0G
+  docsearch:
+    api_key: "a5222c0ed6e9e6c67a77cfd2e26000e1"
+    index_name: "Percona documentation"
+    app_id: "QDKRBCAI99"
 #    feedback:
 #      title: Was this page helpful?
 #      ratings:

overrides/main.html

@@ -69,5 +69,5 @@
                   </div>
                 </div>
               </div>
-            {% endif %}            
+            {% endif %}     
           {% endblock %}

overrides/partials/header.html

@@ -85,16 +85,7 @@
       {% include "partials/alternate.html" %}
     {% endif %}
 
-    <!-- Button to open search modal -->
-    {% if "material/search" in config.plugins %}
-      <label class="md-header__button md-icon" for="__search">
-        {% set icon = config.theme.icon.search or "material/magnify" %}
-        {% include ".icons/" ~ icon ~ ".svg" %}
-      </label>
-
-      <!-- Search interface -->
-      {% include "partials/search.html" %}
-    {% endif %}
+    <div id="docsearch" class="algolia-docsearch-container"></div>
 
     <!-- Repository information -->
     {% if config.repo_url %}