source: Klonkt/src/views/pages/search.ejs@ 86fa2d2

<% 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>

  <form method="get" action="<%= _base %>/search" class="search-page-form">
    <input
      type="search"
      name="q"
      value="<%= query %>"
      placeholder="<%= t('search.placeholder') %>"
      autocomplete="off"
      autofocus
      aria-label="<%= t('nav.search') %>">
    <button type="submit" class="btn btn-primary"><%= t('search.button') %></button>
  </form>

  <% if (queryError) { %>
    <p class="search-error"><%= t('search.error') %></p>
  <% } %>

  <% if (query && !queryError) { %>
    <p class="search-meta">
      <%= t(total === 1 ? 'search.results_one' : 'search.results_other', { n: total, q: query }) %>
    </p>
  <% } %>

  <% if (_tracks.length) { %>
    <h2 class="search-section-title"><%= t('search.section_tracks') %></h2>
    <% var _inPost = t('search.in_post'); /* t() vóór de loop ophalen: function(t) overschaduwt 'm */ %>
    <div class="search-tracks">
      <% _tracks.forEach(function(t) {
           const tj = JSON.stringify({ id: t.id, url: t.url, title: t.title, artist: t.artist || '', cover: t.cover || '' })
             .replace(/&/g, '&amp;').replace(/'/g, '&#39;').replace(/</g, '&lt;'); %>
        <div class="post-audio-track search-track" id="track-<%= t.id %>"
             data-pcms-track-id="<%= t.id %>" data-pcms-track-url="<%= t.url %>"
             data-pcms-track='<%- tj %>'>
          <button type="button" class="pat-play" aria-label="Speel <%= t.title %>">
            <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 4l12 8-12 8z"/></svg>
          </button>
          <% if (t.cover) { %>
            <span class="search-track-cover" style="background-image:url('<%= t.cover %>')" aria-hidden="true"></span>
          <% } %>
          <div class="pat-info">
            <div class="pat-title"><%= t.title %></div>
            <% if (t.artist || t.album) { %>
              <div class="pat-artist">
                <%= t.artist %><% if (t.artist && t.album) { %> &middot; <% } %><%= t.album %>
              </div>
            <% } %>
          </div>
          <% if (t.postUrl) { %>
            <a class="search-track-link"
               href="<%= t.postUrl %>"
               hx-get="<%= t.postUrl %>?partial=1"
               hx-target="#pcms-main"
               hx-swap="innerHTML"
               hx-push-url="<%= t.postUrl %>"
               aria-label="<%= _inPost %>"><%= _inPost %></a>
          <% } %>
        </div>
      <% }); %>
    </div>
  <% } %>

  <% if (results && results.length) { %>
    <% if (_tracks.length) { %><h2 class="search-section-title"><%= t('search.section_posts') %></h2><% } %>
    <ol class="search-results">
      <% results.forEach(function(r) { %>
        <li class="search-result">
          <h3 class="search-result-title">
            <a href="<%= _base %>/<%= r.slug %>"
               hx-get="<%= _base %>/<%= r.slug %>?partial=1"
               hx-target="#pcms-main"
               hx-swap="innerHTML"
               hx-push-url="<%= _base %>/<%= r.slug %>"
               hx-indicator="#pcms-loading">
              <%= r.title || '(zonder titel)' %>
            </a>
          </h3>
          <p class="search-result-meta">
            <%= r.author_username %>
            <% if (r.published_at) { %> &middot; <%= formatDate(r.published_at) %><% } %>
          </p>
          <p class="search-result-snippet"><%- r.snippet %></p>
        </li>
      <% }); %>
    </ol>
  <% } %>

  <% 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>
  <% } %>
</div>

<style>
.search-page { max-width: 720px; margin: 3rem auto; padding: 0 1rem; }
.search-page h1 { font-family: var(--font-display, serif); font-size: 2rem; margin: 0 0 1.5rem; }

.search-page-form {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.search-page-form input {
  flex: 1;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: 5px;
  background: var(--paper-2);
  color: var(--ink);
  font-size: 1rem;
}
.search-page-form input:focus {
  outline: none;
  border-color: var(--accent);
}

.search-meta {
  color: var(--ink-muted, var(--ink-soft));
  font-size: 0.9rem;
  margin: 0 0 1rem;
}
.search-section-title {
  font-family: var(--font-display, serif);
  font-size: 1.1rem;
  margin: 1.75rem 0 0.75rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.search-error {
  background: rgba(200, 60, 60, 0.15);
  color: #c33;
  padding: 0.75rem 1rem;
  border-radius: 6px;
  border: 1px solid rgba(200, 60, 60, 0.3);
}
.search-empty {
  color: var(--ink-muted, var(--ink-soft));
  text-align: center;
  margin: 3rem 0;
}

/* Nummer-resultaten */
.search-tracks { display: flex; flex-direction: column; gap: 0.25rem; }
.search-track.post-audio-track {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
}
.search-track .search-track-cover {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-color: var(--paper-2);
}
.search-track .pat-info { flex: 1; min-width: 0; }
.search-track .pat-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-track .pat-artist { font-size: 0.82rem; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-track-link {
  flex: 0 0 auto;
  font-size: 0.82rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.search-track-link:hover { text-decoration: underline; }

.search-results {
  list-style: none;
  margin: 0;
  padding: 0;
}
.search-result {
  padding: 1rem 0;
  border-bottom: 1px solid var(--rule);
}
.search-result:last-child { border-bottom: 0; }

.search-result-title {
  font-family: var(--font-display, serif);
  font-size: 1.25rem;
  margin: 0 0 0.25rem;
}
.search-result-title a {
  color: var(--ink);
  text-decoration: none;
}
.search-result-title a:hover { color: var(--accent); }

.search-result-meta {
  margin: 0 0 0.5rem;
  color: var(--ink-muted, var(--ink-soft));
  font-size: 0.85rem;
}

.search-result-snippet {
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.5;
}
.search-result-snippet mark {
  background: var(--accent);
  color: white;
  padding: 0.05em 0.25em;
  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>