From 6ccbfa3f64ec55d615a54d19bba1f3f008611690 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Mon, 11 Mar 2024 10:17:43 +0100
Subject: [PATCH] hugo: use fuse.js search instead of algolia

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 assets/css/search.css                   | 635 ------------------------
 assets/css/styles.css                   |   1 -
 assets/js/src/alpine.js                 |   5 +-
 assets/js/src/search.js                 |  67 ++-
 hugo_stats.json                         |  29 ++
 layouts/_default/cli.html               |   2 +-
 layouts/_default/glossary.html          |   2 +-
 layouts/_default/list.html              |   2 +-
 layouts/_default/single.html            |   2 +-
 layouts/index.metadata.json             |   6 +-
 layouts/partials/head.html              |  10 +-
 layouts/partials/header.html            |   5 +-
 layouts/partials/search.html            |  45 ++
 layouts/partials/utils/description.html |   1 -
 layouts/samples/single.html             |   2 +-
 package-lock.json                       | 282 ++---------
 package.json                            |   3 +-
 tailwind.config.js                      |   1 +
 18 files changed, 181 insertions(+), 919 deletions(-)
 delete mode 100644 assets/css/search.css
 create mode 100644 layouts/partials/search.html

diff --git a/assets/css/search.css b/assets/css/search.css
deleted file mode 100644
index 8981b4a550..0000000000
--- a/assets/css/search.css
+++ /dev/null
@@ -1,635 +0,0 @@
-/*! @docsearch/css 3.3.0 | MIT License | © Algolia, Inc. and contributors | https://docsearch.algolia.com */
-:root {
-  --docsearch-primary-color: theme("colors.blue.light.500");
-  --docsearch-text-color: #1c1e21;
-  --docsearch-spacing: 12px;
-  --docsearch-icon-stroke-width: 1.4;
-  --docsearch-highlight-color: var(--docsearch-primary-color);
-  --docsearch-muted-color: theme("colors.blue.light.500");
-  --docsearch-container-background: theme("colors.white/0.5");
-  --docsearch-logo-color: #5468ff;
-  --docsearch-modal-width: 560px;
-  --docsearch-modal-height: 600px;
-  --docsearch-modal-background: theme("colors.background.light");
-  --docsearch-modal-shadow: inset 1px 1px 0 0 hsla(0, 0%, 100%, 0.5),
-    0 3px 8px 0 #555a64;
-  --docsearch-searchbox-height: 56px;
-  --docsearch-button-background: rgb(255 255 255 / 10%);
-  --docsearch-button-focus-background: rgb(255 255 255 / 20%);
-  --docsearch-searchbox-background: theme(colors.white);
-  --docsearch-searchbox-shadow: inset 0 0 0 2px var(--docsearch-primary-color);
-  --docsearch-hit-height: 56px;
-  --docsearch-hit-color: theme("colors.black");
-  --docsearch-hit-active-color: theme("colors.white");
-  --docsearch-hit-background: theme("colors.white");
-  --docsearch-hit-shadow: 0 1px 3px 0 #d4d9e1;
-  --docsearch-key-color: theme("colors.blue.light.100");
-  --docsearch-footer-height: 44px;
-  --docsearch-footer-background: theme("colors.white");
-  --docsearch-footer-border: 1px solid theme("colors.divider.light");
-}
-html.dark {
-  --docsearch-primary-color: theme("colors.blue.dark.400");
-  --docsearch-text-color: #f5f6f7;
-  --docsearch-container-background: theme("colors.black/0.5");
-  --docsearch-modal-background: theme("colors.background.dark");
-  --docsearch-modal-shadow: inset 1px 1px 0 0 #2c2e40, 0 3px 8px 0 #000309;
-  --docsearch-searchbox-background: theme(colors.black);
-  --docsearch-hit-color: theme("colors.white");
-  --docsearch-hit-shadow: none;
-  --docsearch-hit-background: #090a11;
-  --docsearch-key-color: theme("colors.blue.dark.300");
-  --docsearch-footer-background: theme("colors.background.dark");
-  --docsearch-footer-border: 1px solid theme("colors.divider.dark");
-  --docsearch-logo-color: theme("colors.white");
-  --docsearch-muted-color: theme("colors.white");
-}
-.DocSearch-Button {
-  align-items: center;
-  background: var(--docsearch-button-background);
-  border: 0;
-  border-radius: theme(spacing.1);
-  color: theme(colors.white);
-  cursor: pointer;
-  display: flex;
-  font-weight: 500;
-  height: 36px;
-  justify-content: space-between;
-  margin: 0 0 0 16px;
-  padding: 0 8px;
-  user-select: none;
-}
-.DocSearch-Button:active,
-.DocSearch-Button:focus,
-.DocSearch-Button:hover {
-  background: var(--docsearch-button-focus-background);
-  outline: none;
-}
-.DocSearch-Button-Container {
-  align-items: center;
-  display: flex;
-}
-.DocSearch-Search-Icon {
-  stroke-width: 1.6;
-}
-.DocSearch-Button .DocSearch-Search-Icon {
-  color: theme(colors.white);
-}
-.DocSearch-Button-Placeholder {
-  font-size: 1rem;
-  padding: 0 12px 0 6px;
-}
-.DocSearch-Button-Keys {
-  display: flex;
-  min-width: calc(40px + 0.8em);
-  margin-top: 3px;
-}
-.DocSearch-Button-Key {
-  align-items: center;
-  background: none;
-  border-radius: 3px;
-  box-shadow: none;
-  color: theme(colors.white);
-  display: flex;
-  height: 18px;
-  justify-content: center;
-  margin-right: 0.4em;
-  position: relative;
-  padding: 0 0 2px;
-  border: 1px solid theme(colors.white);
-  top: -1px;
-  width: 20px;
-}
-@media (max-width: 768px) {
-  .DocSearch-Button-Keys,
-  .DocSearch-Button-Placeholder {
-    display: none;
-  }
-}
-.DocSearch--active {
-  overflow: hidden !important;
-}
-.DocSearch-Container,
-.DocSearch-Container * {
-  box-sizing: border-box;
-}
-.DocSearch-Container {
-  background-color: var(--docsearch-container-background);
-  height: 100vh;
-  left: 0;
-  position: fixed;
-  top: 0;
-  width: 100vw;
-  z-index: 200;
-}
-.DocSearch-Container a {
-  text-decoration: none;
-}
-.DocSearch-Link {
-  appearance: none;
-  background: none;
-  border: 0;
-  color: var(--docsearch-highlight-color);
-  cursor: pointer;
-  font: inherit;
-  margin: 0;
-  padding: 0;
-}
-.DocSearch-Modal {
-  background: var(--docsearch-modal-background);
-  border-radius: 6px;
-  box-shadow: var(--docsearch-modal-shadow);
-  flex-direction: column;
-  margin: 60px auto auto;
-  max-width: var(--docsearch-modal-width);
-  position: relative;
-}
-.DocSearch-SearchBar {
-  display: flex;
-  padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
-}
-.DocSearch-Form {
-  align-items: center;
-  background: var(--docsearch-searchbox-background);
-  border-radius: 4px;
-  box-shadow: var(--docsearch-searchbox-shadow);
-  display: flex;
-  height: var(--docsearch-searchbox-height);
-  margin: 0;
-  padding: 0 var(--docsearch-spacing);
-  position: relative;
-  width: 100%;
-}
-.DocSearch-Input {
-  appearance: none;
-  background: transparent;
-  border: 0;
-  color: var(--docsearch-text-color);
-  flex: 1;
-  font: inherit;
-  font-size: 1.2em;
-  height: 100%;
-  outline: none;
-  padding: 0 0 0 8px;
-  width: 80%;
-}
-.DocSearch-Input::placeholder {
-  color: var(--docsearch-muted-color);
-  opacity: 1;
-}
-.DocSearch-Input::-webkit-search-cancel-button,
-.DocSearch-Input::-webkit-search-decoration,
-.DocSearch-Input::-webkit-search-results-button,
-.DocSearch-Input::-webkit-search-results-decoration {
-  display: none;
-}
-.DocSearch-LoadingIndicator,
-.DocSearch-MagnifierLabel,
-.DocSearch-Reset {
-  margin: 0;
-  padding: 0;
-}
-.DocSearch-MagnifierLabel,
-.DocSearch-Reset {
-  align-items: center;
-  color: var(--docsearch-highlight-color);
-  display: flex;
-  justify-content: center;
-}
-.DocSearch-Container--Stalled .DocSearch-MagnifierLabel,
-.DocSearch-LoadingIndicator {
-  display: none;
-}
-.DocSearch-Container--Stalled .DocSearch-LoadingIndicator {
-  align-items: center;
-  color: var(--docsearch-highlight-color);
-  display: flex;
-  justify-content: center;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Reset {
-    animation: none;
-    appearance: none;
-    background: none;
-    border: 0;
-    border-radius: 50%;
-    color: var(--docsearch-icon-color);
-    cursor: pointer;
-    right: 0;
-    stroke-width: var(--docsearch-icon-stroke-width);
-  }
-}
-.DocSearch-Reset {
-  animation: fade-in 0.1s ease-in forwards;
-  appearance: none;
-  background: none;
-  border: 0;
-  border-radius: 50%;
-  color: var(--docsearch-icon-color);
-  cursor: pointer;
-  padding: 2px;
-  right: 0;
-  stroke-width: var(--docsearch-icon-stroke-width);
-}
-.DocSearch-Reset[hidden] {
-  display: none;
-}
-.DocSearch-Reset:focus {
-  outline: none;
-}
-.DocSearch-Reset:hover {
-  color: var(--docsearch-highlight-color);
-}
-.DocSearch-LoadingIndicator svg,
-.DocSearch-MagnifierLabel svg {
-  height: 24px;
-  width: 24px;
-}
-.DocSearch-Cancel {
-  display: none;
-}
-.DocSearch-Dropdown {
-  max-height: calc(
-    var(--docsearch-modal-height) - var(--docsearch-searchbox-height) -
-      var(--docsearch-spacing) - var(--docsearch-footer-height)
-  );
-  min-height: var(--docsearch-spacing);
-  overflow-y: auto;
-  overflow-y: overlay;
-  padding: 0 var(--docsearch-spacing);
-  scrollbar-color: var(--docsearch-muted-color)
-    var(--docsearch-modal-background);
-  scrollbar-width: thin;
-}
-.DocSearch-Dropdown::-webkit-scrollbar {
-  width: 12px;
-}
-.DocSearch-Dropdown::-webkit-scrollbar-track {
-  background: transparent;
-}
-.DocSearch-Dropdown::-webkit-scrollbar-thumb {
-  background-color: var(--docsearch-muted-color);
-  border: 3px solid var(--docsearch-modal-background);
-  border-radius: 20px;
-}
-.DocSearch-Dropdown ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.DocSearch-Label {
-  font-size: 0.75em;
-  line-height: 1.6em;
-}
-.DocSearch-Help,
-.DocSearch-Label {
-  color: var(--docsearch-muted-color);
-}
-.DocSearch-Help {
-  font-size: 0.9em;
-  margin: 0;
-  user-select: none;
-}
-.DocSearch-Title {
-  font-size: 1.2em;
-}
-.DocSearch-Logo a {
-  display: flex;
-}
-.DocSearch-Logo svg {
-  color: var(--docsearch-logo-color);
-  margin-left: 8px;
-}
-.DocSearch-Hits:last-of-type {
-  margin-bottom: 24px;
-}
-.DocSearch-Hits mark {
-  background: none;
-  color: var(--docsearch-highlight-color);
-}
-.DocSearch-HitsFooter {
-  color: var(--docsearch-muted-color);
-  display: flex;
-  font-size: 0.85em;
-  justify-content: center;
-  margin-bottom: var(--docsearch-spacing);
-  padding: var(--docsearch-spacing);
-}
-.DocSearch-HitsFooter a {
-  border-bottom: 1px solid;
-  color: inherit;
-}
-.DocSearch-Hit {
-  border-radius: 4px;
-  display: flex;
-  padding-bottom: 4px;
-  position: relative;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Hit--deleting {
-    transition: none;
-  }
-}
-.DocSearch-Hit--deleting {
-  opacity: 0;
-  transition: all 0.25s linear;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Hit--favoriting {
-    transition: none;
-  }
-}
-.DocSearch-Hit--favoriting {
-  transform: scale(0);
-  transform-origin: top center;
-  transition: all 0.25s linear;
-  transition-delay: 0.25s;
-}
-.DocSearch-Hit a {
-  background: var(--docsearch-hit-background);
-  border-radius: 4px;
-  box-shadow: var(--docsearch-hit-shadow);
-  display: block;
-  padding-left: var(--docsearch-spacing);
-  width: 100%;
-}
-.DocSearch-Hit-source {
-  background: var(--docsearch-modal-background);
-  color: var(--docsearch-highlight-color);
-  font-size: 0.85em;
-  font-weight: 600;
-  line-height: 32px;
-  margin: 0 -4px;
-  padding: 8px 4px 0;
-  position: sticky;
-  top: 0;
-  z-index: 10;
-}
-.DocSearch-Hit-Tree {
-  color: var(--docsearch-muted-color);
-  height: var(--docsearch-hit-height);
-  opacity: 0.5;
-  stroke-width: var(--docsearch-icon-stroke-width);
-  width: 24px;
-}
-.DocSearch-Hit[aria-selected="true"] a {
-  background-color: var(--docsearch-highlight-color);
-}
-.DocSearch-Hit[aria-selected="true"] mark {
-  text-decoration: underline;
-}
-.DocSearch-Hit-Container {
-  align-items: center;
-  color: var(--docsearch-hit-color);
-  display: flex;
-  flex-direction: row;
-  height: var(--docsearch-hit-height);
-  padding: 0 var(--docsearch-spacing) 0 0;
-}
-.DocSearch-Hit-icon {
-  height: 20px;
-  width: 20px;
-}
-.DocSearch-Hit-action,
-.DocSearch-Hit-icon {
-  color: var(--docsearch-muted-color);
-  stroke-width: var(--docsearch-icon-stroke-width);
-}
-.DocSearch-Hit-action {
-  align-items: center;
-  display: flex;
-  height: 22px;
-  width: 22px;
-}
-.DocSearch-Hit-action svg {
-  display: block;
-  height: 18px;
-  width: 18px;
-}
-.DocSearch-Hit-action + .DocSearch-Hit-action {
-  margin-left: 6px;
-}
-.DocSearch-Hit-action-button {
-  appearance: none;
-  background: none;
-  border: 0;
-  border-radius: 50%;
-  color: inherit;
-  cursor: pointer;
-  padding: 2px;
-}
-svg.DocSearch-Hit-Select-Icon {
-  display: none;
-}
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Select-Icon {
-  display: block;
-}
-.DocSearch-Hit-action-button:focus,
-.DocSearch-Hit-action-button:hover {
-  background: rgba(0, 0, 0, 0.2);
-  transition: background-color 0.1s ease-in;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Hit-action-button:focus,
-  .DocSearch-Hit-action-button:hover {
-    transition: none;
-  }
-}
-.DocSearch-Hit-action-button:focus path,
-.DocSearch-Hit-action-button:hover path {
-  fill: theme("colors.white");
-}
-.DocSearch-Hit-content-wrapper {
-  display: flex;
-  flex: 1 1 auto;
-  flex-direction: column;
-  font-weight: 500;
-  justify-content: center;
-  line-height: 1.2em;
-  margin: 0 8px;
-  overflow-x: hidden;
-  position: relative;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  width: 80%;
-}
-.DocSearch-Hit-title {
-  font-size: 0.9em;
-}
-.DocSearch-Hit-path {
-  color: var(--docsearch-muted-color);
-  font-size: 0.75em;
-}
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-action,
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-icon,
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path,
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-text,
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
-.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Tree,
-.DocSearch-Hit[aria-selected="true"] mark {
-  color: var(--docsearch-hit-active-color) !important;
-}
-@media screen and (prefers-reduced-motion: reduce) {
-  .DocSearch-Hit-action-button:focus,
-  .DocSearch-Hit-action-button:hover {
-    background: rgba(0, 0, 0, 0.2);
-    transition: none;
-  }
-}
-.DocSearch-ErrorScreen,
-.DocSearch-NoResults,
-.DocSearch-StartScreen {
-  font-size: 0.9em;
-  margin: 0 auto;
-  padding: 36px 0;
-  text-align: center;
-  width: 80%;
-}
-.DocSearch-Screen-Icon {
-  color: var(--docsearch-muted-color);
-  padding-bottom: 12px;
-}
-.DocSearch-NoResults-Prefill-List {
-  display: inline-block;
-  padding-bottom: 24px;
-  text-align: left;
-}
-.DocSearch-NoResults-Prefill-List ul {
-  display: inline-block;
-  padding: 8px 0 0;
-}
-.DocSearch-NoResults-Prefill-List li {
-  list-style-position: inside;
-  list-style-type: "» ";
-}
-.DocSearch-Prefill {
-  appearance: none;
-  background: none;
-  border: 0;
-  border-radius: 1em;
-  color: var(--docsearch-highlight-color);
-  cursor: pointer;
-  display: inline-block;
-  font-size: 1em;
-  font-weight: 700;
-  padding: 0;
-}
-.DocSearch-Prefill:focus,
-.DocSearch-Prefill:hover {
-  outline: none;
-  text-decoration: underline;
-}
-.DocSearch-Footer {
-  align-items: center;
-  background: var(--docsearch-footer-background);
-  border-radius: 0 0 8px 8px;
-  border-top: var(--docsearch-footer-border);
-  display: flex;
-  flex-direction: row-reverse;
-  flex-shrink: 0;
-  height: var(--docsearch-footer-height);
-  justify-content: space-between;
-  padding: 0 var(--docsearch-spacing);
-  position: relative;
-  user-select: none;
-  width: 100%;
-  z-index: 300;
-}
-.DocSearch-Commands {
-  color: var(--docsearch-muted-color);
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-.DocSearch-Commands li {
-  align-items: center;
-  display: flex;
-}
-.DocSearch-Commands li:not(:last-of-type) {
-  margin-right: 0.8em;
-}
-.DocSearch-Commands-Key {
-  align-items: center;
-  background: var(--docsearch-key-color);
-  border-radius: 2px;
-  display: flex;
-  height: 18px;
-  justify-content: center;
-  margin-right: 0.4em;
-  padding: 0 0 1px;
-  color: var(--docsearch-muted-color);
-  border: 0;
-  width: 20px;
-}
-@media (max-width: 768px) {
-  :root {
-    --docsearch-spacing: 10px;
-    --docsearch-footer-height: 40px;
-  }
-  .DocSearch-Dropdown {
-    height: 100%;
-  }
-  .DocSearch-Container {
-    height: 100vh;
-    height: -webkit-fill-available;
-    height: calc(var(--docsearch-vh, 1vh) * 100);
-    position: absolute;
-  }
-  .DocSearch-Footer {
-    border-radius: 0;
-    bottom: 0;
-    position: absolute;
-  }
-  .DocSearch-Hit-content-wrapper {
-    display: flex;
-    position: relative;
-    width: 80%;
-  }
-  .DocSearch-Modal {
-    border-radius: 0;
-    box-shadow: none;
-    height: 100vh;
-    height: -webkit-fill-available;
-    height: calc(var(--docsearch-vh, 1vh) * 100);
-    margin: 0;
-    max-width: 100%;
-    width: 100%;
-  }
-  .DocSearch-Dropdown {
-    max-height: calc(
-      var(--docsearch-vh, 1vh) * 100 - var(--docsearch-searchbox-height) -
-        var(--docsearch-spacing) - var(--docsearch-footer-height)
-    );
-  }
-  .DocSearch-Cancel {
-    appearance: none;
-    background: none;
-    border: 0;
-    color: var(--docsearch-highlight-color);
-    cursor: pointer;
-    display: inline-block;
-    flex: none;
-    font: inherit;
-    font-size: 1em;
-    font-weight: 500;
-    margin-left: var(--docsearch-spacing);
-    outline: none;
-    overflow: hidden;
-    padding: 0;
-    user-select: none;
-    white-space: nowrap;
-  }
-  .DocSearch-Commands,
-  .DocSearch-Hit-Tree {
-    display: none;
-  }
-}
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
diff --git a/assets/css/styles.css b/assets/css/styles.css
index 641ad6ecec..c387b5c175 100644
--- a/assets/css/styles.css
+++ b/assets/css/styles.css
@@ -3,7 +3,6 @@
 @import "tailwindcss/base";
 @import "/assets/css/global";
 @import "/assets/css/typography";
-@import "/assets/css/search";
 @import "/assets/css/hack";
 
 @import "tailwindcss/components";
diff --git a/assets/js/src/alpine.js b/assets/js/src/alpine.js
index 10efd93aa8..cdcdfeb930 100644
--- a/assets/js/src/alpine.js
+++ b/assets/js/src/alpine.js
@@ -1,12 +1,13 @@
 import Alpine from 'alpinejs'
 import collapse from '@alpinejs/collapse'
 import persist from '@alpinejs/persist'
+import focus from '@alpinejs/focus'
  
 window.Alpine = Alpine
 
 Alpine.plugin(collapse)
+Alpine.plugin(persist)
+Alpine.plugin(focus)
 Alpine.store("showSidebar", false)
 
-Alpine.plugin(persist)
-
 Alpine.start()
diff --git a/assets/js/src/search.js b/assets/js/src/search.js
index 310cc299f1..739cfc5908 100644
--- a/assets/js/src/search.js
+++ b/assets/js/src/search.js
@@ -1,17 +1,54 @@
-import docsearch from "@docsearch/js";
-import * as params from "@params"; // hugo dict
+import Fuse from "fuse.js";
 
-const { appid, apikey, indexname } = params;
+let indexed = false;
+let handler = null;
 
-docsearch({
-  container: "#docsearch",
-  appId: appid,
-  apiKey: apikey,
-  indexName: indexname,
-  transformItems(items) {
-    return items.map((item) => ({
-      ...item,
-      url: item.url.replace("https://docs.docker.com", ""),
-    }));
-  },
-});
+const modalSearchInput = document.querySelector("#modal-search-input");
+const modalSearchResults = document.querySelector("#modal-search-results");
+
+async function initializeIndex() {
+  const index = await fetch("/metadata.json").then((response) =>
+    response.json(),
+  );
+
+  const options = {
+    keys: [
+      { name: "title", weight: 2 },
+      { name: "description", weight: 1 },
+      { name: "keywords", weight: 1 },
+      { name: "tags", weight: 1 },
+    ],
+    minMatchCharLength: 2,
+    threshold: 0.2,
+  };
+
+  handler = new Fuse(index, options);
+  indexed = true;
+}
+
+async function executeSearch(query) {
+  !indexed && (await initializeIndex());
+  const results = handler.search(query).map(({ item }) => item);
+  return results
+}
+
+async function modalSearch(e) {
+  const query = e.target.value;
+  results = await executeSearch(query)
+
+  let resultsHTML = `<div>${results.length} results</div>`;
+  resultsHTML += results
+    .map((item) => {
+      return `<div class="bg-gray-light-100 dark:bg-gray-dark-200 rounded p-4">
+      <div class="flex flex-col">
+        <a class="link" href="${item.url}">${item.title}</a>
+        <p>${item.description}</p>
+      </div>
+      </div>`;
+    })
+    .join("");
+
+  modalSearchResults.innerHTML = resultsHTML;
+}
+
+modalSearchInput.addEventListener("input", modalSearch);
diff --git a/hugo_stats.json b/hugo_stats.json
index 058e63d8fe..60103762c9 100644
--- a/hugo_stats.json
+++ b/hugo_stats.json
@@ -112,6 +112,7 @@
       "Without-packages",
       "Without-systemd",
       "absolute",
+      "appearance-none",
       "aspect-video",
       "bake-action",
       "basis-1/3",
@@ -119,6 +120,7 @@
       "bg-accent-light",
       "bg-amber-light",
       "bg-amber-light-200",
+      "bg-background-dark/70",
       "bg-background-light",
       "bg-black/70",
       "bg-blue-light",
@@ -135,6 +137,7 @@
       "bg-pattern-purple",
       "bg-pattern-verde",
       "bg-red-light",
+      "bg-transparent",
       "bg-violet-light",
       "bg-white",
       "block",
@@ -160,6 +163,7 @@
       "dark:bg-blue-dark",
       "dark:bg-blue-dark-400",
       "dark:bg-gray-dark-100",
+      "dark:bg-gray-dark-100/70",
       "dark:bg-gray-dark-200",
       "dark:bg-gray-dark-300",
       "dark:bg-gray-dark-300/50",
@@ -174,6 +178,7 @@
       "dark:border-gray-dark-400",
       "dark:decoration-blue-dark",
       "dark:fill-blue-dark",
+      "dark:focus:outline-blue-dark",
       "dark:from-accent-dark",
       "dark:from-background-dark",
       "dark:from-blue-dark-400",
@@ -182,6 +187,7 @@
       "dark:hover:bg-blue-dark-500",
       "dark:hover:bg-gray-dark-500",
       "dark:hover:text-white",
+      "dark:outline-gray-dark",
       "dark:prose-invert",
       "dark:syntax-dark",
       "dark:text-blue-dark",
@@ -207,9 +213,11 @@
       "fixed",
       "flex",
       "flex-1",
+      "flex-auto",
       "flex-col",
       "flex-col-reverse",
       "flex-wrap",
+      "focus:outline-blue-light",
       "font-medium",
       "footnote-backref",
       "footnote-ref",
@@ -230,6 +238,7 @@
       "grid-cols-2",
       "group",
       "group-hover:block'",
+      "h-12",
       "h-16",
       "h-2",
       "h-32",
@@ -279,11 +288,17 @@
       "lg:pb-2",
       "lg:scale-100",
       "lg:text-base",
+      "lg:w-75ch",
       "lg:w-[1200px]",
+      "lg:w-[600px]",
+      "lg:w-[840px]",
       "link",
       "lntable",
       "lntd",
+      "m-2",
       "m-auto",
+      "max-h-[77vh]",
+      "max-h-[80vh]",
       "max-h-full",
       "max-w-56",
       "max-w-[1400px]",
@@ -304,6 +319,8 @@
       "md:hidden",
       "md:max-w-[66%]",
       "md:scale-100",
+      "md:w-full",
+      "min-h-0",
       "min-h-screen",
       "min-w-0",
       "ml-3",
@@ -311,6 +328,8 @@
       "mt-1",
       "mt-20",
       "mt-auto",
+      "mx-1",
+      "mx-8",
       "mx-auto",
       "my-0",
       "my-2",
@@ -321,9 +340,14 @@
       "object-cover",
       "openSUSE-and-SLES",
       "origin-bottom-right",
+      "outline",
+      "outline-2",
+      "outline-gray-light",
+      "overflow-auto",
       "overflow-clip",
       "overflow-hidden",
       "overflow-x-hidden",
+      "overflow-y-auto",
       "overflow-y-scroll",
       "p-1",
       "p-2",
@@ -350,6 +374,7 @@
       "px-3",
       "px-4",
       "py-1",
+      "py-12",
       "py-2",
       "py-20",
       "py-4",
@@ -366,6 +391,7 @@
       "rounded-[6px]",
       "rounded-b-lg",
       "rounded-full",
+      "rounded-lg",
       "rounded-sm",
       "scale-50",
       "scale-75",
@@ -415,13 +441,16 @@
       "w-8",
       "w-[1200px]",
       "w-[32px]",
+      "w-[840px]",
       "w-full",
       "w-lvw",
       "warning",
       "xl:grid-cols-3",
       "xl:grid-cols-4",
       "xl:grid-cols-main-xl",
+      "xl:w-100ch",
       "xl:w-[1200px]",
+      "xl:w-[800px]",
       "youtube-video",
       "z-10",
       "z-20",
diff --git a/layouts/_default/cli.html b/layouts/_default/cli.html
index f955e7c9f4..caea937496 100644
--- a/layouts/_default/cli.html
+++ b/layouts/_default/cli.html
@@ -12,7 +12,7 @@
   {{ .Scratch.Set "headings" slice }}
   {{ .Scratch.Set "subheadings" slice }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     <h1 class="scroll-mt-36">{{ .Title }}</h1>
     <table>
       <tbody>
diff --git a/layouts/_default/glossary.html b/layouts/_default/glossary.html
index 8d53593c3e..06eb46c6bd 100644
--- a/layouts/_default/glossary.html
+++ b/layouts/_default/glossary.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 00f336c158..262a25aad6 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index 9fcfc13010..6ca5ceb82b 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
diff --git a/layouts/index.metadata.json b/layouts/index.metadata.json
index 4eec480b0c..e3426bb18d 100644
--- a/layouts/index.metadata.json
+++ b/layouts/index.metadata.json
@@ -3,6 +3,10 @@
   {{- $title := partialCached "utils/title.html" . . -}}
   {{- $desc := partialCached "utils/description.html" . . -}}
   {{- $kwd := partialCached "utils/keywords.html" . . -}}
-  {{- jsonify (dict "url" .Permalink "title" $title "description" $desc "keywords" $kwd) -}},
+  {{- $tags := slice -}}
+  {{- range (.GetTerms "tags") -}}
+    {{ $tags = $tags | append .LinkTitle }}
+  {{- end -}}
+  {{- jsonify (dict "url" .Permalink "title" $title "description" $desc "keywords" $kwd "tags" $tags) -}},
 {{- end -}}
 {}]
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 532d2e3122..1daf30c4a9 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -68,15 +68,7 @@
 <script>{{ $theme.Content | safeJS }}</script>
 {{ $js := resources.Match "js/src/**.js"
   | resources.Concat "scripts.js"
-  | js.Build (dict
-    "params" (dict
-      "apikey" site.Params.algolia.apikey
-      "appid" site.Params.algolia.appid
-      "indexname" site.Params.algolia.indexname
-    )
-    "targetPath" "scripts.js"
-  )
+  | js.Build (dict "minify" true "targetPath" "scripts.js")
 }}
 <script defer src="{{ $js.Permalink }}"></script>
-<link rel="preconnect" href="https://{{ site.Params.algolia.appid }}-dsn.algolia.net" crossorigin />
 {{ partialCached "utils/resources.html" "-" }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 1d8613778e..a785b542e7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -1,4 +1,5 @@
-<header class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
+<header
+  class="sticky top-0 z-20 h-16 px-4 text-white bg-gradient-to-r from-accent-light to-blue-light-500 dark:from-accent-dark dark:to-blue-dark-100">
   <div class="mx-auto flex h-full max-w-[1400px] items-center justify-between">
     <div class="flex h-full items-center md:gap-8 gap-2">
       {{ if not .IsHome }}
@@ -18,7 +19,7 @@
       {{ partial "top-nav.html" . }}
     </div>
     <div class="flex items-center gap-6">
-      <div id="docsearch"></div>
+      {{ partialCached "search.html" "-" }}
       <button aria-label="Theme switch" id="theme-switch" class="svg-icon"
         x-data="{ theme: localStorage.getItem('theme-preference') }" x-init="$watch('theme', value => {
         localStorage.setItem('theme-preference', value);
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
new file mode 100644
index 0000000000..627def3433
--- /dev/null
+++ b/layouts/partials/search.html
@@ -0,0 +1,45 @@
+<div x-data="{ open: false }"
+  @keyup.escape.window="open = false; if (!open) { document.body.classList.remove('overflow-hidden'); }"
+  @keydown.window="(e) => {
+switch(e.key) {
+case 'k':
+  if (e.metaKey || e.ctrlKey) {
+     e.preventDefault()
+     open = !open;
+     if (open) {
+       document.body.classList.add('overflow-hidden');
+     } else {
+       document.body.classList.remove('overflow-hidden');
+     }
+  }
+}
+}">
+  <!-- search button -->
+  <button @click="open = true; document.body.classList.add('overflow-hidden');">
+    <span class="icon-svg">{{ partialCached "icon" "search" "search" }}</span>
+  </button>
+  <!-- search modal -->
+  <div class="fixed left-0 top-0 z-20 flex w-lvw justify-center py-12 text-gray-light-800 dark:text-gray-dark-800"
+    role="dialog" tabindex="-1" x-show="open" x-trap="open" x-cloak x-transition>
+    <div class="max-h-[80vh] overflow-hidden lg:w-[600px] xl:w-[800px] rounded-lg bg-white p-2 mx-8 dark:bg-background-dark w-full flex flex-col"
+      @click.away="open = false; document.body.classList.remove('overflow-hidden');">
+      <div class="m-2 text-xl">Search Docker documentation</div>
+      <header class="flex items-center py-2">
+        <input type="search" id="modal-search-input"
+          class="mx-1 flex h-12 flex-auto appearance-none rounded bg-transparent p-4 outline outline-2 outline-gray-light focus:outline-blue-light dark:outline-gray-dark dark:focus:outline-blue-dark"
+          placeholder="Search..." tabindex="0" />
+        <div class="icon-svg px-2">
+          {{ partialCached "icon" "search" "search" }}
+        </div>
+      </header>
+      <section class="overflow-y-auto px-2">
+        <div class="flex min-h-0 flex-col gap-2" id="modal-search-results">
+          <!-- results -->
+        </div>
+      </section>
+    </div>
+  </div>
+  <!-- search modal backdrop -->
+  <div class="fixed left-0 top-0 h-full w-full bg-background-dark/70 dark:bg-gray-dark-100/70" x-show="open" x-cloak>
+  </div>
+</div>
diff --git a/layouts/partials/utils/description.html b/layouts/partials/utils/description.html
index c0e6aa086d..107a4e7a1d 100644
--- a/layouts/partials/utils/description.html
+++ b/layouts/partials/utils/description.html
@@ -2,7 +2,6 @@
 {{ if .Description }}
   {{ $desc = .Description }}
 {{ else }}
-  {{ $desc = .Summary }}
   {{ with .File }}
     {{ with (index (site.Data.frontmatter) .Path) }}
       {{ with .description }}
diff --git a/layouts/samples/single.html b/layouts/samples/single.html
index 2de2f973f2..84b5f207ea 100644
--- a/layouts/samples/single.html
+++ b/layouts/samples/single.html
@@ -4,7 +4,7 @@
 
 {{ define "main" }}
   {{ partial "breadcrumbs.html" . }}
-  <article class="DocSearch-content prose max-w-none dark:prose-invert">
+  <article class="prose max-w-none dark:prose-invert">
     {{ with .Title }}
     <h1 class="scroll-mt-36">{{ . }}</h1>
     {{ end }}
diff --git a/package-lock.json b/package-lock.json
index efe3053d87..06e1a793ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,14 +10,15 @@
       "license": "Apache License 2.0",
       "dependencies": {
         "@alpinejs/collapse": "^3.13.5",
+        "@alpinejs/focus": "^3.13.7",
         "@alpinejs/persist": "^3.13.5",
-        "@docsearch/js": "^3.5.2",
         "@floating-ui/dom": "^1.6.3",
         "@material-symbols/svg-400": "^0.14.6",
         "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
         "@tailwindcss/typography": "^0.5.10",
         "alpinejs": "^3.13.5",
         "autoprefixer": "^10.4.17",
+        "fuse.js": "^7.0.0",
         "postcss": "^8.4.33",
         "postcss-cli": "^11.0.0",
         "postcss-import": "^16.0.0",
@@ -29,162 +30,6 @@
         "prettier-plugin-tailwindcss": "^0.5.11"
       }
     },
-    "node_modules/@algolia/autocomplete-core": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
-      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
-      "dependencies": {
-        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
-        "@algolia/autocomplete-shared": "1.9.3"
-      }
-    },
-    "node_modules/@algolia/autocomplete-plugin-algolia-insights": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
-      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
-      "dependencies": {
-        "@algolia/autocomplete-shared": "1.9.3"
-      },
-      "peerDependencies": {
-        "search-insights": ">= 1 < 3"
-      }
-    },
-    "node_modules/@algolia/autocomplete-preset-algolia": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
-      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
-      "dependencies": {
-        "@algolia/autocomplete-shared": "1.9.3"
-      },
-      "peerDependencies": {
-        "@algolia/client-search": ">= 4.9.1 < 6",
-        "algoliasearch": ">= 4.9.1 < 6"
-      }
-    },
-    "node_modules/@algolia/autocomplete-shared": {
-      "version": "1.9.3",
-      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
-      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
-      "peerDependencies": {
-        "@algolia/client-search": ">= 4.9.1 < 6",
-        "algoliasearch": ">= 4.9.1 < 6"
-      }
-    },
-    "node_modules/@algolia/cache-browser-local-storage": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-browser-local-storage/-/cache-browser-local-storage-4.22.1.tgz",
-      "integrity": "sha512-Sw6IAmOCvvP6QNgY9j+Hv09mvkvEIDKjYW8ow0UDDAxSXy664RBNQk3i/0nt7gvceOJ6jGmOTimaZoY1THmU7g==",
-      "dependencies": {
-        "@algolia/cache-common": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/cache-common": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-common/-/cache-common-4.22.1.tgz",
-      "integrity": "sha512-TJMBKqZNKYB9TptRRjSUtevJeQVXRmg6rk9qgFKWvOy8jhCPdyNZV1nB3SKGufzvTVbomAukFR8guu/8NRKBTA=="
-    },
-    "node_modules/@algolia/cache-in-memory": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/cache-in-memory/-/cache-in-memory-4.22.1.tgz",
-      "integrity": "sha512-ve+6Ac2LhwpufuWavM/aHjLoNz/Z/sYSgNIXsinGofWOysPilQZPUetqLj8vbvi+DHZZaYSEP9H5SRVXnpsNNw==",
-      "dependencies": {
-        "@algolia/cache-common": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/client-account": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-account/-/client-account-4.22.1.tgz",
-      "integrity": "sha512-k8m+oegM2zlns/TwZyi4YgCtyToackkOpE+xCaKCYfBfDtdGOaVZCM5YvGPtK+HGaJMIN/DoTL8asbM3NzHonw==",
-      "dependencies": {
-        "@algolia/client-common": "4.22.1",
-        "@algolia/client-search": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/client-analytics": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-analytics/-/client-analytics-4.22.1.tgz",
-      "integrity": "sha512-1ssi9pyxyQNN4a7Ji9R50nSdISIumMFDwKNuwZipB6TkauJ8J7ha/uO60sPJFqQyqvvI+px7RSNRQT3Zrvzieg==",
-      "dependencies": {
-        "@algolia/client-common": "4.22.1",
-        "@algolia/client-search": "4.22.1",
-        "@algolia/requester-common": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/client-common": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-common/-/client-common-4.22.1.tgz",
-      "integrity": "sha512-IvaL5v9mZtm4k4QHbBGDmU3wa/mKokmqNBqPj0K7lcR8ZDKzUorhcGp/u8PkPC/e0zoHSTvRh7TRkGX3Lm7iOQ==",
-      "dependencies": {
-        "@algolia/requester-common": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/client-personalization": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-personalization/-/client-personalization-4.22.1.tgz",
-      "integrity": "sha512-sl+/klQJ93+4yaqZ7ezOttMQ/nczly/3GmgZXJ1xmoewP5jmdP/X/nV5U7EHHH3hCUEHeN7X1nsIhGPVt9E1cQ==",
-      "dependencies": {
-        "@algolia/client-common": "4.22.1",
-        "@algolia/requester-common": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/client-search": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/client-search/-/client-search-4.22.1.tgz",
-      "integrity": "sha512-yb05NA4tNaOgx3+rOxAmFztgMTtGBi97X7PC3jyNeGiwkAjOZc2QrdZBYyIdcDLoI09N0gjtpClcackoTN0gPA==",
-      "dependencies": {
-        "@algolia/client-common": "4.22.1",
-        "@algolia/requester-common": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/logger-common": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-common/-/logger-common-4.22.1.tgz",
-      "integrity": "sha512-OnTFymd2odHSO39r4DSWRFETkBufnY2iGUZNrMXpIhF5cmFE8pGoINNPzwg02QLBlGSaLqdKy0bM8S0GyqPLBg=="
-    },
-    "node_modules/@algolia/logger-console": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/logger-console/-/logger-console-4.22.1.tgz",
-      "integrity": "sha512-O99rcqpVPKN1RlpgD6H3khUWylU24OXlzkavUAMy6QZd1776QAcauE3oP8CmD43nbaTjBexZj2nGsBH9Tc0FVA==",
-      "dependencies": {
-        "@algolia/logger-common": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/requester-browser-xhr": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-browser-xhr/-/requester-browser-xhr-4.22.1.tgz",
-      "integrity": "sha512-dtQGYIg6MteqT1Uay3J/0NDqD+UciHy3QgRbk7bNddOJu+p3hzjTRYESqEnoX/DpEkaNYdRHUKNylsqMpgwaEw==",
-      "dependencies": {
-        "@algolia/requester-common": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/requester-common": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-common/-/requester-common-4.22.1.tgz",
-      "integrity": "sha512-dgvhSAtg2MJnR+BxrIFqlLtkLlVVhas9HgYKMk2Uxiy5m6/8HZBL40JVAMb2LovoPFs9I/EWIoFVjOrFwzn5Qg=="
-    },
-    "node_modules/@algolia/requester-node-http": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/requester-node-http/-/requester-node-http-4.22.1.tgz",
-      "integrity": "sha512-JfmZ3MVFQkAU+zug8H3s8rZ6h0ahHZL/SpMaSasTCGYR5EEJsCc8SI5UZ6raPN2tjxa5bxS13BRpGSBUens7EA==",
-      "dependencies": {
-        "@algolia/requester-common": "4.22.1"
-      }
-    },
-    "node_modules/@algolia/transporter": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/@algolia/transporter/-/transporter-4.22.1.tgz",
-      "integrity": "sha512-kzWgc2c9IdxMa3YqA6TN0NW5VrKYYW/BELIn7vnLyn+U/RFdZ4lxxt9/8yq3DKV5snvoDzzO4ClyejZRdV3lMQ==",
-      "dependencies": {
-        "@algolia/cache-common": "4.22.1",
-        "@algolia/logger-common": "4.22.1",
-        "@algolia/requester-common": "4.22.1"
-      }
-    },
     "node_modules/@alloc/quick-lru": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
@@ -201,61 +46,19 @@
       "resolved": "https://registry.npmjs.org/@alpinejs/collapse/-/collapse-3.13.5.tgz",
       "integrity": "sha512-LHtSF/T3Zrhr0WOeVm4ebdXNH6ftqoZMbmkBTU1n/j8r0joV3oLUsPCyn5qOU8+27d2P/N2a057etOm0MH60oQ=="
     },
+    "node_modules/@alpinejs/focus": {
+      "version": "3.13.7",
+      "resolved": "https://registry.npmjs.org/@alpinejs/focus/-/focus-3.13.7.tgz",
+      "integrity": "sha512-fvTXBlQlSSxJpCeRu/9MaMK6zWgvaNN+uZ8ycHBy/R7G6xhGUA1/ymTpulz69n1eIuYPTNjb8EluyTSNN6PeeA==",
+      "dependencies": {
+        "focus-trap": "^6.9.4",
+        "tabbable": "^5.3.3"
+      }
+    },
     "node_modules/@alpinejs/persist": {
-      "version": "3.13.5",
-      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.13.5.tgz",
-      "integrity": "sha512-nmULi5Kp/v5/h4FtGpqyzzMPlulc2fmQ+Olhk0NwTcBKSCZDg6OtXgS998rnHpcWO0jsjCmvXn/Pul2av7D8lA=="
-    },
-    "node_modules/@braintree/sanitize-url": {
-      "version": "6.0.4",
-      "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
-      "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A==",
-      "dev": true
-    },
-    "node_modules/@docsearch/css": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
-      "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA=="
-    },
-    "node_modules/@docsearch/js": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@docsearch/js/-/js-3.5.2.tgz",
-      "integrity": "sha512-p1YFTCDflk8ieHgFJYfmyHBki1D61+U9idwrLh+GQQMrBSP3DLGKpy0XUJtPjAOPltcVbqsTjiPFfH7JImjUNg==",
-      "dependencies": {
-        "@docsearch/react": "3.5.2",
-        "preact": "^10.0.0"
-      }
-    },
-    "node_modules/@docsearch/react": {
-      "version": "3.5.2",
-      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz",
-      "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==",
-      "dependencies": {
-        "@algolia/autocomplete-core": "1.9.3",
-        "@algolia/autocomplete-preset-algolia": "1.9.3",
-        "@docsearch/css": "3.5.2",
-        "algoliasearch": "^4.19.1"
-      },
-      "peerDependencies": {
-        "@types/react": ">= 16.8.0 < 19.0.0",
-        "react": ">= 16.8.0 < 19.0.0",
-        "react-dom": ">= 16.8.0 < 19.0.0",
-        "search-insights": ">= 1 < 3"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        },
-        "search-insights": {
-          "optional": true
-        }
-      }
+      "version": "3.13.7",
+      "resolved": "https://registry.npmjs.org/@alpinejs/persist/-/persist-3.13.7.tgz",
+      "integrity": "sha512-H+Hv0gZbMimLSOq6P7w+fJEha6/tvKLlfqg7lHvcZQZ/u6T1d9bfdEDFetDoO1hmQjDnbk3cZwTRmFSW+On/4g=="
     },
     "node_modules/@floating-ui/core": {
       "version": "1.6.0",
@@ -433,27 +236,6 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.1.5.tgz",
       "integrity": "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="
     },
-    "node_modules/algoliasearch": {
-      "version": "4.22.1",
-      "resolved": "https://registry.npmjs.org/algoliasearch/-/algoliasearch-4.22.1.tgz",
-      "integrity": "sha512-jwydKFQJKIx9kIZ8Jm44SdpigFwRGPESaxZBaHSV0XWN2yBJAOT4mT7ppvlrpA4UGzz92pqFnVKr/kaZXrcreg==",
-      "dependencies": {
-        "@algolia/cache-browser-local-storage": "4.22.1",
-        "@algolia/cache-common": "4.22.1",
-        "@algolia/cache-in-memory": "4.22.1",
-        "@algolia/client-account": "4.22.1",
-        "@algolia/client-analytics": "4.22.1",
-        "@algolia/client-common": "4.22.1",
-        "@algolia/client-personalization": "4.22.1",
-        "@algolia/client-search": "4.22.1",
-        "@algolia/logger-common": "4.22.1",
-        "@algolia/logger-console": "4.22.1",
-        "@algolia/requester-browser-xhr": "4.22.1",
-        "@algolia/requester-common": "4.22.1",
-        "@algolia/requester-node-http": "4.22.1",
-        "@algolia/transporter": "4.22.1"
-      }
-    },
     "node_modules/alpinejs": {
       "version": "3.13.5",
       "resolved": "https://registry.npmjs.org/alpinejs/-/alpinejs-3.13.5.tgz",
@@ -871,6 +653,14 @@
         "node": ">=8"
       }
     },
+    "node_modules/focus-trap": {
+      "version": "6.9.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-6.9.4.tgz",
+      "integrity": "sha512-v2NTsZe2FF59Y+sDykKY+XjqZ0cPfhq/hikWVL88BqLivnNiEffAsac6rP6H45ff9wG9LL5ToiDqrLEP9GX9mw==",
+      "dependencies": {
+        "tabbable": "^5.3.3"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -932,6 +722,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/fuse.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+      "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -1614,15 +1412,6 @@
       "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
       "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="
     },
-    "node_modules/preact": {
-      "version": "10.19.3",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.19.3.tgz",
-      "integrity": "sha512-nHHTeFVBTHRGxJXKkKu5hT8C/YWBkPso4/Gad6xuj5dbptt9iF9NZr9pHbPhBrnT2klheu7mHTxTZ/LjwJiEiQ==",
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/preact"
-      }
-    },
     "node_modules/prettier": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.2.4.tgz",
@@ -1817,12 +1606,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/search-insights": {
-      "version": "2.13.0",
-      "resolved": "https://registry.npmjs.org/search-insights/-/search-insights-2.13.0.tgz",
-      "integrity": "sha512-Orrsjf9trHHxFRuo9/rzm0KIWmgzE8RMlZMzuhZOJ01Rnz3D0YBAe+V6473t6/H6c7irs6Lt48brULAiRWb3Vw==",
-      "peer": true
-    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2000,6 +1783,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/tabbable": {
+      "version": "5.3.3",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-5.3.3.tgz",
+      "integrity": "sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA=="
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.1",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.1.tgz",
diff --git a/package.json b/package.json
index f5b69fd602..279c8f0a69 100644
--- a/package.json
+++ b/package.json
@@ -16,13 +16,14 @@
   "dependencies": {
     "@alpinejs/collapse": "^3.13.5",
     "@alpinejs/persist": "^3.13.5",
-    "@docsearch/js": "^3.5.2",
+    "@alpinejs/focus": "^3.13.7",
     "@floating-ui/dom": "^1.6.3",
     "@material-symbols/svg-400": "^0.14.6",
     "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
     "@tailwindcss/typography": "^0.5.10",
     "alpinejs": "^3.13.5",
     "autoprefixer": "^10.4.17",
+    "fuse.js": "^7.0.0",
     "postcss": "^8.4.33",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
diff --git a/tailwind.config.js b/tailwind.config.js
index 8064ca927d..53096b7fc1 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -67,6 +67,7 @@ module.exports = {
     colors: {
       white: "#fff",
       black: "#000",
+      transparent: 'transparent',
 
       accent: {
         light: "#677285",