Self hosting twemoji country flag font files
This commit is contained in:
parent
3201dea557
commit
e0b816d28f
5 changed files with 58 additions and 4 deletions
|
@ -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>
|
||||||
|
|
|
@ -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"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
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
|
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'}
|
||||||
|
|
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 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
|
||||||
|
|
Loading…
Reference in a new issue