zzstoatzz.io
interactive intro to open social
at-me.zzstoatzz.io
feat: fix namespace display and add clickable app links
- reverse namespace display (app.bsky -> bsky.app)
- make app names clickable links to actual URLs
- add hover underline effect for app name links
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
+12
-1
+7
src/templates.rs
+7
src/templates.rs
···
525
525
color: var(--text);
526
526
text-align: center;
527
527
max-width: clamp(80px, 15vmin, 120px);
528
+
text-decoration: none;
529
+
display: block;
530
+
}}
531
+
532
+
.app-name:hover {{
533
+
text-decoration: underline;
534
+
color: var(--text);
528
535
}}
529
536
530
537
.detail-panel {{
+5
-1
static/app.js
+5
-1
static/app.js
···
150
150
151
151
const firstLetter = namespace.split('.')[1]?.[0]?.toUpperCase() || namespace[0].toUpperCase();
152
152
153
+
// Reverse namespace for display (app.bsky -> bsky.app)
154
+
const displayName = namespace.split('.').reverse().join('.');
155
+
const url = `https://${displayName}`;
156
+
153
157
div.innerHTML = `
154
158
<div class="app-circle" data-namespace="${namespace}">${firstLetter}</div>
155
-
<div class="app-name">${namespace}</div>
159
+
<a href="${url}" target="_blank" rel="noopener noreferrer" class="app-name">${displayName}</a>
156
160
`;
157
161
158
162
// Try to fetch and display avatar