From b5116bbc01965b043fa0131dfb46c47e3699c1c3 Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Sat, 3 Jul 2021 17:12:28 +0100
Subject: [PATCH] :sparkles: Adds emoji icon feature

---
 src/components/LinkItems/ItemIcon.vue | 38 ++++++++++++++++++++++++++-
 1 file changed, 37 insertions(+), 1 deletion(-)

diff --git a/src/components/LinkItems/ItemIcon.vue b/src/components/LinkItems/ItemIcon.vue
index fe2a756b..3e4ca928 100644
--- a/src/components/LinkItems/ItemIcon.vue
+++ b/src/components/LinkItems/ItemIcon.vue
@@ -1,6 +1,7 @@
 <template>
   <div class="item-icon">
     <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
+    <i v-else-if="iconType === 'emoji'" :class="`emoji-icon ${size}`" >{{getEmoji(iconPath)}}</i>
     <img v-else-if="icon" :src="iconPath" @error="imageNotFound"
       :class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
     />
@@ -12,6 +13,8 @@
 import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
 import ErrorHandler from '@/utils/ErrorHandler';
 import { faviconApi as defaultFaviconApi, faviconApiEndpoints } from '@/utils/defaults';
+import EmojiUnicodeRegex from '@/utils/EmojiUnicodeRegex';
+import emojiLookup from '@/utils/emojis.json';
 
 export default {
   name: 'Icon',
@@ -52,6 +55,27 @@ export default {
       if (splitPath.length >= 1) return validImgExtensions.includes(splitPath[1]);
       return false;
     },
+    /* Determins if a given string is an emoji, and if so what type it is */
+    isEmoji(img) {
+      if (EmojiUnicodeRegex.test(img) && img.match(/./gu).length) { // Is a unicode emoji
+        return { isEmoji: true, emojiType: 'glyph' };
+      } else if (new RegExp(/^:.*:$/).test(img)) { // Is a shortcode emoji
+        return { isEmoji: true, emojiType: 'shortcode' };
+      } else if (img.substring(0, 2) === 'U+' && img.length === 7) {
+        return { isEmoji: true, emojiType: 'unicode' };
+      }
+      return { isEmoji: false, emojiType: '' };
+    },
+    /* Formats and gets emoji from unicode or shortcode */
+    getEmoji(emojiCode) {
+      const { emojiType } = this.isEmoji(emojiCode);
+      if (emojiType === 'shortcode') {
+        if (emojiLookup[emojiCode]) return emojiLookup[emojiCode];
+      } else if (emojiType === 'unicode') {
+        return String.fromCodePoint(parseInt(emojiCode.substr(2), 16));
+      }
+      return emojiCode; // Emoji is a glyph already, just return
+    },
     /* Get favicon URL, for items which use the favicon as their icon */
     getFavicon(fullUrl) {
       if (this.shouldUseDefaultFavicon(fullUrl)) { // Check if we should use local icon
@@ -85,6 +109,7 @@ export default {
         case 'favicon': return this.getFavicon(url);
         case 'generative': return this.getGenerativeIcon(url);
         case 'svg': return img;
+        case 'emoji': return img;
         default: return '';
       }
     },
@@ -98,6 +123,7 @@ export default {
       else if (img.includes('fa-')) imgType = 'font-awesome';
       else if (img === 'favicon') imgType = 'favicon';
       else if (img === 'generative') imgType = 'generative';
+      else if (this.isEmoji(img).isEmoji) imgType = 'emoji';
       else imgType = 'none';
       return imgType;
     },
@@ -144,7 +170,17 @@ export default {
       fill: currentColor;
     }
   }
-
+  i.emoji-icon {
+    font-style: normal;
+    font-size: 2rem;
+    margin: 0.2rem;
+    &.small {
+      font-size: 1.5rem;
+    }
+    &.large {
+      font-size: 2.5rem;
+    }
+  }
   .missing-image {
     width: 3.5rem;
     path {