zio
/
elk
2
0
Fork 0
Code Packages Releases 2 Activity

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

zio/stable
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 /> <AccountAvatar :account="account" hover:opacity-90 transition-opacity />
</button> </button>
<div flex flex-col> <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 /> <AccountHandle :account="account" op50 />
</div> </div>
</div> </div>

2
components/account/AccountInfo.vue
View File

@ -19,7 +19,7 @@ const accountHandle = $(useAccountHandle(account, fullServer))
</NuxtLink> </NuxtLink>
</div> </div>
<NuxtLink flex flex-col :to="link ? getAccountPath(account) : null"> <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 /> <AccountHandle :account="account" text-sm op35 />
<slot name="bottom" /> <slot name="bottom" />
</NuxtLink> </NuxtLink>

2
components/account/AccountInlineInfo.vue
View File

@ -10,6 +10,6 @@ const { link = true } = defineProps<{
<template> <template>
<NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center> <NuxtLink :to="link ? getAccountPath(account) : undefined" min-w-0 flex gap-1 items-center>
<AccountAvatar :account="account" w-5 h-5 /> <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> </NuxtLink>
</template> </template>

2
components/account/AccountLink.vue
View File

@ -8,6 +8,6 @@ defineProps<{
<template> <template>
<NuxtLink :to="getAccountPath(account)"> <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> </NuxtLink>
</template> </template>

2
components/status/StatusAccountDetails.vue
View File

@ -14,7 +14,7 @@ const accountHandle = $(useAccountHandle(account))
:to="link ? getAccountPath(account) : undefined" :to="link ? getAccountPath(account) : undefined"
flex="~ col" min-w-0 md:flex="~ row gap-2" md:items-center 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> <p op35 text-sm>
{{ accountHandle }} {{ accountHandle }}
</p> </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 || '' return account.url.match(UserLinkRE)?.[1] || currentUser.value?.server || ''
} }
export function getDisplayName(account: Account) { export function getDisplayName(account?: Account, options?: { rich?: boolean }) {
return account.displayName || account.username const displayName = account?.displayName || account?.username || ''
if (options?.rich)
return displayName
return displayName.replace(/:([\w-]+?):/g, '')
} }
export function getShortHandle(account: Account) { 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" v-if="currentUser"
border="t base" border="t base"
:draft-key="`reply-${id}`" :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" :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) { if (account) {
useHead({ useHead({
title: () => `${account.displayName?.replace(/\:\w+\:/g, '') ?? ''} (@${account.acct})`, title: () => `${getDisplayName(account)} (@${account.acct})`,
}) })
} }
</script> </script>