diff --git a/apps/admin-x-activitypub/src/components/ListIndex.tsx b/apps/admin-x-activitypub/src/components/ListIndex.tsx index 4c785eead9..9f9d1393ec 100644 --- a/apps/admin-x-activitypub/src/components/ListIndex.tsx +++ b/apps/admin-x-activitypub/src/components/ListIndex.tsx @@ -4,7 +4,7 @@ import articleBodyStyles from './articleBodyStyles'; import getUsername from '../utils/get-username'; import {ActivityPubAPI} from '../api/activitypub'; import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub'; -import {Avatar, Button, ButtonGroup, Heading, List, ListItem, Page, SelectOption, SettingValue, ViewContainer, ViewTab} from '@tryghost/admin-x-design-system'; +import {Avatar, Button, ButtonGroup, Heading, Icon, List, ListItem, Page, SelectOption, SettingValue, ViewContainer, ViewTab} from '@tryghost/admin-x-design-system'; import {useBrowseSite} from '@tryghost/admin-x-framework/api/site'; import {useQuery} from '@tanstack/react-query'; import {useRouting} from '@tryghost/admin-x-framework/routing'; @@ -123,6 +123,7 @@ const ActivityPubComponent: React.FC = () => { actor={activity.actor} layout={selectedOption.value} object={activity.object} + type={activity.type} /> ))} @@ -167,6 +168,7 @@ const ActivityPubComponent: React.FC = () => { actor={activity.actor} layout={selectedOption.value} object={activity.object} + type={activity.object.type} /> ))} @@ -320,7 +322,7 @@ ${image && ); }; -const ObjectContentDisplay: React.FC<{actor: ActorProperties, object: ObjectProperties, layout: string }> = ({actor, object, layout}) => { +const ObjectContentDisplay: React.FC<{actor: ActorProperties, object: ObjectProperties, layout: string, type: string }> = ({actor, object, layout, type}) => { const parser = new DOMParser(); const doc = parser.parseFromString(object.content || '', 'text/html'); @@ -392,27 +394,40 @@ const ObjectContentDisplay: React.FC<{actor: ActorProperties, object: ObjectProp setTimeout(() => setIsClicked(false), 300); // Reset the animation class after 300ms }; + let author = actor; + if (type === 'Announce' && object.type === 'Note') { + author = typeof object.attributedTo === 'object' ? object.attributedTo as ActorProperties : actor; + } + if (layout === 'feed') { return ( <> {object && ( -
- -
-
-

{actor.name}

- {getUsername(actor)} - {timestamp} -
-
-
- {object.name && {object.name}} -

{plainTextContent}

- {/*

{object.content}

*/} - {renderAttachment()} -
-
diff --git a/apps/admin-x-activitypub/src/styles/index.css b/apps/admin-x-activitypub/src/styles/index.css index c3b58ac682..a59dd422e7 100644 --- a/apps/admin-x-activitypub/src/styles/index.css +++ b/apps/admin-x-activitypub/src/styles/index.css @@ -22,4 +22,17 @@ animation: bump 0.3s ease-in-out; .ap-red-heart path { fill: #F50B23; -} \ No newline at end of file +} + +.ap-note-content a { + color: rgb(236 72 153) !important; +} + +.ap-note-content a:hover { + color: rgb(219 39 119) !important; +} + +.ap-note-content p + p { + margin-top: 1.5rem !important; +} + diff --git a/apps/admin-x-design-system/src/assets/icons/reload.svg b/apps/admin-x-design-system/src/assets/icons/reload.svg new file mode 100644 index 0000000000..5afa3c7227 --- /dev/null +++ b/apps/admin-x-design-system/src/assets/icons/reload.svg @@ -0,0 +1 @@ +Button Refresh Arrows Streamline Icon: https://streamlinehq.com \ No newline at end of file