feat(frontend): proper country flag emojis on all platforms

anfragment · Dec 4, 2023 · 0fdd8fb · 0fdd8fb
1 parent 1511bfc
commit 0fdd8fb
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 1 deletion.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -12,6 +12,7 @@
     "@blueprintjs/core": "^5.3.0",
     "@blueprintjs/icons": "^5.1.6",
     "@blueprintjs/select": "^5.0.17",
+    "is-emoji-supported": "^0.0.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

diff --git a/frontend/package.json.md5 b/frontend/package.json.md5
@@ -1 +1 @@
-0feb21b2b8797a0e9ce341abe55a4bae
+2caa3435ad409062c5b4a564f7805f4d
diff --git a/frontend/src/assets/TwemojiCountryFlags.woff2 b/frontend/src/assets/TwemojiCountryFlags.woff2
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
@@ -1,9 +1,24 @@
+import { isEmojiSupported } from 'is-emoji-supported';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 
 import './style.css';
 import App from './App';
 
+(function polyfillCountryFlagEmojis() {
+  if (!isEmojiSupported('😊') || isEmojiSupported('🇨🇭')) {
+    return;
+  }
+
+  const style = document.createElement('style');
+  style.innerHTML = `
+      body, html {
+        font-family: 'Twemoji Country Flags', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+      }
+    `;
+  document.head.appendChild(style);
+})();
+
 const container = document.getElementById('root');
 
 const root = createRoot(container!);

diff --git a/frontend/src/style.css b/frontend/src/style.css
@@ -2,6 +2,13 @@
 @import "@blueprintjs/core/lib/css/blueprint.css";
 @import "@blueprintjs/icons/lib/css/blueprint-icons.css";
 
+@font-face {
+    font-family: 'Twemoji Country Flags';
+    unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077, U+E007F;
+    src: url("./assets/TwemojiCountryFlags.woff2") format("woff2");
+    font-display: swap;
+}
+
 body, html {
     height: 100%;
     width: 100%;
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		0feb21b2b8797a0e9ce341abe55a4bae
		2caa3435ad409062c5b4a564f7805f4d