Merge branch 'dev' into federation

[lemmy.git] / ui / src / components / post-listing.tsx

diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx
index d0efa0437225e298c1b382071ea7521a85d7bc6a..497492010690049c18bc6b37156d558c32584821 100644 (file)
--- a/ui/src/components/post-listing.tsx
+++ b/ui/src/components/post-listing.tsx
@@ -30,6 +30,7 @@ import {
   getUnixTime,
   pictshareImage,
   setupTippy,
+  hostname,
   previewLines,
 } from '../utils';
 import { i18n } from '../i18next';
@@ -150,9 +151,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     let post = this.props.post;
     return (
       <img
-        className={`img-fluid thumbnail rounded ${(post.nsfw ||
-          post.community_nsfw) &&
-          'img-blur'}`}
+        className={`img-fluid thumbnail rounded ${
+          (post.nsfw || post.community_nsfw) && 'img-blur'
+        }`}
         src={src}
       />
     );
@@ -312,22 +313,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                     </Link>
                   )}
                 </h5>
-                {post.url &&
-                  !(new URL(post.url).hostname == window.location.hostname) && (
-                    <small class="d-inline-block">
-                      <a
-                        className="ml-2 text-muted font-italic"
-                        href={post.url}
-                        target="_blank"
-                        title={post.url}
-                      >
-                        {new URL(post.url).hostname}
-                        <svg class="ml-1 icon icon-inline">
-                          <use xlinkHref="#icon-external-link"></use>
-                        </svg>
-                      </a>
-                    </small>
-                  )}
+                {post.url && !(hostname(post.url) == window.location.hostname) && (
+                  <small class="d-inline-block">
+                    <a
+                      className="ml-2 text-muted font-italic"
+                      href={post.url}
+                      target="_blank"
+                      title={post.url}
+                    >
+                      {hostname(post.url)}
+                      <svg class="ml-1 icon icon-inline">
+                        <use xlinkHref="#icon-external-link"></use>
+                      </svg>
+                    </a>
+                  </small>
+                )}
                 {(isImage(post.url) || this.props.post.thumbnail_url) && (
                   <>
                     {!this.state.imageExpanded ? (
@@ -440,9 +440,15 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                   {this.props.showCommunity && (
                     <span>
                       <span> {i18n.t('to')} </span>
-                      <Link to={`/c/${post.community_name}`}>
-                        {post.community_name}
-                      </Link>
+                      {post.local ? (
+                        <Link to={`/c/${post.community_name}`}>
+                          {post.community_name}
+                        </Link>
+                      ) : (
+                        <a href={post.community_actor_id} target="_blank">
+                          {hostname(post.ap_id)}/{post.community_name}
+                        </a>
+                      )}
                     </span>
                   )}
                 </li>
@@ -542,8 +548,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             }
                           >
                             <svg
-                              class={`icon icon-inline ${post.saved &&
-                                'text-warning'}`}
+                              class={`icon icon-inline ${
+                                post.saved && 'text-warning'
+                              }`}
                             >
                               <use xlinkHref="#icon-star"></use>
                             </svg>
@@ -586,8 +593,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                             }
                           >
                             <svg
-                              class={`icon icon-inline ${post.deleted &&
-                                'text-danger'}`}
+                              class={`icon icon-inline ${
+                                post.deleted && 'text-danger'
+                              }`}
                             >
                               <use xlinkHref="#icon-trash"></use>
                             </svg>
@@ -618,8 +626,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                               data-tippy-content={i18n.t('view_source')}
                             >
                               <svg
-                                class={`icon icon-inline ${this.state
-                                  .viewSource && 'text-success'}`}
+                                class={`icon icon-inline ${
+                                  this.state.viewSource && 'text-success'
+                                }`}
                               >
                                 <use xlinkHref="#icon-file-text"></use>
                               </svg>
@@ -639,8 +648,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                                 }
                               >
                                 <svg
-                                  class={`icon icon-inline ${post.locked &&
-                                    'text-danger'}`}
+                                  class={`icon icon-inline ${
+                                    post.locked && 'text-danger'
+                                  }`}
                                 >
                                   <use xlinkHref="#icon-lock"></use>
                                 </svg>
@@ -657,8 +667,9 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
                                 }
                               >
                                 <svg
-                                  class={`icon icon-inline ${post.stickied &&
-                                    'text-success'}`}
+                                  class={`icon icon-inline ${
+                                    post.stickied && 'text-success'
+                                  }`}
                                 >
                                   <use xlinkHref="#icon-pin"></use>
                                 </svg>