Merge branch 'main' into fix/add-aria-label-to-featured-pins

diff --cc src/shared/components/post/post-listing.tsx
index 222e4857aed577e642226e5bf17b8caf0f7fc557,5ee07613d265c46b8f5be21ea835e07fc1366800..8e69b18ec428f7fea31228f5a73d1dbc18273da8
--- 1/src/shared/components/post/post-listing.tsx
--- 2/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@@ -518,84 -486,105 +486,107 @@@ export class PostListing extends Compon
      const url = post.url;
  
      return (
-       <div className="post-title overflow-hidden">
-         <h5 className="d-inline">
-           {url && this.props.showBody ? (
-             <a
-               className={
-                 !post.featured_community && !post.featured_local
-                   ? "text-body"
-                   : "text-primary"
-               }
-               href={url}
-               title={url}
-               rel={relTags}
-               dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
-             ></a>
-           ) : (
-             this.postLink
+       <>
+         <div className="post-title overflow-hidden">
+           <h5 className="d-inline">
+             {url && this.props.showBody ? (
+               <a
+                 className={
+                   !post.featured_community && !post.featured_local
+                     ? "text-body"
+                     : "text-primary"
+                 }
+                 href={url}
+                 title={url}
+                 rel={relTags}
+                 dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+               ></a>
+             ) : (
+               this.postLink
+             )}
+           </h5>
+           {(url && isImage(url)) ||
+             (post.thumbnail_url && (
+               <button
+                 className="btn btn-link text-monospace text-muted small d-inline-block"
+                 data-tippy-content={i18n.t("expand_here")}
+                 onClick={linkEvent(this, this.handleImageExpandClick)}
+               >
+                 <Icon
+                   icon={
+                     !this.state.imageExpanded ? "plus-square" : "minus-square"
+                   }
+                   classes="icon-inline"
+                 />
+               </button>
+             ))}
+           {post.removed && (
+             <small className="ml-2 badge text-bg-secondary">
+               {i18n.t("removed")}
+             </small>
            )}
-         </h5>
-         {(url && isImage(url)) ||
-           (post.thumbnail_url && (
-             <button
-               className="btn btn-link text-monospace text-muted small d-inline-block"
-               data-tippy-content={i18n.t("expand_here")}
-               onClick={linkEvent(this, this.handleImageExpandClick)}
+           {post.deleted && (
+             <small
+               className="unselectable pointer ml-2 text-muted font-italic"
+               data-tippy-content={i18n.t("deleted")}
              >
-               <Icon
-                 icon={
-                   !this.state.imageExpanded ? "plus-square" : "minus-square"
-                 }
-                 classes="icon-inline"
-               />
-             </button>
-           ))}
-         {post.removed && (
-           <small className="ml-2 text-muted font-italic">
-             {i18n.t("removed")}
-           </small>
-         )}
-         {post.deleted && (
-           <small
-             className="unselectable pointer ml-2 text-muted font-italic"
-             data-tippy-content={i18n.t("deleted")}
-           >
-             <Icon icon="trash" classes="icon-inline text-danger" />
-           </small>
-         )}
-         {post.locked && (
-           <small
-             className="unselectable pointer ml-2 text-muted font-italic"
-             data-tippy-content={i18n.t("locked")}
-           >
-             <Icon icon="lock" classes="icon-inline text-danger" />
-           </small>
-         )}
-         {post.featured_community && (
-           <small
-             className="unselectable pointer ml-2 text-muted font-italic"
-             data-tippy-content={i18n.t("featured_in_community")}
-             aria-label={i18n.t("featured_in_community")}
-           >
-             <Icon icon="pin" classes="icon-inline text-primary" />
-           </small>
-         )}
-         {post.featured_local && (
-           <small
-             className="unselectable pointer ml-2 text-muted font-italic"
-             data-tippy-content={i18n.t("featured_in_local")}
-             aria-label={i18n.t("featured_in_local")}
+               <Icon icon="trash" classes="icon-inline text-danger" />
+             </small>
+           )}
+           {post.locked && (
+             <small
+               className="unselectable pointer ml-2 text-muted font-italic"
+               data-tippy-content={i18n.t("locked")}
+             >
+               <Icon icon="lock" classes="icon-inline text-danger" />
+             </small>
+           )}
+           {post.featured_community && (
+             <small
+               className="unselectable pointer ml-2 text-muted font-italic"
 -              data-tippy-content={i18n.t("featured")}
++              data-tippy-content={i18n.t("featured_in_community")}
++              aria-label={i18n.t("featured_in_community")}
+             >
+               <Icon icon="pin" classes="icon-inline text-primary" />
+             </small>
+           )}
+           {post.featured_local && (
+             <small
+               className="unselectable pointer ml-2 text-muted font-italic"
 -              data-tippy-content={i18n.t("featured")}
++              data-tippy-content={i18n.t("featured_in_local")}
++              aria-label={i18n.t("featured_in_local")}
+             >
+               <Icon icon="pin" classes="icon-inline text-secondary" />
+             </small>
+           )}
+           {post.nsfw && (
+             <small className="ml-2 badge text-bg-danger">
+               {i18n.t("nsfw")}
+             </small>
+           )}
+         </div>
+         {url && this.urlLine()}
+       </>
+     );
+   }
+ 
+   urlLine() {
+     const post = this.postView.post;
+     const url = post.url;
+ 
+     return (
+       <p className="d-flex text-muted align-items-center gap-1 small m-0">
+         {url && !(hostname(url) === getExternalHost()) && (
+           <a
+             className="text-muted font-italic"
+             href={url}
+             title={url}
+             rel={relTags}
            >
-             <Icon icon="pin" classes="icon-inline text-secondary" />
-           </small>
-         )}
-         {post.nsfw && (
-           <small className="ml-2 text-muted font-italic">
-             {i18n.t("nsfw")}
-           </small>
+             {hostname(url)}
+           </a>
          )}
-       </div>
+       </p>
      );
    }