From: Jannik ZANDER <jzander@grundfos.com>
Date: Tue, 9 Sep 2025 18:29:16 +0000 (+0200)
Subject: Search bar
X-Git-Url: https://git.zndr.dk/?a=commitdiff_plain;h=0d6f18d03e146c849cd48f7bdb4491891f7d353e;p=zndr-11ty.git

Search bar
---

diff --git a/site/_includes/layouts/base.njk b/site/_includes/layouts/base.njk
index 973f559..b25725d 100644
--- a/site/_includes/layouts/base.njk
+++ b/site/_includes/layouts/base.njk
@@ -46,7 +46,7 @@
     {% endblock %}
 
     <footer>
-      <div>© 2025 Jannik • Tange</div>
+      <div>© {{ '' | year }} Jannik • Tange Sø</div>
       <div class="foot-links">
         <a href="/pgp.txt">PGP</a>
         <a href="/keys.txt">SSH Keys</a>
diff --git a/site/index.njk b/site/index.njk
index 332812d..064beb5 100644
--- a/site/index.njk
+++ b/site/index.njk
@@ -5,6 +5,10 @@ title: zndr.dk — Services
 
 <h2 style="margin:0 0 .5rem 0;">Services</h2>
 
+<div class="search" role="search">
+  <input id="filter" placeholder="Filter … (press / to focus)" autocomplete="off" aria-label="Filter services" />
+</div>
+
 <main class="grid" id="grid">
 {% for s in services %}
   <a
@@ -20,6 +24,60 @@ title: zndr.dk — Services
 {% endfor %}
 </main>
 
+<script>
+(() => {
+  const input = document.getElementById('filter');
+  const cards = Array.from(document.querySelectorAll('.grid .card'));
+  const empty = document.createElement('p');
+  empty.textContent = 'No matches.';
+  empty.style.display = 'none';
+  empty.style.color = 'var(--muted)';
+  const grid = document.querySelector('.grid');
+  grid.parentNode.insertBefore(empty, grid.nextSibling);
+
+  // Read initial query from ?q=
+  const params = new URLSearchParams(location.search);
+  const initial = params.get('q') || '';
+  if (initial) input.value = initial;
+
+  const norm = s => (s || '').toLowerCase().trim();
+  const matches = (el, q) => {
+    if (!q) return true;
+    // search name, description, tag, and any data-* attributes
+    const name = el.querySelector('h3')?.textContent || '';
+    const desc = el.querySelector('p')?.textContent || '';
+    const tag  = el.getAttribute('data-tag') || '';
+    const hay  = `${name}\n${desc}\n${tag}\n${el.textContent}`;
+    return norm(hay).includes(q);
+  };
+
+  let t;
+  const apply = () => {
+    const q = norm(input.value);
+    let shown = 0;
+    cards.forEach(card => {
+      const ok = matches(card, q);
+      card.style.display = ok ? '' : 'none';
+      if (ok) shown++;
+    });
+    empty.style.display = shown ? 'none' : '';
+    // reflect in URL (so refresh/bookmark keeps query)
+    const url = new URL(location);
+    if (q) { url.searchParams.set('q', q); }
+    else   { url.searchParams.delete('q'); }
+    history.replaceState(null, '', url);
+  };
+
+  input.addEventListener('input', () => {
+    clearTimeout(t);
+    t = setTimeout(apply, 80); // tiny debounce
+  });
+
+  // run once on load
+  apply();
+})();
+</script>
+
 <script>
 (function () {
   const PING_URL = "https://lan.zndr.dk/ping";   // 200 only on LAN