Self hosting twemoji country flag font files

gxkl · Mar 21, 2023 · e0b816d · e0b816d
1 parent 3201dea
commit e0b816d
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -18,9 +18,5 @@
   <body>
     <div id="app" data-base-url="http://127.0.0.1:9090"></div>
     <script type="module" src="/src/app.tsx"></script>
-    <script type="module" defer>
-      import { polyfillCountryFlagEmojis } from "https://cdn.skypack.dev/country-flag-emoji-polyfill";
-      polyfillCountryFlagEmojis();
-    </script>
   </body>
 </html>
diff --git a/package.json b/package.json
@@ -37,6 +37,7 @@
     "chart.js": "4.2.1",
     "clsx": "^1.2.1",
     "core-js": "3.27.2",
+    "country-flag-emoji-polyfill": "0.1.4",
     "date-fns": "2.29.3",
     "framer-motion": "9.0.2",
     "history": "5.3.0",
@@ -102,5 +103,10 @@
     "typescript": "4.9.5",
     "vite": "4.1.1",
     "vite-plugin-pwa": "0.14.4"
+  },
+  "pnpm": {
+    "patchedDependencies": {
+      "[email protected]": "patches/[email protected]"
+    }
   }
 }
diff --git a/patches/[email protected] b/patches/[email protected]
@@ -0,0 +1,22 @@
+diff --git a/package.json b/package.json
+index f0404bd2df0103b7c92aceec1eb502e0d3a43fa1..f8177258cabef73a24994fa9463ea3be4b34b4ac 100644
+--- a/package.json
++++ b/package.json
+@@ -8,12 +8,12 @@
+   "type": "module",
+   "source": "src/index.ts",
+   "exports": {
+-    "require": "./dist/index.cjs",
+-    "default": "./dist/index.modern.js"
++    ".": {
++      "import": "./dist/index.modern.js",
++      "require": "./dist/index.cjs"
++    },
++    "./TwemojiCountryFlags.woff2": "./dist/TwemojiCountryFlags.woff2"
+   },
+-  "main": "./dist/index.cjs",
+-  "module": "./dist/index.module.js",
+-  "unpkg": "./dist/index.umd.js",
+   "types": "./dist/index.d.ts",
+   "files": [
+     "dist"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app.tsx b/src/app.tsx
@@ -7,6 +7,7 @@ import '@fontsource/inter/latin-800.css';
 import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff2';
 import inter800 from '@fontsource/inter/files/inter-latin-800-normal.woff2';
 import robotoMono400 from '@fontsource/roboto-mono/files/roboto-mono-latin-400-normal.woff2';
+import flagfont from 'country-flag-emoji-polyfill/TwemojiCountryFlags.woff2';
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
 import Modal from 'react-modal';
@@ -34,6 +35,7 @@ function init() {
   insertLinkElement(inter400);
   insertLinkElement(inter800);
   insertLinkElement(robotoMono400);
+  insertLinkElement(flagfont);
 }
 
 Modal.setAppElement(rootEl);
@@ -44,6 +46,16 @@ root.render(
   </React.StrictMode>
 );
 
+setTimeout(() => {
+  import('country-flag-emoji-polyfill')
+    .then((mod) => {
+      mod && mod.polyfillCountryFlagEmojis('Twemoji Country Flags', flagfont);
+    })
+    .catch(() => {
+      /* noop */
+    });
+}, 1);
+
 swRegistration.register();
 
 // eslint-disable-next-line no-console