AP design bugs (#21395)

- Fixed links in profile description
- Stripped post content
- Fixed grey bg in Avatars
- Installed `clsx`

---------

Co-authored-by: Michael Barrett <mike@ghost.org>

apps/admin-x-activitypub/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.3.6",
+  "version": "0.3.7",
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -65,10 +65,11 @@
   },
   "dependencies": {
     "@radix-ui/react-form": "0.0.3",
-    "use-debounce": "10.0.4",
     "@tryghost/admin-x-design-system": "0.0.0",
     "@tryghost/admin-x-framework": "0.0.0",
+    "clsx": "^2.1.1",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "use-debounce": "10.0.4"
   }
 }

apps/admin-x-activitypub/src/components/Activities.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect, useRef} from 'react';
 
 import NiceModal from '@ebay/nice-modal-react';
+import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
 import {LoadingIndicator, NoValueLabel} from '@tryghost/admin-x-design-system';
 
 import APAvatar, {AvatarBadge} from './global/APAvatar';
@@ -11,7 +12,7 @@ import MainNavigation from './navigation/MainNavigation';
 import ViewProfileModal from './global/ViewProfileModal';
 
 import getUsername from '../utils/get-username';
-import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
+import stripHtml from '../utils/strip-html';
 import {useActivitiesForUser} from '../hooks/useActivityPubQueries';
 // import {useFollowersForUser} from '../MainContent';
 
@@ -38,7 +39,7 @@ const getActivityDescription = (activity: Activity): string => {
         if (activity.object && activity.object.type === 'Article') {
             return `Liked your article "${activity.object.name}"`;
         } else if (activity.object && activity.object.type === 'Note') {
-            return `${activity.object.content}`;
+            return `${stripHtml(activity.object.content)}`;
         }
     }
 

apps/admin-x-activitypub/src/components/global/APAvatar.tsx

@@ -1,4 +1,5 @@
 import React, {useEffect, useState} from 'react';
+import clsx from 'clsx';
 import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
 import {Icon} from '@tryghost/admin-x-design-system';
 
@@ -13,7 +14,7 @@ interface APAvatarProps {
 
 const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
     let iconSize = 18;
-    let containerClass = '';
+    let containerClass = 'shrink-0 items-center justify-center relative z-10 flex';
     let imageClass = 'z-10 rounded w-10 h-10 object-cover';
     const badgeClass = `w-6 h-6 z-20 rounded-full absolute -bottom-2 -right-[0.6rem] border-2 border-white content-box flex items-center justify-center `;
     let badgeColor = '';
@@ -38,21 +39,25 @@ const APAvatar: React.FC<APAvatarProps> = ({author, size, badge}) => {
     switch (size) {
     case 'xs':
         iconSize = 12;
-        containerClass = 'z-10 relative rounded bg-grey-100 shrink-0 flex items-center justify-center w-5 h-5';
+        containerClass = clsx('h-5 w-5 rounded ', containerClass);
         imageClass = 'z-10 rounded w-5 h-5 object-cover';
         break;
     case 'sm':
-        containerClass = 'z-10 relative rounded bg-grey-100 shrink-0 flex items-center justify-center w-10 h-10';
+        containerClass = clsx('h-10 w-10 rounded', containerClass);
         break;
     case 'lg':
-        containerClass = 'z-10 relative rounded-xl bg-grey-100 shrink-0 flex items-center justify-center w-22 h-22';
+        containerClass = clsx('h-22 w-22 rounded-xl', containerClass);
         imageClass = 'z-10 rounded-xl w-22 h-22 object-cover';
         break;
     default:
-        containerClass = 'z-10 relative rounded bg-grey-100 shrink-0 flex items-center justify-center w-10 h-10';
+        containerClass = clsx('h-10 w-10  rounded', containerClass);
         break;
     }
 
+    if (!iconUrl) {
+        containerClass = clsx(containerClass, 'bg-grey-100');
+    }
+
     if (iconUrl) {
         return (
             <a className={containerClass} href={author?.url} rel='noopener noreferrer' target='_blank'>

apps/admin-x-activitypub/src/styles/index.css

@@ -25,22 +25,20 @@ animation: bump 0.3s ease-in-out;
 }
 
 .ap-note-content a, .ap-profile-content a {
-  /* color: rgb(236 72 153) !important; */
   color: rgb(37 99 235) !important;
   word-break: break-all;
 }
 
 .ap-note-content a:hover, .ap-profile-content a:hover {
-  /* color: rgb(190, 25, 99) !important; */
   color: rgb(29 78 216) !important;
   text-decoration: underline !important;
 }
 
-.ap-note-content span.invisible {
+.ap-note-content span.invisible, .ap-profile-content span.invisible {
   display: none;
 }
 
-.ap-note-content a:not(.hashtag) span.ellipsis:after {
+.ap-note-content a:not(.hashtag) span.ellipsis:after, .ap-profile-content a:not(.hashtag) span.ellipsis:after, .ap-likes .ellipsis::after {
   content: "…";
 }
 
@@ -48,10 +46,6 @@ animation: bump 0.3s ease-in-out;
   margin-top: 1.5rem !important;
 }
 
-.ap-likes .ellipsis::after {
-  content: "…";
-}
-
 .ap-likes .invisible {
   display: inline-block;
   font-size: 0;

yarn.lock

@@ -12738,7 +12738,7 @@ clone@~0.1.9:
   resolved "https://registry.yarnpkg.com/clone/-/clone-0.1.19.tgz#613fb68639b26a494ac53253e15b1a6bd88ada85"
   integrity sha512-IO78I0y6JcSpEPHzK4obKdsL7E7oLdRVDVOLwr2Hkbjsb+Eoz0dxW6tef0WizoKu0gLC4oZSZuEF4U2K6w1WQw==
 
-clsx@2.1.1:
+clsx@2.1.1, clsx@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
   integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==