Doc 1545 kapa (#3422)

_overrides/main.html

@@ -50,7 +50,6 @@ https://plausible.io/docs/script-extensions?ref=ryansechrest.com#all-our-script-
 	height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 <!-- End Google Tag Manager (noscript) -->
 
-
 {{ super() }}
 
 {% endblock %}

_overrides/partials/header.html

@@ -113,15 +113,9 @@
       </div>
     {% endif %}
 
-    <!-- Button to open search modal -->
-    {% if "material/search" in config.plugins %}
-      <label class="md-header__button md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
-      </label>
-
-      <!-- Search interface -->
-      {% include "partials/search.html" %}
-    {% endif %}
+    <!-- n8n CUSTOM: fully remove search from header. It should be 
+    disabled due to config, but making sure. 
+    -->
 
     <!-- Repository information -->
 	  <!-- n8n CUSTOM: don't show GitHub link -->

_overrides/partials/nav.html

@@ -0,0 +1,76 @@
+<!--
+  Copyright (c) 2016-2025 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+{% import "partials/nav-item.html" as item with context %}
+
+<!-- Determine classes -->
+{% set class = "md-nav md-nav--primary" %}
+{% if "navigation.tabs" in features %}
+  {% set class = class ~ " md-nav--lifted" %}
+{% endif %}
+{% if "toc.integrate" in features %}
+  {% set class = class ~ " md-nav--integrated" %}
+{% endif %}
+
+<!-- Navigation -->
+<nav
+  class="{{ class }}"
+  aria-label="{{ lang.t('nav') }}"
+  data-md-level="0"
+>
+
+  <!-- Site title -->
+  <label class="md-nav__title" for="__drawer">
+    <a
+      href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}"
+      title="{{ config.site_name | e }}"
+      class="md-nav__button md-logo"
+      aria-label="{{ config.site_name }}"
+      data-md-component="logo"
+    >
+      {% include "partials/logo.html" %}
+    </a>
+    {{ config.site_name }}
+  </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">Chat with the docs</span>
+    </button>
+    {% for nav_item in nav %}
+      {% set path = "__nav_" ~ loop.index %}
+      {{ item.render(nav_item, path, 1) }}
+    {% endfor %}
+  </ul>
+</nav>

docs/_extra/css/extra.css

@@ -143,6 +143,24 @@
 	border-color: var(--md-primary-fg-color);
 	color: var(--color-background-light);
   }
+
+  /* Button to open Kapa search */
+
+  .n8n-kapa-button {
+    background: var(--color-background-dark);
+    border-radius: .1rem;
+    color: white;
+    cursor: pointer;
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 1.75em;
+    padding: 0.5em 0.6em;
+  }
+
+  .n8n-search-text {
+    align-content: center;
+    margin-left: 0.5em;
+  }
   
   
   /* new features box on release notes */ 

docs/_extra/javascript/init_kapa_widget.js

@@ -0,0 +1,18 @@
+// https://docs.kapa.ai/integrations/website-widget/installation/mkdocs
+
+document.addEventListener("DOMContentLoaded", function () {
+  var script = document.createElement("script");
+  script.src = "https://widget.kapa.ai/kapa-widget.bundle.js";
+  script.setAttribute("data-website-id", "d2598b63-bfa7-4ddd-a0ac-e6c69f4d0653");
+  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);
+  // Hide the Kapa widget
+  script.setAttribute("data-button-hide", true);
+  // Make sure we don't track users, so we don't have to put this behind the cookie widget https://docs.kapa.ai/integrations/website-widget/user-tracking
+  script.setAttribute("data-user-analytics-cookie-enabled", false);
+  script.async = true;
+  document.head.appendChild(script);
+});

mkdocs.yml

@@ -79,7 +79,7 @@ extra_css:
   - _extra/css/feedback.css
 # https://squidfunk.github.io/mkdocs-material/customization/?h=#additional-javascript
 extra_javascript:
-  - _extra/javascript/extra.js
+  - _extra/javascript/init_kapa_widget.js
 watch:
   - _glossary
   - _snippets
@@ -157,11 +157,9 @@ plugins:
   # But DO NOT ENABLE IT NORMALLY
   # It causes Netlify builds to fail
   # - info
-  # Search is built in, but must be enabled when you add other plugins
-  - search
   - exclude:
       glob:
-      # - integrations/builtin/*
+       #- integrations/builtin/*
   # https://squidfunk.github.io/mkdocs-material/reference/images/#lightbox
   - glightbox:
       touchNavigation: false