feat: use Google emoji CDN

frontend_nuxt/components/BaseTimeline.vue

@@ -8,7 +8,7 @@
       >
         <img v-if="item.src" :src="item.src" class="timeline-img" alt="timeline item" />
         <i v-else-if="item.icon" :class="item.icon"></i>
-        <span v-else-if="item.emoji" class="timeline-emoji">{{ item.emoji }}</span>
+        <img v-else-if="item.emoji" :src="item.emoji" class="timeline-emoji" alt="emoji" />
       </div>
       <div class="timeline-content">
         <slot name="item" :item="item">{{ item.content }}</slot>
@@ -74,8 +74,9 @@ export default {
 }
 
 .timeline-emoji {
-  font-size: 20px;
+  width: 20px;
-  line-height: 1;
+  height: 20px;
+  object-fit: contain;
 }
 
 .timeline-item::before {

frontend_nuxt/components/ReactionsGroup.vue

@@ -9,7 +9,7 @@
       >
         <template v-if="displayedReactions.length">
           <div v-for="r in displayedReactions" :key="r.type" class="reactions-viewer-item">
-            {{ reactionEmojiMap[r.type] }}
+            <img :src="reactionEmojiMap[r.type]" class="emoji" alt="emoji" />
           </div>
           <div class="reactions-count">{{ totalCount }}</div>
         </template>
@@ -40,7 +40,9 @@
         @click="toggleReaction(t)"
         :class="{ selected: userReacted(t) }"
       >
-        {{ reactionEmojiMap[t] }}<span v-if="counts[t]">{{ counts[t] }}</span>
+        <img :src="reactionEmojiMap[t]" class="emoji" alt="emoji" /><span v-if="counts[t]">{{
+          counts[t]
+        }}</span>
       </div>
     </div>
   </div>

frontend_nuxt/utils/reactions.js

@@ -1,25 +1,32 @@
-export const reactionEmojiMap = {
+const toCdnUrl = (emoji) => {
-  LIKE: '❤️',
+  const codepoints = Array.from(emoji)
-  DISLIKE: '👎',
+    .map((c) => c.codePointAt(0).toString(16))
-  RECOMMEND: '👏',
+    .join('_')
-  ANGRY: '😡',
+  return `https://fonts.gstatic.com/s/e/notoemoji/latest/${codepoints}/emoji.svg`
-  FLUSHED: '😳',
+}
-  STAR_STRUCK: '🤩',
+
-  ROFL: '🤣',
+export const reactionEmojiMap = {
-  HOLDING_BACK_TEARS: '🥹',
+  LIKE: toCdnUrl('❤️'),
-  MIND_BLOWN: '🤯',
+  DISLIKE: toCdnUrl('👎'),
-  POOP: '💩',
+  RECOMMEND: toCdnUrl('👏'),
-  CLOWN: '🤡',
+  ANGRY: toCdnUrl('😡'),
-  SKULL: '☠️',
+  FLUSHED: toCdnUrl('😳'),
-  FIRE: '🔥',
+  STAR_STRUCK: toCdnUrl('🤩'),
-  EYES: '👀',
+  ROFL: toCdnUrl('🤣'),
-  FROWN: '☹️',
+  HOLDING_BACK_TEARS: toCdnUrl('🥹'),
-  HOT: '🥵',
+  MIND_BLOWN: toCdnUrl('🤯'),
-  EAGLE: '🦅',
+  POOP: toCdnUrl('💩'),
-  SPIDER: '🕷️',
+  CLOWN: toCdnUrl('🤡'),
-  BAT: '🦇',
+  SKULL: toCdnUrl('☠️'),
-  CHINA: '🇨🇳',
+  FIRE: toCdnUrl('🔥'),
-  USA: '🇺🇸',
+  EYES: toCdnUrl('👀'),
-  JAPAN: '🇯🇵',
+  FROWN: toCdnUrl('☹️'),
-  KOREA: '🇰🇷',
+  HOT: toCdnUrl('🥵'),
+  EAGLE: toCdnUrl('🦅'),
+  SPIDER: toCdnUrl('🕷️'),
+  BAT: toCdnUrl('🦇'),
+  CHINA: toCdnUrl('🇨🇳'),
+  USA: toCdnUrl('🇺🇸'),
+  JAPAN: toCdnUrl('🇯🇵'),
+  KOREA: toCdnUrl('🇰🇷'),
 }