Add subpath support

Fixes TwiN#88
simonhammes · Nov 20, 2024 · 129567b · 129567b
1 parent 2fe9913
commit 129567b
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 16 deletions.
diff --git a/config/ui/ui.go b/config/ui/ui.go
@@ -14,6 +14,7 @@ const (
 	defaultHeader      = "Health Status"
 	defaultLogo        = ""
 	defaultLink        = ""
+	defaultBase        = "/"
 )
 
 var (
@@ -27,6 +28,7 @@ type Config struct {
 	Header      string   `yaml:"header,omitempty"`      // Header is the text at the top of the page
 	Logo        string   `yaml:"logo,omitempty"`        // Logo to display on the page
 	Link        string   `yaml:"link,omitempty"`        // Link to open when clicking on the logo
+	Base        string   `yaml:"base,omitempty"`        // TODO:
 	Buttons     []Button `yaml:"buttons,omitempty"`     // Buttons to display below the header
 }
 
@@ -52,6 +54,7 @@ func GetDefaultConfig() *Config {
 		Header:      defaultHeader,
 		Logo:        defaultLogo,
 		Link:        defaultLink,
+		Base:        defaultBase,
 	}
 }
 

diff --git a/web/app/public/index.html b/web/app/public/index.html
@@ -6,13 +6,14 @@
       window.config = {logo: "{{ .Logo }}", header: "{{ .Header }}", link: "{{ .Link }}", buttons: []};{{- range .Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
     </script>
     <title>{{ .Title }}</title>
+    <base href="{{ .Base }}" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="manifest" href="/manifest.json" crossorigin="use-credentials" />
-    <link rel="shortcut icon" href="/favicon.ico" />
+    <link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
+    <link rel="manifest" href="manifest.json" crossorigin="use-credentials" />
+    <link rel="shortcut icon" href="favicon.ico" />
     <meta name="description" content="{{ .Description }}" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
     <meta name="apple-mobile-web-app-title" content="{{ .Title }}" />

diff --git a/web/app/src/App.vue b/web/app/src/App.vue
@@ -50,7 +50,6 @@
 <script>
 import Social from './components/Social.vue'
 import Tooltip from './components/Tooltip.vue';
-import {SERVER_URL} from "@/main";
 import Loading from "@/components/Loading";
 
 export default {
@@ -62,7 +61,7 @@ export default {
   },
   methods: {
     fetchConfig() {
-      fetch(`${SERVER_URL}/api/v1/config`, {credentials: 'include'})
+      fetch('api/v1/config', {credentials: 'include'})
       .then(response => {
         this.retrievedConfig = true;
         if (response.status === 200) {
@@ -96,7 +95,6 @@ export default {
       retrievedConfig: false,
       config: { oidc: false, authenticated: true },
       tooltip: {},
-      SERVER_URL
     }
   },
   created() {

diff --git a/web/app/src/views/Details.vue b/web/app/src/views/Details.vue
@@ -112,7 +112,7 @@ export default {
   methods: {
     fetchData() {
       //console.log("[Details][fetchData] Fetching data");
-      fetch(`${this.serverUrl}/api/v1/endpoints/${this.$route.params.key}/statuses?page=${this.currentPage}`, {credentials: 'include'})
+      fetch(`api/v1/endpoints/${this.$route.params.key}/statuses?page=${this.currentPage}`, {credentials: 'include'})
       .then(response => {
         if (response.status === 200) {
           response.json().then(data => {
@@ -166,16 +166,16 @@ export default {
       });
     },
     generateHealthBadgeImageURL() {
-      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/health/badge.svg`;
+      return `api/v1/endpoints/${this.endpointStatus.key}/health/badge.svg`;
     },
     generateUptimeBadgeImageURL(duration) {
-      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/uptimes/${duration}/badge.svg`;
+      return `api/v1/endpoints/${this.endpointStatus.key}/uptimes/${duration}/badge.svg`;
     },
     generateResponseTimeBadgeImageURL(duration) {
-      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/response-times/${duration}/badge.svg`;
+      return `api/v1/endpoints/${this.endpointStatus.key}/response-times/${duration}/badge.svg`;
     },
     generateResponseTimeChartImageURL() {
-      return `${this.serverUrl}/api/v1/endpoints/${this.endpointStatus.key}/response-times/24h/chart.svg`;
+      return `api/v1/endpoints/${this.endpointStatus.key}/response-times/24h/chart.svg`;
     },
     changePage(page) {
       this.currentPage = page;

diff --git a/web/app/src/views/Home.vue b/web/app/src/views/Home.vue
@@ -19,7 +19,6 @@ import Settings from '@/components/Settings.vue'
 import Endpoints from '@/components/Endpoints.vue';
 import Pagination from "@/components/Pagination";
 import Loading from "@/components/Loading";
-import {SERVER_URL} from "@/main.js";
 
 export default {
   name: 'Home',
@@ -32,7 +31,7 @@ export default {
   emits: ['showTooltip', 'toggleShowAverageResponseTime'],
   methods: {
     fetchData() {
-      fetch(`${SERVER_URL}/api/v1/endpoints/statuses?page=${this.currentPage}`, {credentials: 'include'})
+      fetch(`api/v1/endpoints/statuses?page=${this.currentPage}`, {credentials: 'include'})
       .then(response => {
         this.retrievedData = true;
         if (response.status === 200) {

diff --git a/web/app/vue.config.js b/web/app/vue.config.js
@@ -2,5 +2,5 @@ module.exports = {
 	filenameHashing: false,
 	productionSourceMap: false,
 	outputDir: '../static',
-	publicPath: '/'
+	publicPath: './'
 }