feat: emoji font

app.vue

@@ -2,6 +2,7 @@
 setupI18n()
 setupFontSize()
 setupPageHeader()
+setupEmojis()
 provideGlobalCommands()
 
 // We want to trigger rerendering the page when account changes

composables/content-parse.ts

@@ -2,6 +2,8 @@ import type { Emoji } from 'masto'
 import type { Node } from 'ultrahtml'
 import { TEXT_NODE, parse, render, walkSync } from 'ultrahtml'
 
+const EMOJI_REGEX = /(\p{Emoji_Presentation})/ug
+
 const decoder = process.client ? document.createElement('textarea') : null as any as HTMLTextAreaElement
 export function decodeHtml(text: string) {
   decoder.innerHTML = text
@@ -21,6 +23,7 @@ export function parseMastodonHTML(html: string, customEmojis: Record<string, Emo
         return `<img src="${emoji.url}" alt=":${name}:" class="custom-emoji" data-emoji-id="${name}" />`
       return `:${name}:`
     })
+    .replace(EMOJI_REGEX, '<em-emoji native="$1" />')
 
   if (markdown) {
     // handle code blocks

composables/setups.ts

@@ -1,6 +1,7 @@
 import { pwaInfo } from 'virtual:pwa-info'
 import type { Link } from '@unhead/schema'
 import type { Directions } from 'vue-i18n-routing'
+import { init as initEmojis } from 'emoji-mart'
 import { APP_NAME, STORAGE_KEY_LANG } from '~/constants'
 import type { LocaleObject } from '#i18n'
 
@@ -74,3 +75,9 @@ export async function setupI18n() {
     })
   })
 }
+
+export function setupEmojis() {
+  initEmojis({
+    data: () => import('@emoji-mart/data').then(r => r.default),
+  })
+}

styles/global.css

@@ -4,31 +4,36 @@ html {
 
 @font-face {
   font-display: swap;
-  font-family: "DM Mono";
+  font-family: 'DM Mono';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/DM-mono-v10.ttf) format("truetype");
+  src: url(/fonts/DM-mono-v10.ttf) format('truetype');
 }
 @font-face {
   font-display: swap;
-  font-family: "DM Sans";
+  font-family: 'DM Sans';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/DM-sans-v11.ttf) format("truetype");
+  src: url(/fonts/DM-sans-v11.ttf) format('truetype');
 }
 @font-face {
   font-display: swap;
-  font-family: "DM Serif Display";
+  font-family: 'DM Serif Display';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/DM-serif-display-v10.ttf) format("truetype");
+  src: url(/fonts/DM-serif-display-v10.ttf) format('truetype');
 }
 @font-face {
   font-display: swap;
-  font-family: "Homemade Apple";
+  font-family: 'Homemade Apple';
   font-style: normal;
   font-weight: 400;
-  src: url(/fonts/homemade-apple-v18.ttf) format("truetype");
+  src: url(/fonts/homemade-apple-v18.ttf) format('truetype');
+}
+@font-face {
+  font-display: swap;
+  font-family: 'EmojiMart';
+  src: url('/fonts/seguiemj.ttf') format('truetype');
 }
 
 * {
@@ -99,7 +104,8 @@ body {
       }
     }
   }
-  b, strong {
+  b,
+  strong {
     --at-apply: font-bold;
   }
   p {
@@ -113,7 +119,8 @@ body {
   }
 
   .code-block {
-    --at-apply: font-mono bg-code text-base p3 mt-2 rounded overflow-auto leading-1.6em;
+    --at-apply: font-mono bg-code text-base p3 mt-2 rounded overflow-auto
+      leading-1.6em;
 
     .shiki {
       background: transparent !important;
@@ -152,7 +159,9 @@ body {
   }
 }
 
-html, body, #__nuxt {
+html,
+body,
+#__nuxt {
   height: 100vh;
   margin: 0;
   padding: 0;
@@ -184,6 +193,10 @@ body {
 em-emoji-picker {
   --border-radius: 0;
 }
+em-emoji {
+  font-size: 1.2em;
+  line-height: 1em;
+}
 
 footer {
   a {