Self hosting twemoji country flag font files

This commit is contained in:
Haishan 2023-03-21 23:33:36 +08:00
parent 3201dea557
commit e0b816d28f
5 changed files with 58 additions and 4 deletions

View file

@ -18,9 +18,5 @@
<body> <body>
<div id="app" data-base-url="http://127.0.0.1:9090"></div> <div id="app" data-base-url="http://127.0.0.1:9090"></div>
<script type="module" src="/src/app.tsx"></script> <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> </body>
</html> </html>

View file

@ -37,6 +37,7 @@
"chart.js": "4.2.1", "chart.js": "4.2.1",
"clsx": "^1.2.1", "clsx": "^1.2.1",
"core-js": "3.27.2", "core-js": "3.27.2",
"country-flag-emoji-polyfill": "0.1.4",
"date-fns": "2.29.3", "date-fns": "2.29.3",
"framer-motion": "9.0.2", "framer-motion": "9.0.2",
"history": "5.3.0", "history": "5.3.0",
@ -102,5 +103,10 @@
"typescript": "4.9.5", "typescript": "4.9.5",
"vite": "4.1.1", "vite": "4.1.1",
"vite-plugin-pwa": "0.14.4" "vite-plugin-pwa": "0.14.4"
},
"pnpm": {
"patchedDependencies": {
"country-flag-emoji-polyfill@0.1.4": "patches/country-flag-emoji-polyfill@0.1.4.patch"
}
} }
} }

View file

@ -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"

View file

@ -1,5 +1,10 @@
lockfileVersion: 5.4 lockfileVersion: 5.4
patchedDependencies:
country-flag-emoji-polyfill@0.1.4:
hash: qjkwikih52gz66dd5rqapmip3u
path: patches/country-flag-emoji-polyfill@0.1.4.patch
specifiers: specifiers:
'@babel/runtime': 7.20.13 '@babel/runtime': 7.20.13
'@fontsource/inter': 4.5.15 '@fontsource/inter': 4.5.15
@ -21,6 +26,7 @@ specifiers:
chart.js: 4.2.1 chart.js: 4.2.1
clsx: ^1.2.1 clsx: ^1.2.1
core-js: 3.27.2 core-js: 3.27.2
country-flag-emoji-polyfill: 0.1.4
date-fns: 2.29.3 date-fns: 2.29.3
eslint: 8.34.0 eslint: 8.34.0
eslint-config-airbnb-base: 15.0.0 eslint-config-airbnb-base: 15.0.0
@ -84,6 +90,7 @@ dependencies:
chart.js: 4.2.1 chart.js: 4.2.1
clsx: 1.2.1 clsx: 1.2.1
core-js: 3.27.2 core-js: 3.27.2
country-flag-emoji-polyfill: 0.1.4_qjkwikih52gz66dd5rqapmip3u
date-fns: 2.29.3 date-fns: 2.29.3
framer-motion: 9.0.2_biqbaboplfbrettd7655fr4n2y framer-motion: 9.0.2_biqbaboplfbrettd7655fr4n2y
history: 5.3.0 history: 5.3.0
@ -4102,6 +4109,13 @@ packages:
yaml: 1.10.2 yaml: 1.10.2
dev: true 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: /cross-spawn/7.0.3:
resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
@ -5248,6 +5262,10 @@ packages:
has-tostringtag: 1.0.0 has-tostringtag: 1.0.0
dev: true dev: true
/is-emoji-supported/0.0.5:
resolution: {integrity: sha512-WOlXUhDDHxYqcSmFZis+xWhhqXiK2SU0iYiqmth5Ip0FHLZQAt9rKL5ahnilE8/86WH8tZ3bmNNNC+bTzamqlw==}
dev: false
/is-extglob/2.1.1: /is-extglob/2.1.1:
resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}

View file

@ -7,6 +7,7 @@ import '@fontsource/inter/latin-800.css';
import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff2'; import inter400 from '@fontsource/inter/files/inter-latin-400-normal.woff2';
import inter800 from '@fontsource/inter/files/inter-latin-800-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 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 * as React from 'react';
import { createRoot } from 'react-dom/client'; import { createRoot } from 'react-dom/client';
import Modal from 'react-modal'; import Modal from 'react-modal';
@ -34,6 +35,7 @@ function init() {
insertLinkElement(inter400); insertLinkElement(inter400);
insertLinkElement(inter800); insertLinkElement(inter800);
insertLinkElement(robotoMono400); insertLinkElement(robotoMono400);
insertLinkElement(flagfont);
} }
Modal.setAppElement(rootEl); Modal.setAppElement(rootEl);
@ -44,6 +46,16 @@ root.render(
</React.StrictMode> </React.StrictMode>
); );
setTimeout(() => {
import('country-flag-emoji-polyfill')
.then((mod) => {
mod && mod.polyfillCountryFlagEmojis('Twemoji Country Flags', flagfont);
})
.catch(() => {
/* noop */
});
}, 1);
swRegistration.register(); swRegistration.register();
// eslint-disable-next-line no-console // eslint-disable-next-line no-console