search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
improve layout cohesion
- move popular searches under search box as "try: x · y · z"
- add dashboard link to stats footer
- simplify empty state
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
+40
-54
+40
-54
site/index.html
+40
-54
site/index.html
···
173
173
174
174
.empty-state p { margin-bottom: 0.5rem; }
175
175
176
-
.popular {
177
-
margin-top: 1.5rem;
176
+
.suggestions {
177
+
font-size: 11px;
178
+
color: #555;
179
+
margin-bottom: 1rem;
178
180
}
179
181
180
-
.popular-label {
181
-
font-size: 10px;
182
-
text-transform: uppercase;
183
-
letter-spacing: 1px;
182
+
.suggestions-label {
184
183
color: #444;
185
-
margin-bottom: 0.75rem;
186
-
display: flex;
187
-
align-items: center;
188
-
justify-content: center;
189
-
gap: 0.5rem;
184
+
margin-right: 0.5rem;
190
185
}
191
186
192
-
.popular-label::before,
193
-
.popular-label::after {
194
-
content: '';
195
-
height: 1px;
196
-
width: 2rem;
197
-
background: #333;
187
+
.suggestions-list {
188
+
display: inline;
198
189
}
199
190
200
-
.popular-list {
201
-
display: flex;
202
-
flex-wrap: wrap;
203
-
justify-content: center;
204
-
gap: 0.5rem;
191
+
.suggestion {
192
+
color: #666;
193
+
cursor: pointer;
194
+
padding: 2px 0;
205
195
}
206
196
207
-
.popular-item {
208
-
font-size: 12px;
209
-
padding: 0.4rem 0.75rem;
210
-
background: #151515;
211
-
border: 1px solid #252525;
212
-
border-radius: 3px;
213
-
cursor: pointer;
214
-
color: #888;
215
-
transition: all 0.15s;
197
+
.suggestion:hover {
198
+
color: #2a9d5c;
216
199
}
217
200
218
-
.popular-item::before {
219
-
content: '↗ ';
220
-
opacity: 0.5;
201
+
.suggestion::after {
202
+
content: ' · ';
203
+
color: #333;
221
204
}
222
205
223
-
.popular-item:hover {
224
-
background: #1a1a1a;
225
-
border-color: #1B7340;
226
-
color: #2a9d5c;
206
+
.suggestion:last-child::after {
207
+
content: '';
227
208
}
228
209
229
210
.stats {
···
302
283
<button id="search-btn">search</button>
303
284
</div>
304
285
286
+
<div id="suggestions"></div>
287
+
305
288
<div id="active-filter"></div>
306
289
307
290
<div id="tags" class="tags"></div>
···
326
309
const statsDiv = document.getElementById('stats');
327
310
const tagsDiv = document.getElementById('tags');
328
311
const activeFilterDiv = document.getElementById('active-filter');
312
+
const suggestionsDiv = document.getElementById('suggestions');
329
313
330
314
let currentTag = null;
331
315
let allTags = [];
···
511
495
const data = await res.json();
512
496
if (!data.error) {
513
497
popularSearches = data.slice(0, 5);
514
-
renderEmptyState();
498
+
renderSuggestions();
515
499
}
516
500
} catch (e) {
517
501
console.error('failed to load popular', e);
518
502
}
519
503
}
520
504
521
-
function renderEmptyState() {
522
-
const popularHtml = popularSearches.length > 0 ? `
523
-
<div class="popular">
524
-
<div class="popular-label">popular searches</div>
525
-
<div class="popular-list">
526
-
${popularSearches.map(p => `
527
-
<span class="popular-item" onclick="searchPopular('${escapeHtml(p.query)}')">${escapeHtml(p.query)}</span>
528
-
`).join('')}
529
-
</div>
505
+
function renderSuggestions() {
506
+
if (popularSearches.length === 0) {
507
+
suggestionsDiv.innerHTML = '';
508
+
return;
509
+
}
510
+
suggestionsDiv.innerHTML = `
511
+
<div class="suggestions">
512
+
<span class="suggestions-label">try:</span>
513
+
<span class="suggestions-list">
514
+
${popularSearches.map(p => `<span class="suggestion" onclick="searchPopular('${escapeHtml(p.query)}')">${escapeHtml(p.query)}</span>`).join('')}
515
+
</span>
530
516
</div>
531
-
` : '';
517
+
`;
518
+
}
532
519
520
+
function renderEmptyState() {
533
521
resultsDiv.innerHTML = `
534
522
<div class="empty-state">
535
523
<p>search for <a href="https://leaflet.pub" target="_blank">leaflet.pub</a></p>
536
-
${popularHtml}
537
524
</div>
538
525
`;
539
526
}
···
567
554
568
555
if (initialQuery || initialTag) {
569
556
search(initialQuery || '', initialTag);
570
-
} else {
571
-
loadPopular();
572
557
}
573
558
574
559
loadTags();
560
+
loadPopular();
575
561
576
562
fetch(`${API_URL}/stats`)
577
563
.then(r => r.json())
578
564
.then(data => {
579
-
statsDiv.textContent = `index: ${data.documents} documents, ${data.publications} publications`;
565
+
statsDiv.innerHTML = `${data.documents} documents, ${data.publications} publications · <a href="${API_URL}/dashboard" target="_blank">stats</a>`;
580
566
})
581
567
.catch(() => {
582
-
statsDiv.textContent = 'backend: connecting...';
568
+
statsDiv.textContent = 'connecting...';
583
569
});
584
570
</script>
585
571
</body>