teutat3s/elk
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix: use rich (emoji) display name only with <ContentRich>

Browse source
This commit is contained in:
Daniel Roe 2022-11-26 15:06:30 +00:00
parent 6d2ca0a1b1
commit e51ca06f97
No known key found for this signature in database
GPG key ID: 22D5008E4F5D9B55
8 changed files with 13 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
components/account/AccountHeader.vue
View file

@ -66,7 +66,7 @@ function previewAvatar() {
<AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button>
<div flex flex-col>
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold text-2xl break-words :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" op50 />
</div>
</div>

2
components/account/AccountInfo.vue
View file

@ -19,7 +19,7 @@ const accountHandle = $(useAccountHandle(account, fullServer))
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null">
<ContentRich font-bold hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<AccountHandle :account="account" text-sm op35 />
<slot name="bottom" />
</NuxtLink>

2
components/account/AccountInlineInfo.vue
View file

@ -10,6 +10,6 @@ const { link = true } = defineProps<{
<template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 />
<ContentRich hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink>
</template>

2
components/account/AccountLink.vue
View file

@ -8,6 +8,6 @@ defineProps<{
<template>
<NuxtLink :to="getAccountPath(account)">
<ContentRich font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
</NuxtLink>
</template>

2
components/status/StatusAccountDetails.vue
View file

@ -14,7 +14,7 @@ const accountHandle = $(useAccountHandle(account))
:to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center
>
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account)" :emojis="account.emojis" />
<ContentRich font-bold break-words hover:underline :content="getDisplayName(account, { rich: true })" :emojis="account.emojis" />
<p op35 text-sm>
{{ accountHandle }}
</p>

8
composables/masto.ts
View file

@ -39,8 +39,12 @@ export function getServerName(account: Account) {
return account.url.match(UserLinkRE)?.[1] || currentUser.value?.server || ''
}
export function getDisplayName(account: Account) {
return account.displayName || account.username
export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
const displayName = account?.displayName || account?.username || ''
if (options?.rich)
return displayName
return displayName.replace(/:([\w-]+?):/g, '')
}
export function getShortHandle(account: Account) {

2
pages/@[account]/[status].vue
View file

@ -23,7 +23,7 @@ const { data: context } = useAsyncData(`context:${id}`, () => masto.statuses.fet
v-if="currentUser"
border="t base"
:draft-key="`reply-${id}`"
:placeholder="`Reply to ${status?.account ? getDisplayName(status?.account) : 'this thread'}`"
:placeholder="`Reply to ${status?.account ? getDisplayName(status.account) : 'this thread'}`"
:in-reply-to-id="id"
/>

2
pages/@[account]/index.vue
View file

@ -6,7 +6,7 @@ const account = await fetchAccountByName(accountName).catch(() => null)
if (account) {
useHead({
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`,
title: () => `${getDisplayName(account)} (@${account.acct})`,
})
}
</script>