Changeset 097da22 in Klonkt for src/views/pages/search.ejs

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@…>

File:

• src/views/pages/search.ejs (modified) (3 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>