GET /xrpc/app.bsky.actor.searchActorsTypeahead
typeahead.waow.tech
make pie chart legend domains clickable
non-unknown domains link to their site (subtle dotted underline,
brightens on hover). unknown stays plain text.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
+7
-2
+7
-2
src/index.ts
+7
-2
src/index.ts
···
699
699
const pieLegendHtml = d.trafficSources.map((r, i) => {
700
700
const color = r.domain === 'unknown' ? '#555' : PIE_COLORS[i % PIE_COLORS.length];
701
701
const pct = trafficTotal > 0 ? ((r.hits / trafficTotal) * 100).toFixed(1) : '0';
702
-
return `<span><span class="ldot" style="background:${color}"></span>${r.domain} (${pct}%)</span>`;
702
+
const label = r.domain === 'unknown'
703
+
? r.domain
704
+
: `<a href="https://${r.domain}" target="_blank" rel="noopener" class="legend-link">${r.domain}</a>`;
705
+
return `<span><span class="ldot" style="background:${color}"></span>${label} (${pct}%)</span>`;
703
706
}).join('');
704
707
705
708
return `<!doctype html>
···
761
764
#pie { display: block; margin: 0 auto; width: 280px; height: 280px; touch-action: none; }
762
765
.pie-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-top: 0.7rem;
763
766
font-size: 0.7rem; color: #888; justify-content: center; }
764
-
.pie-legend span { display: flex; align-items: center; gap: 0.3rem; }
767
+
.pie-legend span { display: flex; align-items: center; gap: 0.3rem; line-height: 1.4; }
768
+
.legend-link { color: #888; text-decoration: none; border-bottom: 1px dotted #444; }
769
+
.legend-link:hover { color: #ccc; border-bottom-color: #888; }
765
770
.pie-tip { display: none; position: fixed; background: rgba(17, 17, 17, 0.95);
766
771
border: 1px solid #333; border-radius: 6px; padding: 0.5rem 0.7rem;
767
772
font-size: 0.72rem; color: #ccc; pointer-events: none; z-index: 50;