Add author links on the explore page in web UI (#30521)

app/javascript/mastodon/features/explore/components/author_link.jsx

@@ -0,0 +1,21 @@
+import PropTypes from 'prop-types';
+
+import { Link } from 'react-router-dom';
+
+import { Avatar } from 'mastodon/components/avatar';
+import { useAppSelector } from 'mastodon/store';
+
+export const AuthorLink = ({ accountId }) => {
+  const account = useAppSelector(state => state.getIn(['accounts', accountId]));
+
+  return (
+    <Link to={`/@${account.get('acct')}`} className='story__details__shared__author-link'>
+      <Avatar account={account} size={16} />
+      <bdi dangerouslySetInnerHTML={{ __html: account.get('display_name_html') }} />
+    </Link>
+  );
+};
+
+AuthorLink.propTypes = {
+  accountId: PropTypes.string.isRequired,
+};

app/javascript/mastodon/features/explore/components/story.jsx

@@ -1,61 +1,89 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
+import { useState, useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
+
 import { Blurhash } from 'mastodon/components/blurhash';
-import { accountsCountRenderer } from 'mastodon/components/hashtag';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { ShortNumber } from 'mastodon/components/short_number';
 import { Skeleton } from 'mastodon/components/skeleton';
 
-export default class Story extends PureComponent {
+import { AuthorLink } from './author_link';
 
-  static propTypes = {
-    url: PropTypes.string,
-    title: PropTypes.string,
-    lang: PropTypes.string,
-    publisher: PropTypes.string,
-    publishedAt: PropTypes.string,
-    author: PropTypes.string,
-    sharedTimes: PropTypes.number,
-    thumbnail: PropTypes.string,
-    thumbnailDescription: PropTypes.string,
-    blurhash: PropTypes.string,
-    expanded: PropTypes.bool,
-  };
+const sharesCountRenderer = (displayNumber, pluralReady) => (
+  <FormattedMessage
+    id='link_preview.shares'
+    defaultMessage='{count, plural, one {{counter} post} other {{counter} posts}}'
+    values={{
+      count: pluralReady,
+      counter: <strong>{displayNumber}</strong>,
+    }}
+  />
+);
 
-  state = {
-    thumbnailLoaded: false,
-  };
+export const Story = ({
+  url,
+  title,
+  lang,
+  publisher,
+  publishedAt,
+  author,
+  authorAccount,
+  sharedTimes,
+  thumbnail,
+  thumbnailDescription,
+  blurhash,
+  expanded
+}) => {
+  const [thumbnailLoaded, setThumbnailLoaded] = useState(false);
 
-  handleImageLoad = () => this.setState({ thumbnailLoaded: true });
+  const handleImageLoad = useCallback(() => {
+    setThumbnailLoaded(true);
+  }, [setThumbnailLoaded]);
 
-  render () {
-    const { expanded, url, title, lang, publisher, author, publishedAt, sharedTimes, thumbnail, thumbnailDescription, blurhash } = this.props;
-
-    const { thumbnailLoaded } = this.state;
-
-    return (
-      <a className={classNames('story', { expanded })} href={url} target='blank' rel='noopener'>
-        <div className='story__details'>
-          <div className='story__details__publisher'>{publisher ? <span lang={lang}>{publisher}</span> : <Skeleton width={50} />}{publishedAt && <> · <RelativeTimestamp timestamp={publishedAt} /></>}</div>
-          <div className='story__details__title' lang={lang}>{title ? title : <Skeleton />}</div>
-          <div className='story__details__shared'>{author && <><FormattedMessage id='link_preview.author' defaultMessage='By {name}' values={{ name: <strong>{author}</strong> }} /> · </>}{typeof sharedTimes === 'number' ? <ShortNumber value={sharedTimes} renderer={accountsCountRenderer} /> : <Skeleton width={100} />}</div>
+  return (
+    <div className={classNames('story', { expanded })}>
+      <div className='story__details'>
+        <div className='story__details__publisher'>
+          {publisher ? <span lang={lang}>{publisher}</span> : <Skeleton width={50} />}{publishedAt && <> · <RelativeTimestamp timestamp={publishedAt} /></>}
         </div>
 
-        <div className='story__thumbnail'>
-          {thumbnail ? (
-            <>
-              <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
-              <img src={thumbnail} onLoad={this.handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
-            </>
-          ) : <Skeleton />}
+        <a className='story__details__title' lang={lang} href={url} target='blank' rel='noopener'>
+          {title ? title : <Skeleton />}
+        </a>
+
+        <div className='story__details__shared'>
+          {author ? <FormattedMessage id='link_preview.author' className='story__details__shared__author' defaultMessage='By {name}' values={{ name: authorAccount ? <AuthorLink accountId={authorAccount} /> : <strong>{author}</strong> }} /> : <span />}
+          {typeof sharedTimes === 'number' ? <span className='story__details__shared__pill'><ShortNumber value={sharedTimes} renderer={sharesCountRenderer} /></span> : <Skeleton width='10ch' />}
         </div>
+      </div>
+
+      <a className='story__thumbnail' href={url} target='blank' rel='noopener'>
+        {thumbnail ? (
+          <>
+            <div className={classNames('story__thumbnail__preview', { 'story__thumbnail__preview--hidden': thumbnailLoaded })}><Blurhash hash={blurhash} /></div>
+            <img src={thumbnail} onLoad={handleImageLoad} alt={thumbnailDescription} title={thumbnailDescription} lang={lang} />
+          </>
+        ) : <Skeleton />}
       </a>
-    );
-  }
+    </div>
+  );
+};
 
-}
+Story.propTypes = {
+  url: PropTypes.string,
+  title: PropTypes.string,
+  lang: PropTypes.string,
+  publisher: PropTypes.string,
+  publishedAt: PropTypes.string,
+  author: PropTypes.string,
+  authorAccount: PropTypes.string,
+  sharedTimes: PropTypes.number,
+  thumbnail: PropTypes.string,
+  thumbnailDescription: PropTypes.string,
+  blurhash: PropTypes.string,
+  expanded: PropTypes.bool,
+};

app/javascript/mastodon/features/explore/links.jsx

@@ -13,7 +13,7 @@ import { DismissableBanner } from 'mastodon/components/dismissable_banner';
 import { LoadingIndicator } from 'mastodon/components/loading_indicator';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
-import Story from './components/story';
+import { Story } from './components/story';
 
 const mapStateToProps = state => ({
   links: state.getIn(['trends', 'links', 'items']),
@@ -75,6 +75,7 @@ class Links extends PureComponent {
             publisher={link.get('provider_name')}
             publishedAt={link.get('published_at')}
             author={link.get('author_name')}
+            authorAccount={link.getIn(['author_account', 'id'])}
             sharedTimes={link.getIn(['history', 0, 'accounts']) * 1 + link.getIn(['history', 1, 'accounts']) * 1}
             thumbnail={link.get('image')}
             thumbnailDescription={link.get('image_description')}

app/javascript/mastodon/features/status/components/card.jsx

@@ -6,7 +6,6 @@ import { PureComponent } from 'react';
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
 
 
 import Immutable from 'immutable';
@@ -15,9 +14,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import DescriptionIcon from '@/material-icons/400-24px/description-fill.svg?react';
 import OpenInNewIcon from '@/material-icons/400-24px/open_in_new.svg?react';
 import PlayArrowIcon from '@/material-icons/400-24px/play_arrow-fill.svg?react';
-import { Avatar } from 'mastodon/components/avatar';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
+import { MoreFromAuthor } from 'mastodon/components/more_from_author';
 import { RelativeTimestamp } from 'mastodon/components/relative_timestamp';
 import { useBlurhash } from 'mastodon/initial_state';
 
@@ -59,20 +58,6 @@ const addAutoPlay = html => {
   return html;
 };
 
-const MoreFromAuthor = ({ author }) => (
-  <div className='more-from-author'>
-    <svg viewBox='0 0 79 79' className='logo logo--icon' role='img'>
-      <use xlinkHref='#logo-symbol-icon' />
-    </svg>
-
-    <FormattedMessage id='link_preview.more_from_author' defaultMessage='More from {name}' values={{ name: <Link to={`/@${author.get('acct')}`}><Avatar account={author} size={16} /> {author.get('display_name')}</Link> }} />
-  </div>
-);
-
-MoreFromAuthor.propTypes = {
-  author: ImmutablePropTypes.map,
-};
-
 export default class Card extends PureComponent {
 
   static propTypes = {
@@ -259,7 +244,7 @@ export default class Card extends PureComponent {
           {description}
         </a>
 
-        {showAuthor && <MoreFromAuthor author={card.get('author_account')} />}
+        {showAuthor && <MoreFromAuthor accountId={card.get('author_account')} />}
       </>
     );
   }