forked from vikunja/frontend
feat: fix broken font preloading (#2980)
Co-authored-by: Dominik Pschenitschni <mail@celement.de> Reviewed-on: vikunja/frontend#2980 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni
parent
bb44beb4ba
commit
489014944a
@ -9,9 +9,7 @@
|
||||
|
||||
<link rel="icon" href="/favicon.ico">
|
||||
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/>
|
||||
<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/OpenSans[wght].woff2" as="font">
|
||||
<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/OpenSans-Italic[wght].woff2" as="font">
|
||||
<link rel="preload" crossorigin="anonymous" href="/src/assets/fonts/Quicksand[wght].woff2" as="font">
|
||||
<!--__vite-plugin-inject-preload__-->
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
|
||||
@ -136,6 +136,7 @@
|
||||
"start-server-and-test": "1.15.2",
|
||||
"typescript": "4.9.4",
|
||||
"vite": "4.0.4",
|
||||
"vite-plugin-inject-preload": "1.1.2",
|
||||
"vite-plugin-pwa": "0.14.1",
|
||||
"vite-svg-loader": "4.0.0",
|
||||
"vitest": "0.27.2",
|
||||
|
||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
@ -83,6 +83,7 @@ specifiers:
|
||||
typescript: 4.9.4
|
||||
ufo: 1.0.1
|
||||
vite: 4.0.4
|
||||
vite-plugin-inject-preload: 1.1.2
|
||||
vite-plugin-pwa: 0.14.1
|
||||
vite-svg-loader: 4.0.0
|
||||
vitest: 0.27.2
|
||||
@ -189,6 +190,7 @@ devDependencies:
|
||||
start-server-and-test: 1.15.2
|
||||
typescript: 4.9.4
|
||||
vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4
|
||||
vite-plugin-inject-preload: 1.1.2_vite@4.0.4
|
||||
vite-plugin-pwa: 0.14.1_fh56thzkyakgjs6jm6gbtbzxsq
|
||||
vite-svg-loader: 4.0.0
|
||||
vitest: 0.27.2_doo2ppxqrldppg5xgkcjnkztci
|
||||
@ -1676,7 +1678,7 @@ packages:
|
||||
is-typedarray: 1.0.0
|
||||
isstream: 0.1.2
|
||||
json-stringify-safe: 5.0.1
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
performance-now: 2.1.0
|
||||
qs: 6.5.3
|
||||
safe-buffer: 5.2.1
|
||||
@ -4401,7 +4403,7 @@ packages:
|
||||
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
|
||||
engines: {node: '>= 0.6'}
|
||||
dependencies:
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
negotiator: 0.6.3
|
||||
dev: true
|
||||
|
||||
@ -7464,7 +7466,7 @@ packages:
|
||||
resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
dependencies:
|
||||
mime-db: 1.51.0
|
||||
mime-db: 1.52.0
|
||||
dev: true
|
||||
|
||||
/ext-name/5.0.0:
|
||||
@ -7986,7 +7988,7 @@ packages:
|
||||
dependencies:
|
||||
asynckit: 0.4.0
|
||||
combined-stream: 1.0.8
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
dev: true
|
||||
|
||||
/form-data/3.0.1:
|
||||
@ -7995,7 +7997,7 @@ packages:
|
||||
dependencies:
|
||||
asynckit: 0.4.0
|
||||
combined-stream: 1.0.8
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
dev: true
|
||||
|
||||
/form-data/4.0.0:
|
||||
@ -8004,7 +8006,7 @@ packages:
|
||||
dependencies:
|
||||
asynckit: 0.4.0
|
||||
combined-stream: 1.0.8
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
|
||||
/formdata-polyfill/4.0.10:
|
||||
resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
|
||||
@ -10383,15 +10385,15 @@ packages:
|
||||
braces: 3.0.2
|
||||
picomatch: 2.3.1
|
||||
|
||||
/mime-db/1.51.0:
|
||||
resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==}
|
||||
/mime-db/1.52.0:
|
||||
resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
|
||||
engines: {node: '>= 0.6'}
|
||||
|
||||
/mime-types/2.1.34:
|
||||
resolution: {integrity: sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==}
|
||||
/mime-types/2.1.35:
|
||||
resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
|
||||
engines: {node: '>= 0.6'}
|
||||
dependencies:
|
||||
mime-db: 1.51.0
|
||||
mime-db: 1.52.0
|
||||
|
||||
/mime/1.6.0:
|
||||
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
|
||||
@ -14090,7 +14092,7 @@ packages:
|
||||
engines: {node: '>= 0.6'}
|
||||
dependencies:
|
||||
media-typer: 0.3.0
|
||||
mime-types: 2.1.34
|
||||
mime-types: 2.1.35
|
||||
dev: true
|
||||
|
||||
/typedarray-to-buffer/3.1.5:
|
||||
@ -14472,6 +14474,16 @@ packages:
|
||||
- terser
|
||||
dev: true
|
||||
|
||||
/vite-plugin-inject-preload/1.1.2_vite@4.0.4:
|
||||
resolution: {integrity: sha512-K5q2WACSQMg3IpR4+Bopxj1nMCHHnu7FQnz3ZubvLWAJGZi6XakdtTLepMzgUBBT2LXMaRSt6b/1WhKer6n8Fg==}
|
||||
engines: {node: '>=14.18.0'}
|
||||
peerDependencies:
|
||||
vite: ^3.0.0 || ^4.0.0
|
||||
dependencies:
|
||||
mime-types: 2.1.35
|
||||
vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4
|
||||
dev: true
|
||||
|
||||
/vite-plugin-pwa/0.14.1_fh56thzkyakgjs6jm6gbtbzxsq:
|
||||
resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==}
|
||||
peerDependencies:
|
||||
|
||||
@ -7,6 +7,7 @@ import { dirname, resolve } from 'node:path'
|
||||
|
||||
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
|
||||
import {VitePWA} from 'vite-plugin-pwa'
|
||||
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
|
||||
import {visualizer} from 'rollup-plugin-visualizer'
|
||||
import svgLoader from 'vite-svg-loader'
|
||||
import postcssPresetEnv from 'postcss-preset-env'
|
||||
@ -33,6 +34,20 @@ console.log(isModernBuild
|
||||
: 'Building "legacy" build with "@vitejs/plugin-legacy"',
|
||||
)
|
||||
|
||||
/**
|
||||
* @param fontNames Array of the file names of the fonts without axis and hash suffixes
|
||||
*/
|
||||
function createFontMatcher(fontNames: string[]) {
|
||||
// The `match` option for the files of VitePluginInjectPreload
|
||||
// matches the _output_ files.
|
||||
// Since we only want to mach variable fonts, we exploit here the fact
|
||||
// that we added the `wght` term to indicate the variable weiht axis.
|
||||
// The format is something like:
|
||||
// `/assets/OpenSans-Italic_wght__c9a8fe68-5f21f1e7.woff2`
|
||||
// see: https://regex101.com/r/UgUWr1/1
|
||||
return new RegExp(`^.+\\/(${fontNames.join('|')})_wght__[a-z1-9]{8}-[a-z1-9]{8}\\.woff2$`)
|
||||
}
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
// https://vitest.dev/config/
|
||||
@ -81,6 +96,14 @@ export default defineConfig({
|
||||
fullInstall: true,
|
||||
include: resolve(dirname(pathSrc), './src/i18n/lang/**'),
|
||||
}),
|
||||
// https://github.com/Applelo/vite-plugin-inject-preload
|
||||
VitePluginInjectPreload({
|
||||
files: [{
|
||||
match: createFontMatcher(['Quicksand', 'OpenSans', 'OpenSans-Italic']),
|
||||
attributes: {crossorigin: 'anonymous'},
|
||||
}],
|
||||
injectTo: 'custom',
|
||||
}),
|
||||
VitePWA({
|
||||
srcDir: 'src',
|
||||
filename: 'sw.ts',
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user