From feba00d491d59362783ed8f3e3f561e44d062678 Mon Sep 17 00:00:00 2001 From: Joshua Kiwiet-Pantaleoni Date: Wed, 29 May 2024 16:28:45 -0700 Subject: [PATCH] fix: load app logo svgs with ?url --- .eslintrc.cjs | 2 ++ src/App.vue | 8 ++++---- src/assets/scss/global/fonts.scss | 8 ++++---- src/components/WwwFrame/TheFooter.vue | 12 ++++++++---- vite.config.js | 13 ++++--------- 5 files changed, 22 insertions(+), 21 deletions(-) diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 4af00f7b84..2060f260c4 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -73,6 +73,8 @@ module.exports = { 'import/no-extraneous-dependencies': ['error', { optionalDependencies: ['test/unit/index.js'] }], + // allow unresolved imports for svg files with a ?url suffix + 'import/no-unresolved': ['error', { ignore: ['\\.svg\\?url$'] }], // allow files with only one named export 'import/prefer-default-export': 'off', // allow debugger during development diff --git a/src/App.vue b/src/App.vue index 50028af26b..3131594e3d 100644 --- a/src/App.vue +++ b/src/App.vue @@ -17,10 +17,10 @@ import webmanifest from '#src/manifest.webmanifest'; import unbounceEventMixin from '#src/plugins/unbounce-event-mixin'; import { metaGlobReader } from '#src/util/importHelpers'; -const faviconsGlob = import.meta.glob('#src/assets/images/favicons/*.*', { eager: true }); -const favicons = metaGlobReader(faviconsGlob, '#src/assets/images/favicons/'); -const fontsGlob = import.meta.glob('#src/assets/fonts/*.*', { eager: true, query: '?url' }); -const fonts = metaGlobReader(fontsGlob, '#src/assets/fonts/'); +const faviconsGlob = import.meta.glob('./assets/images/favicons/*.*', { eager: true }); +const favicons = metaGlobReader(faviconsGlob, './assets/images/favicons/'); +const fontsGlob = import.meta.glob('./assets/fonts/*.*', { eager: true, query: '?url' }); +const fonts = metaGlobReader(fontsGlob, './assets/fonts/'); export default { name: 'App', diff --git a/src/assets/scss/global/fonts.scss b/src/assets/scss/global/fonts.scss index a02d442760..031769197f 100644 --- a/src/assets/scss/global/fonts.scss +++ b/src/assets/scss/global/fonts.scss @@ -3,7 +3,7 @@ font-weight: 400; font-style: normal; font-display: swap; - src: url("#src/assets/fonts/PostGrotesk-Medium.woff2") format('woff2'); + src: url("static/fonts/PostGrotesk-Medium.woff2") format('woff2'); } @font-face { @@ -11,7 +11,7 @@ font-weight: 400; font-style: italic; font-display: swap; - src: url("#src/assets/fonts/PostGrotesk-MediumItalic.woff2") format('woff2'); + src: url("static/fonts/PostGrotesk-MediumItalic.woff2") format('woff2'); } @font-face { @@ -19,7 +19,7 @@ font-weight: 300; font-style: normal; font-display: swap; - src: url("#src/assets/fonts/PostGrotesk-Book.woff2") format('woff2'); + src: url("static/fonts/PostGrotesk-Book.woff2") format('woff2'); } @font-face { @@ -27,5 +27,5 @@ font-weight: 300; font-style: italic; font-display: swap; - src: url("#src/assets/fonts/PostGrotesk-BookItalic.woff2") format('woff2'); + src: url("static/fonts/PostGrotesk-BookItalic.woff2") format('woff2'); } diff --git a/src/components/WwwFrame/TheFooter.vue b/src/components/WwwFrame/TheFooter.vue index ed8ffb5d82..8ab7d0c91e 100644 --- a/src/components/WwwFrame/TheFooter.vue +++ b/src/components/WwwFrame/TheFooter.vue @@ -329,7 +329,7 @@ Check out our new app on the App Store @@ -345,7 +345,7 @@ Check out our new app on the Play Store @@ -686,7 +686,7 @@ > Check out our new app on the App Store @@ -702,7 +702,7 @@ > Check out our new app on the Play Store @@ -842,6 +842,8 @@ import { mdiFacebook, mdiInstagram, mdiTwitter } from '@mdi/js'; import KvGrid from '@kiva/kv-components/vue/KvGrid'; import KvPageContainer from '@kiva/kv-components/vue/KvPageContainer'; import KvMaterialIcon from '@kiva/kv-components/vue/KvMaterialIcon'; +import appStoreLogoUrl from '#src/assets/icons/app-store.svg?url'; +import playStoreLogoUrl from '#src/assets/icons/play-store.svg?url'; export default { name: 'TheFooter', @@ -873,7 +875,9 @@ export default { privacyUrl: '/legal/privacy', termsUrl: '/legal/terms', appStoreUrl: 'https://apps.apple.com/app/id1453093374', + appStoreLogoUrl, playStoreUrl: 'https://play.google.com/store/apps/details?id=org.kiva.lending', + playStoreLogoUrl, mdiFacebook, mdiInstagram, mdiTwitter diff --git a/vite.config.js b/vite.config.js index 58d513b070..2ead6cc7da 100644 --- a/vite.config.js +++ b/vite.config.js @@ -24,22 +24,15 @@ const gitRevisionPlugin = new GitRevisionPlugin({ const resolve = dir => path.resolve(path.dirname(fileURLToPath(import.meta.url)), dir); // asset regular expressions -const binaryRegex = /binary\/.+\.bin/; const fontsRegex = /fonts\/.+\.(woff2?|eot|ttf|otf|svg)/; -const iconsRegex = /icons\/(sprite\/.+|app-store|play-store)\.svg/; const imagesRegex = /images\/.+\.(png|jpe?g|gif|webp|avif|svg|ico)/; const mediaRegex = /media\/.+\.(mp4|webm|ogg|mp3|wav|flac|aac)/; -const wasmRegex = /wasm\/.+\.wasm/; // https://vitejs.dev/config/ export default defineConfig({ assetsInclude: [ - binaryRegex, - fontsRegex, - iconsRegex, - imagesRegex, - mediaRegex, - wasmRegex, + '**/*.bin', + '**/*.wasm', ], base: '/static/', build: { @@ -115,6 +108,8 @@ export default defineConfig({ alias: { // alias src directory '#src': resolve('src'), + // alias node_modules directory + '#node_modules': resolve('node_modules'), // alias promise module to handle timesync calling require('promise') promise: resolve('build/promise.js'), // required for src/components/Contentful/DynamicRichText.vue