versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 11:39:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Implement custom emojis

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-02 22:21:04 +01:00
parent bb5de77bb1
commit 348b1ba2b0
No known key found for this signature in database
12 changed files with 77 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/profiles/profile-content.vue
View file

@ -1,11 +1,14 @@
<template>
<div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content">
<div :class="['prose prose-sm block relative dark:prose-invert duration-200 !max-w-full break-words prose-a:no-underline prose-a:hover:underline', $style.content]" v-html="content" v-render-emojis="emojis">
</div>
</template>
<script lang="ts" setup>
import type { Emoji } from "@versia/client/types";
const { content } = defineProps<{
content: string;
emojis: Emoji[];
}>();
</script>

7
components/profiles/profile-fields.vue
View file

@ -1,16 +1,17 @@
<template>
<div class="flex flex-col gap-y-4">
<div v-for="field in fields" :key="field.name" class="flex flex-col gap-1">
<h3 class="font-semibold text-sm">{{ field.name }}</h3>
<div v-html="field.value" class="prose prose-sm prose-zinc dark:prose-invert"></div>
<h3 class="font-semibold text-sm" v-render-emojis="emojis">{{ field.name }}</h3>
<div v-html="field.value" class="prose prose-sm prose-zinc dark:prose-invert" v-render-emojis="emojis"></div>
</div>
</div>
</template>
<script lang="ts" setup>
import type { Field } from "@versia/client/types";
import type { Emoji, Field } from "@versia/client/types";
defineProps<{
fields: Field[];
emojis: Emoji[];
}>();
</script>

6
components/profiles/profile.vue
View file

@ -17,7 +17,7 @@
</ProfileActions>
</div>
<div class="flex flex-col -mt-1 gap-2 justify-center">
<CardTitle class="">
<CardTitle class="" v-render-emojis="account.emojis">
{{ account.display_name }}
</CardTitle>
<CopyableText :text="account.acct">
@ -36,13 +36,13 @@
<ProfileBadge v-for="role in roles" :key="role.id" :name="role.name" :description="role.description"
:icon="role.icon" />
</div>
<ProfileContent :content="account.note" />
<ProfileContent :content="account.note" :emojis="account.emojis" />
</CardContent>
<CardFooter class="flex-col items-start gap-4">
<ProfileStats :creation-date="new Date(account.created_at || 0)" :follower-count="account.followers_count"
:following-count="account.following_count" :note-count="account.statuses_count" />
<Separator v-if="account.fields.length > 0" />
<ProfileFields v-if="account.fields.length > 0" :fields="account.fields" />
<ProfileFields v-if="account.fields.length > 0" :fields="account.fields" :emojis="account.emojis" />
</CardFooter>
</Card>
</template>