Show account handle in addition to display name

src/components/Card.vue

@@ -34,8 +34,10 @@ const playVideo = computed(() => {
         <div v-if="post.author?.avatar" class="flex-shrink-0">
           <img :src="post.author.avatar" class="me-2 avatar" />
         </div>
-        <a :href="post.author.url || post.url" target="_blank" v-dompurify-html="post.author.name"
-          class="flex-grow-1 m-0 text-body"></a>
+        <a :href="post.author.url || post.url" target="_blank" class="text-body flex-grow-1 m-0 avatarlink">
+          <div v-dompurify-html="post.author.name" class="displayname"></div>
+          <div v-dompurify-html="post.author.profile" class="profile"></div>
+        </a>
         <slot name="topleft"></slot>
       </div>
       <div class="card-body">
@@ -73,6 +75,18 @@ const playVideo = computed(() => {
   border-radius: 50%;
 }
 
+.wall-item a.avatarlink {
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+
+.wall-item div.profile {
+  margin-top: -.3em;
+  font-size: .85em;
+  opacity: .5;
+}
+
 .wall-item img.emoji {
   height: 1em;
   width: 1em;

src/sources.ts

@@ -75,6 +75,12 @@ export async function fetchPosts(cfg: Config): Promise<Post[]> {
             posts.unshift(post)
     }
 
+    const fixLocalAcct = (domain: string, status: MastodonStatus): MastodonStatus => {
+        if (!status.account.acct.includes('@'))
+            status.account.acct += "@" + domain
+        return status
+    }
+
     // Be nice and not overwhelm servers with parallel requests.
     // Run tasks for the same domain in sequence instead.
     const groupedTasks = Object.entries(domainTasks)
@@ -84,6 +90,7 @@ export async function fetchPosts(cfg: Config): Promise<Post[]> {
                     try {
                         (await task())
                             .filter(status => filterStatus(cfg, status))
+                            .map(status => fixLocalAcct(domain, status))
                             .map(status => statusToWallPost(cfg, status))
                             .forEach(addOrRepacePost)
                     } catch (err) {
@@ -238,6 +245,7 @@ const statusToWallPost = (cfg: Config, status: MastodonStatus): Post => {
     const name = status.account.display_name
         ? replaceEmojis(status.account.display_name, status.account.emojis)
         : status.account.username
+    const profile = status.account.acct
     const content = replaceEmojis(status.content, status.emojis)
 
     const media = status.media_attachments?.map((m): PostMedia | undefined => {
@@ -258,6 +266,7 @@ const statusToWallPost = (cfg: Config, status: MastodonStatus): Post => {
         url: status.url || status.uri,
         author: {
             name,
+            profile,
             url: status.account.url,
             avatar: status.account.avatar,
         },

src/types.ts

@@ -34,6 +34,7 @@ export type Post = {
 
     author?: {
         name: string;
+        profile: string;
         avatar?: string;
         url?: string;
     };