From 71376cfce74cf4e5beb3887534bd8fe7c2d9eaab Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:33:28 +0100
Subject: [PATCH 1/5] agents: add fetch toolset to docs_engineer agent

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 docs_engineer.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs_engineer.yml b/docs_engineer.yml
index 736148e3cd0..b383057029d 100644
--- a/docs_engineer.yml
+++ b/docs_engineer.yml
@@ -290,6 +290,7 @@ agents:
 
     toolsets:
       - type: filesystem
+      - type: fetch
       - type: shell
       - type: todo
       - type: script

From fa18c7f8bfb41540477bbe4972155cef760658c2 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:56:49 +0000
Subject: [PATCH 2/5] site: upgrade pagefind to v1.5.0-beta.1

Assisted-By: cagent
---
 Dockerfile   | 2 +-
 netlify.toml | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/Dockerfile b/Dockerfile
index 7a5e0dfe789..f3f69b4f1af 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -7,7 +7,7 @@ ARG HTMLTEST_VERSION=0.17.0
 ARG VALE_VERSION=3.11.2
 ARG HUGO_VERSION=0.154.2
 ARG NODE_VERSION=22
-ARG PAGEFIND_VERSION=1.3.0
+ARG PAGEFIND_VERSION=1.5.0-beta.1
 
 # base defines the generic base stage
 FROM golang:${GO_VERSION}-alpine${ALPINE_VERSION} AS base
diff --git a/netlify.toml b/netlify.toml
index cb07b6343c9..a55b635e290 100644
--- a/netlify.toml
+++ b/netlify.toml
@@ -10,4 +10,4 @@ HUGO_ENVIRONMENT = "preview"
 SECRETS_SCAN_OMIT_PATHS = "public/contribute/file-conventions/index.html"
 
 [context.deploy-preview]
-command = "hugo --gc --minify -b $DEPLOY_PRIME_URL && ./hack/flatten-and-resolve.js && npx pagefind@v1.3.0"
+command = "hugo --gc --minify -b $DEPLOY_PRIME_URL && ./hack/flatten-and-resolve.js && npx pagefind@v1.5.0-beta.1"

From 0150180a43df91ded692d222728f2aa1e5724671 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:56:53 +0000
Subject: [PATCH 3/5] site: remove /search page, redirect to homepage

The search functionality is now handled entirely by the modal.

Assisted-By: cagent
---
 content/_index.md            |   2 +
 content/search.md            |   7 --
 layouts/_default/search.html | 191 -----------------------------------
 3 files changed, 2 insertions(+), 198 deletions(-)
 delete mode 100644 content/search.md
 delete mode 100644 layouts/_default/search.html

diff --git a/content/_index.md b/content/_index.md
index 7de643bad9a..b49f900340d 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -2,4 +2,6 @@
 title: Home
 description: Docker Documentation is the official Docker library of resources, manuals, and guides to help you containerize applications.
 keywords: Docker, documentation, manual, guide, reference, api, samples
+aliases:
+  - /search/
 ---
diff --git a/content/search.md b/content/search.md
deleted file mode 100644
index 59f5903bbb3..00000000000
--- a/content/search.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-title: Search
-layout: search
-params:
-  sitemap: false
-  icon: search
----
diff --git a/layouts/_default/search.html b/layouts/_default/search.html
deleted file mode 100644
index 3192eaadaa4..00000000000
--- a/layouts/_default/search.html
+++ /dev/null
@@ -1,191 +0,0 @@
-{{ define "left" }}{{ partial "sidebar/mainnav.html" . }}{{ end }} {{ define
-"main" }}
-<article class="prose dark:prose-invert max-w-none">
-  <h1 class="py-4">{{ .Title }}</h1>
-  {{ .Content }}
-  <div class="not-prose">
-    <div class="flex flex-col items-center justify-between gap-8 lg:flex-row">
-      <input
-        type="search"
-        id="search-page-input"
-        class="ring-3-gray-light-200 dark:ring-3-gray-dark-400 dark:bg-background-dark focus:ring-3-blue-light dark:focus:ring-3-blue-dark ring-3-[1.5px] outline-hidden w-full min-w-0 rounded-sm bg-white px-4 py-2 lg:max-w-xl"
-        placeholder="Search…"
-        tabindex="0"
-      />
-      <div class="flex items-center gap-2">
-        <p class="text-sm text-gray-600 dark:text-gray-400">
-          Not finding what you're looking for? Try
-        </p>
-        <button
-          onclick="askAI('search-page-input')"
-          class="topbar-button open-kapa-widget"
-        >
-          <span>Ask&nbsp;AI</span>
-          <span class="icon-svg">
-            {{ partial "utils/svg.html" "/icons/sparkle.svg" }}
-          </span>
-        </button>
-      </div>
-    </div>
-    <hr class="border-divider-light dark:border-divider-dark" />
-    <div id="search-page-results">
-      <!-- results -->
-    </div>
-  </div>
-</article>
-<script type="module">
-  // Global variable to hold the pagefind module
-  let pagefind;
-
-  // Initialize the pagefind module and fire a search if the query parameter exists
-  window.addEventListener("load", async function () {
-    // Hydrate pagefind
-    pagefind = await import("/pagefind/pagefind.js");
-    await pagefind.options({
-      ranking: {
-        termFrequency: 0.2,
-        pageLength: 0.75,
-        termSaturation: 1.4,
-        termSimilarity: 6.0,
-      },
-    });
-
-    // Get the query parameter from the URL
-    const urlParams = new URLSearchParams(window.location.search);
-    const query = urlParams.get("q");
-
-    // If no query parameter is set, return
-    if (!query) {
-      return;
-    }
-
-    const searchInput = document.getElementById("search-page-input");
-
-    // Set the value of the input field to the query parameter
-    searchInput.value = query;
-
-    // Trigger the input event to simulate user typing
-    const event = new Event("input", {
-      bubbles: true,
-      cancelable: true,
-    });
-    // Trigger the input event for the search input
-    searchInput.dispatchEvent(event);
-    searchInput.focus();
-  });
-
-  const searchPageInput = document.querySelector("#search-page-input");
-  const searchPageResults = document.querySelector("#search-page-results");
-
-  // onPageSearch returns 10 results per query
-  async function onPageSearch(e) {
-    pagefind.init();
-    const query = e.target.value;
-
-    // Set the query parameter in the URL
-    const params = new URLSearchParams(document.location.search);
-    params.set("q", query);
-
-    // Default the current page to 1
-    let currentPage = 1;
-
-    // Check if the page parameter exists
-    const page = params.get("page");
-    // Calculate the range start based on the page parameter
-    if (page) {
-      currentPage = parseInt(page);
-    }
-    const rangeStart = (currentPage - 1) * 10;
-    const rangeEnd = rangeStart + 10;
-
-    // Execute the search
-    const search = await pagefind.debouncedSearch(query);
-    // If no search results are found, exit
-    if (search === null) {
-      return;
-    } else {
-      // total number of results
-      const resultsLength = search.results.length;
-      // Get the data for the search results
-      // Slice the results based on the range start + 10
-      const resultsData = await Promise.all(
-        search.results.slice(rangeStart, rangeEnd).map((r) => r.data()),
-      );
-      // If the range does not have any results, display a message
-      if (resultsData.length === 0) {
-        searchPageResults.innerHTML = `<div class="p-4">No results found</div>`;
-        return;
-      }
-      // Add an index to the results, for heap tracking
-      const results = resultsData.map((item, index) => ({
-        ...item,
-        index: index + 1,
-      }));
-
-      // If the query is not empty, display the search results container
-      if (query) {
-        searchPageResults.classList.remove("hidden");
-      } else {
-        searchPageResults.classList.add("hidden");
-      }
-
-      // Generate the search results HTML
-      let resultsHTML = `<div class="text-gray-400 dark:text-gray-500 p-2">${resultsLength} results</div>`;
-
-      // Map results to HTML
-      resultsHTML += results
-        .map((item) => {
-          return `<div class="p-4">
-<div class="flex flex-col">
-  <span class="text-gray-400 dark:texty-gray-dark text-sm">${item.meta.breadcrumbs}</span>
-  <a class="link" style="word-break: break-word; overflow-wrap: anywhere;" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
-  <p class="text-black dark:text-white overflow-hidden" style="word-break: break-word; overflow-wrap: anywhere;">…${item.excerpt}…</p>
-</div>
-</div>`;
-        })
-        .join("");
-      // If the results length is greater than 10, display links to show more results
-      if (resultsLength > 10) {
-        resultsHTML += `<hr class="border-divider-light dark:border-divider-dark">`;
-        resultsHTML += `<ul class="flex flex-wrap gap-1 pt-4 pb-8 justify-center text-sm">`;
-        for (let i = 1; i <= resultsLength / 10; i++) {
-          if (i == currentPage) {
-            resultsHTML += `<li class="flex items-center justify-center">
-                 <a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-200 dark:bg-gray-800 dark:text-gray-200">${i}</a>
-              </li>`;
-          } else {
-            resultsHTML += `<li class="flex items-center justify-center">
-                <a href="/search/?q=${query}&page=${i}" class="pagination-link bg-gray-100 dark:bg-gray-900 dark:text-gray-400">${i}</a>
-              </li>`;
-          }
-        }
-        resultsHTML += `</ul>`;
-      }
-
-      searchPageResults.innerHTML = resultsHTML;
-    }
-  }
-
-  searchPageInput.addEventListener("input", (e) => onPageSearch(e));
-
-  // Event delegation for tracking link clicks
-  if (window.heap !== undefined) {
-    searchPageResults.addEventListener("click", function (event) {
-      if (event.target.tagName === "A" && event.target.closest(".link")) {
-        const searchQuery = event.target.getAttribute("data-query");
-        const resultIndex = event.target.getAttribute("data-index");
-        const url = new URL(event.target.href);
-        const properties = {
-          docs_search_target_path: url.pathname,
-          docs_search_target_title: event.target.textContent,
-          docs_search_query_text: searchQuery,
-          docs_search_target_index: resultIndex,
-          docs_search_source_path: window.location.pathname,
-          docs_search_source_title: document.title,
-        };
-        heap.track("Docs - Search - Click - Result Link", properties);
-      }
-    });
-  }
-</script>
-{{ end }}

From 42f46c1c5ec3653076401f3f75cfbfb98219a846 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 5 Feb 2026 17:56:59 +0000
Subject: [PATCH 4/5] site: implement pagefind component ui for search modal

- Add pagefind-component-ui.css and .js assets
- Replace search bar with custom button that opens modal
- Add custom result template with Tailwind classes
- Add dark mode styling for modal and result highlights
- Support Cmd/Ctrl+K keyboard shortcut

Assisted-By: cagent
---
 assets/css/pagefind.css          |  25 +++
 assets/css/style.css             |   1 +
 layouts/partials/head.html       |   1 +
 layouts/partials/search-bar.html | 277 ++++++++++---------------------
 4 files changed, 118 insertions(+), 186 deletions(-)
 create mode 100644 assets/css/pagefind.css

diff --git a/assets/css/pagefind.css b/assets/css/pagefind.css
new file mode 100644
index 00000000000..a6619c3b104
--- /dev/null
+++ b/assets/css/pagefind.css
@@ -0,0 +1,25 @@
+/* Pagefind Component UI Customizations */
+
+/* Dark mode variables for modal */
+.dark pagefind-modal {
+  --pf-text: var(--color-gray-100);
+  --pf-text-secondary: var(--color-gray-300);
+  --pf-text-muted: var(--color-gray-400);
+  --pf-background: var(--color-gray-900);
+  --pf-border: var(--color-gray-700);
+  --pf-border-focus: var(--color-blue-400);
+  --pf-hover: var(--color-gray-800);
+}
+
+/* Highlight marks in results */
+pagefind-results mark {
+  background-color: var(--color-yellow-200);
+  color: inherit;
+  padding: 0 0.125rem;
+  border-radius: 0.125rem;
+}
+
+.dark pagefind-results mark {
+  background-color: rgba(255, 204, 72, 0.3);
+  color: white;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
index 8315621f425..f63fc6f5aec 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -38,6 +38,7 @@
   @import "global.css";
 }
 @import "utilities.css";
+@import "pagefind.css";
 @import "syntax-dark.css";
 @import "syntax-light.css";
 @import "components.css";
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index dfc8f368d69..ea19cfcd958 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -5,6 +5,7 @@
   <link rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink }}" />
 {{ end -}}
 {{ partial "utils/css.html" "-" }}
+<link href="/pagefind/pagefind-component-ui.css" rel="stylesheet">
 {{- if hugo.IsProduction -}}
   <script
     src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 2087e9a1724..3192fd8a3b1 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -1,203 +1,108 @@
-<div
-  x-ref="searchBarRef"
-  x-data="{ open: false }"
-  @click.outside="open = false;"
-  @keyup.escape.window="open = false"
-  id="search-bar"
-  class="h-full relative flex items-center overflow-visible"
->
-  <input
-    class="rounded-lg hidden w-64 lg:inline focus:outline-none bg-blue-700 border border-blue-500 px-3 py-[0.5625rem] focus:ring focus:ring-blue-400 placeholder-blue-300 h-[42px]"
-    x-ref="searchBarInput"
-    type="search"
-    id="search-bar-input"
-    placeholder="Search"
-    @focus="open = true;"
-    @keyup.enter.prevent="window.location.href = '/search/?q=' + $event.target.value;"
-    @keyup.escape.prevent="open = false;"
-    @keydown.window="(e) => {
-            switch(e.key) {
-            case 'k':
-              if (e.metaKey || e.ctrlKey) {
-                e.preventDefault();
-                $el.focus();
-              }
-              break;
-            }
-          }"
-    tabindex="0"
-  />
+<div id="search-bar" class="h-full relative flex items-center overflow-visible">
   <button
-    id="search-bar-icon"
-    @click="window.location.href = '/search/?q=' + $refs.searchBarInput.value;"
-    class="lg:absolute right-2 p-1 rounded-lg cursor-pointer transition-colors hover:bg-blue-600 lg:hover:bg-transparent lg:hover:opacity-80"
+    type="button"
     aria-label="Search"
+    class="cursor-pointer flex items-center gap-2 p-2 rounded-lg bg-blue-700 border border-blue-500 text-white transition-colors focus:outline-none focus:ring focus:ring-blue-400 hover:bg-blue-800 hover:border-blue-400"
+    id="search-modal-trigger"
   >
-    <div class="bg-blue-700 rounded-md p-2 border border-blue-500 lg:border-none icon-svg">
-      {{ partial "utils/svg.html" "/icons/search.svg" }}
-    </div>
+    <span class="icon-svg">
+      {{ partialCached "icon" "search" "search" }}
+    </span>
+    <span class="hidden px-1 lg:inline">Search</span>
   </button>
-  <div
-    id="search-bar-dropdown"
-    x-show="open"
-    x-cloak
-    x-ref="dropdown"
-    class="border-1 fixed z-[999] mt-2 hidden rounded-sm border-gray-100 bg-gray-50 p-6 font-medium text-gray-400 shadow-md md:block dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200"
-    style="width: min(500px, 90vw)"
-    x-effect="if (open) {
-        const rect = $refs.searchBarRef.getBoundingClientRect();
-        const dropdownWidth = Math.min(500, window.innerWidth * 0.9);
-        const viewportWidth = window.innerWidth;
-        
-        // Calculate left position
-        let leftPos = rect.left;
-        
-        // Prevent going off right edge
-        if (leftPos + dropdownWidth > viewportWidth - 20) {
-          leftPos = viewportWidth - dropdownWidth - 20;
-        }
-        
-        // Prevent going off left edge
-        if (leftPos < 20) {
-          leftPos = 20;
-        }
-        
-        $el.style.top = (rect.bottom + 8) + 'px';
-        $el.style.left = leftPos + 'px';
-      }"
-  >
-    <div id="search-bar-results">
-      {{- $emptyState := `
-      <div>
-        Start typing to search or try
-        <button @click="
-          $store.gordon.open($refs.searchBarInput.value.trim());
-          $refs.searchBarInput.value = '';
-          open = false;
-        " class="link">Ask AI</button>.
-      </div>
-      ` }} {{- $emptyState | safe.HTML }}
-      <!-- results -->
-    </div>
-  </div>
-  <script type="module">
-    window.addEventListener("load", async function () {
-      const pagefind = await import("/pagefind/pagefind.js");
-      await pagefind.options({
-        ranking: {
-          termFrequency: 0.2,
-          pageLength: 0.75,
-          termSaturation: 1.4,
-          termSimilarity: 6.0,
-        },
-      });
-
-      const searchBarInput = document.querySelector("#search-bar-input");
-      const searchBarResults = document.querySelector("#search-bar-results");
-      const searchDropdown = document.querySelector("#search-bar-dropdown");
-
-      // Update position on scroll and resize
-      function updateDropdownPosition() {
-        const searchBar = document.querySelector("#search-bar");
-        if (
-          !searchBar ||
-          !searchDropdown ||
-          searchDropdown.style.display === "none"
-        )
-          return;
-
-        const rect = searchBar.getBoundingClientRect();
-        const dropdownWidth = Math.min(500, window.innerWidth * 0.9);
-        const viewportWidth = window.innerWidth;
+</div>
 
-        let leftPos = rect.left;
+<script type="module">
+  // Configure Pagefind before any components connect to DOM
+  await import('/pagefind/pagefind-component-ui.js');
+  const { configureInstance, getInstanceManager } = window.PagefindComponents;
 
-        if (leftPos + dropdownWidth > viewportWidth - 20) {
-          leftPos = viewportWidth - dropdownWidth - 20;
-        }
+  configureInstance('default', {
+    bundlePath: '/pagefind/',
+    ranking: {
+      termFrequency: 0.0,
+      termSimilarity: 2.0,
+      pageLength: 0.0,
+      termSaturation: 1.0
+    }
+  });
 
-        if (leftPos < 20) {
-          leftPos = 20;
-        }
+  // Create modal after config is set
+  document.body.insertAdjacentHTML('beforeend', `
+    <pagefind-modal id="search-modal" reset-on-close>
+      <pagefind-modal-header>
+        <pagefind-input placeholder="Search documentation…"></pagefind-input>
+      </pagefind-modal-header>
+      <pagefind-modal-body>
+        <p id="search-placeholder" class="text-center text-gray-500 dark:text-gray-400 py-8">
+          Start typing to search the documentation
+        </p>
+        <pagefind-summary></pagefind-summary>
+        <pagefind-results></pagefind-results>
+      </pagefind-modal-body>
+    </pagefind-modal>
+  `);
 
-        searchDropdown.style.top = rect.bottom + 8 + "px";
-        searchDropdown.style.left = leftPos + "px";
-      }
+  const modal = document.getElementById('search-modal');
+  const placeholder = document.getElementById('search-placeholder');
 
-      window.addEventListener("scroll", updateDropdownPosition);
-      window.addEventListener("resize", updateDropdownPosition);
+  // Custom result template
+  modal.querySelector('pagefind-results').resultTemplate = (result) => {
+    const li = document.createElement('li');
+    li.className = 'py-3 border-b border-gray-200 dark:border-gray-700 last:border-b-0';
 
-      async function search(e) {
-        const query = e.target.value;
-        if (query === "") {
-          searchBarResults.innerHTML = `{{ $emptyState | safe.HTML }}`;
-          return;
-        }
-        const search = await pagefind.debouncedSearch(query);
-        if (search === null) {
-          return;
-        } else {
-          const resultsLength = search.results.length;
-          const resultsData = await Promise.all(
-            search.results.slice(0, 5).map((r) => r.data()),
-          );
-          const results = resultsData.map((item, index) => ({
-            ...item,
-            index: index + 1,
-          }));
+    const title = document.createElement('p');
+    title.className = 'font-medium';
 
-          if (query) {
-            searchBarResults.classList.remove("hidden");
-          } else {
-            searchBarResults.classList.add("hidden");
-          }
+    const link = document.createElement('a');
+    link.className = 'text-blue-600 dark:text-blue-400 hover:underline';
+    link.href = result.meta.url || result.url;
+    link.textContent = result.meta.title;
+    title.appendChild(link);
+    li.appendChild(title);
 
-let resultsHTML = `<div class="p-2 text-gray-400 dark:text-gray-500">${resultsLength} results</div>`;
-resultsHTML += results
-  .map((item) => {
-    // Truncate excerpt if it's too long
-    let excerpt = item.excerpt;
-    if (excerpt.length > 200) {
-      excerpt = excerpt.substring(0, 200);
+    if (result.excerpt) {
+      const excerpt = document.createElement('p');
+      excerpt.className = 'text-gray-600 dark:text-gray-400 mt-1 text-sm';
+      excerpt.innerHTML = result.excerpt;
+      li.appendChild(excerpt);
     }
-    return `<div class="p-2">
-<div class="flex flex-col items-start item">
-  <a class="link" style="word-break: break-word; overflow-wrap: anywhere;" href="${item.url}" data-query="${query}" data-index="${item.index}">${item.meta.title}</a>
-  <p class="text-black dark:text-white overflow-hidden text-left" style="word-break: break-word; overflow-wrap: anywhere;">…${excerpt}…</p>
-</div>
-</div>`;
-  })
-  .join("");
-
-if (resultsLength > 5) {
-  resultsHTML += `<div class="w-fit ml-auto px-4 py-2"><a href="/search/?q=${query}" class="link">Show all results</a></div>`;
-}
 
-          searchBarResults.innerHTML = resultsHTML;
-        }
+    if (result.sub_results?.length) {
+      const ul = document.createElement('ul');
+      ul.className = 'mt-3 ml-4 flex flex-wrap gap-2';
+      for (const sub of result.sub_results) {
+        const subLi = document.createElement('li');
+        subLi.className = 'text-sm';
+        const subLink = document.createElement('a');
+        subLink.className = 'text-blue-600 dark:text-blue-400 hover:underline';
+        subLink.href = sub.url;
+        subLink.textContent = sub.title;
+        subLi.appendChild(subLink);
+        ul.appendChild(subLi);
       }
+      li.appendChild(ul);
+    }
 
-      searchBarInput.addEventListener("input", search);
+    return li;
+  };
 
-      // Event delegation for tracking link clicks
-      if (window.heap !== undefined) {
-        searchBarResults.addEventListener("click", function (event) {
-          if (event.target.tagName === "A" && event.target.closest(".link")) {
-            const searchQuery = event.target.getAttribute("data-query");
-            const resultIndex = event.target.getAttribute("data-index");
-            const url = new URL(event.target.href);
-            const properties = {
-              docs_search_target_path: url.pathname,
-              docs_search_target_title: event.target.textContent,
-              docs_search_query_text: searchQuery,
-              docs_search_target_index: resultIndex,
-              docs_search_source_path: window.location.pathname,
-              docs_search_source_title: document.title,
-            };
-            heap.track("Docs - Search - Click - Result Link", properties);
-          }
-        });
-      }
-    });
-  </script>
-</div>
+  // Show/hide placeholder based on search state
+  const instance = getInstanceManager().getInstance('default');
+  instance.on('search', (term) => {
+    placeholder.hidden = !!term;
+  });
+  instance.on('results', () => {
+    placeholder.hidden = !!instance.searchTerm;
+  });
+
+  // Open modal
+  const openModal = () => modal.open?.();
+  document.getElementById('search-modal-trigger').addEventListener('click', openModal);
+  document.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+      e.preventDefault();
+      openModal();
+    }
+  });
+</script>

From 42f7ba20b16835e62027b953d179b698cdee97ca Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Thu, 5 Feb 2026 20:14:49 +0000
Subject: [PATCH 5/5] site: add pagefind metadata for improved search ranking

Index description, keywords, and breadcrumbs as Pagefind metadata
to improve search result relevance. Configure ranking weights to
prioritize title matches and reduce term frequency bias.

- Add pagefind-meta.html partial for centralized metadata
- Move breadcrumb metadata from breadcrumbs.html to new partial
- Configure metaWeights: title (10x), keywords (6x), description (4x)

Assisted-By: cagent
---
 layouts/_default/baseof.html        |  1 +
 layouts/partials/breadcrumbs.html   |  8 +-------
 layouts/partials/pagefind-meta.html | 10 ++++++++++
 layouts/partials/search-bar.html    |  7 ++++++-
 4 files changed, 18 insertions(+), 8 deletions(-)
 create mode 100644 layouts/partials/pagefind-meta.html

diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 946147a21e9..ebb1e7f5d85 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -63,6 +63,7 @@
         {{ if ne .Params.sitemap false }}data-pagefind-body{{- end }}
         class="dark:bg-background-dark w-full min-w-0 bg-white p-8"
       >
+        {{ partial "pagefind-meta.html" . }}
         {{ block "main" . }}
         {{ end }}
       </div>
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
index fc893af263e..7c2ce060db9 100644
--- a/layouts/partials/breadcrumbs.html
+++ b/layouts/partials/breadcrumbs.html
@@ -1,19 +1,13 @@
 <nav
   id="breadcrumbs"
-  {{- $breadcrumbTitles := slice }}
   data-pagefind-ignore
   class="breadcrumbs mb-4 flex min-w-0 items-center gap-2 text-gray-400 dark:text-gray-300"
 >
   {{ range .Ancestors.Reverse }}
-    {{ $breadcrumbTitles = $breadcrumbTitles | append .LinkTitle }}
     <a href="{{ .Permalink }}" class="link truncate"
       >{{ markdownify .LinkTitle }}</a
     >
     <span>/</span>
   {{- end }}
-  <span
-    data-pagefind-meta="breadcrumbs:{{ collections.Delimit $breadcrumbTitles " / " }}"
-    class="truncate"
-    >{{ markdownify .LinkTitle }}</span
-  >
+  <span class="truncate">{{ markdownify .LinkTitle }}</span>
 </nav>
diff --git a/layouts/partials/pagefind-meta.html b/layouts/partials/pagefind-meta.html
new file mode 100644
index 00000000000..f08a9346e82
--- /dev/null
+++ b/layouts/partials/pagefind-meta.html
@@ -0,0 +1,10 @@
+{{/* Pagefind metadata - must be inside data-pagefind-body */}}
+{{- $description := partial "utils/description.html" . -}}
+{{- $keywords := partialCached "utils/keywords.html" . . -}}
+{{- $breadcrumbs := slice -}}
+{{- range .Ancestors.Reverse -}}
+  {{- $breadcrumbs = $breadcrumbs | append .LinkTitle -}}
+{{- end -}}
+{{- with $description }}<meta data-pagefind-meta="description:{{ . }}">{{ end }}
+{{- with $keywords }}<meta data-pagefind-meta="keywords:{{ delimit . ", " }}">{{ end }}
+{{- with $breadcrumbs }}<meta data-pagefind-meta="breadcrumbs:{{ delimit . " / " }}">{{ end }}
diff --git a/layouts/partials/search-bar.html b/layouts/partials/search-bar.html
index 3192fd8a3b1..0d4a6552aa6 100644
--- a/layouts/partials/search-bar.html
+++ b/layouts/partials/search-bar.html
@@ -23,7 +23,12 @@
       termFrequency: 0.0,
       termSimilarity: 2.0,
       pageLength: 0.0,
-      termSaturation: 1.0
+      termSaturation: 1.0,
+      metaWeights: {
+        title: 10.0,
+        description: 4.0,
+        keywords: 6.0
+      }
     }
   });