fix search

Author: xmnlab

.github/workflows/main.yaml

@@ -50,6 +50,7 @@ jobs:
         run: |
           poetry check
           poetry install
+          python -m nltk.downloader punkt
 
       - name: Linter
         if: ${{ github.event_name == 'pull_request' }}

conda/dev.yaml

@@ -6,3 +6,4 @@ dependencies:
   - python <3.12
   - pip
   - poetry
+  - nodejs

mkdocs.yml

@@ -28,10 +28,13 @@ extra_css:
   - css/utilities.css
 
 extra_javascript:
-  - js/bundle.js
-  - js/search.js
-  - js/index.json
   - js/theme.js
+  - js/osl-search.js
+  - js/vendor/lunr.min.js
+  - js/vendor/lunr.stemmer.support.min.js
+  - js/vendor/lunr.multi.min.js
+  - js/vendor/lunr.es.min.js
+  - js/vendor/lunr.pt.min.js
 
 nav:
   - Blog: "blog/index.md"
@@ -141,3 +144,10 @@ plugins:
       enabled: true
       enable_creation_date: false
       type: iso_date
+
+  - search:
+      lang:
+        - en
+        - es
+        - pt
+      prebuild_index: true

poetry.lock

@@ -23,6 +23,8 @@ dependencies = [
   "beautifulsoup4 (>=4.12.3,<5.0.0)",
   "mkdocs-git-revision-date-localized-plugin (>=1.3)",
   "mdx-truly-sane-lists (>=1.3,<2.0)",
+  "lunr[languages] (>=0.8.0)",
+  "nltk (>=3.9.1)",
 ]
 
 

pyproject.toml

@@ -58,7 +58,6 @@
     <link rel="manifest" href="/icons/site.webmanifest">
 
     <link rel="alternate" type="application/rss+xml" href="/feed_rss_created.xml" title="Open Science Labs">
-    <link rel="alternate" type="application/json" href="/js/index.json" title="Open Science Labs">
 
     <!-- Bootstrap -->
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
@@ -106,25 +105,20 @@
             <img src="/images/logos/osl-color-horizontal.png" class="logo" alt="{{ config.site_name }}">
           </a>
 
-          <!-- Desktop search -->
-          <div class="mk-search order-lg-2 d-none d-md-block ms-auto me-2">
-            <input id="mkdocs-search" type="search" class="form-control form-control-sm" placeholder="Search…" aria-label="Search">
-            <i class="fa fa-search"></i>
-          </div>
-
           <!-- Mobile toggler (offcanvas) -->
           <button class="navbar-toggler ms-2" type="button"
                   data-bs-toggle="offcanvas" data-bs-target="#offcanvasNav"
                   aria-controls="offcanvasNav" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
 
-          <!-- Desktop menu -->
+          <!-- Desktop menu (grows to fill middle) -->
           <div class="collapse navbar-collapse order-lg-1">
             <ul class="navbar-nav ms-3">
 
               {% if nav|length > 0 %}
               {% for nav_item in nav %}
+
                 {% if not nav_item.children %}
                   <!-- Top-level single page -->
                   <li class="nav-item {% if nav_item.active %}nav_active{% endif %}">
@@ -148,7 +142,7 @@
                     </a>
 
                     <div class="dropdown-menu mega p-2" role="menu" aria-label="{{ nav_item.title }}">
-                      {# optional Overview link for the section #}
+                      {# Optional Overview link for the section #}
                       {% set parent_overview = None %}
                       {% for ch in nav_item.children %}
                         {% if ch.title in menu_group_titles %}
@@ -186,6 +180,7 @@ <h2 class="accordion-header" id="{{ hdr_id }}">
                                 <div id="{{ col_id }}" class="accordion-collapse collapse"
                                     data-bs-parent="#mega-acc-{{ top_i }}">
                                   <div class="accordion-body p-2">
+
                                     {% set child_overview = None %}
                                     {% for gc in child.children %}
                                       {% if gc.title in menu_group_titles %}
@@ -200,6 +195,7 @@ <h2 class="accordion-header" id="{{ hdr_id }}">
                                             href="{{ child_overview.url|url }}">Overview</a>
                                         </li>
                                       {% endif %}
+
                                       {% for gc in child.children %}
                                         {% if gc.title not in menu_group_titles %}
                                           <li>
@@ -209,6 +205,7 @@ <h2 class="accordion-header" id="{{ hdr_id }}">
                                         {% endif %}
                                       {% endfor %}
                                     </ul>
+
                                   </div>
                                 </div>
                               </div>
@@ -227,14 +224,35 @@ <h2 class="accordion-header" id="{{ hdr_id }}">
                     </div>
                   </li>
                 {% endif %}
+
               {% endfor %}
               {% endif %}
 
             </ul>
           </div>
-        </div>
-      </nav>
 
+          <!-- Desktop search (RIGHT side) -->
+          <form class="d-none d-lg-block ms-lg-auto order-lg-2 position-relative" role="search">
+            <label for="mkdocs-search" class="visually-hidden">Search</label>
+            <div class="input-group input-group-sm searchbar flex-nowrap">
+              <span class="input-group-text bg-transparent border-0 pe-2">
+                <svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </span>
+              <input id="mkdocs-search"
+                    type="search"
+                    class="form-control border-0 bg-transparent"
+                    placeholder="Search…"
+                    autocomplete="off" />
+            </div>
+            <!-- results popover anchor -->
+            <div class="search-popover" id="search-popover-desktop" aria-label="Search results"></div>
+          </form>
+
+        </div>
+</nav>
 
       <!-- ========================= MOBILE OFFCANVAS (Accordion) ========================= -->
       <div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNav" aria-labelledby="offcanvasNavLabel">
@@ -245,10 +263,21 @@ <h5 class="offcanvas-title" id="offcanvasNavLabel">{{ config.site_name }}</h5>
 
         <div class="offcanvas-body">
           <!-- Mobile search -->
-          <div class="mk-search mb-3">
-            <input id="mkdocs-search-mobile" type="search" class="form-control" placeholder="Search…" aria-label="Search">
-            <i class="fa fa-search"></i>
-          </div>
+          <form class="d-lg-none mb-3" role="search">
+            <div class="input-group input-group-sm searchbar flex-nowrap">
+              <span class="input-group-text bg-transparent border-0 pe-2">
+                <svg class="search-icon" viewBox="0 0 24 24" aria-hidden="true">
+                  <circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/>
+                  <line x1="21" y1="21" x2="16.65" y2="16.65" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
+                </svg>
+              </span>
+              <input id="mkdocs-search-mobile"
+                    type="search"
+                    class="form-control border-0 bg-transparent"
+                    placeholder="Search…"
+                    autocomplete="off" />
+            </div>
+          </form>
 
           <!-- Accordion nav -->
           <div class="accordion accordion-flush" id="navAccordion">
@@ -482,8 +511,17 @@ <h2 class="accordion-header" id="h-{{ pid }}">
       </div>
     </footer>
 
-    <script type="text/javascript" src="/js/bundle.js" defer></script>
-    <script src="/js/search.min.js" defer></script>
+    <!-- Lunr core -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/lunr.min.js" defer></script>
+
+    <!-- OPTIONAL: language support (Spanish/Portuguese); keep only what you need -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/min/lunr.stemmer.support.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/min/lunr.es.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/min/lunr.pt.min.js" defer></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/min/lunr.multi.min.js" defer></script>
+
+    <!-- Your search UI/logic (must come after Lunr) -->
+    <script src="/js/osl-search.js" defer></script>
     <script src="/js/theme.js" defer></script>
 
     {% endblock footer %}

theme/base.html

@@ -28,3 +28,17 @@ blockquote{
 .notices.note{ border-color: var(--notice-note-border-color); background: var(--notice-note-background); }
 .notices.tip{ border-color: var(--notice-tip-border-color); background: var(--notice-tip-background); }
 .notices .highlight_wrap{ background: var(--code-bg) !important; }
+
+/* copy-code button */
+.copy-code { font-size: .75rem; line-height: 1; }
+
+/* heading anchor mark */
+.anchor-link { text-decoration: none; opacity: .6; }
+.anchor-link:hover { opacity: 1; }
+
+/* ensure the back-to-top is perfectly round */
+.to_top {
+  width: 48px; height: 48px; border-radius: 50%;
+  display: grid; place-items: center;
+}
+.to_top .icon { width: 24px; height: 24px; }

theme/css/content.css

@@ -162,3 +162,84 @@
 /* Back to top */
 .to_top{ position: fixed; right: 1rem; bottom: 1rem; z-index: 10; opacity: .9; }
 .to_top .icon{ width: 34px; height: 34px; }
+
+
+/* Keep navbar items on one line and let brand | menu | search align properly */
+.navbar > .container-xxl,
+.navbar > .container,
+.navbar > .container-fluid{
+  display: flex;              /* be explicit */
+  flex-wrap: nowrap;          /* no wrapping */
+  align-items: center;        /* vertical centering */
+  justify-content: space-between; /* brand left, last item (search) far right */
+}
+
+
+/* Keep icon + input on one line and vertically centered */
+.navbar .searchbar { flex-wrap: nowrap; align-items: center; }
+
+/* Make the icon sit nicely in light/dark */
+.navbar .searchbar .input-group-text {
+  display: flex; align-items: center;
+  color: var(--nav-link); /* inherits your theme */
+}
+
+/* Size + feel of the field */
+.navbar .searchbar .form-control {
+  min-width: 20rem;           /* adjust as you like */
+  box-shadow: none !important;
+  color: var(--nav-link);
+}
+.navbar .searchbar .form-control::placeholder { opacity: .6; }
+
+/* Tweak for narrower viewports where this form is still visible */
+@media (max-width: 1200px){
+  .navbar .searchbar .form-control { min-width: 14rem; }
+}
+
+/* Prevent navbar wrapping that shoves items to a new row */
+.navbar .container,
+.navbar .container-fluid { flex-wrap: nowrap; align-items: center; }
+
+/* Brand sizing guard — prevents distortion */
+.navbar-brand img {
+  height: 34px;           /* adjust if you prefer 32/36 */
+  width: auto;
+  object-fit: contain;
+  display: block;
+}
+
+/* Search bar: keep icon + field on one line and nice width */
+.navbar .searchbar {
+  flex-wrap: nowrap;
+  align-items: center;
+  width: clamp(12rem, 22vw, 18rem); /* doesn’t push nav items */
+}
+
+/* Icon inside the input group (independent of your global .icon rules) */
+.navbar .searchbar .search-icon {
+  width: 16px; height: 16px;
+  display: block;
+}
+
+/* Field look + colors for dark/light */
+.navbar .searchbar .form-control {
+  box-shadow: none !important;
+  color: var(--nav-link);
+}
+.navbar .searchbar .form-control::placeholder { opacity: .6; }
+
+/* Make sure the text addon inherits theme color */
+.navbar .searchbar .input-group-text {
+  color: var(--nav-link);
+}
+
+/* Slightly shrink on tighter desktops so it never wraps */
+@media (max-width: 1200px){
+  .navbar .searchbar { width: clamp(10rem, 24vw, 14rem); }
+}
+
+/* Let the menu take the middle space so search pushes to the edge */
+@media (min-width: 992px){
+  .navbar .navbar-collapse { flex-grow: 1; }
+}

theme/css/nav.css

@@ -1,13 +1,55 @@
-/* Search fields (desktop + mobile) */
-.mk-search{ position: relative; }
-.mk-search input{
-  background: rgba(255,255,255,.06);
-  border: 1px solid rgba(255,255,255,.12);
-  color: var(--fg);
-  border-radius: 999px;
-  padding-right: 2.5rem;
-}
-.mk-search .fa{
-  position: absolute; right: .85rem; top: 50%; transform: translateY(-50%);
-  color: var(--muted);
+/* /css/search.css */
+.search-popover{
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: calc(100% + .25rem);
+  z-index: 1050;
+
+  background: var(--dd-bg, rgba(16,18,27,.98));
+  border: 1px solid var(--dd-border, rgba(255,255,255,.12));
+  backdrop-filter: blur(10px);
+  -webkit-backdrop-filter: blur(10px);
+  border-radius: .5rem;
+  padding: .25rem;
+  box-shadow: 0 8px 30px rgba(0,0,0,.25);
+  display: none;
+  max-height: min(60vh, 520px);
+  overflow: auto;
+}
+.search-popover.open{ display: block; }
+
+.sr-item{
+  display: block;
+  padding: .6rem .7rem;
+  border-radius: .4rem;
+  color: var(--fg, #e8eaf0);
+  text-decoration: none;
+}
+.sr-item .sr-title{ font-weight: 600; margin-bottom: .15rem; }
+.sr-item .sr-snippet{ font-size: .875rem; opacity: .85; line-height: 1.35; }
+.sr-item:hover,
+.sr-item.active{
+  background: var(--dd-hover-bg, rgba(255,255,255,.08));
+}
+
+.sr-item.muted{ opacity: .7; pointer-events: none; }
+
+mark{
+  background: color-mix(in oklab, var(--brand, #3b82f6) 28%, transparent);
+  color: inherit;
+  padding: 0 .15em;
+  border-radius: .2em;
+}
+
+/* Light-mode tweaks (a bit more contrast) */
+[data-bs-theme="light"] .search-popover{
+  background: #fff;
+  border-color: rgba(0,0,0,.12);
+  box-shadow: 0 8px 24px rgba(0,0,0,.12);
+}
+[data-bs-theme="light"] .sr-item{ color: #1f2937; }
+[data-bs-theme="light"] .sr-item:hover,
+[data-bs-theme="light"] .sr-item.active{
+  background: rgba(0,0,0,.05);
 }