From e13ab2ee468924eb42d3a858f093e23b31d9cf8f Mon Sep 17 00:00:00 2001
From: Dessalines <dessalines@users.noreply.github.com>
Date: Mon, 14 Feb 2022 13:49:57 -0500
Subject: [PATCH] Add federated post and comment links. Fixes #569 (#575)

---
 .../components/comment/comment-node.tsx       | 31 +++++++--
 src/shared/components/common/symbols.tsx      | 65 +++++++++++++++++++
 src/shared/components/post/post-listing.tsx   |  5 ++
 3 files changed, 94 insertions(+), 7 deletions(-)

diff --git a/src/shared/components/comment/comment-node.tsx b/src/shared/components/comment/comment-node.tsx
index 1af8e117..d9702bab 100644
--- a/src/shared/components/comment/comment-node.tsx
+++ b/src/shared/components/comment/comment-node.tsx
@@ -1,3 +1,4 @@
+import classNames from "classnames";
 import { Component, linkEvent } from "inferno";
 import { Link } from "inferno-router";
 import {
@@ -849,14 +850,30 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
 
   linkBtn(small = false) {
     let cv = this.props.node.comment_view;
+    let classnames = classNames("btn btn-link btn-animate text-muted", {
+      "btn-sm": small,
+    });
+
+    let title = this.props.showContext
+      ? i18n.t("show_context")
+      : i18n.t("link");
+
     return (
-      <Link
-        className={`btn ${small && "btn-sm"} btn-link btn-animate text-muted`}
-        to={`/post/${cv.post.id}/comment/${cv.comment.id}`}
-        title={this.props.showContext ? i18n.t("show_context") : i18n.t("link")}
-      >
-        <Icon icon="link" classes="icon-inline" />
-      </Link>
+      <>
+        <Link
+          className={classnames}
+          to={`/post/${cv.post.id}/comment/${cv.comment.id}`}
+          title={title}
+        >
+          <Icon icon="link" classes="icon-inline" />
+        </Link>
+        {/* TODO comment ap_ids are currently broken anyway, so use post.ap_id, and wait until comment tree / endpoint refactor */}
+        {!cv.comment.local && (
+          <a className={classnames} title={title} href={cv.post.ap_id}>
+            <Icon icon="fedilink" classes="icon-inline" />
+          </a>
+        )}
+      </>
     );
   }
 
diff --git a/src/shared/components/common/symbols.tsx b/src/shared/components/common/symbols.tsx
index d730c15e..03791d1b 100644
--- a/src/shared/components/common/symbols.tsx
+++ b/src/shared/components/common/symbols.tsx
@@ -12,6 +12,71 @@ export const SYMBOLS = (
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
     <defs>
+      <symbol
+        id="icon-fedilink"
+        viewBox="0 0 196.52 196.52"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g color="#000" font-weight="400" font-family="sans-serif">
+          <path
+            d="M47.924 72.797a18.228 18.228 0 0 1-7.796 7.76l42.799 42.965 10.318-5.23zm56.453 56.67l-10.319 5.23 21.686 21.77a18.228 18.228 0 0 1 7.798-7.76z"
+            overflow="visible"
+            fill="#a730b8"
+          />
+          <path
+            d="M153.894 89.797l-24.23 12.28 1.787 11.427 27.415-13.895a18.228 18.228 0 0 1-4.972-9.812zm-38.295 19.408l-57.29 29.034a18.228 18.228 0 0 1 4.973 9.813l54.103-27.42z"
+            overflow="visible"
+            fill="#5496be"
+          />
+          <path
+            d="M97.175 37.687L69.53 91.654l8.162 8.193 29.269-57.138a18.228 18.228 0 0 1-9.787-5.022zM62.34 105.69L48.34 133.025a18.228 18.228 0 0 1 9.786 5.022l12.378-24.164z"
+            overflow="visible"
+            fill="#ce3d1a"
+          />
+          <path
+            d="M39.89 80.676a18.228 18.228 0 0 1-9.105 1.904 18.228 18.228 0 0 1-1.76-.184l8.176 52.298a18.228 18.228 0 0 1 9.106-1.904 18.228 18.228 0 0 1 1.759.184z"
+            overflow="visible"
+            fill="#d0188f"
+          />
+          <path
+            d="M63.326 148.31a18.228 18.228 0 0 1 .19 3.672 18.228 18.228 0 0 1-1.922 7.192l52.289 8.39a18.228 18.228 0 0 1-.191-3.672 18.228 18.228 0 0 1 1.923-7.19z"
+            overflow="visible"
+            fill="#5b36e9"
+          />
+          <path
+            d="M159.05 99.8l-24.135 47.118a18.228 18.228 0 0 1 9.788 5.023l24.134-47.117a18.228 18.228 0 0 1-9.787-5.023z"
+            overflow="visible"
+            fill="#30b873"
+          />
+          <path
+            d="M126.133 33.16a18.228 18.228 0 0 1-7.798 7.761l37.377 37.52a18.228 18.228 0 0 1 7.797-7.76z"
+            overflow="visible"
+            fill="#ebe305"
+          />
+          <path
+            d="M92.019 27.684L44.77 51.628a18.228 18.228 0 0 1 4.973 9.812L96.99 37.495a18.228 18.228 0 0 1-4.971-9.811z"
+            overflow="visible"
+            fill="#f47601"
+          />
+          <path
+            d="M118.25 40.964a18.228 18.228 0 0 1-9.257 1.98 18.228 18.228 0 0 1-1.595-.167l4.185 26.8 11.42 1.832zm-4.234 44.193l9.895 63.363a18.228 18.228 0 0 1 8.973-1.837 18.228 18.228 0 0 1 1.907.21l-9.355-59.904z"
+            overflow="visible"
+            fill="#57c115"
+          />
+          <path
+            d="M49.776 61.641a18.228 18.228 0 0 1 .2 3.73 18.228 18.228 0 0 1-1.894 7.139l26.82 4.308 5.272-10.295zm45.968 7.382L90.472 79.32l63.371 10.177a18.228 18.228 0 0 1-.184-3.63 18.228 18.228 0 0 1 1.945-7.229z"
+            overflow="visible"
+            fill="#dbb210"
+          />
+        </g>
+        <g transform="rotate(3.118 600.365 106.46)" fill-opacity=".996">
+          <circle cx="106.266" cy="51.536" r="16.571" fill="#ffca00" />
+          <circle cx="171.428" cy="110.193" r="16.571" fill="#64ff00" />
+          <circle cx="135.764" cy="190.277" r="16.571" fill="#00a3ff" />
+          <circle cx="48.559" cy="181.114" r="16.571" fill="#9500ff" />
+          <circle cx="30.329" cy="95.367" r="16.571" fill="red" />
+        </g>
+      </symbol>
       <symbol id="icon-clipboard" viewBox="0 0 24 24">
         <path d="M7 5c0 0.552 0.225 1.053 0.586 1.414s0.862 0.586 1.414 0.586h6c0.552 0 1.053-0.225 1.414-0.586s0.586-0.862 0.586-1.414h1c0.276 0 0.525 0.111 0.707 0.293s0.293 0.431 0.293 0.707v14c0 0.276-0.111 0.525-0.293 0.707s-0.431 0.293-0.707 0.293h-12c-0.276 0-0.525-0.111-0.707-0.293s-0.293-0.431-0.293-0.707v-14c0-0.276 0.111-0.525 0.293-0.707s0.431-0.293 0.707-0.293zM9 1c-0.552 0-1.053 0.225-1.414 0.586s-0.586 0.862-0.586 1.414h-1c-0.828 0-1.58 0.337-2.121 0.879s-0.879 1.293-0.879 2.121v14c0 0.828 0.337 1.58 0.879 2.121s1.293 0.879 2.121 0.879h12c0.828 0 1.58-0.337 2.121-0.879s0.879-1.293 0.879-2.121v-14c0-0.828-0.337-1.58-0.879-2.121s-1.293-0.879-2.121-0.879h-1c0-0.552-0.225-1.053-0.586-1.414s-0.862-0.586-1.414-0.586zM9 3h6v2h-6z"></path>
       </symbol>
diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index 1608d410..9b07d1c9 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -445,6 +445,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               />
             </button>
           )}
+          {!post.local && (
+            <a className="ml-2" title={i18n.t("link")} href={post.ap_id}>
+              <Icon icon="fedilink" />
+            </a>
+          )}
           {post.removed && (
             <small className="ml-2 text-muted font-italic">
               {i18n.t("removed")}