Feat search

Makefile

@@ -2,7 +2,6 @@
 .DEFAULT_GOAL := help
 SHELL:=/bin/bash
 
-
 # Add help text after each target name starting with '\#\#'
 help:   ## show this help
 	@echo -e "Help for this makefile\n"
@@ -30,6 +29,7 @@ SPEC_DIR = content/specs/steering-committee
 TEAMS = community-managers community-leaders emeritus-community-leaders
 SPEC_TEAMS = spec-steering-committee emeritus-spec-steering-committee
 TEAMS_QUERY = python themes/scientific-python-hugo-theme/tools/team_query.py
+SEARCH = (echo "Installing \`pagefind\` and generating search index..." && npx --yes pagefind --site public)
 
 $(TEAMS_DIR)/%.toml:
 	$(TEAMS_QUERY) --org scientific-python --team "$*"  >  $(TEAMS_DIR)/$*.toml
@@ -55,12 +55,18 @@ content/specs/core-projects/core-projects.json: content/specs/core-projects/[^_]
 	@python tools/md-header-to-json.py $? > $@
 
 html: prepare calendars core-project-json ## build the website in ./public
+	hugo --themesDir="./themes";
+	$(SEARCH)
 	@hugo
 
 serve: prepare calendars core-project-json ## serve the website
+	hugo --themesDir="./themes";
+	$(SEARCH)
 	@hugo --printI18nWarnings server
 
 serve-dev: prepare calendars
+	hugo --themesDir="../";
+	$(SEARCH)
 	@hugo --printI18nWarnings server --disableFastRender
 
 clean:

assets/css/search.css

@@ -0,0 +1,26 @@
+.search-button {
+  border-radius: 20px;
+  padding: 8px;
+  margin-right: 15px;
+  cursor: pointer;
+}
+.search-dialog {
+  padding: 15px;
+  width: 80%;
+  border-radius: 1rem;
+}
+.search-dialog::backdrop {
+  background-color: rgb(0, 0, 0, 0.5);
+  backdrop-filter: blur(3px);
+}
+.search-dialog input {
+  padding: 10px 15px;
+  color: #333;
+}
+.pagefind-ui button {
+  border: none;
+}
+/* unset a pagefind color setting to make results more legible in dark mode */
+.pagefind-ui__result-title > .pagefind-ui__result-link {
+  color: unset !important;
+}

assets/js/search.js

@@ -0,0 +1,123 @@
+// This file is attributed to the Scientific Python Developers
+// Source: https://github.com/scientific-python/scientific-python-hugo-theme/pull/615/files
+
+// BSD 3-Clause License
+
+// Copyright (c) 2021--2023, Scientific Python Developers
+// All rights reserved.
+
+// Redistribution and use in source and binary forms, with or without
+// modification, are permitted provided that the following conditions are met:
+
+// 1. Redistributions of source code must retain the above copyright notice, this
+//    list of conditions and the following disclaimer.
+
+// 2. Redistributions in binary form must reproduce the above copyright notice,
+//    this list of conditions and the following disclaimer in the documentation
+//    and/or other materials provided with the distribution.
+
+// 3. Neither the name of the copyright holder nor the names of its
+//    contributors may be used to endorse or promote products derived from
+//    this software without specific prior written permission.
+
+// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+// DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+// FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+// DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+// SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+// CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+// OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+// OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+
+// ----
+
+// Adapted from the Hugo Fresh theme, which has the following license:
+
+// MIT License
+
+// Copyright (c) 2019 Stefan M.
+
+// Permission is hereby granted, free of charge, to any person obtaining a copy
+// of this software and associated documentation files (the "Software"), to deal
+// in the Software without restriction, including without limitation the rights
+// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+// copies of the Software, and to permit persons to whom the Software is
+// furnished to do so, subject to the following conditions:
+
+// The above copyright notice and this permission notice shall be included in all
+// copies or substantial portions of the Software.
+
+// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+// SOFTWARE.
+
+"use strict";
+
+window.addEventListener("DOMContentLoaded", () => {
+  let searchDialog = document.querySelector(".search-dialog");
+  let searchButton = document.getElementById("search-button");
+
+  // Do nothing here if search is not enabled.
+  if (!searchDialog || !searchButton) return;
+
+  const isMac = /(Mac|iPhone|iPod|iPad)/i.test(navigator.userAgent);
+  searchButton.title = `Search (${isMac ? "⌘" : "Ctrl"} + K)`;
+
+  new PagefindUI({
+    element: ".search-dialog",
+    autofocus: true,
+    resetStyles: false,
+    showSubResults: true,
+  });
+
+  let showSearch = () => searchDialog.showModal();
+  let hideSearch = () => searchDialog.close();
+
+  let toggleSearch = () => {
+    if (!searchDialog.open) {
+      showSearch();
+    } else {
+      hideSearch();
+    }
+  };
+
+  let isClickOutside = (elem, clickEvt) => {
+    const elemDims = elem.getBoundingClientRect();
+    return (
+      clickEvt.clientX < elemDims.left ||
+      clickEvt.clientX > elemDims.right ||
+      clickEvt.clientY < elemDims.top ||
+      clickEvt.clientY > elemDims.bottom
+    );
+  };
+
+  // Close the search dialog if user clicks outside of it when it is open.
+  // This feels like functionality that should really be natively supported
+  // by the dialog element already.
+  // https://blog.webdevsimplified.com/2023-04/html-dialog/
+  searchDialog.addEventListener("click", (evt) => {
+    if (searchDialog.open && isClickOutside(searchDialog, evt)) {
+      hideSearch();
+    }
+  });
+
+  window.addEventListener("keydown", (evt) => {
+    if (
+      ((isMac && evt.metaKey) || (!isMac && evt.ctrlKey)) &&
+      evt.key === "k"
+    ) {
+      evt.preventDefault(); // prevents default browser behaviour
+      toggleSearch();
+    }
+  });
+
+  document
+    .querySelector(".search-button")
+    .addEventListener("click", showSearch);
+});

config.yaml

@@ -20,7 +20,7 @@ params:
   author:
     name: Scientific Python team
   description: Community developed and owned ecosystem for scientific computing
-
+  search: true
   fonts:
     - name: "Lato"
       weights: [400, 900]

netlify.toml

@@ -1,7 +1,8 @@
 [build.environment]
   PYTHON_VERSION = "3.13"
-  HUGO_VERSION = "0.141.0"
-  DART_SASS_VERSION = "1.83.4"
+  HUGO_VERSION = "0.142.0"
+  NODE_VERSION = "20"
+  DART_SASS_VERSION = "1.79.4"
   DART_SASS_URL = "https://github.com/sass/dart-sass/releases/download/"
 
 [build]