feat: add global keyboard shortcut for search functionality

- Introduced `/zoeken` shortcut (`Ctrl/Cmd + K`) using `search-shortcut.js` for improved navigation.
- Enhanced `/zoeken` integration with metadata support in JSON-LD for `SearchAction`.
- Refined query handling in `pagefind-search.js` to update search parameters dynamically.
- Removed redundant "Zoeken" link in the header for a cleaner UI.
- Updated build and deployment scripts to align with changes.

Author: denmette

.github/workflows/static.yml

@@ -41,7 +41,7 @@ jobs:
             ${{ runner.os }}-hugo-
 
       - name: Build Site
-        run: npm run build:css
+        run: npm run build
 
       - name: Configure AWS credentials
         uses: aws-actions/configure-aws-credentials@61815dcd50bd041e203e49132bacad1fd04d2708 # v5
@@ -51,4 +51,4 @@ jobs:
           aws-region: eu-west-1
 
       - name: Sync to S3
-        run: aws s3 sync public/ s3://${{ secrets.S3_BUCKET_NAME }}/ --delete
+        run: aws s3 sync public/ s3://${{ secrets.S3_BUCKET_NAME }}/ --delete

package.json

@@ -4,7 +4,8 @@
   "scripts": {
     "build": "hugo --minify && pagefind --site public",
     "build:css": "npm run build",
-    "dev": "pagefind --site public && hugo server --buildFuture --disableFastRender --buildDrafts --cleanDestinationDir"
+    "pagefind": "pagefind --site public",
+    "dev": "hugo --cleanDestinationDir --buildFuture --buildDrafts && pagefind --site public && hugo server --buildFuture --disableFastRender --buildDrafts"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.1.18",

static/js/pagefind-search.js

@@ -9,6 +9,15 @@ import * as pagefind from "/pagefind/pagefind.js";
     return;
   }
 
+  if (
+    window.location.search.indexOf("focus=1") !== -1 ||
+    window.location.hash === "#search"
+  ) {
+    window.requestAnimationFrame(function () {
+      input.focus();
+    });
+  }
+
   var formatter = new Intl.DateTimeFormat("nl-BE", {
     day: "numeric",
     month: "long",
@@ -17,6 +26,7 @@ import * as pagefind from "/pagefind/pagefind.js";
 
   var debounceId = null;
   var activeSearch = 0;
+  var debounceDelay = 250;
 
   function setStatus(message) {
     statusEl.textContent = message;
@@ -39,6 +49,7 @@ import * as pagefind from "/pagefind/pagefind.js";
       .filter(Boolean);
   }
 
+
   function formatDate(value) {
     if (!value) {
       return "";
@@ -111,9 +122,27 @@ import * as pagefind from "/pagefind/pagefind.js";
     resultsEl.innerHTML = "";
   }
 
-  async function runSearch(query) {
+  function updateQueryParam(query) {
+    var params = new URLSearchParams(window.location.search);
+    if (query) {
+      params.set("q", query);
+    } else {
+      params.delete("q");
+    }
+    var next = window.location.pathname;
+    var nextQuery = params.toString();
+    if (nextQuery) {
+      next += "?" + nextQuery;
+    }
+    window.history.replaceState(null, "", next);
+  }
+
+  async function runSearch(query, fromInput) {
     var searchId = (activeSearch += 1);
     setStatus("Zoeken...");
+    if (fromInput) {
+      updateQueryParam(query);
+    }
 
     try {
       var search = await pagefind.search(query);
@@ -137,6 +166,7 @@ import * as pagefind from "/pagefind/pagefind.js";
 
       resultsEl.innerHTML = "";
       resultsEl.appendChild(fragment);
+
       setStatus(
         search.results.length +
           (search.results.length === 1 ? " resultaat" : " resultaten") +
@@ -155,6 +185,7 @@ import * as pagefind from "/pagefind/pagefind.js";
     if (!query) {
       activeSearch += 1;
       clearResults();
+      updateQueryParam("");
       return;
     }
 
@@ -163,7 +194,19 @@ import * as pagefind from "/pagefind/pagefind.js";
     }
 
     debounceId = window.setTimeout(function () {
-      runSearch(query);
-    }, 150);
+      runSearch(query, true);
+    }, debounceDelay);
   });
+
+  function initializeFromQuery() {
+    var params = new URLSearchParams(window.location.search);
+    var query = params.get("q");
+    if (!query) {
+      return;
+    }
+    input.value = query;
+    runSearch(query, false);
+  }
+
+  initializeFromQuery();
 })();

static/js/search-shortcut.js

@@ -0,0 +1,65 @@
+(function () {
+  function isEditableTarget(target) {
+    if (!target) {
+      return false;
+    }
+
+    var tag = target.tagName;
+    if (!tag) {
+      return false;
+    }
+
+    var name = tag.toLowerCase();
+    if (name === "input" || name === "textarea" || name === "select") {
+      return true;
+    }
+
+    return target.isContentEditable === true;
+  }
+
+  function isMacPlatform() {
+    var platform = navigator.platform || "";
+    var userAgent = navigator.userAgent || "";
+    return /Mac/.test(platform) || /Macintosh|Mac OS X/.test(userAgent);
+  }
+
+  function handleShortcut(event) {
+    if (event.defaultPrevented) {
+      return;
+    }
+
+    if (event.isComposing) {
+      return;
+    }
+
+    var isMac = isMacPlatform();
+    var hasModifier = isMac ? event.metaKey : event.ctrlKey;
+    if (!(hasModifier && event.key.toLowerCase() === "k")) {
+      return;
+    }
+
+    if (isEditableTarget(event.target)) {
+      return;
+    }
+
+    event.preventDefault();
+
+    var searchUrl =
+      (document.body && document.body.getAttribute("data-search-url")) ||
+      "/zoeken/";
+    var searchPath = searchUrl.split("?")[0];
+
+    if (window.location.pathname === searchPath) {
+      var input = document.querySelector("#search-input");
+      if (input) {
+        input.focus();
+      }
+      return;
+    }
+
+    var target = searchUrl.indexOf("?") === -1 ? searchUrl + "?focus=1" : searchUrl + "&focus=1";
+    window.location.assign(target);
+  }
+
+  window.addEventListener("keydown", handleShortcut);
+})();

themes/custom/layouts/_default/baseof.html

@@ -4,15 +4,16 @@
     {{ partial "head.html" . }}
     {{ block "head" . }}{{ end }}
   </head>
-  <body class="bg-slate-50 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100">
+  <body class="bg-slate-50 text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100" data-search-url="{{ "/zoeken/" | relURL }}"{{ if not (and .IsPage (eq .Section "posts")) }} data-pagefind-ignore{{ end }}>
     <a class="sr-only focus-visible:not-sr-only focus-visible:absolute focus-visible:left-6 focus-visible:top-4 focus-visible:z-50 focus-visible:rounded focus-visible:bg-white focus-visible:px-3 focus-visible:py-2 focus-visible:text-sm focus-visible:font-semibold focus-visible:text-slate-900 focus-visible:shadow focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-slate-900 dark:focus-visible:bg-slate-900 dark:focus-visible:text-slate-100 dark:focus-visible:outline-slate-100" href="#main">Ga naar inhoud</a>
     {{ partial "header.html" . }}
-    <main id="main" class="mx-auto max-w-3xl px-6 py-8" data-pagefind-body>
+    <main id="main" class="mx-auto max-w-3xl px-6 py-8"{{ if and .IsPage (eq .Section "posts") }} data-pagefind-body{{ end }}>
       {{ block "main" . }}{{ end }}
     </main>
     {{ partial "footer.html" . }}
     {{ partial "cookie-banner.html" . }}
     {{ partial "cookie-preferences.html" . }}
     <script src="/js/cookie-consent.js" defer></script>
+    <script src="/js/search-shortcut.js" defer></script>
   </body>
 </html>

themes/custom/layouts/partials/header.html

@@ -17,10 +17,6 @@
     </a>
     <div class="ml-auto flex items-center gap-3 md:gap-4">
       {{ partial "nav.html" . }}
-      <a
-        class="inline-flex items-center rounded px-2 py-1 text-sm font-semibold text-slate-700 hover:text-moss hover:underline focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-moss dark:text-slate-300 dark:hover:text-mustard dark:focus-visible:outline-moss"
-        href="/zoeken/"
-      >Zoeken</a>
       <button
         class="inline-flex items-center justify-center rounded-full border border-slate-200 bg-white p-2 text-slate-700 transition hover:border-slate-300 hover:text-slate-900 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-moss/70 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-50 motion-reduce:transition-none dark:border-slate-800 dark:bg-slate-900 dark:text-slate-200 dark:hover:border-slate-700 dark:hover:text-white dark:focus-visible:ring-moss/70 dark:focus-visible:ring-offset-slate-950"
         type="button"

themes/custom/layouts/partials/pagefind-meta.html

@@ -9,4 +9,8 @@
 {{- with .Params.tags -}}
 <meta data-pagefind-meta="tags:{{ delimit . ", " }}">
 {{- end -}}
+<meta data-pagefind-meta="kind:{{ .Kind }}">
+{{- with .Section -}}
+<meta data-pagefind-meta="section:{{ . }}">
+{{- end -}}
 <meta data-pagefind-meta="title:{{ .Title }}">

themes/custom/layouts/partials/schema-jsonld.html

@@ -114,6 +114,12 @@
   "url" $siteURL
   "publisher" (dict "@id" $orgId)
 -}}
+{{- $searchTarget := printf "%szoeken/?q={search_term_string}" $siteURL -}}
+{{- $website = merge $website (dict "potentialAction" (dict
+  "@type" "SearchAction"
+  "target" $searchTarget
+  "query-input" "required name=search_term_string"
+)) -}}
 {{- $nodes = $nodes | append $website -}}
 
 {{- $siteDescription := .Site.Params.descriptionLong | default .Site.Params.description -}}