fix: fetch emojis from discourse #5

assets/css/tailwind.css

@@ -29,6 +29,14 @@ html {
   @apply text-white;
 }
 
+/* For emojis from discourse */
+img.emoji {
+  width: 20px;
+  height: 20px;
+  vertical-align: middle;
+  display: inline;
+}
+
 /* Loader */
 @keyframes spinner {
   to {

components/home/HomeMap.vue

 <template>
   <section id="map">
-    <div class="container flex items-end mb-3">
+    <div class="container flex items-end mb-3 pl-8">
       <FaviconMap class="w-12 h-12 mr-3 fill-current dark:text-gray-100" />
       <a
         href="https://carte.monnaie-libre.fr"

components/home/HomeNextEvents.vue

 <template>
   <section id="agenda" class="container py-12">
-    <div class="border-b-2 container flex items-end mb-3 pb-2">
+    <div class="border-b-2 container flex items-end mb-3 pb-2 pl-1">
       <JuneCalendar class="w-12 mr-3 fill-current dark:text-gray-100" />
       <a
         :href="`${$config.forum_url}/calendar`"
@@ -52,7 +52,7 @@
             {{ prettyDate(event.event.start) }}
             <div v-for="(tag, i) in event.tag" :key="i">{{ tag }}</div>
           </div>
-          <div>{{ event.title }}</div>
+          <div v-html="emojify(event.title)" />
         </a>
       </div>
     </aside>
@@ -66,6 +66,7 @@
 <script>
 import JuneCalendar from '~/static/img/june-calendar.svg?inline'
 import { fetchNextEvents } from '~/libs/api-forum'
+import { performEmojiUnescape } from '~/libs/emoji'
 
 export default {
   name: 'HomeNextEvents',
@@ -118,6 +119,13 @@ export default {
         })
         .reduce((string, part) => string + part)
     },
+    emojify(text) {
+      return performEmojiUnescape(text, {
+        emojiSet: 'images/emoji/twitter',
+        emojiCDNUrl: 'https://forum.monnaie-libre.fr',
+        getURL: (url) => url,
+      })
+    },
   },
 }
 </script>