fix(site): improve search UX

- Placeholder simplified to 'Try a name...' (was over-promising provider ID support)
- Added clickable hint buttons: Salah, Haaland, Real Madrid, Bundesliga, reep_p2804f5db
- 'demo subset of full dataset' label with link to GitHub
- Build script now seeds showcase entities into search index + adds 23 famous player name queries
- Index: 3,398 → 4,348 entities (Cole Palmer, Salah, Haaland etc now included)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: rahulkeerthi

site/scripts/build-data.ts

@@ -147,7 +147,12 @@ async function main() {
   // --- 3. Build search index ---
   const allEntities = new Map<string, Entity>();
 
-  // a-z single-letter queries
+  // Seed the index with showcase entities so they're always searchable
+  for (const entity of examples) {
+    allEntities.set(entity.reep_id, entity);
+  }
+
+  // a-z single-letter queries + famous players/teams that users will try
   const letters = "abcdefghijklmnopqrstuvwxyz".split("");
   const footballTerms = [
     "Real",
@@ -163,7 +168,13 @@ async function main() {
     "Bundesliga",
     "Cup",
   ];
-  const queries = [...letters, ...footballTerms];
+  const playerNames = [
+    "Messi", "Ronaldo", "Haaland", "Mbappe", "Salah", "Palmer",
+    "Bellingham", "Vinicius", "Saka", "Foden", "De Bruyne", "Modric",
+    "Son", "Kane", "Lewandowski", "Neymar", "Pedri", "Gavi",
+    "Osimhen", "Wirtz", "Yamal", "Odegaard", "Rice",
+  ];
+  const queries = [...letters, ...footballTerms, ...playerNames];
 
   console.log(
     `[build-data] Building search index with ${queries.length} queries...`

site/src/pages/index.astro

@@ -88,11 +88,20 @@ const coverageProviders = Object.entries(PROVIDERS)
         type="text"
         class="search-input"
         id="search-input"
-        placeholder="Search by name or paste any provider ID..."
+        placeholder="Try a name..."
         autocomplete="off"
       />
       <div class="search-results" id="search-results"></div>
     </div>
+    <div class="search-hints" style="margin-top: 0.5rem; font-size: 0.82rem; color: var(--fg-muted);">
+      Try:
+      <button class="hint-btn" data-query="Salah">Salah</button>
+      <button class="hint-btn" data-query="Haaland">Haaland</button>
+      <button class="hint-btn" data-query="Real Madrid">Real Madrid</button>
+      <button class="hint-btn" data-query="Bundesliga">Bundesliga</button>
+      <button class="hint-btn" data-query="reep_p2804f5db">reep_p2804f5db</button>
+      <span style="margin-left: 0.25rem; opacity: 0.6;">· demo subset of <a href="https://github.com/withqwerty/reep#data" style="color: var(--fg-muted);">full dataset</a></span>
+    </div>
   </header>
 
   <!-- Examples -->
@@ -418,6 +427,18 @@ const coverageProviders = Object.entries(PROVIDERS)
       card.scrollIntoView({ behavior: 'smooth', block: 'center' });
     }
 
+    // Hint buttons — click to populate search
+    document.querySelectorAll('.hint-btn').forEach(btn => {
+      btn.addEventListener('click', async () => {
+        await loadIndex();
+        const query = (btn as HTMLElement).dataset.query || '';
+        input.value = query;
+        input.focus();
+        doSearch();
+      });
+    });
+
+    // Close dropdown on outside click
     document.addEventListener('click', (e) => {
       if (!resultsEl.contains(e.target as Node) && e.target !== input) {
         resultsEl.classList.remove('open');

site/src/styles/global.css

@@ -384,6 +384,27 @@ footer a {
 	text-decoration: none;
 }
 
+/* Search hint buttons */
+.search-hints {
+	text-align: center;
+}
+
+.hint-btn {
+	font-family: var(--font-mono);
+	font-size: 0.78rem;
+	background: var(--green-light);
+	color: var(--green);
+	border: none;
+	padding: 0.2rem 0.5rem;
+	border-radius: 4px;
+	cursor: pointer;
+	margin: 0.1rem;
+}
+
+.hint-btn:hover {
+	opacity: 0.7;
+}
+
 /* Highlight animation */
 @keyframes highlight {
 	0%   { box-shadow: 0 0 0 4px var(--green-light); }