improve feed/list cards

bskyogcard/src/components/FeedCard.tsx

@@ -5,6 +5,7 @@ import {PostData} from '../data/getPostData.js'
 import {atoms as a, theme as t} from '../theme/index.js'
 import {formatCount} from '../util/formatCount.js'
 import {getModerationCauseInfo} from '../util/getModerationCauseInfo.js'
+import {sanitizeHandle} from '../util/sanitizeHandle.js'
 import {Box} from './Box.js'
 import {DefaultFeed} from './icons/avatars/DefaultFeed.js'
 import {Image} from './Image.js'
@@ -61,14 +62,30 @@ export function FeedCard({
         ) : (
           <DefaultFeed size={40} />
         )}
-        <Box cx={[a.pt_2xs]}>
+        <Box cx={[a.pt_2xs, a.flex_1]}>
-          <Text cx={[a.text_md, a.font_bold, a.pb_2xs]}>{displayName}</Text>
+          <Text cx={[a.text_md, a.font_bold, a.pb_2xs, a.line_clamp_1]}>
-          <Text cx={[a.text_sm, a.leading_snug]}>By @{creator.handle}</Text>
+            {displayName}
+          </Text>
+          <Text
+            cx={[
+              a.text_sm,
+              a.leading_snug,
+              t.atoms.text_contrast_medium,
+              a.line_clamp_1,
+            ]}>
+            {`By ${sanitizeHandle(creator.handle, '@')}`}
+          </Text>
         </Box>
       </Box>
 
       {likeCount > 1 && (
-        <Text cx={[a.text_sm, a.leading_snug]}>
+        <Text
+          cx={[
+            a.text_xs,
+            t.atoms.text_contrast_medium,
+            a.font_bold,
+            a.leading_snug,
+          ]}>
           Liked by {formatCount(likeCount)} users
         </Text>
       )}

bskyogcard/src/components/ListCard.tsx

@@ -4,6 +4,7 @@ import {ModeratorData} from '../data/getModeratorData.js'
 import {PostData} from '../data/getPostData.js'
 import {atoms as a, theme as t} from '../theme/index.js'
 import {getModerationCauseInfo} from '../util/getModerationCauseInfo.js'
+import {sanitizeHandle} from '../util/sanitizeHandle.js'
 import {Box} from './Box.js'
 import {DefaultFeed} from './icons/avatars/DefaultFeed.js'
 import {Image} from './Image.js'
@@ -60,9 +61,19 @@ export function ListCard({
         ) : (
           <DefaultFeed size={40} />
         )}
-        <Box cx={[a.pt_2xs]}>
+        <Box cx={[a.pt_2xs, a.flex_1]}>
-          <Text cx={[a.text_md, a.font_bold, a.pb_2xs]}>{name}</Text>
+          <Text cx={[a.text_md, a.font_bold, a.pb_2xs, a.line_clamp_1]}>
-          <Text cx={[a.text_sm, a.leading_snug]}>By @{creator.handle}</Text>
+            {name}
+          </Text>
+          <Text
+            cx={[
+              a.text_sm,
+              a.leading_snug,
+              t.atoms.text_contrast_medium,
+              a.line_clamp_1,
+            ]}>
+            {`By ${sanitizeHandle(creator.handle, '@')}`}
+          </Text>
         </Box>
       </Box>
     </Box>

bskyogcard/src/components/PostEmbed.tsx

@@ -8,6 +8,7 @@ import {ModeratorData} from '../data/getModeratorData.js'
 import {Image as ImageSource, PostData} from '../data/getPostData.js'
 import {atoms as a, theme as t} from '../theme/index.js'
 import * as bsky from '../types/bsky/index.js'
+import {formatCount} from '../util/formatCount.js'
 import {getModerationCauseInfo} from '../util/getModerationCauseInfo.js'
 import {getStarterPackImageUri} from '../util/getStarterPackImageUri.js'
 import {Embed, EmbedType, parseEmbed} from '../util/parseEmbed.js'
@@ -220,7 +221,7 @@ export function StarterPackEmbed({
           ) : null}
           {embed.view.joinedAllTimeCount >= 50 && (
             <Text cx={[a.font_bold, a.text_xs, t.atoms.text_contrast_medium]}>
-              {embed.view.joinedAllTimeCount} users have joined!
+              {formatCount(embed.view.joinedAllTimeCount)} users have joined!
             </Text>
           )}
         </Box>

bskyogcard/test.html

@@ -53,6 +53,7 @@
         <div class="item"><img src="http://localhost:3000/profile/test-all-embeds-a.bsky.social/post/3lkchlshes22h?mat=1"><div>Link</div></div>
         <div class="item"><img src="http://localhost:3000/profile/test-all-embeds-a.bsky.social/post/3lkchm7qo622h?mat=1"><div>Link w/ label</div></div>
         <div class="item"><img src="http://localhost:3000/profile/test-all-embeds-a.bsky.social/post/3lkchnlwlbs2h?mat=1"><div>Starter pack</div></div>
+        <div class="item"><img src="http://localhost:3000/profile/techcrunch.com/post/3lcnpwhz4d22j?mat=1"><div>Starter pack w/ signups</div></div>
       </div>
     </section>