diff --git a/CHANGELOG.md b/CHANGELOG.md
index faea475..7c3b811 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
## [Unreleased]
+### Added
+
+- Render custom emojis in display names.
+
### Changed
- Use `/@username` routes by default.
diff --git a/src/api/emojis.ts b/src/api/emojis.ts
new file mode 100644
index 0000000..fb71c32
--- /dev/null
+++ b/src/api/emojis.ts
@@ -0,0 +1,17 @@
+export interface CustomEmoji {
+ shortcode: string,
+ url: string,
+}
+
+export function replaceShortcodes(text: string, emojis: CustomEmoji[]): string {
+ return text.replace(/:([\w.]+):/g, (match, shortcode) => {
+ const emoji = emojis.find((emoji) => {
+ return emoji.shortcode === shortcode
+ })
+ if (emoji) {
+ return ``
+ } else {
+ return match
+ }
+ })
+}
diff --git a/src/api/posts.ts b/src/api/posts.ts
index 699bf2a..ef4f33d 100644
--- a/src/api/posts.ts
+++ b/src/api/posts.ts
@@ -1,5 +1,6 @@
import { BACKEND_URL } from "@/constants"
import { PAGE_SIZE, http } from "./common"
+import { CustomEmoji } from "./emojis"
import { defaultProfile, Profile } from "./users"
export interface Attachment {
@@ -52,11 +53,6 @@ export interface Tag {
url: string;
}
-export interface CustomEmoji {
- shortcode: string,
- url: string,
-}
-
export interface Post {
id: string;
uri: string;
diff --git a/src/api/users.ts b/src/api/users.ts
index 04c8aa7..7438ba9 100644
--- a/src/api/users.ts
+++ b/src/api/users.ts
@@ -3,6 +3,7 @@ import { RouteLocationRaw } from "vue-router"
import { BACKEND_URL } from "@/constants"
import { createDidFromEthereumAddress } from "@/utils/did"
import { PAGE_SIZE, http } from "./common"
+import { CustomEmoji } from "./emojis"
export const EXTRA_FIELD_COUNT_MAX = 10
@@ -48,6 +49,7 @@ export interface Profile {
identity_proofs: ProfileField[];
payment_options: ProfilePaymentOption[];
fields: ProfileField[];
+ emojis: CustomEmoji[],
followers_count: number;
following_count: number;
@@ -69,6 +71,7 @@ export function defaultProfile(): Profile {
identity_proofs: [],
payment_options: [],
fields: [],
+ emojis: [],
followers_count: 0,
following_count: 0,
subscribers_count: 0,
diff --git a/src/components/Post.vue b/src/components/Post.vue
index e1fe4cc..d750818 100644
--- a/src/components/Post.vue
+++ b/src/components/Post.vue
@@ -15,12 +15,12 @@
- {{ author.getDisplayName() }}
+
@{{ getActorAddress(post.account) }}
@@ -80,9 +80,8 @@
>
@@ -32,6 +33,7 @@ import { $, $computed } from "vue/macros"
import type { Post as PostObject } from "@/api/posts"
import { ProfileWrapper } from "@/api/users"
import Post from "@/components/Post.vue"
+import ProfileDisplayName from "@/components/ProfileDisplayName.vue"
import { useInstanceInfo } from "@/store/instance"
/* eslint-disable-next-line no-undef */
diff --git a/src/components/ProfileCard.vue b/src/components/ProfileCard.vue
index acae80e..63cafd0 100644
--- a/src/components/ProfileCard.vue
+++ b/src/components/ProfileCard.vue
@@ -7,7 +7,7 @@
-
{{ profile.getDisplayName() }}
+
@{{ getActorAddress(profile) }}
@@ -27,6 +27,7 @@ import { $computed } from "vue/macros"
import { Profile, ProfileWrapper } from "@/api/users"
import Avatar from "@/components/Avatar.vue"
+import ProfileDisplayName from "@/components/ProfileDisplayName.vue"
import { useInstanceInfo } from "@/store/instance"
/* eslint-disable-next-line no-undef */
diff --git a/src/components/ProfileDisplayName.vue b/src/components/ProfileDisplayName.vue
new file mode 100644
index 0000000..8343b08
--- /dev/null
+++ b/src/components/ProfileDisplayName.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/ProfileListItem.vue b/src/components/ProfileListItem.vue
index 7410ea7..0100c71 100644
--- a/src/components/ProfileListItem.vue
+++ b/src/components/ProfileListItem.vue
@@ -2,7 +2,7 @@
-
{{ profile.getDisplayName() }}
+
@{{ getActorAddress(profile) }}
@@ -13,6 +13,7 @@ import { $computed } from "vue/macros"
import { Profile, ProfileWrapper } from "@/api/users"
import Avatar from "@/components/Avatar.vue"
+import ProfileDisplayName from "@/components/ProfileDisplayName.vue"
import { useInstanceInfo } from "@/store/instance"
const { getActorAddress } = useInstanceInfo()
diff --git a/src/components/SubscriptionEthereum.vue b/src/components/SubscriptionEthereum.vue
index e353793..ce9a33b 100644
--- a/src/components/SubscriptionEthereum.vue
+++ b/src/components/SubscriptionEthereum.vue
@@ -7,7 +7,7 @@
:to="{ name: 'profile-by-acct', params: { acct: sender.acct }}"
>
-
{{ sender.getDisplayName() }}
+
{{ walletAddress ? walletAddress.toLowerCase() : '?' }}
@@ -18,7 +18,7 @@
:to="{ name: 'profile-by-acct', params: { acct: recipient.acct }}"
>
-
{{ recipient.getDisplayName() }}
+
{{ recipientEthereumAddress }}
@@ -125,6 +125,7 @@ import {
} from "@/api/subscriptions-ethereum"
import Avatar from "@/components/Avatar.vue"
import Loader from "@/components/Loader.vue"
+import ProfileDisplayName from "@/components/ProfileDisplayName.vue"
import { useWallet } from "@/composables/wallet"
import { useInstanceInfo } from "@/store/instance"
import { useCurrentUser } from "@/store/user"
diff --git a/src/components/SubscriptionMonero.vue b/src/components/SubscriptionMonero.vue
index dcef7e0..c15bd71 100644
--- a/src/components/SubscriptionMonero.vue
+++ b/src/components/SubscriptionMonero.vue
@@ -7,7 +7,7 @@
:to="{ name: 'profile-by-acct', params: { acct: sender.acct } }"
>
-
{{ sender.getDisplayName() }}
+
@@ -17,7 +17,7 @@
:to="{ name: 'profile-by-acct', params: { acct: recipient.acct }}"
>
-
{{ recipient.getDisplayName() }}
+