fix: adds support for public base path (#1207)

Signed-off-by: Pedro Lamas <[email protected]>
fluidd-core · Oct 10, 2023 · 7f0886d · 7f0886d
1 parent 07e1f7c
commit 7f0886d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 28 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,7 @@
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
     <meta name="apple-mobile-web-app-title" content="fluidd" />
     <link rel="apple-touch-icon" sizes="180x180" href="/img/icons/apple-touch-icon-180x180.png" />
-    <link rel="mask-icon" href="img/icons/safari-pinned-tab.svg" color="#000000" />
+    <link rel="mask-icon" href="/img/icons/safari-pinned-tab.svg" color="#000000" />
     <meta name="msapplication-TileImage" content="/img/icons/mstile-150x150.png" />
     <meta name="msapplication-TileColor" content="#000000" />
 

diff --git a/public/config.json b/public/config.json
@@ -12,7 +12,7 @@
       "color": "#2196F3",
       "isDark": true,
       "logo": {
-        "src": "/logo_fluidd.svg",
+        "src": "logo_fluidd.svg",
         "dynamic": true
       }
     },
@@ -21,7 +21,7 @@
       "color": "#96CC4A",
       "isDark": true,
       "logo": {
-        "src": "/logo_annex.svg",
+        "src": "logo_annex.svg",
         "dynamic": true
       }
     },
@@ -30,7 +30,7 @@
       "color": "#475A91",
       "isDark": true,
       "logo": {
-        "src": "/logo_btt.svg",
+        "src": "logo_btt.svg",
         "dynamic": true
       }
     },
@@ -39,7 +39,7 @@
       "color": "#76FB00",
       "isDark": true,
       "logo": {
-        "src": "/logo_eva.svg",
+        "src": "logo_eva.svg",
         "dark": "#232323",
         "light": "#ffffff",
         "dynamic": false
@@ -50,7 +50,7 @@
       "color": "#dfff3e",
       "isDark": true,
       "logo": {
-        "src": "/logo_hevort.svg",
+        "src": "logo_hevort.svg",
         "dynamic": true
       }
     },
@@ -59,7 +59,7 @@
       "color": "#DA7A2C",
       "isDark": true,
       "logo": {
-        "src": "/logo_kingroon.svg",
+        "src": "logo_kingroon.svg",
         "dynamic": false
       }
     },
@@ -68,7 +68,7 @@
       "color": "#B12F36",
       "isDark": true,
       "logo": {
-        "src": "/logo_klipper.svg",
+        "src": "logo_klipper.svg",
         "dynamic": false
       }
     },
@@ -77,7 +77,7 @@
       "color": "#76FB00",
       "isDark": true,
       "logo": {
-        "src": "/logo_ratrig.svg",
+        "src": "logo_ratrig.svg",
         "dark": "#232323",
         "light": "#ffffff",
         "dynamic": false
@@ -88,7 +88,7 @@
       "color": "#FF2300",
       "isDark": true,
       "logo": {
-        "src": "/logo_voron.svg",
+        "src": "logo_voron.svg",
         "dynamic": true
       }
     },
@@ -97,7 +97,7 @@
       "color": "#FF2300",
       "isDark": true,
       "logo": {
-        "src": "/logo_vzbot.svg",
+        "src": "logo_vzbot.svg",
         "dynamic": false
       }
     },
@@ -106,7 +106,7 @@
       "color": "#e34234",
       "isDark": true,
       "logo": {
-        "src": "/logo_zerog.svg",
+        "src": "logo_zerog.svg",
         "dynamic": true
       }
     },
@@ -115,7 +115,7 @@
       "color": "#4bc3ca",
       "isDark": true,
       "logo": {
-        "src": "/logo_snakeoil.svg",
+        "src": "logo_snakeoil.svg",
         "dynamic": false
       }
     }

diff --git a/server/config.json b/server/config.json
@@ -12,7 +12,7 @@
       "color": "#2196F3",
       "isDark": true,
       "logo": {
-        "src": "/logo_fluidd.svg",
+        "src": "logo_fluidd.svg",
         "dynamic": true
       }
     },
@@ -21,7 +21,7 @@
       "color": "#96CC4A",
       "isDark": true,
       "logo": {
-        "src": "/logo_annex.svg",
+        "src": "logo_annex.svg",
         "dynamic": true
       }
     },
@@ -30,7 +30,7 @@
       "color": "#475A91",
       "isDark": true,
       "logo": {
-        "src": "/logo_btt.svg",
+        "src": "logo_btt.svg",
         "dynamic": true
       }
     },
@@ -39,7 +39,7 @@
       "color": "#76FB00",
       "isDark": true,
       "logo": {
-        "src": "/logo_eva.svg",
+        "src": "logo_eva.svg",
         "dark": "#232323",
         "light": "#ffffff",
         "dynamic": false
@@ -50,7 +50,7 @@
       "color": "#dfff3e",
       "isDark": true,
       "logo": {
-        "src": "/logo_hevort.svg",
+        "src": "logo_hevort.svg",
         "dynamic": true
       }
     },
@@ -59,7 +59,7 @@
       "color": "#DA7A2C",
       "isDark": true,
       "logo": {
-        "src": "/logo_kingroon.svg",
+        "src": "logo_kingroon.svg",
         "dynamic": false
       }
     },
@@ -68,7 +68,7 @@
       "color": "#B12F36",
       "isDark": true,
       "logo": {
-        "src": "/logo_klipper.svg",
+        "src": "logo_klipper.svg",
         "dynamic": false
       }
     },
@@ -77,7 +77,7 @@
       "color": "#76FB00",
       "isDark": true,
       "logo": {
-        "src": "/logo_ratrig.svg",
+        "src": "logo_ratrig.svg",
         "dark": "#232323",
         "light": "#ffffff",
         "dynamic": false
@@ -88,7 +88,7 @@
       "color": "#FF2300",
       "isDark": true,
       "logo": {
-        "src": "/logo_voron.svg",
+        "src": "logo_voron.svg",
         "dynamic": true
       }
     },
@@ -97,7 +97,7 @@
       "color": "#FF2300",
       "isDark": true,
       "logo": {
-        "src": "/logo_vzbot.svg",
+        "src": "logo_vzbot.svg",
         "dynamic": false
       }
     },
@@ -106,7 +106,7 @@
       "color": "#e34234",
       "isDark": true,
       "logo": {
-        "src": "/logo_zerog.svg",
+        "src": "logo_zerog.svg",
         "dynamic": true
       }
     }

diff --git a/src/components/ui/AppIcon.vue b/src/components/ui/AppIcon.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="logo-wrapper">
     <inline-svg
-      :src="theme.logo.src"
+      :src="logoSrc"
       @loaded="handleLogoLoad"
     />
   </div>
@@ -22,6 +22,10 @@ export default class AppIcon extends Vue {
     return this.$store.getters['config/getTheme']
   }
 
+  get logoSrc () {
+    return `${import.meta.env.BASE_URL}${this.theme.logo.src}`
+  }
+
   handleLogoLoad () {
     this.setData()
   }

diff --git a/src/init.ts b/src/init.ts
@@ -20,7 +20,7 @@ import webSocketWrapper from '@/util/web-socket-wrapper'
  */
 
 const getHostConfig = async () => {
-  const hostConfigResponse = await httpClientActions.get<HostConfig>(`/config.json?date=${Date.now()}`)
+  const hostConfigResponse = await httpClientActions.get<HostConfig>(`${import.meta.env.BASE_URL}config.json?date=${Date.now()}`)
   if (hostConfigResponse && hostConfigResponse.data) {
     consola.debug('Loaded web host configuration', hostConfigResponse.data)
     return hostConfigResponse.data

diff --git a/src/store/config/getters.ts b/src/store/config/getters.ts
@@ -122,7 +122,7 @@ export const getters: GetterTree<ConfigState, RootState> = {
     return {
       name: 'Fluidd',
       logo: {
-        src: '/logo_fluidd.svg',
+        src: 'logo_fluidd.svg',
         changeWithTheme: true
       },
       color: '#2196F3'

diff --git a/src/store/config/state.ts b/src/store/config/state.ts
@@ -62,7 +62,7 @@ export const defaultState = (): ConfigState => {
       theme: {
         isDark: true,
         logo: {
-          src: '/logo_fluidd.svg',
+          src: 'logo_fluidd.svg',
           dynamic: true
         },
         currentTheme: {