feat: logic to append preview url to provider name

This commit is contained in:
Ayo 2023-01-29 09:49:59 +01:00
parent c36b900cdd
commit f99d88a9e3
3 changed files with 27 additions and 22 deletions

View file

@ -17,17 +17,6 @@ const { translation } = useTranslation(status, getLanguageCode())
const emojisObject = useEmojisFallback(() => status.emojis) 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(() => { const vnode = $computed(() => {
if (!status.content) if (!status.content)
return null return null

View file

@ -21,7 +21,17 @@ const isSquare = $computed(() => (
|| Number(props.card.width || 0) < ogImageWidth || Number(props.card.width || 0) < ogImageWidth
|| Number(props.card.height || 0) < ogImageWidth / 2 || 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'; // TODO: handle card.type: 'photo' | 'video' | 'rich';
const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = { const cardTypeIconMap: Record<mastodon.v1.PreviewCardType, string> = {

View file

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