← back to Costa Rica
yolo tick 6: /search global cross-entity search (places + regions + provinces, ranked by exact/prefix/substring match) + /api/search endpoint + Search nav link on every page + sitemap entry
635d444bed36ae1b59e091da385199a794018b83 · 2026-05-08 11:18:40 -0700 · Steve
Files touched
M public/index.htmlM public/province.htmlM public/provinces.htmlA public/search.htmlM public/stats.htmlM server.js
Diff
commit 635d444bed36ae1b59e091da385199a794018b83
Author: Steve <steve@designerwallcoverings.com>
Date: Fri May 8 11:18:40 2026 -0700
yolo tick 6: /search global cross-entity search (places + regions + provinces, ranked by exact/prefix/substring match) + /api/search endpoint + Search nav link on every page + sitemap entry
---
public/index.html | 1 +
public/province.html | 1 +
public/provinces.html | 1 +
public/search.html | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++
public/stats.html | 2 +-
server.js | 64 ++++++++++++++++++++++++
6 files changed, 200 insertions(+), 1 deletion(-)
diff --git a/public/index.html b/public/index.html
index f1e353b..91dc993 100644
--- a/public/index.html
+++ b/public/index.html
@@ -77,6 +77,7 @@
<a href="#" data-cat="tourism">Tourism</a>
<a href="#" data-cat="rentals">Rentals</a>
<a href="#" data-cat="service">Local services</a>
+ <a href="/search">Search</a>
<a href="/provinces">Provinces</a>
<a href="/stats">Stats</a>
</nav>
diff --git a/public/province.html b/public/province.html
index 5952a99..c2f5c1f 100644
--- a/public/province.html
+++ b/public/province.html
@@ -65,6 +65,7 @@
<a class="brand" href="/"><span class="pin">●</span> Costa Rica Directory</a>
<nav class="nav-links">
<a href="/">Browse</a>
+ <a href="/search">Search</a>
<a href="/provinces" class="active">Provinces</a>
<a href="/stats">Stats</a>
</nav>
diff --git a/public/provinces.html b/public/provinces.html
index e32f24b..fa5e211 100644
--- a/public/provinces.html
+++ b/public/provinces.html
@@ -47,6 +47,7 @@
<a class="brand" href="/"><span class="pin">●</span> Costa Rica Directory</a>
<nav class="nav-links">
<a href="/">Browse</a>
+ <a href="/search">Search</a>
<a href="/provinces" class="active">Provinces</a>
<a href="/stats">Stats</a>
</nav>
diff --git a/public/search.html b/public/search.html
new file mode 100644
index 0000000..5c0b6ab
--- /dev/null
+++ b/public/search.html
@@ -0,0 +1,132 @@
+<!doctype html>
+<html lang="en" data-theme="light">
+<head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>Search — Costa Rica Directory</title>
+ <script>(function(){try{var t=localStorage.getItem('cr-theme');if(t)document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
+ <style>
+ :root{--bg:#fafaf7;--fg:#0e1015;--muted:#5a6270;--line:#e3e0d6;--card:#fff;--card-line:#ebe7da;--accent:#0a7a3a;--accent-2:#c2a85a}
+ [data-theme="dark"]{--bg:#0e1015;--fg:#f3f1ea;--muted:#9aa3b2;--line:#23262d;--card:#15181f;--card-line:#262932;--accent:#3ec07a;--accent-2:#d8c074}
+ *{box-sizing:border-box}
+ body{margin:0;background:var(--bg);color:var(--fg);font-family:-apple-system,BlinkMacSystemFont,'Inter','Segoe UI',Roboto,sans-serif;line-height:1.55}
+ a{color:inherit;text-decoration:none} a:hover{color:var(--accent)}
+ .nav{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid var(--line)}
+ .nav-in{max-width:1320px;margin:0 auto;padding:14px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
+ .brand{font-weight:700;font-size:18px} .brand .pin{color:var(--accent)}
+ .nav-links{display:flex;gap:14px;flex-wrap:wrap;color:var(--muted);font-size:14px}
+ .nav-links a.active{color:var(--fg);font-weight:600}
+ .ml-auto{margin-left:auto} .icon-btn{appearance:none;background:transparent;color:inherit;border:1px solid var(--line);border-radius:999px;width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
+
+ main{max-width:1100px;margin:0 auto;padding:32px 22px 48px}
+ h1{font-size:clamp(28px,4vw,40px);letter-spacing:-.02em;margin:0 0 12px}
+ .qbar{display:flex;gap:8px;margin-bottom:8px}
+ .qbar input{flex:1;background:var(--card);color:var(--fg);border:1px solid var(--card-line);border-radius:12px;padding:14px 16px;font-size:16px}
+ .qbar input:focus{outline:none;border-color:var(--accent)}
+ .qbar button{background:var(--accent);color:#fff;border:0;border-radius:12px;padding:0 22px;font-weight:700;font-size:15px;cursor:pointer}
+ .qhint{color:var(--muted);font-size:13px;margin-bottom:24px}
+
+ .group{margin:28px 0}
+ .group h2{margin:0 0 12px;font-size:18px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
+ .group .count{color:var(--muted);font-size:13px;font-weight:400}
+
+ .pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
+ .pcard{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s ease}
+ .pcard:hover{transform:translateY(-2px)}
+ .pcard .pi{aspect-ratio:1.4/1;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 25%, var(--card)), color-mix(in srgb, var(--accent-2) 22%, var(--card)));overflow:hidden}
+ .pcard .pi img{width:100%;height:100%;object-fit:cover;display:block}
+ .pcard .pb{padding:10px 12px}
+ .pcard .pn{font-weight:700;line-height:1.2;font-size:14px}
+ .pcard .pmeta{color:var(--muted);font-size:12px;margin-top:2px}
+
+ .rgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
+ .rcard{background:var(--card);border:1px solid var(--card-line);border-radius:12px;overflow:hidden;display:flex}
+ .rcard .ri{width:96px;flex:0 0 96px;background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 30%, var(--card)), color-mix(in srgb, var(--accent-2) 24%, var(--card)));overflow:hidden}
+ .rcard .ri img{width:100%;height:100%;object-fit:cover;display:block}
+ .rcard .rb{padding:10px 14px;display:flex;flex-direction:column;justify-content:center}
+ .rcard .rn{font-weight:700;line-height:1.2}
+ .rcard .rm{color:var(--muted);font-size:12px;margin-top:2px}
+
+ .pvgrid{display:flex;flex-wrap:wrap;gap:8px}
+ .pvchip{background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--fg);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);border-radius:999px;padding:8px 14px;font-size:13px;font-weight:600}
+ .empty{color:var(--muted);font-size:14px;padding:14px;border:1px dashed var(--line);border-radius:12px}
+ .skel{height:120px;background:linear-gradient(110deg,var(--card) 8%,var(--bg) 18%,var(--card) 33%);background-size:200% 100%;animation:s 1.6s linear infinite;border-radius:12px}
+ @keyframes s{0%{background-position:200% 0}100%{background-position:-200% 0}}
+ </style>
+</head>
+<body>
+ <header class="nav"><div class="nav-in">
+ <a class="brand" href="/"><span class="pin">●</span> Costa Rica Directory</a>
+ <nav class="nav-links">
+ <a href="/">Browse</a>
+ <a href="/provinces">Provinces</a>
+ <a href="/search" class="active">Search</a>
+ <a href="/stats">Stats</a>
+ </nav>
+ <div class="ml-auto"><button class="icon-btn" id="themeBtn" aria-label="Theme">◐</button></div>
+ </div></header>
+
+ <main>
+ <h1>Search the directory</h1>
+ <form id="qform" class="qbar" autocomplete="off">
+ <input type="search" id="q" name="q" placeholder='Try "tamarindo", "rappi", "san josé", "soda"…' />
+ <button type="submit">Search</button>
+ </form>
+ <p class="qhint">Searches names, addresses, descriptions, regions, and provinces. Type at least 2 characters.</p>
+ <div id="out"></div>
+ </main>
+
+ <script>
+ const themeBtn=document.getElementById('themeBtn');
+ themeBtn.addEventListener('click',()=>{const cur=document.documentElement.getAttribute('data-theme')||'light';const nx=cur==='light'?'dark':'light';document.documentElement.setAttribute('data-theme',nx);try{localStorage.setItem('cr-theme',nx);}catch{}});
+
+ const qInput=document.getElementById('q');
+ const out=document.getElementById('out');
+ const params=new URLSearchParams(location.search);
+ if(params.get('q')) qInput.value=params.get('q');
+
+ let abort;
+ function run(q){
+ if(!q||q.length<2){out.innerHTML='';return;}
+ if(abort) abort.abort();
+ abort=new AbortController();
+ out.innerHTML='<div class="skel"></div>';
+ fetch('/api/search?q='+encodeURIComponent(q),{signal:abort.signal}).then(r=>r.json()).then(d=>render(q,d)).catch(e=>{if(e.name!=='AbortError') out.innerHTML=`<p class="empty">Search failed: ${e.message}</p>`;});
+ }
+ function render(q,d){
+ const sections=[];
+ if(d.provinces.length){
+ sections.push(`<section class="group"><h2>Provinces <span class="count">${d.provinces.length}</span></h2>
+ <div class="pvgrid">${d.provinces.map(p=>`<a class="pvchip" href="/pr/${p.slug}">${p.name}</a>`).join('')}</div></section>`);
+ }
+ if(d.regions.length){
+ sections.push(`<section class="group"><h2>Regions <span class="count">${d.counts.regions} match${d.counts.regions===1?'':'es'}</span></h2>
+ <div class="rgrid">${d.regions.map(r=>`
+ <a class="rcard" href="/r/${r.slug}">
+ <div class="ri">${r.image_url?`<img loading="lazy" alt="${r.name}" src="${r.image_url}" />`:''}</div>
+ <div class="rb"><div class="rn">${r.name}</div><div class="rm">${r.province} · ${(r.n||0).toLocaleString()} listings</div></div>
+ </a>`).join('')}</div></section>`);
+ }
+ if(d.places.length){
+ const more=d.counts.places>d.places.length?`<a href="/?q=${encodeURIComponent(q)}" style="color:var(--accent);font-weight:600;font-size:13px">see all ${d.counts.places.toLocaleString()} →</a>`:'';
+ sections.push(`<section class="group"><h2>Listings <span class="count">${d.counts.places.toLocaleString()} match${d.counts.places===1?'':'es'}</span> ${more}</h2>
+ <div class="pgrid">${d.places.map(p=>{
+ const img=p.image_url||p.region_image_url||'';
+ return `<a class="pcard" href="/p/${p.slug}">
+ <div class="pi">${img?`<img loading="lazy" alt="${p.name}" src="${img}" />`:''}</div>
+ <div class="pb"><div class="pn">${p.name}</div><div class="pmeta">${p.region_name||''}${p.region_name&&p.vertical?' · ':''}${p.vertical||''}</div></div>
+ </a>`;}).join('')}</div></section>`);
+ }
+ if(!sections.length){
+ out.innerHTML=`<p class="empty">No matches for "${q}". Try a shorter term, a region name, or browse <a href="/provinces" style="color:var(--accent)">by province</a>.</p>`;
+ return;
+ }
+ out.innerHTML=sections.join('');
+ }
+ document.getElementById('qform').addEventListener('submit',e=>{e.preventDefault();const q=qInput.value.trim();const u=new URL(location);u.searchParams.set('q',q);history.replaceState({},'',u);run(q);});
+ let t;qInput.addEventListener('input',()=>{clearTimeout(t);t=setTimeout(()=>{const q=qInput.value.trim();const u=new URL(location);if(q)u.searchParams.set('q',q);else u.searchParams.delete('q');history.replaceState({},'',u);run(q);},200);});
+ if(qInput.value) run(qInput.value);
+ qInput.focus();
+ </script>
+</body>
+</html>
diff --git a/public/stats.html b/public/stats.html
index 5bad144..57b908b 100644
--- a/public/stats.html
+++ b/public/stats.html
@@ -44,7 +44,7 @@
<header class="nav"><div class="nav-in">
<a class="brand" href="/"><span class="pin">●</span> Costa Rica Directory</a>
<nav class="nav-links">
- <a href="/">Browse</a><a href="/regions">Regions</a><a href="/stats" class="active">Stats</a>
+ <a href="/">Browse</a><a href="/search">Search</a><a href="/provinces">Provinces</a><a href="/stats" class="active">Stats</a>
</nav>
<div class="ml-auto"><button class="icon-btn" id="themeBtn" aria-label="Theme">◐</button></div>
</div></header>
diff --git a/server.js b/server.js
index 1502c49..f5d6765 100644
--- a/server.js
+++ b/server.js
@@ -144,6 +144,68 @@ app.get('/api/provinces/:slug', async (req, res) => {
} catch (e) { res.status(500).json({ error: e.message }); }
});
+// Cross-entity search: places + regions + provinces, grouped & ranked
+app.get('/api/search', async (req, res) => {
+ try {
+ const q = String(req.query.q || '').trim();
+ if (!q || q.length < 2) return res.json({ q, places: [], regions: [], provinces: [], counts: { places: 0, regions: 0, provinces: 0 } });
+ const placeLimit = Math.min(parseInt(req.query.place_limit || '24', 10) || 24, 60);
+ const regionLimit = Math.min(parseInt(req.query.region_limit || '12', 10) || 12, 30);
+
+ const pat = `%${q.toLowerCase()}%`;
+ const exactPat = q.toLowerCase();
+
+ const [{ rows: places }, { rows: placesCnt }, { rows: regions }, { rows: regionsCnt }] = await Promise.all([
+ pool.query(
+ `SELECT p.slug, p.name, p.vertical, p.category, p.address, p.image_url, p.cedula_juridica,
+ r.slug AS region_slug, r.name AS region_name, r.province, r.image_url AS region_image_url,
+ CASE WHEN LOWER(p.name) = $2 THEN 100
+ WHEN LOWER(p.name) LIKE $2 || '%' THEN 80
+ WHEN LOWER(p.name) LIKE '%' || $2 || '%' THEN 50
+ ELSE 10 END AS rank
+ FROM places p LEFT JOIN regions r ON r.id = p.region_id
+ WHERE p.status='active'
+ AND (LOWER(p.name) LIKE $1 OR LOWER(p.address) LIKE $1 OR LOWER(p.description) LIKE $1)
+ ORDER BY rank DESC, (p.image_url IS NOT NULL) DESC, p.name ASC
+ LIMIT $3`, [pat, exactPat, placeLimit]
+ ),
+ pool.query(
+ `SELECT COUNT(*)::int AS total FROM places p
+ WHERE p.status='active'
+ AND (LOWER(p.name) LIKE $1 OR LOWER(p.address) LIKE $1 OR LOWER(p.description) LIKE $1)`, [pat]
+ ),
+ pool.query(
+ `SELECT r.slug, r.name, r.province, r.image_url, r.image_credit, r.image_source_url,
+ COUNT(p.id)::int AS n,
+ CASE WHEN LOWER(r.name) = $2 THEN 100
+ WHEN LOWER(r.name) LIKE $2 || '%' THEN 80
+ WHEN LOWER(r.name) LIKE '%' || $2 || '%' THEN 50
+ ELSE 10 END AS rank
+ FROM regions r LEFT JOIN places p ON p.region_id = r.id AND p.status='active'
+ WHERE LOWER(r.name) LIKE $1
+ GROUP BY r.id
+ ORDER BY rank DESC, n DESC, r.name ASC
+ LIMIT $3`, [pat, exactPat, regionLimit]
+ ),
+ pool.query(
+ `SELECT COUNT(*)::int AS total FROM regions r WHERE LOWER(r.name) LIKE $1`, [pat]
+ ),
+ ]);
+
+ // Provinces: small fixed list, ILIKE on canonical names
+ const allProv = ['San José','Alajuela','Heredia','Cartago','Guanacaste','Puntarenas','Limón'];
+ const provMatches = allProv
+ .filter(p => p.toLowerCase().includes(exactPat))
+ .map(p => ({ name: p, slug: { 'San José':'san-jose','Alajuela':'alajuela','Heredia':'heredia','Cartago':'cartago','Guanacaste':'guanacaste','Puntarenas':'puntarenas','Limón':'limon' }[p] }));
+
+ res.json({
+ q,
+ places, regions, provinces: provMatches,
+ counts: { places: placesCnt[0]?.total || 0, regions: regionsCnt[0]?.total || 0, provinces: provMatches.length },
+ });
+ } catch (e) { res.status(500).json({ error: e.message }); }
+});
+
app.get('/api/regions', async (_req, res) => {
try {
const { rows } = await pool.query(`
@@ -355,6 +417,7 @@ app.get('/sitemap.xml', async (_req, res, next) => {
const staticPages = [
{ loc: '/', changefreq: 'daily', priority: '1.0' },
{ loc: '/provinces', changefreq: 'weekly', priority: '0.8' },
+ { loc: '/search', changefreq: 'weekly', priority: '0.6' },
{ loc: '/stats', changefreq: 'weekly', priority: '0.5' },
{ loc: '/?category=tourism', changefreq: 'daily', priority: '0.8' },
{ loc: '/?category=rentals', changefreq: 'daily', priority: '0.8' },
@@ -478,6 +541,7 @@ app.get('/p/:slug', async (req, res) => {
app.get('/stats', (_req, res) => res.sendFile(path.join(__dirname, 'public', 'stats.html')));
app.get('/provinces', (_req, res) => res.sendFile(path.join(__dirname, 'public', 'provinces.html')));
+app.get('/search', (_req, res) => res.sendFile(path.join(__dirname, 'public', 'search.html')));
app.get('/pr/:slug', async (req, res) => {
if (!PROVINCE_SLUGS[req.params.slug]) return res.status(404).sendFile(path.join(__dirname, 'public', '404.html'));
res.sendFile(path.join(__dirname, 'public', 'province.html'));
← e8ab7d3 yolo tick 5: /pr/:slug province detail page with all cantone
·
back to Costa Rica
·
yolo tick 7: per-vertical landing pages — /verticals overvie 6f4c5ce →