ThatHurleyGuy
/
frontend
forked from vikunja/frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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 2023-01-21 11:01:32 +00:00 committed by konrad
parent bb44beb4ba
commit 489014944a
4 changed files with 49 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -9,9 +9,7 @@
<link rel="icon" href="/favicon.ico"> <link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/images/icons/apple-touch-icon-180x180.png"/> <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"> <!--__vite-plugin-inject-preload__-->
<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">
</head> </head>
<body> <body>
<noscript> <noscript>

1
package.json
View File

@ -136,6 +136,7 @@
"start-server-and-test": "1.15.2", "start-server-and-test": "1.15.2",
"typescript": "4.9.4", "typescript": "4.9.4",
"vite": "4.0.4", "vite": "4.0.4",
"vite-plugin-inject-preload": "1.1.2",
"vite-plugin-pwa": "0.14.1", "vite-plugin-pwa": "0.14.1",
"vite-svg-loader": "4.0.0", "vite-svg-loader": "4.0.0",
"vitest": "0.27.2", "vitest": "0.27.2",

36
pnpm-lock.yaml
View File

@ -83,6 +83,7 @@ specifiers:
typescript: 4.9.4 typescript: 4.9.4
ufo: 1.0.1 ufo: 1.0.1
vite: 4.0.4 vite: 4.0.4
vite-plugin-inject-preload: 1.1.2
vite-plugin-pwa: 0.14.1 vite-plugin-pwa: 0.14.1
vite-svg-loader: 4.0.0 vite-svg-loader: 4.0.0
vitest: 0.27.2 vitest: 0.27.2
@ -189,6 +190,7 @@ devDependencies:
start-server-and-test: 1.15.2 start-server-and-test: 1.15.2
typescript: 4.9.4 typescript: 4.9.4
vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4 vite: 4.0.4_4ljv3kzetn75ixk7nciffo2yk4
vite-plugin-inject-preload: 1.1.2_vite@4.0.4
vite-plugin-pwa: 0.14.1_fh56thzkyakgjs6jm6gbtbzxsq vite-plugin-pwa: 0.14.1_fh56thzkyakgjs6jm6gbtbzxsq
vite-svg-loader: 4.0.0 vite-svg-loader: 4.0.0
vitest: 0.27.2_doo2ppxqrldppg5xgkcjnkztci vitest: 0.27.2_doo2ppxqrldppg5xgkcjnkztci
@ -1676,7 +1678,7 @@ packages:
is-typedarray: 1.0.0 is-typedarray: 1.0.0
isstream: 0.1.2 isstream: 0.1.2
json-stringify-safe: 5.0.1 json-stringify-safe: 5.0.1
mime-types: 2.1.34 mime-types: 2.1.35
performance-now: 2.1.0 performance-now: 2.1.0
qs: 6.5.3 qs: 6.5.3
safe-buffer: 5.2.1 safe-buffer: 5.2.1
@ -4401,7 +4403,7 @@ packages:
resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==} resolution: {integrity: sha512-PYAthTa2m2VKxuvSD3DPC/Gy+U+sOA1LAuT8mkmRuvw+NACSaeXEQ+NHcVF7rONl6qcaxV3Uuemwawk+7+SJLw==}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
dependencies: dependencies:
mime-types: 2.1.34 mime-types: 2.1.35
negotiator: 0.6.3 negotiator: 0.6.3
dev: true dev: true
@ -7464,7 +7466,7 @@ packages:
resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==} resolution: {integrity: sha512-u+SQgsubraE6zItfVA0tBuCBhfU9ogSRnsvygI7wht9TS510oLkBRXBsqopeUG/GBOIQyKZO9wjTqIu/sf5zFA==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
dependencies: dependencies:
mime-db: 1.51.0 mime-db: 1.52.0
dev: true dev: true
/ext-name/5.0.0: /ext-name/5.0.0:
@ -7986,7 +7988,7 @@ packages:
dependencies: dependencies:
asynckit: 0.4.0 asynckit: 0.4.0
combined-stream: 1.0.8 combined-stream: 1.0.8
mime-types: 2.1.34 mime-types: 2.1.35
dev: true dev: true
/form-data/3.0.1: /form-data/3.0.1:
@ -7995,7 +7997,7 @@ packages:
dependencies: dependencies:
asynckit: 0.4.0 asynckit: 0.4.0
combined-stream: 1.0.8 combined-stream: 1.0.8
mime-types: 2.1.34 mime-types: 2.1.35
dev: true dev: true
/form-data/4.0.0: /form-data/4.0.0:
@ -8004,7 +8006,7 @@ packages:
dependencies: dependencies:
asynckit: 0.4.0 asynckit: 0.4.0
combined-stream: 1.0.8 combined-stream: 1.0.8
mime-types: 2.1.34 mime-types: 2.1.35
/formdata-polyfill/4.0.10: /formdata-polyfill/4.0.10:
resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==} resolution: {integrity: sha512-buewHzMvYL29jdeQTVILecSaZKnt/RJWjoZCF5OW60Z67/GmSLBkOFM7qh1PI3zFNtJbaZL5eQu1vLfazOwj4g==}
@ -10383,15 +10385,15 @@ packages:
braces: 3.0.2 braces: 3.0.2
picomatch: 2.3.1 picomatch: 2.3.1
/mime-db/1.51.0: /mime-db/1.52.0:
resolution: {integrity: sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==} resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
/mime-types/2.1.34: /mime-types/2.1.35:
resolution: {integrity: sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==} resolution: {integrity: sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==}
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
dependencies: dependencies:
mime-db: 1.51.0 mime-db: 1.52.0
/mime/1.6.0: /mime/1.6.0:
resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==} resolution: {integrity: sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==}
@ -14090,7 +14092,7 @@ packages:
engines: {node: '>= 0.6'} engines: {node: '>= 0.6'}
dependencies: dependencies:
media-typer: 0.3.0 media-typer: 0.3.0
mime-types: 2.1.34 mime-types: 2.1.35
dev: true dev: true
/typedarray-to-buffer/3.1.5: /typedarray-to-buffer/3.1.5:
@ -14472,6 +14474,16 @@ packages:
- terser - terser
dev: true 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: /vite-plugin-pwa/0.14.1_fh56thzkyakgjs6jm6gbtbzxsq:
resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==} resolution: {integrity: sha512-5zx7yhQ8RTLwV71+GA9YsQQ63ALKG8XXIMqRJDdZkR8ZYftFcRgnzM7wOWmQZ/DATspyhPih5wCdcZnAIsM+mA==}
peerDependencies: peerDependencies:

23
vite.config.ts
View File

@ -7,6 +7,7 @@ import { dirname, resolve } from 'node:path'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite' import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import {VitePWA} from 'vite-plugin-pwa' import {VitePWA} from 'vite-plugin-pwa'
import VitePluginInjectPreload from 'vite-plugin-inject-preload'
import {visualizer} from 'rollup-plugin-visualizer' import {visualizer} from 'rollup-plugin-visualizer'
import svgLoader from 'vite-svg-loader' import svgLoader from 'vite-svg-loader'
import postcssPresetEnv from 'postcss-preset-env' import postcssPresetEnv from 'postcss-preset-env'
@ -33,6 +34,20 @@ console.log(isModernBuild
: 'Building "legacy" build with "@vitejs/plugin-legacy"', : '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/ // https://vitejs.dev/config/
export default defineConfig({ export default defineConfig({
// https://vitest.dev/config/ // https://vitest.dev/config/
@ -81,6 +96,14 @@ export default defineConfig({
fullInstall: true, fullInstall: true,
include: resolve(dirname(pathSrc), './src/i18n/lang/**'), 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({ VitePWA({
srcDir: 'src', srcDir: 'src',
filename: 'sw.ts', filename: 'sw.ts',