diff options
Diffstat (limited to 'frontend/src/main.ts')
| -rw-r--r-- | frontend/src/main.ts | 24 |
1 files changed, 20 insertions, 4 deletions
diff --git a/frontend/src/main.ts b/frontend/src/main.ts index f53632c..dbf791b 100644 --- a/frontend/src/main.ts +++ b/frontend/src/main.ts @@ -53,6 +53,22 @@ function renderTextWithFacets(text: string, facets: any[]): string { return result; } +function renderAuthor(note: any): string { + const hasDisplayName = note.authorName && note.authorName !== ''; + const hasValidHandle = note.authorHandle !== 'handle.invalid'; + const pronouns = note.pronouns ? `<span class="muted> · ${note.pronouns}</span>` : ''; + + if (hasDisplayName && hasValidHandle) { + return `<div><strong>${note.authorName}</strong>${pronouns}</div><div class="muted">@${note.authorHandle}</div>`; + } else if (hasDisplayName && !hasValidHandle) { + return `<div><strong>${note.authorName}</strong>${pronouns}</div><div class="muted">⚠️ InvalidHandle</div>`; + } else if (!hasDisplayName && hasValidHandle) { + return `<div><strong>@${note.authorHandle}</strong>${pronouns}</div>`; + } else { + return `<div><strong>⚠️ InvalidHandle</strong>${pronouns}</div>`; + } +} + async function main() { const app = document.querySelector('#app'); if (!app) { @@ -80,11 +96,11 @@ async function main() { const postHTML = ` <div class="note"> - <img class="note-avatar" src="https://cdn.bsky.app/img/avatar/plain/did:plc:hyyqbqqhpxt2bnn7s2e2iuxd/bafkreidoiynom7v2y5rpsm467l3d2cnr7ozvlfusrchjey3k2jtyquufq4@jpeg" alt="avatar"> + <img class="note-avatar" src="${post.avatarURL}" alt="avatar"> <div class="note-content"> - <div style="font-weight: bold">@${post.authorHandle}</div> - <div class="note-text">${postText || '<br>'}</div> - <div style="font-size: 12px; color: #888">${new Date(post.createdAt).toLocaleString()}</div> + ${renderAuthor(post)} + <div class="note-text">${postText}</div> + <div class="muted">${new Date(post.createdAt).toLocaleString()}</div> </div> </div> `; |