root url fixed

.gitignore

@@ -85,4 +85,4 @@ out/
 
 public/static/
 .netrc.gpg
-public/docs/
+public/*/docs/

Dockerfile

@@ -2,6 +2,7 @@
 
 # build stage
 FROM node:lts-alpine as build-stage
+ENV VUE_APP_SPLASH_BASE=splash
 WORKDIR /app
 COPY package*.json ./
 RUN npm update
@@ -11,7 +12,8 @@ RUN npm run build
 
 # production stage
 FROM nginx:stable-alpine as production-stage
-COPY --from=build-stage /app/dist /usr/share/nginx/html
-COPY ./nginx/default.conf /etc/nginx/conf.d/default.conf
+ENV VUE_APP_SPLASH_BASE=splash
+COPY --from=build-stage /app/dist /usr/share/nginx/html/${VUE_APP_SPLASH_BASE}
+COPY ./nginx/nginx.conf /etc/nginx/nginx.conf
 EXPOSE 80
 CMD ["nginx", "-g", "daemon off;"]

docs/.vuepress/config.js

@@ -1,7 +1,8 @@
 module.exports = {
+
     title: 'Splash Documentation',
     description: 'Documentation for the Splash server',
-    base: '/docs/',
+    base: '/' + process.env.VUE_APP_SPLASH_BASE + '/docs/',
     themeConfig: {
         sidebar: [
             {
@@ -32,4 +33,15 @@ module.exports = {
             },
         ]
     },
+plugins: [
+    {
+        extendPageData($page) {
+            // 1. Add extra fields.
+            if (process.env.VUE_APP_SPLASH_BASE === undefined || process.env.VUE_APP_SPLASH_BASE === null){
+                throw Error('process.env.VUE_APP_SPLASH_BASE must be defined and non-null')
+            }
+            $page.VUE_APP_SPLASH_BASE = '/' + process.env.VUE_APP_SPLASH_BASE + '/'
+        },
+    }
+]
 }

docs/tutorials/Create_Page.md

@@ -1,7 +1,7 @@
 # Create a New Page
 Let's say you want to create a new page in the system. For this example we'll pretend that we are creating a new compound.
 
-1. Navigate to the <a href="/" target="_blank">home page</a>.
+1. Navigate to the <a :href="$page.VUE_APP_SPLASH_BASE" target="_blank">home page</a>.
 2. Click on the "Compounds" card, or the "Compounds" link in the left of the black nav bar.
 3. Click "Create Compound Page" in the upper right of the page.
 4. Type in the title of the page and click "Create"

docs/tutorials/Edit_Page.md

@@ -2,7 +2,7 @@
 
 For this example we will pretend that we are editing a Compound.
 
-1. Navigate to the <a href="/" target="_blank">home page</a>.
+1. Navigate to the <a :href="$page.VUE_APP_SPLASH_BASE" target="_blank">home page</a>.
 2. Click on the "Compounds" card, or the "Compounds" link in the left of the black nav bar.
 3. Click on the row for the compound you want to edit in the table.
 4. Double click on the content box, or click on the pen icon in the upper left corner of the content box. If you want to edit the title, double click on it, or click the pen icon.

docs/tutorials/Login.md

@@ -1,7 +1,7 @@
 # Login
 For now, a user _must_ be logged in to the site in order to see/edit any of the content. The user must have been pre registered by a system admin. There is currently no way of creating an account. This login can only happen through a google account.
 
-1. Navigate to the <a href="/login" target="_blank">login page</a>. If you are already logged in, this will navigate you to the home page.
+1. Navigate to the <a :href="$page.VUE_APP_SPLASH_BASE+'login'" target="_blank">login page</a>. If you are already logged in, this will navigate you to the home page.
 
 2. Click the blue "Sign in with Google" button. This will open a pop up window.
 3. Sign in to or choose the google account that you have been pre-registered with.

docs/tutorials/View_Versions.md

@@ -2,7 +2,7 @@
 
 For this example we will pretend that we are viewing the versions of a Compound page.
 
-1. Navigate to the <a href="/" target="_blank">home page</a>.
+1. Navigate to the <a :href="$page.VUE_APP_SPLASH_BASE" target="_blank">home page</a>.
 
 2. Click on the "Compounds" card, or the "Compounds" link in the left of the black nav bar.
 3. Click on the row for the compound you want to view in the table.

nginx/nginx.conf

@@ -0,0 +1,60 @@
+user  nginx;
+worker_processes  1;
+
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+
+events {
+    worker_connections  1024;
+}
+
+
+http {
+    include       /etc/nginx/mime.types;
+    default_type  application/octet-stream;
+
+    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                      '$status $body_bytes_sent "$http_referer" '
+                      '"$http_user_agent" "$http_x_forwarded_for"';
+
+    access_log  /var/log/nginx/access.log  main;
+
+    sendfile        on;
+    #tcp_nopush     on;
+
+    keepalive_timeout  65;
+
+    #gzip  on;
+    # IMPORTANT!!!!!!!! 'splash' needs to match
+    # whatever is in the Dockerfile when we declare
+    # ENV VUE_APP_SPLASH_BASE=splash
+    server{
+        root /usr/share/nginx/html/;
+
+        location /splash/docs {
+          try_files $uri $uri/ /splash/docs/404.html;
+        }
+        location /splash/ {
+          try_files $uri /splash/index.html;
+        }
+
+        location @rewrites {
+            rewrite ^(.+)$ /index.html last;
+        }
+
+        location /api {
+            try_files $uri @proxy_to_app;
+        }
+
+        location @proxy_to_app {
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+            proxy_set_header Host $http_host;
+            # we don't want nginx trying to do something clever with
+            # redirects, we set the Host: header above already.
+            proxy_redirect off;
+            proxy_pass http://app:80;
+        }
+    }
+}

package.json

@@ -3,8 +3,8 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "serve": "vuepress build docs --dest ./public/docs && vue-cli-service serve",
-    "build": "vuepress build docs --dest ./public/docs && vue-cli-service build",
+    "serve": "VUE_APP_SPLASH_BASE=$(grep VUE_APP_SPLASH_BASE .env | cut -d '=' -f2) vuepress build docs --dest ./public/$(grep VUE_APP_SPLASH_BASE .env | cut -d '=' -f2)/docs && vue-cli-service serve",
+    "build": "npm run docs:build && vue-cli-service build && rm -rf ./public/docs",
     "lint": "vue-cli-service lint",
     "test:clear-jest-cache": "node --inspect node_modules/.bin/jest --clearCache",
     "test:debug": "node --inspect node_modules/.bin/jest --runInBand",

src/App.vue

@@ -7,20 +7,18 @@
       <!-- The reason for the href is so that if there is an error it will actually reload
       when navigating to the splash home page rather than just changing the router-view, which is hidden at
       the moment -->
-      <b-navbar-brand href="/" v-else>Splash</b-navbar-brand>
+      <b-navbar-brand to="/" v-else>Splash</b-navbar-brand>
       <!-- <router-link to="/about">About</router-link> -->
 
       <b-navbar-toggle target="nav_collapse" />
 
       <b-collapse is-nav id="nav_collapse">
-        <div v-if="!error">
           <b-navbar-nav>
             <!--
             <b-nav-item v-bind:to="'/'">Home</b-nav-item> -->
-            <b-nav-item v-bind:to="'/compounds'">Compounds</b-nav-item>
-            <b-nav-item href='/docs/' target="_blank">Help</b-nav-item>
+            <b-nav-item v-if="!error" v-bind:to="'/compounds'">Compounds</b-nav-item>
+            <b-nav-item to='/docs/' target="_blank">Help</b-nav-item>
           </b-navbar-nav>
-        </div>
       </b-collapse>
       <div v-if="!error">
         <b-nav-text class="mx-3" id="user_name">

src/components/utils/ErrorCard.vue

@@ -3,7 +3,7 @@
     <h3>
       {{ errorMsg }}
       <span v-if="showReloadText"
-        >Try <a :href="$route.fullPath">reloading</a> the page. If this does not
+        >Try <a :href="window.location.href">reloading</a> the page. If this does not
         work, contact the Splash team.</span
       >
       <span v-if="showReturnToMsg"> Return to <b-link :to='returnLink'>{{returnLinkText}}</b-link>.</span>
@@ -12,6 +12,9 @@
 </template>
 <script>
 export default {
+  data() {
+    return { window };
+  },
   props: {
     errorMsg: {
       type: String,

src/router.js

@@ -7,7 +7,7 @@ import store from './store';
 const router = new Router({
   routes,
   mode: 'history',
-  base: '/' + process.env.SPLASH_ROOT + '/',
+  base: `/${process.env.VUE_APP_SPLASH_BASE}/`,
   store,
 });
 

vue.config.js

@@ -1,12 +1,13 @@
 const LicensePlugin = require('webpack-license-plugin');
+
 // https://github.com/codepunkt/webpack-license-plugin
 // https://cli.vuejs.org/guide/webpack.html
 module.exports = {
   configureWebpack: {
     plugins: [new LicensePlugin()],
     devtool: 'source-map',
   },
-
+  publicPath: `/${process.env.VUE_APP_SPLASH_BASE}/`,
   devServer: {
     allowedHosts: [
       'teocali',