Fix UI and backend paths with subpath (#1799) (#2133)

web/src/components/layout/header/Navbar.vue

@@ -5,7 +5,7 @@
     <div class="flex text-white dark:text-gray-400 items-center space-x-2">
       <!-- Logo -->
       <router-link :to="{ name: 'home' }" class="flex flex-col -my-2 px-2">
-        <img class="w-8 h-8" src="../../../assets/logo.svg?url" />
+        <WoodpeckerLogo class="w-8 h-8" />
         <span class="text-xs">{{ version }}</span>
       </router-link>
       <!-- Repo Link -->
@@ -53,6 +53,7 @@
 import { defineComponent } from 'vue';
 import { useRoute } from 'vue-router';
 
+import WoodpeckerLogo from '~/assets/logo.svg?component';
 import Button from '~/components/atomic/Button.vue';
 import IconButton from '~/components/atomic/IconButton.vue';
 import useAuthentication from '~/compositions/useAuthentication';
@@ -64,7 +65,7 @@ import ActivePipelines from './ActivePipelines.vue';
 export default defineComponent({
   name: 'Navbar',
 
-  components: { Button, ActivePipelines, IconButton },
+  components: { Button, ActivePipelines, IconButton, WoodpeckerLogo },
 
   setup() {
     const config = useConfig();
@@ -72,7 +73,7 @@ export default defineComponent({
     const authentication = useAuthentication();
     const { darkMode } = useDarkMode();
     const docsUrl = config.docs || undefined;
-    const apiUrl = `${config.rootURL ?? ''}/swagger/index.html`;
+    const apiUrl = `${config.rootPath ?? ''}/swagger/index.html`;
 
     function doLogin() {
       authentication.authenticate(route.fullPath);

web/src/components/repo/pipeline/PipelineRunningIcon.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import WoodpeckerIcon from '../../../assets/woodpecker.svg?component';
+import WoodpeckerIcon from '~/assets/woodpecker.svg?component';
 </script>
 
 <style scoped>

web/src/components/repo/settings/BadgeTab.vue

@@ -48,6 +48,7 @@ import InputField from '~/components/form/InputField.vue';
 import SelectField from '~/components/form/SelectField.vue';
 import Panel from '~/components/layout/Panel.vue';
 import useApiClient from '~/compositions/useApiClient';
+import useConfig from '~/compositions/useConfig';
 import { usePaginate } from '~/compositions/usePaginate';
 import { Repo } from '~/lib/api/types';
 
@@ -89,7 +90,7 @@ export default defineComponent({
 
     const baseUrl = `${window.location.protocol}//${window.location.hostname}${
       window.location.port ? `:${window.location.port}` : ''
-    }`;
+    }${useConfig().rootPath}`;
     const badgeUrl = computed(
       () => `/api/badges/${repo.value.id}/status.svg${branch.value !== '' ? `?branch=${branch.value}` : ''}`,
     );