Fixing article rendering!

app/javascript/mastodon/components/status.jsx

@@ -537,6 +537,7 @@ class Status extends ImmutablePureComponent {
       statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
     }
 
+    const statusActivityObjectType = status.get('activity_pub_type');
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
     const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);
 
@@ -566,7 +567,8 @@ class Status extends ImmutablePureComponent {
 
             {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}
 
-            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+            {(statusActivityObjectType !== 'Article' && status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}
+            {(statusActivityObjectType === 'Article' && (!matchedFilters || this.state.showDespiteFilter)) && <StatusContent status={status} onClick={this.handleClick} onTranslate={this.handleTranslate} collapsible onCollapsedToggle={this.handleCollapsedToggle} statusActivityObjectType={statusActivityObjectType} {...statusContentProps} />}
 
             {expanded && (
               <>
@@ -576,12 +578,12 @@ class Status extends ImmutablePureComponent {
                   onTranslate={this.handleTranslate}
                   collapsible
                   onCollapsedToggle={this.handleCollapsedToggle}
+                  statusActivityObjectType={statusActivityObjectType}
                   {...statusContentProps}
                 />
 
-                {status.get('activity_pub_type') === 'Article' ? null : media}
+                {statusActivityObjectType === 'Article' ? null : media}
 
-                {media}
                 {hashtagBar}
               </>
             )}

app/javascript/mastodon/components/status_content.jsx

@@ -81,7 +81,9 @@ class StatusContent extends PureComponent {
     // from react-router
     match: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
-    history: PropTypes.object.isRequired
+    history: PropTypes.object.isRequired,
+    // from hometown
+    statusActivityObjectType: PropTypes.string,
   };
 
   _updateStatusLinks () {
@@ -231,7 +233,7 @@ class StatusContent extends PureComponent {
     const { status, intl, statusContent } = this.props;
 
     const renderReadMore = this.props.onClick && status.get('collapsed');
-    const renderReadArticle = status.get('activity_pub_type') === 'Article' && status.get('collapsed') && !this.props.onClick;
+    const renderReadArticle = status.get('activity_pub_type') === 'Article' && !status.get('collapsed') && this.props.onClick;
     const contentLocale = intl.locale.replace(/[_-].*/, '');
     const targetLanguages = this.props.languages?.get(status.get('language') || 'und');
     const renderTranslate = this.props.onTranslate && this.props.identity.signedIn && ['public', 'unlisted'].includes(status.get('visibility')) && status.get('search_index').trim().length > 0 && targetLanguages?.includes(contentLocale);
@@ -263,7 +265,17 @@ class StatusContent extends PureComponent {
       <PollContainer pollId={status.get('poll')} lang={language} />
     );
 
-    if (this.props.onClick) {
+    if (this.props.statusActivityObjectType === 'Article') {
+      const title = status.get('title');
+      const summary = status.get('spoilerHtml');
+      return (
+        <>
+          {title && <div className='status__content article'><h2>Title: {status.get('title')}</h2></div>}
+          {summary && <div className='status__content article'><em>Summary: {status.get('spoiler_text')}</em></div>}
+          {readArticleButton}
+        </>
+      );
+    } else if (this.props.onClick) {
       return (
         <>
           <div className={classNames} ref={this.setRef} tabIndex={0} onMouseDown={this.handleMouseDown} onMouseUp={this.handleMouseUp} key='status-content' onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
@@ -274,20 +286,18 @@ class StatusContent extends PureComponent {
           </div>
 
           {readMoreButton}
+
+          {readArticleButton}
         </>
       );
     } else {
       return (
-        <>
-          <div className={classNames} ref={this.setRef} tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
-            <div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
-
-            {poll}
-            {translateButton}
-          </div>
+        <div className={classNames} ref={this.setRef} tabIndex={0} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
+          <div className='status__content__text status__content__text--visible translate' lang={language} dangerouslySetInnerHTML={content} />
 
-          {readArticleButton}
-        </>
+          {poll}
+          {translateButton}
+        </div>
       );
     }
   }

app/javascript/mastodon/features/notifications/components/notification.jsx

@@ -459,7 +459,7 @@ class Notification extends ImmutablePureComponent {
     const { notification } = this.props;
     const account          = notification.get('account');
     const displayNameHtml  = { __html: account.get('display_name_html') };
-    const link             = <bdi><Permalink className='notification__display-name' to={`/@${account.get('acct')}`} title={account.get('acct')} data-hover-card-account={account.get('id')} href={account.get('url')} to={`/@${account.get('acct')}`} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
+    const link             = <bdi><Permalink className='notification__display-name' to={`/@${account.get('acct')}`} title={account.get('acct')} data-hover-card-account={account.get('id')} href={account.get('url')} dangerouslySetInnerHTML={displayNameHtml} /></bdi>;
 
     switch(notification.get('type')) {
     case 'follow':

app/javascript/mastodon/features/status/components/detailed_status.tsx

@@ -53,6 +53,7 @@ export const DetailedStatus: React.FC<{
   pictureInPicture: any;
   onToggleHidden?: (status: any) => void;
   onToggleMediaVisibility?: () => void;
+  statusActivityObjectType?: string;
 }> = ({
   status,
   onOpenMedia,
@@ -66,6 +67,7 @@ export const DetailedStatus: React.FC<{
   pictureInPicture,
   onToggleMediaVisibility,
   onToggleHidden,
+  statusActivityObjectType,
 }) => {
   const properStatus = status?.get('reblog') ?? status;
   const [height, setHeight] = useState(0);
@@ -292,7 +294,9 @@ export const DetailedStatus: React.FC<{
     status as StatusLike,
   );
   const expanded =
-    !status.get('hidden') || status.get('spoiler_text').length === 0;
+    !status.get('hidden') ||
+    status.get('spoiler_text').length === 0 ||
+    statusActivityObjectType === 'Article';
 
   return (
     <div style={outerStyle}>
@@ -330,18 +334,25 @@ export const DetailedStatus: React.FC<{
           )}
         </Permalink>
 
-        {status.get('spoiler_text').length > 0 && (
-          <ContentWarning
-            text={
-              status.getIn(['translation', 'spoilerHtml']) ||
-              status.get('spoilerHtml')
-            }
-            expanded={expanded}
-            onClick={handleExpandedToggle}
-          />
+        {statusActivityObjectType !== 'Article' &&
+          status.get('spoiler_text').length > 0 && (
+            <ContentWarning
+              text={
+                status.getIn(['translation', 'spoilerHtml']) ||
+                status.get('spoilerHtml')
+              }
+              expanded={expanded}
+              onClick={handleExpandedToggle}
+            />
+          )}
+
+        {statusActivityObjectType === 'Article' && status.get('title') && (
+          <div className='status__content article'>
+            <h2>Title: {status.get('title')}</h2>
+          </div>
         )}
 
-        {expanded && (
+        {statusActivityObjectType !== 'Article' && expanded && (
           <>
             <StatusContent
               status={status}
@@ -354,6 +365,16 @@ export const DetailedStatus: React.FC<{
           </>
         )}
 
+        {statusActivityObjectType === 'Article' && expanded && (
+          <div className='status__content article'>
+            <StatusContent
+              status={status}
+              onTranslate={handleTranslate}
+              {...(statusContentProps as any)}
+            />
+          </div>
+        )}
+
         <div className='detailed-status__meta'>
           <div className='detailed-status__meta__line'>
             <a

app/javascript/mastodon/features/status/index.jsx

@@ -679,6 +679,7 @@ class Status extends ImmutablePureComponent {
                   showMedia={this.state.showMedia}
                   onToggleMediaVisibility={this.handleToggleMediaVisibility}
                   pictureInPicture={pictureInPicture}
+                  statusActivityObjectType={status.get('activity_pub_type')}
                 />
 
                 <ActionBar

app/javascript/styles/hometown.scss

@@ -10,11 +10,13 @@
     div {
       display: flex;
 
-      a, span {
+      a,
+      span {
         display: inline-flex;
       }
     }
   }
+
   .account-header__open-in-new__icon > svg {
     height: 20px;
   }
@@ -67,3 +69,15 @@
   align-items: center;
   gap: 10px; // same as the padding
 }
+
+.status__content.article {
+  h2 {
+    font-size: 1.25rem;
+    font-weight: 600;
+    margin-bottom: 0.5rem;
+  }
+
+  em {
+    font-style: italic;
+  }
+}

app/lib/activitypub/parser/status_parser.rb

@@ -42,6 +42,8 @@ class ActivityPub::Parser::StatusParser
   def spoiler_text
     if @object['summary'].present?
       @object['summary']
+    elsif @object['preview'].present? && @object['preview']['type'] == 'Note' && @object['preview']['content'].present?
+      @object['preview']['content']
     elsif summary_language_map?
       @object['summaryMap'].values.first
     end