From c2850a34ae38bea15c05ca1f7c453ef90cd14e08 Mon Sep 17 00:00:00 2001 From: Daniel Roe Date: Wed, 11 Jan 2023 17:18:06 +0000 Subject: [PATCH 001/322] fix: use mention accts within a status to render links (#955) --- components/status/StatusBody.vue | 1 + composables/content-parse.ts | 20 +++++++++++++++++++ tests/__snapshots__/content-rich.test.ts.snap | 13 ++++++++++++ tests/content-rich.test.ts | 9 +++++++-- 4 files changed, 41 insertions(+), 2 deletions(-) diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue index d91b5ad9..eab2637f 100644 --- a/components/status/StatusBody.vue +++ b/components/status/StatusBody.vue @@ -17,6 +17,7 @@ const vnode = $computed(() => { return null const vnode = contentToVNode(status.content, { emojis: emojisObject.value, + mentions: 'mentions' in status ? status.mentions : undefined, markdown: true, }) return vnode diff --git a/composables/content-parse.ts b/composables/content-parse.ts index 683e93d1..dea3d5b2 100644 --- a/composables/content-parse.ts +++ b/composables/content-parse.ts @@ -8,6 +8,7 @@ import { emojiRegEx, getEmojiAttributes } from '../config/emojis' export interface ContentParseOptions { emojis?: Record + mentions?: mastodon.v1.StatusMention[] markdown?: boolean replaceUnicodeEmoji?: boolean astTransforms?: Transform[] @@ -47,6 +48,7 @@ export function parseMastodonHTML( markdown = true, replaceUnicodeEmoji = true, convertMentionLink = false, + mentions, } = options if (markdown) { @@ -74,6 +76,9 @@ export function parseMastodonHTML( if (markdown) transforms.push(transformMarkdown) + if (mentions?.length) + transforms.push(createTransformNamedMentions(mentions)) + if (convertMentionLink) transforms.push(transformMentionLink) @@ -377,3 +382,18 @@ function transformMentionLink(node: Node): string | Node | (string | Node)[] | n } return node } + +function createTransformNamedMentions(mentions: mastodon.v1.StatusMention[]) { + return (node: Node): string | Node | (string | Node)[] | null => { + if (node.name === 'a' && node.attributes.class?.includes('mention')) { + const href = node.attributes.href + const mention = href && mentions.find(m => m.url === href) + if (mention) { + node.attributes.href = `/${currentServer.value}/@${mention.acct}` + node.children = [h('span', { 'data-type': 'mention', 'data-id': mention.acct }, `@${mention.username}`)] + return node + } + } + return node + } +} diff --git a/tests/__snapshots__/content-rich.test.ts.snap b/tests/__snapshots__/content-rich.test.ts.snap index 1dde47cf..c7202ea1 100644 --- a/tests/__snapshots__/content-rich.test.ts.snap +++ b/tests/__snapshots__/content-rich.test.ts.snap @@ -40,6 +40,19 @@ exports[`content-rich > custom emoji 1`] = ` exports[`content-rich > empty 1`] = `""`; +exports[`content-rich > group mention > html 1`] = ` +"

+ +

+" +`; + exports[`content-rich > handles html within code blocks 1`] = ` "

HTML block code:
diff --git a/tests/content-rich.test.ts b/tests/content-rich.test.ts index 700fe4ff..c3df5b0c 100644 --- a/tests/content-rich.test.ts +++ b/tests/content-rich.test.ts @@ -20,6 +20,11 @@ describe('content-rich', () => { expect(formatted).toMatchSnapshot() }) + it('group mention', async () => { + const { formatted } = await render('

@pilipinas

', undefined, [{ id: '', username: 'pilipinas', url: 'https://lemmy.ml/c/pilipinas', acct: 'pilipinas@lemmy.ml' }]) + expect(formatted).toMatchSnapshot('html') + }) + it('inline code with link', async () => { const { formatted } = await render('

Inline code with link: `api.iconify.design/noto.css?ic`

') expect(formatted).toMatchSnapshot() @@ -64,8 +69,8 @@ describe('content-rich', () => { }) }) -async function render(content: string, emojis?: Record) { - const vnode = contentToVNode(content, { emojis }) +async function render(content: string, emojis?: Record, mentions?: mastodon.v1.StatusMention[]) { + const vnode = contentToVNode(content, { emojis, mentions }) const html = (await renderToString(vnode)) .replace(//g, '') let formatted = '' From c1e89582f8379dc9167617cfaa7219c997917e18 Mon Sep 17 00:00:00 2001 From: Shinigami Date: Wed, 11 Jan 2023 18:47:36 +0100 Subject: [PATCH 002/322] fix: remove emoji in status title (#932) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: 三咲智子 Kevin Deng --- components/status/StatusDetails.vue | 2 +- composables/masto/account.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue index dd53bcda..1d927e60 100644 --- a/components/status/StatusDetails.vue +++ b/components/status/StatusDetails.vue @@ -20,7 +20,7 @@ const createdAt = useFormattedDateTime(status.createdAt) const { t } = useI18n() useHeadFixed({ - title: () => `${status.account.displayName || status.account.acct} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`, + title: () => `${getDisplayName(status.account)} ${t('common.in')} ${t('app_name')}: "${removeHTMLTags(status.content) || ''}"`, }) const isDM = $computed(() => status.visibility === 'direct') diff --git a/composables/masto/account.ts b/composables/masto/account.ts index 8b47ac69..a5736a08 100644 --- a/composables/masto/account.ts +++ b/composables/masto/account.ts @@ -1,7 +1,7 @@ import type { mastodon } from 'masto' -export function getDisplayName(account?: mastodon.v1.Account, options?: { rich?: boolean }) { - const displayName = account?.displayName || account?.username || '' +export function getDisplayName(account: mastodon.v1.Account, options?: { rich?: boolean }) { + const displayName = account.displayName || account.username || account.acct || '' if (options?.rich) return displayName return displayName.replace(/:([\w-]+?):/g, '') From 689ae0c701c052abe11c586ce2035d3a25afe04f Mon Sep 17 00:00:00 2001 From: Ayo Ayco Date: Wed, 11 Jan 2023 20:08:15 +0100 Subject: [PATCH 003/322] fix: top and bottom padding of small preview card on mobile (#974) --- components/status/StatusPreviewCard.vue | 6 +++--- components/status/StatusPreviewCardInfo.vue | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/components/status/StatusPreviewCard.vue b/components/status/StatusPreviewCard.vue index ba32154d..94192428 100644 --- a/components/status/StatusPreviewCard.vue +++ b/components/status/StatusPreviewCard.vue @@ -54,7 +54,7 @@ const cardTypeIconMap: Record = { flex flex-col display-block of-hidden :class="{ - 'sm:(min-w-32 w-32 h-32) min-w-22 w-22 h-22': isSquare, + 'sm:(min-w-32 w-32 h-32) min-w-24 w-24 h-24': isSquare, 'w-full aspect-[1.91]': !isSquare, 'rounded-lg': root, }" @@ -70,13 +70,13 @@ const cardTypeIconMap: Record = {
- + diff --git a/components/status/StatusPreviewCardInfo.vue b/components/status/StatusPreviewCardInfo.vue index 0da9a402..1ebf6973 100644 --- a/components/status/StatusPreviewCardInfo.vue +++ b/components/status/StatusPreviewCardInfo.vue @@ -12,12 +12,12 @@ defineProps<{