feat: support subpath installation?

components/MyPicture.vue

@@ -10,7 +10,7 @@
       :height="height" :width="width"
       :style="{ 'object-position': thumbnailPosition }">
 
-    <img v-else-if='!media && thumb' class='thumb' src="/fallbackimage.png" alt=''>
+    <img v-else-if='!media && thumb' class='thumb' src="fallbackimage.png" alt=''>
   </div>
 </template>
 <script>
@@ -32,7 +32,7 @@ export default {
     },
     srcset () {
       if (this.thumb) return ''
-      return `/media/thumb/${this.media.url} 500w, /media/${this.media.url} 1200w`
+      return `media/thumb/${this.media.url} 500w, media/${this.media.url} 1200w`
     },
     media () {
       return this.event.media && this.event.media[0]
@@ -45,7 +45,7 @@ export default {
     },
     src () {
       if (this.media) {
-        return '/media/thumb/' + this.media.url
+        return 'media/thumb/' + this.media.url
       }
       if (this.thumb) {
         return '/noimg.svg'

components/NavHeader.vue

@@ -1,13 +1,13 @@
 <template>
   <div class='d-flex pa-4'>
     <v-btn icon large nuxt to='/'>
-      <img src='/logo.png' height='40' />
+      <img src='logo.png' height='40' />
     </v-btn>
 
     <v-spacer/>
 
     <div class='d-flex'>
-      <v-btn icon large href='/about' :title='$t("common.about")' :aria-label='$t("common.about")'>
+      <v-btn icon large href='about' :title='$t("common.about")' :aria-label='$t("common.about")'>
         <v-icon v-text='mdiInformation' />
       </v-btn>
       <v-btn icon large @click='toggleDark'>

components/admin/Theme.vue

@@ -27,7 +27,7 @@ v-container
           accept='image/*')
           template(slot='append-outer')
             v-btn(color='warning' text @click='resetLogo') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
-        v-img.mt-2(:src='`/logo.png?${logoKey}`' max-height="60px" contain)
+        v-img.mt-2(:src='`logo.png?${logoKey}`' max-height="60px" contain)
 
       v-col(cols='4')
         //- FALLBACK IMAGE
@@ -38,7 +38,7 @@ v-container
           accept='image/*')
           template(slot='append-outer')
             v-btn(color='warning' text @click='resetFallbackImage') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
-        v-img.mt-2(:src='`/fallbackimage.png?${fallbackImageKey}`' max-height="150px" contain)
+        v-img.mt-2(:src='`fallbackimage.png?${fallbackImageKey}`' max-height="150px" contain)
 
       v-col(cols='4')
         //- HEADER IMAGE
@@ -49,7 +49,7 @@ v-container
           accept='image/*')
           template(slot='append-outer')
             v-btn(color='warning' text @click='resetHeaderImage') <v-icon v-text='mdiRestore'></v-icon> {{$t('common.reset')}}
-        v-img.mt-2(:src='`/headerimage.png?${headerImageKey}`' max-height="150px" contain)          
+        v-img.mt-2(:src='`headerimage.png?${headerImageKey}`' max-height="150px" contain)          
 
 
   v-card-title {{$t('admin.colors')}}

layouts/default.vue

@@ -23,18 +23,18 @@ import { mapState, mapGetters } from 'vuex'
 
 export default {
   head () {
-    const custom_script = [{ type: 'application/javascript', defer: true, src: '/custom_js', body: true }]
+    const custom_script = [{ type: 'application/javascript', defer: true, src: 'custom_js', body: true }]
-    const custom_style = [{ rel: 'stylesheet', href: this.settings.baseurl + '/custom_css'}]
+    const custom_style = [{ rel: 'stylesheet', href: 'custom_css'}]
     return {
       htmlAttrs: {
         lang: this.locale
       },
       link: [
-        { rel: 'icon', type: 'image/png', href: this.settings.baseurl + '/logo.png' },
+        { rel: 'icon', type: 'image/png', href: 'logo.png' },
         ...custom_style
       ],
       script: [
-        { src: '/gancio-events.es.js', body: true, defer: true },
+        { src: 'gancio-events.es.js', body: true, defer: true },
         ...custom_script
       ]
     }

locales/en.json

@@ -317,7 +317,7 @@
     "hide_thumbs": "Hide thumbs",
     "hide_calendar": "Hide calendar",
     "default_images": "Default images",
-    "default_images_help": "You have to <a href='/admin?tab=theme'>refresh</a> the page to see the changes.",
+    "default_images_help": "You have to <a href='admin?tab=theme'>refresh</a> the page to see the changes.",
     "blocked": "Blocked",
     "domain": "Domain",
     "known_users": "Known users",
@@ -368,7 +368,7 @@
   "confirm": {
     "title": "User confirmation",
     "not_valid": "Something went wrong.",
-    "valid": "Your account is confirmed, you can now <a href=\"/login\">log in</a>"
+    "valid": "Your account is confirmed, you can now <a href=\"login\">log in</a>"
   },
   "ordinal": {
     "1": "first",

locales/loader.js

@@ -1,10 +1,10 @@
 export default async (context, locale) => {
   try {
     if (process.server) {
-      return context.$axios.$get(`locale/${locale}`)
+      return fetch(`${context.res.locals.settings.baseurl}/api/locale/${locale}`).then(ret => ret.json())
     } else {
       // cannot use $axios here as plugins have not yet been loaded
-      return fetch(`${window.location.origin}/api/locale/${locale}`).then(ret => ret.json())
+      return fetch(`${context.store.state.settings.baseurl}/api/locale/${locale}`).then(ret => ret.json())
     }
   } catch (e) {
     console.error(`Error loading locale ${locale}`, e)

nuxt.config.js

@@ -61,7 +61,9 @@ module.exports = {
     '@nuxtjs/sitemap',
     ['cookie-universal-nuxt', { alias: 'cookies' }],
   ],
-
+  router: {
+    base: new URL(config?.baseurl)?.pathname ?? '/'
+  },
   sitemap: {
     hostname: config.baseurl,
     gzip: true,

pages/Admin.vue

@@ -98,7 +98,7 @@ export default {
   async asyncData ({ $axios, req }) {
     let url
     if (process.client) {
-      url = window.location.protocol + '//' + window.location.host
+      url = document.baseURI
     } else {
       url = req.protocol + '://' + req.headers.host
     }

plugins/axios.js

@@ -1,6 +1,6 @@
 export default function ({ $axios, store }) {
   if (process.client) {
-    $axios.setBaseURL(window.location.origin + '/api')
+    $axios.setBaseURL(store.state.settings.baseurl + '/api')
   } else {
     const config = require('../server/config')
     $axios.setBaseURL(config.baseurl + '/api')