feat: logic to append preview url to provider name

components/status/StatusBody.vue

@@ -17,17 +17,6 @@ const { translation } = useTranslation(status, getLanguageCode())
 
 const emojisObject = useEmojisFallback(() => status.emojis)
 
-/**
- * example status raw content
- *
- * <p>🔴 trying to code live - come let&#39;s talk <span class="h-card"><a href="https://m.webtoo.ls/@elk" class="u-url mention">@<span>elk</span></a></span> and <a href="https://social.ayco.io/tags/opensource" class="mention hashtag" rel="tag">#<span>opensource</span></a> <a href="https://www.twitch.tv/ayoayco" target="_blank" rel="nofollow noopener noreferrer"><span class="invisible">https://www.</span><span class="">twitch.tv/ayoayco</span><span class="invisible"></span></a></p>
- *
- *
- * "<p>I say something about the link first</p><p><a href=\"https://ayco.io\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span class=\"invisible\">https://</span><span class=\"\">ayco.io</span><span class=\"invisible\"></span></a></p>"
-
- *
- */
-
 const vnode = $computed(() => {
   if (!status.content)
     return null

components/status/StatusPreviewCardNormal.vue

@@ -21,7 +21,17 @@ const isSquare = $computed(() => (
   || Number(props.card.width || 0) < ogImageWidth
   || Number(props.card.height || 0) < ogImageWidth / 2
 ))
-const providerName = $computed(() => props.card.providerName ? `${props.card.providerName} · ${props.cleanSharedLink}` : new URL(props.card.url).hostname)
+const providerName = $computed(() => {
+  let finalProviderName = new URL(props.card.url).hostname
+
+  if (props.card.providerName) {
+    finalProviderName = props.card.providerName
+    if (props.cleanSharedLink && finalProviderName !== props.cleanSharedLink)
+      finalProviderName = `${props.card.providerName} · ${props.cleanSharedLink}`
+  }
+
+  return finalProviderName
+})
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {

composables/content-parse.ts

@@ -132,22 +132,28 @@ export function parseMastodonHTML(
   const node = parse(html) as Node
 
   if (cleanSharedLink) {
-    const filteredNode = node.children.filter((child: Node) => !!child.children) // remove invisible spans
-    const filteredLength = filteredNode.length
-    const length = filteredNode[filteredLength - 1].children.length
-    const lastChild = filteredNode[filteredLength - 1].children[length - 1]
-    const sharedHref = lastChild.attributes?.href
-    const match = sharedHref === cleanSharedLink
+    // filter out invisible spans
+    const filteredNode = node.children.filter((child: Node) => !!child.children)
+    const matchedIndex = lastChildLinkMatchesPreviewUrl(filteredNode, cleanSharedLink)
 
-    if (match) {
-      const index = length - 1
-      filteredNode[filteredLength - 1].children.splice(index, 1)
-    }
+    if (matchedIndex)
+      filteredNode[filteredNode.length - 1].children.splice(matchedIndex, 1)
   }
 
   return transformSync(node, transforms)
 }
 
+/**
+ * Returns the index of the last link node if it matches the previewUrl
+ */
+export function lastChildLinkMatchesPreviewUrl(filteredNode: Node, previewUrl: string) {
+  const filteredLength = filteredNode.length
+  const length = filteredNode[filteredLength - 1].children.length
+  const lastChild = filteredNode[filteredLength - 1].children[length - 1]
+  const sharedHref = lastChild.attributes?.href
+  return sharedHref === previewUrl ? length - 1 : null
+}
+
 /**
  * Converts raw HTML form Mastodon server to HTML for Tiptap editor
  */