✨ Add unofficial gitmoji feature

index.html

@@ -119,6 +119,19 @@
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                position: relative;
+            }
+            .app__main__gitmojis__item--unofficial:before {
+                position: absolute;
+                top: 0;
+                left: 0;
+                content: 'Unofficial';
+                margin: 0.5rem;
+                padding: 0.25rem 0.5rem;
+                border-radius: 0.25rem;
+                font-size: var(--size-small);
+                color: var(--color-dark);
+                background-color: var(--color-light);
             }
             .app__main__gitmojis__item__emoji,
             .app__main__gitmojis__item__code {
@@ -284,7 +297,7 @@
                     colors = (await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/components/GitmojiList/emojiColorsMap.js')).text())
                         .split('\n').filter(line => line.includes(':')).map(item => item.replace(/[\s',;]/g, '').split(':')),
                     { gitmojis } = await (await fetch('https://raw.githubusercontent.com/carloscuesta/gitmoji/master/src/data/gitmojis.json')).json();
-                gitmojis.forEach(({ emoji, code, description, name }) => {
+                gitmojis.forEach(({ emoji, code, description, name, isUnofficial }) => {
                     const
                         itemEmoji = document.createElement('span'),
                         itemCode = document.createElement('span'),
@@ -305,10 +318,13 @@
                     itemDescription.classList.add('app__main__gitmojis__item__description');
                     itemDescription.textContent = description;
                     item.classList.add('app__main__gitmojis__item');
+                    if(isUnofficial)
+                        item.classList.add('app__main__gitmojis__item--unofficial');
                     item.appendChild(itemEmoji);
                     item.appendChild(itemCode);
                     item.appendChild(itemDescription);
-                    item.style.setProperty('--item-color', colors.find(([key]) => key === name)[1] || 'transparent');
+                    if(name)
+                        item.style.setProperty('--item-color', colors.find(([key]) => key === name)[1] || 'transparent');
                     document.querySelector('.app__main__gitmojis').appendChild(item);
                 });