Merge branch 'main' of github.com:elk-zone/elk into feature/remove-link-if-matches-preview-URL

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

components/status/StatusBody.vue

@@ -5,15 +5,18 @@ const {
   status,
   newer,
   withAction = true,
+  cleanSharedLink,
 } = defineProps<{
   status: mastodon.v1.Status | mastodon.v1.StatusEdit
   newer?: mastodon.v1.Status
   withAction?: boolean
+  cleanSharedLink?: string | false
 }>()
 
 const { translation } = useTranslation(status, getLanguageCode())
 
 const emojisObject = useEmojisFallback(() => status.emojis)
+
 const vnode = $computed(() => {
   if (!status.content)
     return null
@@ -24,7 +27,9 @@ const vnode = $computed(() => {
     collapseMentionLink: !!('inReplyToId' in status && status.inReplyToId),
     status: 'id' in status ? status : undefined,
     inReplyToStatus: newer,
+    cleanSharedLink,
   })
+
   return vnode
 })
 </script>

components/status/StatusContent.vue

@@ -21,6 +21,10 @@ const isFiltered = $computed(() => status.account.id !== currentUser.value?.acco
 // check spoiler text or media attachment
 // needed to handle accounts that mark all their posts as sensitive
 const hasSpoilerOrSensitiveMedia = $computed(() => !!status.spoilerText || (status.sensitive && !!status.mediaAttachments.length))
+
+const cleanSharedLink = !status.poll
+  && !status.mediaAttachments.length
+  && status.card?.url
 </script>
 
 <template>
@@ -39,7 +43,7 @@ const hasSpoilerOrSensitiveMedia = $computed(() => !!status.spoilerText || (stat
       <template v-else-if="filterPhrase" #spoiler>
         <p>{{ `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
       </template>
-      <StatusBody v-if="!status.sensitive || status.spoilerText" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusBody v-if="!status.sensitive || status.spoilerText" :clean-shared-link="cleanSharedLink" :status="status" :newer="newer" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
       <StatusTranslation :status="status" />
       <StatusPoll v-if="status.poll" :status="status" />
       <StatusMedia
@@ -51,6 +55,7 @@ const hasSpoilerOrSensitiveMedia = $computed(() => !!status.spoilerText || (stat
         v-if="status.card"
         :card="status.card"
         :small-picture-only="status.mediaAttachments?.length > 0"
+        :clean-shared-link="cleanSharedLink"
       />
       <StatusCard
         v-if="status.reblog"

components/status/StatusPreviewCard.vue

@@ -7,15 +7,16 @@ const props = defineProps<{
   smallPictureOnly?: boolean
   /** When it is root card in the list, not appear as a child card */
   root?: boolean
+  /** Defined when the preview card URL matches the last shared link href attribute */
+  cleanSharedLink?: string | false
 }>()
 
-const providerName = props.card.providerName
-
+const providerName = $computed(() => props.card.providerName ? props.card.providerName : new URL(props.card.url).hostname)
 const gitHubCards = $(usePreferences('experimentalGitHubCards'))
 </script>
 
 <template>
   <LazyStatusPreviewGitHub v-if="gitHubCards && providerName === 'GitHub'" :card="card" />
   <LazyStatusPreviewStackBlitz v-else-if="gitHubCards && providerName === 'StackBlitz'" :card="card" :small-picture-only="smallPictureOnly" :root="root" />
-  <StatusPreviewCardNormal v-else :card="card" :small-picture-only="smallPictureOnly" :root="root" />
+  <StatusPreviewCardNormal v-else :card="card" :clean-shared-link="cleanSharedLink" :small-picture-only="smallPictureOnly" :root="root" />
 </template>

components/status/StatusPreviewCardNormal.vue

@@ -7,6 +7,8 @@ const props = defineProps<{
   smallPictureOnly?: boolean
   /** When it is root card in the list, not appear as a child card */
   root?: boolean
+  /** Defined when the preview card URL matches the last shared link href attribute */
+  cleanSharedLink?: string | false
 }>()
 
 // mastodon's default max og image width
@@ -19,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 : 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.replace(/^https?:\/\//, '')}`
+  }
+
+  return finalProviderName
+})
 
 // TODO: handle card.type: 'photo' | 'video' | 'rich';
 const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {

composables/content-parse.ts

@@ -17,6 +17,7 @@ export interface ContentParseOptions {
   collapseMentionLink?: boolean
   status?: mastodon.v1.Status
   inReplyToStatus?: mastodon.v1.Status
+  cleanSharedLink?: string | false // this is defined when conditions for cleaning the link are met
 }
 
 const sanitizerBasicClasses = filterClasses(/^(h-\S*|p-\S*|u-\S*|dt-\S*|e-\S*|mention|hashtag|ellipsis|invisible)$/u)
@@ -86,6 +87,7 @@ export function parseMastodonHTML(
     mentions,
     status,
     inReplyToStatus,
+    cleanSharedLink,
   } = options
 
   if (markdown) {
@@ -135,7 +137,29 @@ export function parseMastodonHTML(
   if (collapseMentionLink)
     transforms.push(transformCollapseMentions(status, inReplyToStatus))
 
-  return transformSync(parse(html), transforms)
+  const node = parse(html) as Node
+
+  if (cleanSharedLink) {
+    // filter out invisible spans
+    const filteredNode = node.children.filter((child: Node) => !!child.children)
+    const matchedIndex = lastChildLinkMatchesPreviewUrl(filteredNode, cleanSharedLink)
+
+    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
 }
 
 /**