show a smaller source link for Fedi posts

models.js

···
     return this.record.bridgyOriginalText;
   }
 
+  /** @returns {string | undefined} */
+  get originalFediURL() {
+    return this.record.bridgyOriginalUrl;
+  }
+
   /** @returns {boolean} */
   get isRoot() {
     // I AM ROOOT

post_component.js

···
     if (this.post.embed) {
       let embed = new EmbedComponent(this.post, this.post.embed).buildElement();
       wrapper.appendChild(embed);
+
+      if (this.post.originalFediURL) {
+        if (this.post.embed instanceof InlineLinkEmbed && this.post.embed.title.startsWith('Original post on ')) {
+          embed.remove();
+        }
+      }
+    }
+
+    if (this.post.originalFediURL) {
+      wrapper.appendChild(this.buildFediSourceLink());
     }
 
     if (this.post.likeCount !== undefined && this.post.repostCount !== undefined) {
···
   loadHiddenReplies(loadMoreButton) {
     loadMoreButton.innerHTML = `<img class="loader" src="icons/sunny.png">`;
     this.loadHiddenSubtree(this.post, this.rootElement);
+  }
+
+  /** @returns {HTMLElement | undefined} */
+
+  buildFediSourceLink() {
+    let url = this.post.originalFediURL;
+    let hostname;
+
+    try {
+      hostname = new URL(url).hostname;
+    } catch (error) {
+      console.log("Invalid Fedi URL:" + error);
+      return undefined;
+    }
+
+    let a = $tag('a.fedi-link', { href: url, target: '_blank' });
+    let box = $tag('div', { html: `<i class="fa-solid fa-arrow-up-right-from-square fa-sm"></i> View on ${hostname}` });
+    a.append(box);
+    return a;
   }
 
   /** @param {HTMLLinkElement} authorLink */

style.css

···
   color: #aaa;
 }
 
+.post a.fedi-link {
+  display: inline-block;
+  margin-bottom: 6px;
+  margin-top: 2px;
+}
+
+.post a.fedi-link:hover {
+  text-decoration: none;
+}
+
+.post a.fedi-link > div {
+  border: 1px solid #d8d8d8;
+  border-radius: 8px;
+  padding: 5px 9px;
+  color: #666;
+  font-size: 10pt;
+}
+
+.post a.fedi-link i {
+  margin-right: 2px;
+}
+
+.post a.fedi-link:hover > div {
+  background-color: #f6f7f8;
+  border: 1px solid #c8c8c8;
+}
+
 .post div.gif img {
   user-select: none;
   -webkit-user-select: none;