`public/search.html`

32 lines
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BubbesBlock — Search</title><link rel="stylesheet" href="/styles.css" />
</head><body>
<div id="hdr"></div>
<div class="wrap"><div id="left"></div><main class="col-center" id="main"></main><div id="right"></div></div>
<script>window.__bbAutoInit = false;</script>
<script src="/chrome.js"></script><script src="/app.js"></script>
<script>
const rawTerm = new URLSearchParams(location.search).get('q') || '';
const escH = s => String(s).replace(/[&<>"']/g, c => ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;'}[c]));
const term = escH(rawTerm);
Promise.all([
  fetch('/api/me',{credentials:'same-origin'}).then(r=>r.json()),
  fetch('/api/search?q='+encodeURIComponent(rawTerm),{credentials:'same-origin'}).then(r=>r.json())
]).then(([m,d])=>{
  document.getElementById('hdr').innerHTML=topbar(m.me);
  document.getElementById('left').innerHTML=leftRail(m.me);
  document.getElementById('right').innerHTML=rightRail(m.me);
  const sec=(title,rows)=> rows.length?`<div class="listhd" style="font-size:16px">${title}</div>${rows.join('')}`:'';
  const posts=(d.posts||[]).map(p=>`<a class="tile" href="/p/${p.id}"><span class="lg" style="background:var(--plum)">📣</span><div class="main"><b>${p.category||'Post'}</b><div class="meta2">${(Array.isArray(p.body)?p.body[0]:p.body||'').slice(0,90)}</div></div></a>`);
  const opps=(d.opportunities||[]).map(o=>`<a class="tile" href="/opportunities"><span class="lg" style="background:var(--green)">💼</span><div class="main"><b>${o.category}</b><div class="meta2">${o.body.slice(0,90)}</div></div></a>`);
  const nb=(d.neighbors||[]).map(n=>`<div class="tile"><span class="ava ${n.color||'a1'}" style="width:48px;height:48px;font-size:17px">${n.initials||'?'}</span><div class="main"><b>${n.name}</b><div class="meta2">${n.address||'neighbor'}</div></div></div>`);
  const any = posts.length+opps.length+nb.length;
  document.getElementById('main').innerHTML=`<div class="listhd">Search${term?`: “${term}”`:''}</div>`+
    (any? sec('Posts',posts)+sec('Opportunities',opps)+sec('Neighbors',nb) : '<div class="prose"><h1>No matches</h1><p>Try a different term.</p></div>');
  BB.init();
  const si=document.querySelector('.search input'); if(si) si.value=rawTerm;
});
</script></body></html>