Don't resolve facets twice

bskyogcard/src/components/Post.tsx

@@ -12,6 +12,7 @@ import {
   moderateFeedGenerator,
   moderateUserList,
   ModerationDecision,
+  RichText as RichTextApi,
 } from '@atproto/api'
 
 import {ModeratorData} from '../data/getModeratorData.js'
@@ -50,8 +51,12 @@ export function Post({
 }) {
   if (AppBskyFeedPost.isRecord(post.record)) {
     const avatar = data.images.get(post.author.avatar)
-    const text = post.record.text
+    const rt = post.record.text
-    const rt = data.texts.get(text)
+      ? new RichTextApi({
+          text: post.record.text,
+          facets: post.record.facets,
+        })
+      : undefined
     const hasInteractions = post.likeCount > 0 || post.repostCount > 0
     const moderation = moderatePost(post, moderatorData.moderationOptions)
 
@@ -551,7 +556,12 @@ export function QuoteEmbed({
   ) {
     const {author, value: post, embeds} = embed.record
     const avatar = data.images.get(author.avatar)
-    const rt = data.texts.get(post.text)
+    const rt = post.text
+      ? new RichTextApi({
+          text: post.text,
+          facets: post.facets,
+        })
+      : undefined
     const postView = viewRecordToPostView(embed.record)
     const moderation = moderatePost(postView, moderatorData.moderationOptions)
 
@@ -591,11 +601,7 @@ export function QuoteEmbed({
           </Box>
         </Box>
 
-        {rt && (
+        {rt && <RichText value={rt} cx={[a.text_sm]} />}
-          <Box>
-            <RichText value={rt} cx={[a.text_sm]} />
-          </Box>
-        )}
 
         {Boolean(embeds && embeds.length) && (
           <Box cx={[a.pt_sm]}>

bskyogcard/src/components/RichText.tsx

@@ -18,7 +18,7 @@ export function RichText({
   const baseStyles = [
     a.leading_snug,
     {
-      whiteSpace: 'pre-wrap',
+      // whiteSpace: 'wrap',
     },
     cx ? s(cx) : {},
   ]
@@ -63,7 +63,7 @@ export function RichText({
     } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
       const url = toShortUrl(text)
       if (disableLinks) {
-        els.push(url)
+        els.push(<span key={key}>{url}</span>)
       } else {
         els.push(
           <span key={key} style={s(linkStyles)}>
@@ -82,7 +82,7 @@ export function RichText({
         </span>,
       )
     } else {
-      els.push(segment.text)
+      els.push(<span key={key}>{segment.text}</span>)
     }
     key++
   }

bskyogcard/src/components/Text.tsx

@@ -13,7 +13,8 @@ export function Text({
     <div
       style={s([
         a.flex,
-        a.flex_col,
+        a.flex_wrap,
+        a.gap_xs,
         a.font_normal,
         a.leading_tight,
         a.tracking_wide,

bskyogcard/src/data/getPostData.ts

@@ -4,10 +4,7 @@ import {
   AppBskyEmbedRecord,
   AppBskyEmbedRecordWithMedia,
   AppBskyFeedDefs,
-  AppBskyFeedPost,
   AppBskyGraphDefs,
-  AtpAgent,
-  RichText,
 } from '@atproto/api'
 
 import {httpLogger} from '../logger.js'
@@ -28,7 +25,6 @@ export type Image = Metadata & {
 
 export type PostData = {
   images: Map<string, Image>
-  texts: Map<string, RichText>
 }
 
 function normalizeAspectRatio(aspectRatio?: {
@@ -45,10 +41,8 @@ function normalizeAspectRatio(aspectRatio?: {
 
 export async function getPostData(
   post: AppBskyFeedDefs.PostView,
-  agent: AtpAgent,
 ): Promise<PostData> {
   const images: Map<string, Metadata> = new Map()
-  const texts: Map<string, RichText> = new Map()
 
   // console.log(JSON.stringify(post, null, 2))
 
@@ -61,10 +55,6 @@ export async function getPostData(
     })
   }
 
-  if (AppBskyFeedPost.isRecord(post.record) && post.record.text) {
-    texts.set(post.record.text, new RichText({text: post.record.text}))
-  }
-
   if (post.embed) {
     if (AppBskyEmbedImages.isView(post.embed)) {
       // get OPs media
@@ -166,16 +156,6 @@ export async function getPostData(
             })
           }
         }
-
-        if (
-          AppBskyFeedPost.isRecord(post.embed.record.value) &&
-          post.embed.record.value.text
-        ) {
-          texts.set(
-            post.embed.record.value.text,
-            new RichText({text: post.embed.record.value.text}),
-          )
-        }
       }
 
       if (AppBskyGraphDefs.isListView(post.embed.record)) {
@@ -271,16 +251,6 @@ export async function getPostData(
             }
           }
         }
-
-        if (
-          AppBskyFeedPost.isRecord(post.embed.record.record.value) &&
-          post.embed.record.record.value.text
-        ) {
-          texts.set(
-            post.embed.record.record.value.text,
-            new RichText({text: post.embed.record.record.value.text}),
-          )
-        }
       }
     }
   }
@@ -309,7 +279,6 @@ export async function getPostData(
       }
     }),
   )
-  await Promise.all(Array.from(texts.values()).map(r => r.detectFacets(agent)))
   const extracted = resolved.filter(([, i]) => i.image !== null) as [
     string,
     Image,
@@ -317,6 +286,5 @@ export async function getPostData(
 
   return {
     images: new Map(extracted),
-    texts,
   }
 }

bskyogcard/src/routes/post.tsx

@@ -40,7 +40,7 @@ export default function (ctx: AppContext, app: Express) {
         }
 
         const [postData, moderatorData] = await Promise.all([
-          getPostData(post, ctx.appviewAgent),
+          getPostData(post),
           getModeratorData(ctx.appviewAgent),
         ])