Self hosting twemoji country flag font files
This commit is contained in:
Haishan
parent
3201dea557
commit
e0b816d28f
5 changed files with 58 additions and 4 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
22
patches/country-flag-emoji-polyfill@0.1.4.patch
Normal file
22
patches/country-flag-emoji-polyfill@0.1.4.patch
Normal 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"
|
||||
|
|
@ -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'}
|
||||
|
|
|
|||
12
src/app.tsx
12
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
|
||||
|
|
|
|||
Loading…
Reference in a new issue