From e0b816d28f6e215bd1702a7e0af867f9c4ce61b4 Mon Sep 17 00:00:00 2001 From: Haishan Date: Tue, 21 Mar 2023 23:33:36 +0800 Subject: [PATCH] Self hosting twemoji country flag font files --- index.html | 4 ---- package.json | 6 +++++ .../country-flag-emoji-polyfill@0.1.4.patch | 22 +++++++++++++++++++ pnpm-lock.yaml | 18 +++++++++++++++ src/app.tsx | 12 ++++++++++ 5 files changed, 58 insertions(+), 4 deletions(-) create mode 100644 patches/country-flag-emoji-polyfill@0.1.4.patch diff --git a/index.html b/index.html index e2259ea..1a44d83 100644 --- a/index.html +++ b/index.html @@ -18,9 +18,5 @@
- diff --git a/package.json b/package.json index 13cad9a..efef7f5 100644 --- 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": { + "country-flag-emoji-polyfill@0.1.4": "patches/country-flag-emoji-polyfill@0.1.4.patch" + } } } diff --git a/patches/country-flag-emoji-polyfill@0.1.4.patch b/patches/country-flag-emoji-polyfill@0.1.4.patch new file mode 100644 index 0000000..23b00f4 --- /dev/null +++ b/patches/country-flag-emoji-polyfill@0.1.4.patch @@ -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" \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1bc58ca..4fd6860 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,5 +1,10 @@ lockfileVersion: 5.4 +patchedDependencies: + country-flag-emoji-polyfill@0.1.4: + hash: qjkwikih52gz66dd5rqapmip3u + path: patches/country-flag-emoji-polyfill@0.1.4.patch + specifiers: '@babel/runtime': 7.20.13 '@fontsource/inter': 4.5.15 @@ -21,6 +26,7 @@ specifiers: 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 eslint: 8.34.0 eslint-config-airbnb-base: 15.0.0 @@ -84,6 +90,7 @@ dependencies: chart.js: 4.2.1 clsx: 1.2.1 core-js: 3.27.2 + country-flag-emoji-polyfill: 0.1.4_qjkwikih52gz66dd5rqapmip3u date-fns: 2.29.3 framer-motion: 9.0.2_biqbaboplfbrettd7655fr4n2y history: 5.3.0 @@ -4102,6 +4109,13 @@ packages: yaml: 1.10.2 dev: true + /country-flag-emoji-polyfill/0.1.4_qjkwikih52gz66dd5rqapmip3u: + resolution: {integrity: sha512-e20azlb9yHb3mpL3lAlhkidmJgB5TELpA8oe0DPlyIfnqXhAGBmgLDpC+mm+Envh57n1xPrOfkJtXq2CrpvoGQ==} + dependencies: + is-emoji-supported: 0.0.5 + dev: false + patched: true + /cross-spawn/7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -5248,6 +5262,10 @@ packages: has-tostringtag: 1.0.0 dev: true + /is-emoji-supported/0.0.5: + resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==} + dev: false + /is-extglob/2.1.1: resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} engines: {node: '>=0.10.0'} diff --git a/src/app.tsx b/src/app.tsx index d5ff94d..65e6ed9 100644 --- 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( ); +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