Changeset 097da22 in Klonkt for src/views

Timestamp:

06/21/2026 05:26:47 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

fefb80c

Parents:

e579a98

Message:

feat(zoeken): live results while typing + search in events & pages

• /search/suggest JSON endpoint; overlay shows live (debounced) grouped results while typing, with "all results →" to the full page.
• Sources expanded: in addition to posts + tracks now also calendar events (shows: city/location/country/note, if the calendar is enabled) and site pages (Agenda/Downloads/Links/Press Kit/Archive, only those available). Full search page shows those sections too. NL/EN/DE.
• Overlay placeholder now translated (was hardcoded NL).

Co-Authored-By: Claude <noreply@…>

Location:

src/views

Files:

• pages/search.ejs (modified) (3 diffs)
• partials/topnav.ejs (modified) (4 diffs)

src/views/pages/search.ejs

@@ -1 +1 @@
 <% const _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : ''; %>
 <% const _tracks = (typeof tracks !== 'undefined' && tracks) ? tracks : []; %>
+<% const _events = (typeof events !== 'undefined' && events) ? events : []; %>
+<% const _pages = (typeof pages !== 'undefined' && pages) ? pages : []; %>
 <div class="container search-page">
   <h1><%= t('nav.search') %></h1>
@@ -89 +91 @@
   <% } %>
 
-  <% if (query && !queryError && !results.length && !_tracks.length) { %>
+  <% if (_events.length) { %>
+    <h2 class="search-section-title"><%= t('search.section_events') %></h2>
+    <ol class="search-results">
+      <% _events.forEach(function(ev) { %>
+        <li class="search-result">
+          <h3 class="search-result-title"><a href="<%= ev.url %>"><%= ev.where || '—' %></a></h3>
+          <p class="search-result-meta"><%= [ev.date, ev.time].filter(Boolean).join(' ') %></p>
+        </li>
+      <% }); %>
+    </ol>
+  <% } %>
+
+  <% if (_pages.length) { %>
+    <h2 class="search-section-title"><%= t('search.section_pages') %></h2>
+    <ul class="search-pages">
+      <% _pages.forEach(function(pg) { %>
+        <li><a class="search-page-link" href="<%= pg.url %>"><%= pg.label %> <span aria-hidden="true">→</span></a></li>
+      <% }); %>
+    </ul>
+  <% } %>
+
+  <% if (query && !queryError && !results.length && !_tracks.length && !_events.length && !_pages.length) { %>
     <p class="search-empty"><%= t('search.empty') %></p>
   <% } %>
@@ -211 +234 @@
   border-radius: 3px;
 }
+.search-pages { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
+.search-page-link {
+  display: inline-flex; align-items: center; gap: 0.3rem;
+  padding: 0.45rem 0.8rem; border: 1px solid var(--rule); border-radius: 999px;
+  color: var(--ink); text-decoration: none; font-size: 0.9rem; background: var(--paper-2);
+}
+.search-page-link:hover { border-color: var(--accent); color: var(--accent); }
 </style>

src/views/partials/topnav.ejs

@@ -183 +183 @@
 
 <!-- Search overlay (shared by mobile bottom-tab + desktop top-nav) -->
-<div id="search-overlay" class="search-overlay" hidden>
+<div id="search-overlay" class="search-overlay" hidden data-suggest="<%= _siteUrlBase %>/search/suggest" data-action="<%= _siteUrlBase %>/search">
   <div class="container">
     <form class="search-overlay-form" method="get" action="<%= _siteUrlBase %>/search">
-      <input type="search" name="q" placeholder="Zoeken in posts…" autocomplete="off">
-      <button type="submit" class="nav-btn" aria-label="Zoeken">
+      <input type="search" name="q" placeholder="<%= t('search.placeholder') %>" autocomplete="off">
+      <button type="submit" class="nav-btn" aria-label="<%= t('search.button') %>">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
       </button>
-      <button type="button" class="nav-btn" id="search-close" aria-label="Sluiten">
+      <button type="button" class="nav-btn" id="search-close" aria-label="<%= t('imed.cancel') %>">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
       </button>
     </form>
+    <div id="search-suggest" class="search-suggest" data-lenis-prevent></div>
   </div>
 </div>
@@ -215 +216 @@
   function overlay() { return document.getElementById('search-overlay'); }
   function openSearch() { var o = overlay(); if (o) { o.hidden = false; var i = o.querySelector('input'); if (i) i.focus(); } }
-  function closeSearch() { var o = overlay(); if (o) o.hidden = true; }
+  function closeSearch() { var o = overlay(); if (o) { o.hidden = true; var b = document.getElementById('search-suggest'); if (b) b.innerHTML = ''; } }
 
   document.body.addEventListener('click', function(e) {
@@ -228 +229 @@
 
   document.addEventListener('keydown', function(e) {
-    if (e.key === 'Escape') { var o = overlay(); if (o && !o.hidden) o.hidden = true; }
+    if (e.key === 'Escape') { var o = overlay(); if (o && !o.hidden) closeSearch(); }
+  });
+
+  // ── Live resultaten tijdens typen ───────────────────────────────
+  var _ST = {
+    posts: '<%= t('search.section_posts') %>', tracks: '<%= t('search.section_tracks') %>',
+    events: '<%= t('search.section_events') %>', pages: '<%= t('search.section_pages') %>',
+    all: '<%= t('search.suggest_all') %>', none: '<%= t('search.suggest_empty') %>'
+  };
+  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function(c){ return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c]; }); }
+  function renderSuggest(box, d, q, ov) {
+    var html = '';
+    function grp(title, items, fmt) {
+      if (!items || !items.length) return;
+      html += '<div class="ss-group"><div class="ss-title">' + esc(title) + '</div>' + items.map(fmt).join('') + '</div>';
+    }
+    grp(_ST.posts, d.posts, function(p){ return '<a class="ss-item" href="' + esc(p.url) + '">' + esc(p.title) + '</a>'; });
+    grp(_ST.tracks, d.tracks, function(tk){ var sub = tk.artist ? ' <span class="ss-sub">' + esc(tk.artist) + '</span>' : ''; return tk.url ? '<a class="ss-item" href="' + esc(tk.url) + '">' + esc(tk.title) + sub + '</a>' : '<span class="ss-item ss-noclick">' + esc(tk.title) + sub + '</span>'; });
+    grp(_ST.events, d.events, function(ev){ return '<a class="ss-item" href="' + esc(ev.url) + '">' + esc(ev.where || ev.when) + ' <span class="ss-sub">' + esc(ev.when) + '</span></a>'; });
+    grp(_ST.pages, d.pages, function(pg){ return '<a class="ss-item" href="' + esc(pg.url) + '">' + esc(pg.label) + '</a>'; });
+    var hasAny = (d.posts && d.posts.length) || (d.tracks && d.tracks.length) || (d.events && d.events.length) || (d.pages && d.pages.length);
+    if (!hasAny) { box.innerHTML = '<div class="ss-empty">' + esc(_ST.none) + '</div>'; return; }
+    var action = (ov && ov.getAttribute('data-action')) || '/search';
+    html += '<a class="ss-all" href="' + esc(action) + '?q=' + encodeURIComponent(q) + '">' + esc(_ST.all) + '</a>';
+    box.innerHTML = html;
+  }
+  var _sTimer;
+  document.addEventListener('input', function(e) {
+    var inp = e.target.closest && e.target.closest('#search-overlay input[name="q"]');
+    if (!inp) return;
+    var box = document.getElementById('search-suggest');
+    if (!box) return;
+    var q = inp.value.trim();
+    clearTimeout(_sTimer);
+    if (q.length < 2) { box.innerHTML = ''; return; }
+    _sTimer = setTimeout(function() {
+      var ov = document.getElementById('search-overlay');
+      var url = (ov && ov.getAttribute('data-suggest')) || '/search/suggest';
+      fetch(url + '?q=' + encodeURIComponent(q))
+        .then(function(r){ return r.ok ? r.json() : null; })
+        .then(function(d){ if (d) renderSuggest(box, d, q, ov); })
+        .catch(function(){});
+    }, 200);
+  });
+  // Klik op een suggestie → overlay sluiten (de link/boost doet de navigatie).
+  document.addEventListener('click', function(e) {
+    if (e.target.closest && e.target.closest('#search-suggest a')) { var o = overlay(); if (o) o.hidden = true; }
   });
 })();
@@ -499 +546 @@
   display: inline-flex; align-items: center; justify-content: center;
 }
+/* Live-resultaten dropdown */
+.search-suggest { margin-top: .6rem; max-height: 60vh; overflow-y: auto; display: flex; flex-direction: column; gap: .25rem; }
+.search-suggest:empty { display: none; }
+.ss-group { padding: .25rem 0; }
+.ss-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft, var(--ink-muted)); padding: .35rem .25rem .2rem; }
+.ss-item { display: block; padding: .55rem .6rem; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .95rem; }
+.ss-item:hover { background: var(--paper-2); color: var(--accent); }
+.ss-item.ss-noclick { opacity: .7; cursor: default; }
+.ss-sub { color: var(--ink-soft, var(--ink-muted)); font-size: .85em; }
+.ss-empty { padding: .8rem .6rem; color: var(--ink-soft, var(--ink-muted)); font-size: .9rem; }
+.ss-all { display: block; margin-top: .35rem; padding: .55rem .6rem; border-top: 1px solid var(--rule); color: var(--accent); font-weight: 600; text-decoration: none; font-size: .9rem; }
+.ss-all:hover { text-decoration: underline; }
 </style>