From a90670a36f9576607520c760a871cccc240baf8a Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 8 May 2026 13:39:53 -0400 Subject: [PATCH 1/2] Add site-wide Pagefind search bar to navbar Pagefind is already built in the Netlify pipeline; this exposes a search input in the global navbar (separate #site-search element so it doesn't conflict with the existing news-page #search). Adds matching styles for the navbar input and the results drawer, with a mobile fallback that lets the drawer flow inline inside the collapsed menu. Co-Authored-By: Claude Opus 4.7 (1M context) --- assets/css/style.css | 39 +++++++++++++++++++++++++++++ assets/js/main.js | 12 ++++++++- layouts/partials/shared/header.html | 4 ++- 3 files changed, 53 insertions(+), 2 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index 1c48a0d..e62a954 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1083,6 +1083,45 @@ ol.custom-ordered-list li::before { padding: 0 10px !important; } +/* Site-wide search bar in navbar */ +.site-search { + position: relative; + width: 100%; + max-width: 240px; +} +.site-search .pagefind-ui__search-input { + height: 38px; + font-size: 14px; + padding: 6px 12px; + border-radius: 0.5rem; + border: 1px solid #d0d4dd; + background-color: #fff; + width: 100%; +} +.site-search .pagefind-ui__search-clear { + font-size: 13px; +} +.site-search .pagefind-ui__drawer { + position: absolute !important; + top: 44px !important; + right: 0 !important; + left: auto !important; + width: min(420px, 90vw) !important; + max-height: 70vh; + overflow-y: auto; + z-index: 1050; +} +@media (max-width: 991.98px) { + .site-search { + max-width: 100%; + } + .site-search .pagefind-ui__drawer { + position: static !important; + width: 100% !important; + max-height: none; + } +} + /* Contact Us */ .contactP a { color: #171b26 !important; diff --git a/assets/js/main.js b/assets/js/main.js index fa0f6aa..b3fdcde 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -108,7 +108,17 @@ document.addEventListener("DOMContentLoaded", function () { // PageFind Init window.addEventListener('DOMContentLoaded', (event) => { - new PagefindUI({ element: "#search", showSubResults: true }); + if (document.getElementById("search")) { + new PagefindUI({ element: "#search", showSubResults: true }); + } + if (document.getElementById("site-search")) { + new PagefindUI({ + element: "#site-search", + showSubResults: true, + showImages: false, + resetStyles: false, + }); + } }); if (logos) { diff --git a/layouts/partials/shared/header.html b/layouts/partials/shared/header.html index cf6878b..fcca3fb 100644 --- a/layouts/partials/shared/header.html +++ b/layouts/partials/shared/header.html @@ -134,8 +134,10 @@ {{ end }} + + {{ if $navButton }} -
+
From 323b6bf9f62ad4446f15a0a5d79f7193c741e31e Mon Sep 17 00:00:00 2001 From: Ben Dichter Date: Fri, 8 May 2026 14:07:21 -0400 Subject: [PATCH 2/2] Switch search to icon toggle and fix Pagefind site-wide indexing - Replace inline navbar search input with a magnifier-icon toggle that opens a dropdown panel; closes on outside click or Escape. - Style the icon white for contrast against the dark navbar. - Add a small horizontal padding to the navbar container at mobile widths so the logo no longer touches the screen edge. - Remove data-pagefind-body from the news templates. That attribute scopes Pagefind indexing to the tagged element and silently excludes every page without it; with it wrapped around the news sidebar widget, only the 12 news pages were indexed. Removing it lets Pagefind index all ~143 pages, so queries like "lodging" now hit the relevant page (e.g. organizing-nwb-events). Co-Authored-By: Claude Opus 4.7 (1M context) --- assets/css/style.css | 85 ++++++++++++++++++++--------- assets/js/main.js | 28 ++++++++++ layouts/news/list.html | 2 +- layouts/news/single.html | 2 +- layouts/partials/shared/header.html | 15 ++++- 5 files changed, 101 insertions(+), 31 deletions(-) diff --git a/assets/css/style.css b/assets/css/style.css index e62a954..9708038 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -1083,42 +1083,73 @@ ol.custom-ordered-list li::before { padding: 0 10px !important; } -/* Site-wide search bar in navbar */ -.site-search { +/* Site-wide search: icon toggle + dropdown panel */ +.site-search-wrapper { position: relative; - width: 100%; - max-width: 240px; } -.site-search .pagefind-ui__search-input { - height: 38px; - font-size: 14px; - padding: 6px 12px; +.site-search-toggle { + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: 50% !important; + cursor: pointer; +} +.site-search-toggle:hover, +.site-search-toggle[aria-expanded="true"] { + background-color: rgba(255, 255, 255, 0.12) !important; +} +.site-search-toggle .bi-search { + font-size: 1.2rem; + line-height: 1; + color: #ffffff !important; +} +.site-search-toggle:hover .bi-search, +.site-search-toggle[aria-expanded="true"] .bi-search { + color: #ffffff !important; +} +.site-search-panel { + position: absolute; + top: calc(100% + 8px); + right: 0; + width: min(420px, 92vw); + background: #fff; + border: 1px solid #ebebeb; border-radius: 0.5rem; - border: 1px solid #d0d4dd; - background-color: #fff; - width: 100%; + box-shadow: 0 8px 24px rgba(33, 37, 41, 0.12); + padding: 12px; + z-index: 1050; } -.site-search .pagefind-ui__search-clear { - font-size: 13px; +.site-search-panel[hidden] { + display: none; } -.site-search .pagefind-ui__drawer { - position: absolute !important; - top: 44px !important; - right: 0 !important; +.site-search-panel .pagefind-ui__search-input { + width: 100%; + height: 40px; + font-size: 14px; + padding: 8px 12px; + border: 1px solid #d0d4dd; + border-radius: 0.5rem; +} +.site-search-panel .pagefind-ui__drawer { + position: static !important; + top: auto !important; + right: auto !important; left: auto !important; - width: min(420px, 90vw) !important; - max-height: 70vh; + width: 100% !important; + border: 0 !important; + box-shadow: none !important; + padding: 0 !important; + margin-top: 8px; + max-height: 60vh; overflow-y: auto; - z-index: 1050; } @media (max-width: 991.98px) { - .site-search { - max-width: 100%; - } - .site-search .pagefind-ui__drawer { - position: static !important; - width: 100% !important; - max-height: none; + .site-search-panel { + right: auto; + left: 0; + width: 100%; } } diff --git a/assets/js/main.js b/assets/js/main.js index b3fdcde..84e07cb 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -119,6 +119,34 @@ document.addEventListener("DOMContentLoaded", function () { resetStyles: false, }); } + + // Site-search toggle + const searchToggle = document.querySelector(".site-search-toggle"); + const searchPanel = document.querySelector(".site-search-panel"); + if (searchToggle && searchPanel) { + const closePanel = () => { + searchPanel.hidden = true; + searchToggle.setAttribute("aria-expanded", "false"); + }; + const openPanel = () => { + searchPanel.hidden = false; + searchToggle.setAttribute("aria-expanded", "true"); + const input = searchPanel.querySelector(".pagefind-ui__search-input"); + if (input) input.focus(); + }; + searchToggle.addEventListener("click", (e) => { + e.stopPropagation(); + searchPanel.hidden ? openPanel() : closePanel(); + }); + document.addEventListener("click", (e) => { + if (!searchPanel.hidden && !searchPanel.contains(e.target) && e.target !== searchToggle) { + closePanel(); + } + }); + document.addEventListener("keydown", (e) => { + if (e.key === "Escape" && !searchPanel.hidden) closePanel(); + }); + } }); if (logos) { diff --git a/layouts/news/list.html b/layouts/news/list.html index beb9296..4ac21a9 100644 --- a/layouts/news/list.html +++ b/layouts/news/list.html @@ -37,7 +37,7 @@

All Post

-
+
{{ $pages := where site.RegularPages "Section" "news" }} {{ $paginator := .Paginate $pages.ByWeight }} {{ range $paginator.Pages }} diff --git a/layouts/news/single.html b/layouts/news/single.html index 455e2b4..d50450a 100644 --- a/layouts/news/single.html +++ b/layouts/news/single.html @@ -131,7 +131,7 @@

{{ .Title }}

Recent News

-
+
{{ $pages := where .Site.RegularPages "Section" "news" }} {{ range first 4 ($pages.ByDate.Reverse) }}
diff --git a/layouts/partials/shared/header.html b/layouts/partials/shared/header.html index fcca3fb..32469f8 100644 --- a/layouts/partials/shared/header.html +++ b/layouts/partials/shared/header.html @@ -3,7 +3,7 @@
-
+