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

feat: support custom emojis from other servers

Browse source
This commit is contained in:
Anthony Fu 2022-11-23 07:42:20 +08:00
parent f3a0a5af3f
commit 6d66bbbc5d
10 changed files with 40 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/account/AccountAvatar.vue Normal file
View file

@ -0,0 +1,11 @@
<script setup lang="ts">
import type { Account } from 'masto'
defineProps<{
account: Account
}>()
</script>
<template>
<img :src="account.avatar" :alt="account.username" rounded bg-gray:10>
</template>

4
components/account/AccountHeader.vue
View file

@ -21,11 +21,11 @@ const createdAt = $computed(() => {
<div flex flex-col gap-2>
<div p1>
<NuxtLink :to="`/@${account.acct}`">
<img :src="account.avatar" rounded w-20 h-20>
<AccountAvatar :account="account" w-20 h-20 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="`/@${account.acct}`">
<CommonRichContent font-bold :content="getDisplayName(account)" />
<CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op50>
@{{ account.acct }}
</p>

4
components/account/AccountInfo.vue
View file

@ -11,11 +11,11 @@ const { link = true } = defineProps<{
<div flex gap-2>
<div p1>
<NuxtLink :to="link ? `/@${account.acct}` : null">
<img :src="account.avatar" rounded w-10 h-10 bg-gray:10>
<AccountAvatar :account="account" w-10 h-10 />
</NuxtLink>
</div>
<NuxtLink flex flex-col :to="link ? `/@${account.acct}` : null">
<CommonRichContent font-bold :content="getDisplayName(account)" />
<CommonRichContent font-bold :content="getDisplayName(account)" :emojis="account.emojis" />
<p op35 text-sm>
@{{ account.acct }}
</p>

4
components/account/AccountInlineInfo.vue
View file

@ -8,7 +8,7 @@ defineProps<{
<template>
<NuxtLink :href="`/@${account.acct}`" flex gap-2 font-bold items-center>
<img :src="account.avatar" class="w-5 h-5 rounded">
<CommonRichContent :content="getDisplayName(account)" />
<AccountAvatar :account="account" w-5 h-5 />
<CommonRichContent :content="getDisplayName(account)" :emojis="account.emojis" />
</NuxtLink>
</template>

12
components/common/RichContent.ts
View file

@ -1,16 +1,24 @@
import type { Emoji } from 'masto'
import type { PropType } from 'vue'
import { emojisArrayToObject } from '~/composables/utils'
export default defineComponent({
props: {
content: {
type: String,
required: true,
},
emojis: {
type: Array as PropType<Emoji[]>,
},
},
setup(props) {
const serverInfos = useServerInfo(currentServer.value)
const emojiObject = emojisArrayToObject(props.emojis || [])
return () => h(
'div',
{ class: 'rich-content' },
contentToVNode(props.content, undefined, serverInfos.value?.customEmojis),
contentToVNode(props.content, undefined, emojiObject),
)
},
})

2
components/status/StatusBody.vue
View file

@ -8,6 +8,6 @@ const { status } = defineProps<{
<template>
<div class="status-body">
<CommonRichContent :content="status.content" />
<CommonRichContent :content="status.content" :emojis="status.emojis" />
</div>
</template>