Experimental emoji fallback

package-lock.json

@@ -8,6 +8,7 @@
       "name": "phanpy",
       "version": "0.1.0",
       "dependencies": {
+        "@fontsource/noto-emoji": "~5.2.10",
         "@formatjs/intl-localematcher": "~0.6.2",
         "@formatjs/intl-segmenter": "~11.7.11",
         "@formkit/auto-animate": "~0.9.0",
@@ -3370,6 +3371,15 @@
         "node": ">=18"
       }
     },
+    "node_modules/@fontsource/noto-emoji": {
+      "version": "5.2.10",
+      "resolved": "https://registry.npmjs.org/@fontsource/noto-emoji/-/noto-emoji-5.2.10.tgz",
+      "integrity": "sha512-2G2WZpDeyMyk/ZIVLA81xS413sn40AbNpcwyiFFCR7LKacbf14OF/A2ffGoEXoCQ+5+ET68NesPvL1Y6FbhVAg==",
+      "license": "OFL-1.1",
+      "funding": {
+        "url": "https://github.com/sponsors/ayuhito"
+      }
+    },
     "node_modules/@formatjs/ecma402-abstract": {
       "version": "2.3.5",
       "resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-2.3.5.tgz",

package.json

@@ -21,6 +21,7 @@
     "git:po-filter": "git config --local diff.po-filter.textconv \"sed 's/:[0-9]*$//'\""
   },
   "dependencies": {
+    "@fontsource/noto-emoji": "~5.2.10",
     "@formatjs/intl-localematcher": "~0.6.2",
     "@formatjs/intl-segmenter": "~11.7.11",
     "@formkit/auto-animate": "~0.9.0",

src/index.css

@@ -323,6 +323,19 @@ body {
     Ubuntu,
     Cantarell,
     Noto Sans,
+    /* Note: Reference from emojipedia.org's CSS source */
+    /* 1. System Emoji */
+    'Apple Color Emoji',
+    'Segoe UI Emoji',
+    'Segoe UI Symbol',
+    /* 2. Others if available */
+    'Android Emoji',
+    'EmojiSymbols',
+    'EmojiOne Mozilla',
+    'Twemoji Mozilla',
+    'Noto Color Emoji',
+    /* 3. Self-hosted Noto Emoji */
+    'Noto Emoji',
     sans-serif;
   font-size: var(--text-size);
   word-wrap: break-word;

src/main.jsx

@@ -1,6 +1,7 @@
 import './index.css';
 import './cloak-mode.css';
 import './polyfills';
+import '@fontsource/noto-emoji/400.css';
 
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';

vite.config.js

@@ -217,10 +217,15 @@ export default defineConfig({
           return 'assets/[name]-[hash].js';
         },
         assetFileNames: (assetInfo) => {
-          const { originalFileNames } = assetInfo;
+          const { originalFileNames, names } = assetInfo;
           if (originalFileNames?.[0]?.includes('assets/sandbox')) {
             return 'assets/sandbox/[name]-[hash].[ext]';
           }
+          // Handle font files
+          const fontExtensions = /\.(woff2?|ttf|otf|eot)$/i;
+          if (names?.[0] && fontExtensions.test(names[0])) {
+            return 'assets/fonts/[name]-[hash].[ext]';
+          }
           return 'assets/[name]-[hash].[ext]';
         },
       },