Added base-url configuration to site-url

client/client-app.js

@@ -177,6 +177,68 @@ Vue.component('Welcome', () => import(/* webpackChunkName: "welcome" */ './compo
 Vue.component('NavFooter', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/nav-footer.vue'))
 Vue.component('Page', () => import(/* webpackChunkName: "theme" */ './themes/' + siteConfig.theme + '/components/page.vue'))
 
+const normalizedBaseUrl = (siteConfig.baseUrl || '').replace(/\/+$/, '')
+
+const prefixUrlPath = (url) => {
+  if (!normalizedBaseUrl || typeof url !== 'string') {
+    return url
+  }
+  if (!url.startsWith('/') || url.startsWith('//')) {
+    return url
+  }
+  if (url === normalizedBaseUrl || url.startsWith(`${normalizedBaseUrl}/`)) {
+    return url
+  }
+  return `${normalizedBaseUrl}${url}`
+}
+
+const applyBaseUrlToRenderedUrls = () => {
+  if (!normalizedBaseUrl) {
+    return
+  }
+  const attrs = ['href', 'src', 'action']
+  const patchElement = (el) => {
+    if (!el || el.nodeType !== Node.ELEMENT_NODE) {
+      return
+    }
+    attrs.forEach((attr) => {
+      const value = el.getAttribute(attr)
+      if (!value) {
+        return
+      }
+      const patchedValue = prefixUrlPath(value)
+      if (patchedValue !== value) {
+        el.setAttribute(attr, patchedValue)
+      }
+    })
+  }
+  const patchTree = (root) => {
+    patchElement(root)
+    if (root.querySelectorAll) {
+      root.querySelectorAll('[href],[src],[action]').forEach(patchElement)
+    }
+  }
+
+  patchTree(document.documentElement)
+
+  const observer = new MutationObserver((records) => {
+    records.forEach((record) => {
+      if (record.type === 'attributes') {
+        patchElement(record.target)
+        return
+      }
+      record.addedNodes.forEach(patchTree)
+    })
+  })
+
+  observer.observe(document.documentElement, {
+    childList: true,
+    subtree: true,
+    attributes: true,
+    attributeFilter: attrs
+  })
+}
+
 let bootstrap = () => {
   // ====================================
   // Notifications
@@ -215,6 +277,7 @@ let bootstrap = () => {
       }
     }),
     mounted () {
+      applyBaseUrlToRenderedUrls()
       this.$moment.locale(siteConfig.lang)
       if ((store.get('user/dateFormat') || '').length > 0) {
         this.$moment.updateLocale(this.$moment.locale(), {

client/components/login.vue

@@ -94,7 +94,7 @@
                 color='indigo darken-2'
                 text
                 rounded
-                href='/register'
+                :href='withBaseUrl(`/register`)'
                 ): .caption {{ $t('auth:switchToRegister.link') }}
         //-------------------------------------------------
         //- FORGOT PASSWORD FORM
@@ -185,7 +185,7 @@
     v-dialog(v-model='isTFAShown', max-width='500', persistent)
       v-card
         .login-tfa.text-center.pa-5.grey--text.text--darken-3
-          img(src='_assets/svg/icon-pin-pad.svg')
+          img(src= (baseUrl + '/_assets/svg/icon-pin-pad.svg'))
           .subtitle-2 {{$t('auth:tfaFormTitle')}}
           v-text-field.login-tfa-field.mt-2(
             solo
@@ -260,6 +260,10 @@ import { sync } from 'vuex-pathify'
 export default {
   i18nOptions: { namespaces: 'auth' },
   props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    },
     bgUrl: {
       type: String,
       default: ''
@@ -333,7 +337,7 @@ export default {
       this.screen = 'login'
       if (!this.selectedStrategy.strategy.useForm) {
         this.isLoading = true
-        window.location.assign('/login/' + newValue)
+        window.location.assign(this.withBaseUrl('/login/' + newValue))
       } else {
         this.$nextTick(() => {
           this.$refs.iptEmail.focus()
@@ -349,6 +353,12 @@ export default {
     }
   },
   methods: {
+    withBaseUrl (path) {
+      if (!this.baseUrl) {
+        return path
+      }
+      return `${this.baseUrl}${path}`
+    },
     /**
      * LOGIN
      */

client/components/not-found.vue

@@ -2,10 +2,10 @@
   v-app
     .notfound
       .notfound-content
-        img.animated.fadeIn(src='/_assets/svg/icon-delete-file.svg', alt='Not Found')
+        img.animated.fadeIn(:src='withBaseUrl(`/_assets/svg/icon-delete-file.svg`)', alt='Not Found')
         .headline {{$t('notfound.title')}}
         .subheading.mt-3 {{$t('notfound.subtitle')}}
-        v-btn.mt-5(color='red lighten-4', href='/', large, outlined)
+        v-btn.mt-5(color='red lighten-4', :href='withBaseUrl(`/`)', large, outlined)
           v-icon(left) mdi-home
           span {{$t('notfound.gohome')}}
 </template>
@@ -13,6 +13,20 @@
 <script>
 
 export default {
+  props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    withBaseUrl (path) {
+      if (!this.baseUrl) {
+        return path
+      }
+      return `${this.baseUrl}${path}`
+    }
+  },
   data() {
     return { }
   }

client/components/profile.vue

@@ -34,11 +34,14 @@
 <script>
 import VueRouter from 'vue-router'
 
-/* global WIKI */
+/* global WIKI, siteConfig */
+
+const normalizedBaseUrl = siteConfig.baseUrl ? siteConfig.baseUrl.replace(/\/+$/, '') : ''
+const profileRouterBase = `${normalizedBaseUrl}/p`
 
 const router = new VueRouter({
   mode: 'history',
-  base: '/p',
+  base: profileRouterBase,
   routes: [
     { path: '/', redirect: '/profile' },
     { path: '/profile', component: () => import(/* webpackChunkName: "profile" */ './profile/profile.vue') },
@@ -58,6 +61,12 @@ router.afterEach((to, from) => {
 
 export default {
   i18nOptions: { namespaces: 'profile' },
+  props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    }
+  },
   data() {
     return {
       profileDrawerShown: true

client/components/register.vue

@@ -88,7 +88,7 @@
                 v-card-actions.py-3.grey(:class='$vuetify.theme.dark ? `darken-4-l1` : `lighten-4`')
                   v-spacer
                   i18next.caption(path='auth:switchToLogin.text', tag='div')
-                    a.caption(href='/login', place='link') {{ $t('auth:switchToLogin.link') }}
+                    a.caption(:href='withBaseUrl(`/login`)', place='link') {{ $t('auth:switchToLogin.link') }}
                   v-spacer
 
     loader(v-model='isLoading', :mode='loaderMode', :icon='loaderIcon', :color='loaderColor', :title='loaderTitle', :subtitle='loaderSubtitle')
@@ -110,6 +110,12 @@ export default {
   components: {
     PasswordStrength
   },
+  props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    }
+  },
   data () {
     return {
       email: '',
@@ -138,6 +144,12 @@ export default {
     })
   },
   methods: {
+    withBaseUrl (path) {
+      if (!this.baseUrl) {
+        return path
+      }
+      return `${this.baseUrl}${path}`
+    },
     /**
      * REGISTER
      */

client/components/unauthorized.vue

@@ -2,10 +2,10 @@
   v-app
     .unauthorized
       .unauthorized-content
-        img.animated.fadeIn(src='/_assets/svg/icon-delete-shield.svg', alt='Unauthorized')
+        img.animated.fadeIn(:src='withBaseUrl(`/_assets/svg/icon-delete-shield.svg`)', alt='Unauthorized')
         .headline {{$t('unauthorized.title')}}
         .subtitle-1.mt-3 {{$t('unauthorized.action.' + action)}}
-        v-btn.mt-5(href='/login', x-large)
+        v-btn.mt-5(:href='withBaseUrl(`/login`)', x-large)
           v-icon(left) mdi-login
           span {{$t('unauthorized.login')}}
         v-btn.mt-5(color='red lighten-4', href='javascript:window.history.go(-1);', outlined)
@@ -17,11 +17,23 @@
 
 export default {
   props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    },
     action: {
       type: String,
       default: 'view'
     }
   },
+  methods: {
+    withBaseUrl (path) {
+      if (!this.baseUrl) {
+        return path
+      }
+      return `${this.baseUrl}${path}`
+    }
+  },
   data() {
     return { }
   }

client/components/welcome.vue

@@ -2,14 +2,14 @@
   v-app
     .onboarding
       .onboarding-content
-        img.animated.fadeIn(src='/_assets/svg/logo-wikijs.svg', alt='Wiki.js')
+        img.animated.fadeIn(:src='withBaseUrl(`/_assets/svg/logo-wikijs.svg`)', alt='Wiki.js')
         .headline.animated.fadeInUp {{ $t('welcome.title') }}
         .subtitle-1.mt-3.animated.fadeInUp.wait-p1s {{ $t('welcome.subtitle') }}
         div
-          v-btn.mt-5.mx-3.animated.fadeInUp.wait-p2s(color='primary', :href='`/e/` + locale + `/home`', x-large)
+          v-btn.mt-5.mx-3.animated.fadeInUp.wait-p2s(color='primary', :href='withBaseUrl(`/e/` + locale + `/home`)', x-large)
             v-icon(left) mdi-plus
             span {{ $t('welcome.createhome') }}
-          v-btn.mt-5.mx-3.animated.fadeInUp.wait-p3s(color='primary', href='/a', x-large)
+          v-btn.mt-5.mx-3.animated.fadeInUp.wait-p3s(color='primary', :href='withBaseUrl(`/a`)', x-large)
             v-icon(left) mdi-view-dashboard
             span {{ $t('welcome.goadmin') }}
 
@@ -19,11 +19,23 @@
 
 export default {
   props: {
+    baseUrl: {
+      type: String,
+      default: ''
+    },
     locale: {
       type: String,
       default: 'en'
     }
   },
+  methods: {
+    withBaseUrl (path) {
+      if (!this.baseUrl) {
+        return path
+      }
+      return `${this.baseUrl}${path}`
+    }
+  },
   data() {
     return { }
   }

dev/templates/master.pug

@@ -1,12 +1,13 @@
 doctype html
 html(lang=siteConfig.lang)
   head
+    - const baseUrl = siteConfig.baseUrl || ''
     meta(http-equiv='X-UA-Compatible', content='IE=edge')
     meta(charset='UTF-8')
     meta(name='viewport', content='user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=5')
     meta(name='theme-color', content='#1976d2')
     meta(name='msapplication-TileColor', content='#1976d2')
-    meta(name='msapplication-TileImage', content='/_assets/favicons/mstile-150x150.png')
+    meta(name='msapplication-TileImage', content=baseUrl + '/_assets/favicons/mstile-150x150.png')
 
     title= pageMeta.title + ' | ' + config.title
 
@@ -20,12 +21,12 @@ html(lang=siteConfig.lang)
     meta(property='og:site_name', content=config.title)
 
     //- Favicon
-    link(rel='apple-touch-icon', sizes='180x180', href='/_assets/favicons/apple-touch-icon.png')
-    link(rel='icon', type='image/png', sizes='192x192', href='/_assets/favicons/android-chrome-192x192.png')
-    link(rel='icon', type='image/png', sizes='32x32', href='/_assets/favicons/favicon-32x32.png')
-    link(rel='icon', type='image/png', sizes='16x16', href='/_assets/favicons/favicon-16x16.png')
-    link(rel='mask-icon', href='/_assets/favicons/safari-pinned-tab.svg', color='#1976d2')
-    link(rel='manifest', href='/_assets/manifest.json')
+    link(rel='apple-touch-icon', sizes='180x180', href=baseUrl + '/_assets/favicons/apple-touch-icon.png')
+    link(rel='icon', type='image/png', sizes='192x192', href=baseUrl + '/_assets/favicons/android-chrome-192x192.png')
+    link(rel='icon', type='image/png', sizes='32x32', href=baseUrl + '/_assets/favicons/favicon-32x32.png')
+    link(rel='icon', type='image/png', sizes='16x16', href=baseUrl + '/_assets/favicons/favicon-16x16.png')
+    link(rel='mask-icon', href=baseUrl + '/_assets/favicons/safari-pinned-tab.svg', color='#1976d2')
+    link(rel='manifest', href=baseUrl + '/_assets/manifest.json')
 
     //- Site Properties
     script.

server/master.js

@@ -12,6 +12,30 @@ const _ = require('lodash')
 
 /* global WIKI */
 
+const normalizeBaseUrl = (input) => {
+  if (!input || typeof input !== 'string') {
+    return ''
+  }
+  let value = input.trim()
+  if (!value) {
+    return ''
+  }
+  if (value.startsWith('http://') || value.startsWith('https://')) {
+    try {
+      value = new URL(value).pathname
+    } catch (err) {
+      value = ''
+    }
+  }
+  if (!value || value === '/') {
+    return ''
+  }
+  if (!value.startsWith('/')) {
+    value = `/${value}`
+  }
+  return value.replace(/\/+$/, '')
+}
+
 module.exports = async () => {
   // ----------------------------------------
   // Load core modules
@@ -145,6 +169,9 @@ module.exports = async () => {
   // ----------------------------------------
 
   app.use(async (req, res, next) => {
+    const siteUrl = _.get(WIKI, 'config.host', '') || _.get(WIKI, 'config.siteUrl', '')
+    const baseUrl = normalizeBaseUrl(siteUrl)
+
     res.locals.siteConfig = {
       title: WIKI.config.title,
       theme: WIKI.config.theming.theme,
@@ -155,8 +182,10 @@ module.exports = async () => {
       company: WIKI.config.company,
       contentLicense: WIKI.config.contentLicense,
       footerOverride: WIKI.config.footerOverride,
-      logoUrl: WIKI.config.logoUrl
+      logoUrl: WIKI.config.logoUrl,
+      baseUrl
     }
+    res.locals.baseUrl = baseUrl
     res.locals.langs = await WIKI.models.locales.getNavLocales({ cache: true })
     res.locals.analyticsCode = await WIKI.models.analytics.getCode({ cache: true })
     next()

server/views/error.pug

@@ -3,8 +3,8 @@ extends master.pug
 block body
   #root.is-fullscreen
     .app-error
-      a(href='/')
-        img(src='/_assets/svg/logo-wikijs.svg')
+      a(href=baseUrl + '/')
+        img(src=baseUrl + '/_assets/svg/logo-wikijs.svg')
       strong Oops, something went wrong...
       span= message
             

server/views/legacy/login.pug

@@ -7,7 +7,7 @@ block body
       .login-dialog
         if err
           .login-error= err.message
-        form(method='post', action='/login')
+        form(method='post', action=baseUrl + '/login')
           h1= config.title
           select(name='strategy')
             each str in formStrategies
@@ -19,5 +19,5 @@ block body
           .login-social
             h2= t('auth:orLoginUsingStrategy')
             each str in socialStrategies
-              a.login-social-icon(href='/login/' + str.key, class=str.color)
+              a.login-social-icon(href=baseUrl + '/login/' + str.key, class=str.color)
                 != str.icon

server/views/legacy/page.pug

@@ -13,10 +13,10 @@ block body
       span.header-deprecated!= t('outdatedBrowserWarning', { modernBrowser: '<a href="https://bestvpn.org/outdatedbrowser/en" rel="nofollow">' + t('modernBrowser') + '</a>', interpolation: { escapeValue: false } })
       span.header-login
         if !isAuthenticated
-          a(href='/login', title='Login')
+          a(href=baseUrl + '/login', title='Login')
             i.mdi.mdi-account-circle
         else
-          a(href='/logout', title='Logout')
+          a(href=baseUrl + '/logout', title='Logout')
             i.mdi.mdi-logout
     .main
       .sidebar

server/views/login.pug

@@ -3,6 +3,7 @@ extends master.pug
 block body
   #root.is-fullscreen
     login(
+      base-url=baseUrl
       bg-url=bgUrl
       hide-local=hideLocal
       change-pwd-continuation-token=changePwdContinuationToken

server/views/notfound.pug

@@ -2,4 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    not-found
+    not-found(base-url=baseUrl)

server/views/profile.pug

@@ -2,4 +2,4 @@ extends master.pug
 
 block body
   #root
-    profile
+    profile(base-url=baseUrl)

server/views/register.pug

@@ -2,4 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    register
+    register(base-url=baseUrl)

server/views/unauthorized.pug

@@ -2,4 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    unauthorized(action=action)
+    unauthorized(action=action, base-url=baseUrl)

server/views/welcome.pug

@@ -2,4 +2,4 @@ extends master.pug
 
 block body
   #root.is-fullscreen
-    welcome(locale=locale)
+    welcome(locale=locale, base-url=baseUrl)