feat: Switch to pagefind component UI

assets/js/darkmode.js

@@ -26,8 +26,10 @@
     const effectiveTheme = getEffectiveTheme(theme);
     if (effectiveTheme === DARK_THEME) {
       document.documentElement.setAttribute("data-theme", DARK_THEME);
+      document.documentElement.setAttribute("data-pf-theme", DARK_THEME);
     } else {
       document.documentElement.removeAttribute("data-theme");
+      document.documentElement.removeAttribute("data-pf-theme");
     }
   }
 

assets/js/main.js

@@ -6,8 +6,8 @@ import "./highlightHeadline.js";
 import "./contentNavigation.js";
 import "./anchorlinks.js";
 import "./dropdown.js";
-import "./search.js";
 import "./interactiveMap.js";
 import "./expander.js";
 import "./dialog.js";
 import "./fipValidityComparison.js";
+import "./search.js";

assets/js/search.js

@@ -1,127 +1,23 @@
-import {
-  openOverlay,
-  closeOverlay,
-  addOverlayClickListener,
-} from "./overlay.js";
+function initMobileSearchButton() {
+  const searchButtons = document.querySelectorAll(".o-header__search-toggle");
+  const pagefindTrigger = document.querySelector("pagefind-modal-trigger");
 
-const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
-const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+  if (searchButtons.length === 0 || !pagefindTrigger) return;
 
-const initSearch = () => {
-  const search = document.getElementById("search");
-  const searchButtons = document.querySelectorAll(".o-header__search");
-  const isHome = document.querySelector(".o-startpage");
-  let placeholderText = search.dataset.placeholder;
-  let searchLabelText = search.dataset.label;
+  searchButtons.forEach((searchButton) => {
+    searchButton.addEventListener("click", () => {
+      if (typeof pagefindTrigger.openModal === "function") {
+        pagefindTrigger.openModal();
+        return;
+      }
 
-  if (!isMobile) {
-    if (isMac) {
-      placeholderText += " (⌘ + K)";
-    } else {
-      placeholderText += " (CTRL + K)";
-    }
-  }
-
-  new PagefindUI({
-    element: "#search",
-    highlightParam: "highlight",
-    showSubResults: true,
-    translations: {
-      placeholder: placeholderText,
-      search_label: searchLabelText,
-    },
-  });
-
-  // Close keyboard when touching search results (mobile only)
-  const searchDrawer = search.querySelector(".pagefind-ui__drawer");
-  searchDrawer.addEventListener("touchstart", () => {
-    if (!isMobile) return;
-    if (document.activeElement && document.activeElement.blur) {
-      document.activeElement.blur();
-    }
-  });
-
-  const searchElement = search.querySelector("input");
-
-  const updateSearchButtonLabels = (isOpen) => {
-    searchButtons.forEach((button) => {
-      const openLabel = button.dataset.labelOpen;
-      const closeLabel = button.dataset.labelClose;
-      const label = isOpen ? closeLabel : openLabel;
-      button.setAttribute("aria-label", label);
-      button.setAttribute("title", label);
-    });
-  };
-
-  const closeSearch = () => {
-    search.querySelector(".pagefind-ui__search-clear").click();
-    closeOverlay();
-    search.classList.remove("o-search--show");
-    updateSearchButtonLabels(false);
-  };
-
-  const openSearch = () => {
-    openOverlay("search");
-    search.classList.add("o-search--show");
-    searchElement.focus();
-    search.scrollIntoView({ behavior: "smooth", block: "start" });
-    updateSearchButtonLabels(true);
-  };
-
-  if (search && isHome) {
-    searchElement.addEventListener("focus", () => {
-      openSearch();
+      pagefindTrigger.querySelector("button")?.click();
     });
-    // If focus moves outside the search, close it
-    search.addEventListener(
-      "blur",
-      (e) => {
-        if (
-          e.relatedTarget &&
-          !search.contains(e.relatedTarget) &&
-          !Array.from(searchButtons).includes(e.relatedTarget)
-        ) {
-          closeSearch();
-        }
-      },
-      true,
-    );
-  }
-
-  const toggleSearch = () => {
-    if (search.classList.contains("o-search--show")) {
-      closeSearch();
-      return;
-    }
-    openSearch();
-  };
-
-  searchButtons.forEach((button) => {
-    button.addEventListener("click", toggleSearch);
   });
+}
 
-  // Toggle search on Ctrl + K or Cmd + K
-  document.addEventListener("keydown", (e) => {
-    if ((e.ctrlKey || e.metaKey) && e.key === "k") {
-      e.preventDefault();
-      toggleSearch();
-    }
-  });
-
-  // Close search on ESC
-  document.addEventListener("keydown", (e) => {
-    if (e.key === "Escape") {
-      closeSearch();
-    }
-  });
-
-  addOverlayClickListener(closeSearch);
-};
-
-if (document.readyState === "interactive") {
-  initSearch();
+if (document.readyState === "loading") {
+  document.addEventListener("DOMContentLoaded", initMobileSearchButton);
 } else {
-  window.addEventListener("DOMContentLoaded", () => {
-    initSearch();
-  });
+  initMobileSearchButton();
 }

assets/sass/_variables.scss

@@ -56,22 +56,71 @@ $highlight-colors-dark: (
   default: map-get($tag-colors-dark, info),
 );
 
-html {
-  --pagefind-ui-scale: 1 !important;
-  --pagefind-ui-text: #000;
+:root {
+  --font-family: "Roboto", Arial, Helvetica, sans-serif;
+
   --link-default: #{$link-default};
   --link-hovered: #{$link-hovered};
   --link-special: #{$link-special};
+
   --bg-default: #{$bg-default};
   --bg-neutral: #{$bg-neutral};
   --bg-accent: #{$bg-accent};
   --bg-code: #{$bg-code};
+
   --color-onLight: #{$color-onLight};
   --color-table-border: #{$color-table-border};
   --color-body: rgb(33, 37, 41);
   --color-success: #096640;
   --color-error: #ad1731;
 
+  --border-radius-s: 0.4rem;
+  --border-radius-m: 0.8rem;
+  --border-radius-l: 1.6rem;
+
+  --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
+  --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
+
+  --border: 0.1rem solid transparent;
+  --border-visible: 0.1rem solid #d0d0d0;
+  --outline-focus-indicator: #257fa8;
+
+  @media print {
+    --bg-neutral: white;
+  }
+
+  --container-max-width: 1320px;
+
+  @media (max-width: #{$breakpoint-xxl}) {
+    --container-max-width: 1140px;
+  }
+
+  @media (max-width: #{$breakpoint-xl}) {
+    --container-max-width: 960px;
+  }
+
+  @media (max-width: #{$breakpoint-lg}) {
+    --container-max-width: 720px;
+  }
+
+  @media (max-width: #{$breakpoint-md}) {
+    --container-max-width: 540px;
+  }
+
+  @media (max-width: #{$breakpoint-sm}) {
+    --container-max-width: calc(100vw - 3.2rem);
+  }
+
+  --pf-font: var(--font-family);
+  --pf-input-font-size: 1.8rem;
+  --pf-summary-font-size: 1.5rem;
+  --pf-result-title-font-size: 1.8rem;
+  --pf-result-excerpt-font-size: 1.5rem;
+  --pf-modal-max-width: var(--container-max-width);
+  --pf-outline-focus: var(--outline-focus-indicator);
+  --pf-border-radius: var(--border-radius-m);
+  --pf-background: var(--bg-default);
+
   @each $name, $color in $fip-validity-colors {
     --fip-validity-#{$name}: #{$color};
   }
@@ -85,33 +134,18 @@ html {
     --highlight-#{$name}-bg: #{mix(white, $color, 90%)};
     --highlight-#{$name}-color: #{$color};
   }
-
-  --border-radius-s: 0.4rem;
-  --border-radius-m: 0.8rem;
-  --border-radius-l: 1.6rem;
-  --pagefind-ui-border-radius: var(--border-radius-l) !important;
-  --pagefind-ui-border: #000 !important;
-  --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.25);
-  --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.1);
-  --border: 0.1rem solid transparent;
-  --border-visible: 0.1rem solid #d0d0d0;
-  --pagefind-ui-font: roboto, Arial, Helvetica, sans-serif;
-  --outline-focus-indicator: #257fa8;
-
-  @media print {
-    --bg-neutral: white;
-  }
 }
 
-html[data-theme="dark"] {
+:root[data-theme="dark"] {
   @media screen {
-    --pagefind-ui-text: #fff;
     --link-default: #ff6b3d;
     --link-hovered: #ff8a5b;
     --link-special: #ffffff;
+
     --bg-default: #151b23;
     --bg-neutral: #0d1117;
     --bg-accent: #86761a;
+
     --color-onLight: #ffffff;
     --color-table-border: #555;
     --color-body: #e0e0e0;
@@ -132,10 +166,8 @@ html[data-theme="dark"] {
       --highlight-#{$name}-color: #{$color};
     }
 
-    --pagefind-ui-border: #555;
     --box-shadow: 0 0.4rem 1rem rgba(0, 0, 0, 0.5);
     --box-shadow-light: 0.4rem 0.4rem 0.4rem rgba(0, 0, 0, 0.3);
-    --pagefind-ui-background: var(--bg-default);
     --border: 0.1rem solid #3d444d;
     --border-visible: 0.1rem solid #3d444d;
     --outline-focus-indicator: #2e9acb;

assets/sass/fonts.scss

@@ -123,7 +123,7 @@
 
 body,
 button {
-  font-family: "Roboto", Arial, Helvetica, sans-serif;
+  font-family: var(--font-family);
   word-wrap: break-word;
   hyphens: auto;
 }

assets/sass/header.scss

@@ -92,11 +92,6 @@
   z-index: 6;
 }
 
-#header:has(.overlay--search),
-.overlay--search {
-  z-index: 10;
-}
-
 #header:has(.overlay--mobileMenu),
 .overlay--mobileMenu {
   z-index: 14;

assets/sass/navigation.scss

@@ -33,6 +33,10 @@ menu > li > menu {
   padding-inline-start: 0;
 }
 
+.o-header__utility-menu {
+  gap: 0.6rem;
+}
+
 .o-header__item {
   list-style: none;
   display: flex;
@@ -222,6 +226,20 @@ menu > li > menu {
   }
 }
 
+.o-header__item--desktop-search {
+  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg}) {
+    display: none;
+  }
+}
+
+.o-header__item--desktop-search-icon {
+  display: none;
+
+  @media (min-width: #{$breakpoint-md}) and (max-width: #{$breakpoint-lg}) {
+    display: inline-flex;
+  }
+}
+
 .o-header__button {
   padding: 1rem;
   border: none;