From Kapa feedback: restore site search, remove Kapa search, move button (#3459)

_overrides/main.html

@@ -47,7 +47,6 @@ https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-
 {% endblock %}
 
 
-
 {% block container %}
 
 <!-- Google Tag Manager (noscript) -->

_overrides/partials/header.html

@@ -113,9 +113,32 @@
       </div>
     {% endif %}
 
-    <!-- n8n CUSTOM: fully remove search from header. It should be 
-    disabled due to config, but making sure. 
-    -->
+  	<!-- n8n CUSTOM: Kapa -->
+	<button
+		class="n8n-kapa-button"
+		onclick="window.Kapa.open({ 
+		mode: 'ai'
+		})" 
+		type="button"
+	>
+		<span class="md-search__icon md-icon">{% set icon = "material/creation" %}{% include ".icons/" ~ icon ~ ".svg" %}</span><span class="n8n-search-text">Chat with the docs</span>
+	</button>
+
+  <!-- Button to open search modal -->
+    {% if "material/search" in config.plugins %}
+      {% set search = config.plugins["material/search"] | attr("config") %}
+
+      <!-- Check if search is actually enabled - see https://t.ly/DT_0V -->
+      {% if search.enabled %}
+        <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 %}
+    {% endif %}
 
     <!-- Repository information -->
 	  <!-- n8n CUSTOM: don't show GitHub link -->

_overrides/partials/nav.html

@@ -53,21 +53,10 @@
   </label>
 
   <!-- n8n CUSTOM: don't show repo link -->
-  <!-- Repository information -->
-
+  
 
   <!-- Navigation list -->
   <ul class="md-nav__list" data-md-scrollfix>
-    <!-- n8n CUSTOM: replace search with Kapa -->
-    <button
-        class="n8n-kapa-button"
-        onclick="window.Kapa.open({ 
-        mode: 'ai'
-        })" 
-        type="button"
-    >
-        <span class="md-search__icon md-icon">{% set icon = "material/magnify" %}{% include ".icons/" ~ icon ~ ".svg" %}</span><span class="n8n-search-text">Search with AI</span>
-    </button>
     {% for nav_item in nav %}
       {% set path = "__nav_" ~ loop.index %}
       {{ item.render(nav_item, path, 1) }}

docs/_extra/css/extra.css

@@ -147,14 +147,15 @@
   /* Button to open Kapa search */
 
   .n8n-kapa-button {
-    background: var(--color-background-dark);
+    background: var(--color-primary);
     border-radius: .1rem;
     color: white;
     cursor: pointer;
     display: flex;
     flex-direction: row;
-    margin-bottom: 1.75em;
-    padding: 0.5em 0.6em;
+    font-size: 1.4em;
+    margin-right: 2em;
+    padding: 0.5em 0.75em;
   }
 
   .n8n-search-text {
@@ -306,12 +307,6 @@
 	}
 }
 
-@media screen and (max-width: 1220px) {
- .n8n-kapa-button {
-  margin: 1em;
- }
-}
-
 
   /* dark mode */  
   /* [data-md-color-scheme="dark"] .md-header{

docs/_extra/javascript/init_kapa_widget.js

@@ -7,9 +7,6 @@ document.addEventListener("DOMContentLoaded", function () {
   script.setAttribute("data-project-name", "n8n");
   script.setAttribute("data-project-color", "#EA4B71");
   script.setAttribute("data-project-logo", "/_images/assets/n8n-icon-kapa-modal.png");
-  // Enable non-AI search https://docs.kapa.ai/integrations/website-widget/search
-  script.setAttribute("data-search-mode-enabled", true);
-  script.setAttribute("data-search-include-source-names", '["Documentation"]')
   // Hide the Kapa widget
   script.setAttribute("data-button-hide", true);
   // MkDocs tries to squeeze the modal

mkdocs.yml

@@ -156,6 +156,7 @@ plugins:
   # But DO NOT ENABLE IT NORMALLY
   # It causes Netlify builds to fail
   # - info
+  - search
   - exclude:
       glob:
        # - integrations/builtin/*