Merge branch 'feature/emoji-in-profiles' into 'develop'

Use serverside html rendering in usernames and bios if available.

See merge request pleroma/pleroma-fe!304

src/components/notification/notification.vue

@@ -10,7 +10,8 @@
       </div>
       <span class="notification-details">
         <div class="name-and-action">
-          <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
+          <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span>
+          <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
           <span v-if="notification.type === 'favorite'">
             <i class="fa icon-star lit"></i>
             <small>{{$t('notifications.favorited_you')}}</small>

src/components/status/status.js

@@ -40,6 +40,7 @@ const Status = {
     },
     retweet () { return !!this.statusoid.retweeted_status },
     retweeter () { return this.statusoid.user.name },
+    retweeterHtml () { return this.statusoid.user.name_html },
     status () {
       if (this.retweet) {
         return this.statusoid.retweeted_status

src/components/status/status.vue

@@ -11,7 +11,8 @@
       <div v-if="retweet && !noHeading" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
         <div class="media-body faint">
-          <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
+          <a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
+          <a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
         </div>
@@ -30,7 +31,8 @@
           <div v-if="!noHeading" class="media-body container media-heading">
             <div class="media-heading-left">
               <div class="name-and-links">
-                <h4 class="user-name">{{status.user.name}}</h4>
+                <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
+                <h4 class="user-name" v-else>{{status.user.name}}</h4>
                 <span class="links">
                   <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
                   <span v-if="status.in_reply_to_screen_name" class="faint reply-info">

src/components/user_card/user_card.vue

@@ -7,7 +7,13 @@
       <user-card-content :user="user" :switcher="false"></user-card-content>
     </div>
     <div class="name-and-screen-name" v-else>
-      <div :title="user.name" class="user-name">
+      <div :title="user.name" v-if="user.name_html" class="user-name">
+        <span v-html="user.name_html"></span>
+        <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
+          {{ $t('user_card.follows_you') }}
+        </span>
+      </div>
+      <div :title="user.name" v-else class="user-name">
         {{ user.name }}
         <span class="follows-you" v-if="!userExpanded && showFollows && user.follows_you">
           {{ $t('user_card.follows_you') }}

src/components/user_card_content/user_card_content.vue

@@ -13,7 +13,8 @@
             <StillImage class="avatar" :src="user.profile_image_url_original"/>
           </router-link>
           <div class="name-and-screen-name">
-            <div :title="user.name" class='user-name'>{{user.name}}</div>
+            <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
+            <div :title="user.name" class='user-name' v-else>{{user.name}}</div>
             <router-link class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
               <span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
               <span class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
@@ -88,7 +89,8 @@
           <span>{{user.followers_count}}</span>
         </div>
       </div>
-      <p v-if="!hideBio">{{user.description}}</p>
+      <p v-if="!hideBio && user.description_html" v-html="user.description_html"></p>
+      <p v-else-if="!hideBio">{{ user.description }}</p>
     </div>
   </div>
 </template>