refactor(ui): Cleanup template option handling

PythonGermany · PythonGermany · commit 4ed5b4794a4b · 2025-12-10T22:46:27.000+01:00
diff --git a/web/app/public/index.html b/web/app/public/index.html
@@ -2,10 +2,28 @@
 <html lang="en" class="{{ .Theme }}">
   <head>
     <meta charset="utf-8" />
+    <title>{{ .UI.Title }}</title>
     <script type="text/javascript">
-      window.config = {logo: "{{ .UI.Logo }}", header: "{{ .UI.Header }}", dashboardHeading: "{{ .UI.DashboardHeading }}", dashboardSubheading: "{{ .UI.DashboardSubheading }}", link: "{{ .UI.Link }}", buttons: [], maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}", defaultSortBy: "{{ .UI.DefaultSortBy }}", defaultFilterBy: "{{ .UI.DefaultFilterBy }}"};{{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
-      // Initialize theme immediately to prevent flash
       (function() {
+        // String is percent-encoded to prevent it from being replaced when ui config is injected
+        if (document.title !== decodeURIComponent("%7B%7B%20.UI.Title%20%7D%7D")) { 
+          window.config = {
+            logo: "{{ .UI.Logo }}",
+            header: "{{ .UI.Header }}",
+            dashboardHeading: "{{ .UI.DashboardHeading }}",
+            dashboardSubheading: "{{ .UI.DashboardSubheading }}",
+            link: "{{ .UI.Link }}",
+            buttons: [],
+            maximumNumberOfResults: "{{ .UI.MaximumNumberOfResults }}",
+            defaultSortBy: "{{ .UI.DefaultSortBy }}",
+            defaultFilterBy: "{{ .UI.DefaultFilterBy }}"
+          };
+          {{- range .UI.Buttons}}window.config.buttons.push({name:"{{ .Name }}",link:"{{ .Link }}"});{{end}}
+        } else {
+          console.warn('Running in development mode; UI configuration is not injected.');
+          document.title= 'Gatus (Development)';
+        }
+        // Initialize theme immediately to prevent flash
         const themeFromCookie = document.cookie.match(/theme=(dark|light);?/)?.[1];
         const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
         if (themeFromCookie === 'dark' || (!themeFromCookie && prefersDark)) {
@@ -15,7 +33,6 @@
         }
       })();
     </script>
-    <title>{{ .UI.Title }}</title>
     <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" />
diff --git a/web/app/src/App.vue b/web/app/src/App.vue
@@ -177,21 +177,13 @@ const tooltipIsPersistent = ref(false)
 let configInterval = null
 
 // Computed properties
-const logo = computed(() => {
-  return window.config && window.config.logo && window.config.logo !== '{{ .UI.Logo }}' ? window.config.logo : ""
-})
+const logo = computed(() => window.config?.logo ?? "")
 
-const header = computed(() => {
-  return window.config && window.config.header && window.config.header !== '{{ .UI.Header }}' ? window.config.header : "Gatus"
-})
+const header = computed(() => window.config?.header ?? "Gatus")
 
-const link = computed(() => {
-  return window.config && window.config.link && window.config.link !== '{{ .UI.Link }}' ? window.config.link : null
-})
+const link = computed(() => window.config?.link ?? null)
 
-const buttons = computed(() => {
-  return window.config && window.config.buttons ? window.config.buttons : []
-})
+const buttons = computed(() => window.config?.buttons ?? [])
 
 // Methods
 const fetchConfig = async () => {
diff --git a/web/app/src/views/Home.vue b/web/app/src/views/Home.vue
@@ -533,13 +533,9 @@ const initializeCollapsedGroups = () => {
   }
 }
 
-const dashboardHeading = computed(() => {
-  return window.config && window.config.dashboardHeading && window.config.dashboardHeading !== '{{ .UI.DashboardHeading }}' ? window.config.dashboardHeading : "Health Dashboard"
-})
+const dashboardHeading = computed(() => window.config?.dashboardHeading ?? "Health Dashboard")
 
-const dashboardSubheading = computed(() => {
-  return window.config && window.config.dashboardSubheading && window.config.dashboardSubheading !== '{{ .UI.DashboardSubheading }}' ? window.config.dashboardSubheading : "Monitor the health of your endpoints in real-time"
-})
+const dashboardSubheading = computed(() => window.config?.dashboardSubheading ?? "Monitor the health of your endpoints in real-time")
 
 onMounted(() => {
   fetchData()

Original file line number	Diff line number	Diff line change
`@@ -533,13 +533,9 @@ const initializeCollapsedGroups = () => {`
`533`	`533`	`}`
`534`	`534`	`}`
`535`	`535`
`536`		`-const dashboardHeading = computed(() => {`
`537`		`- return window.config && window.config.dashboardHeading && window.config.dashboardHeading !== '{{ .UI.DashboardHeading }}' ? window.config.dashboardHeading : "Health Dashboard"`
`538`		`-})`
	`536`	`+const dashboardHeading = computed(() => window.config?.dashboardHeading ?? "Health Dashboard")`
`539`	`537`
`540`		`-const dashboardSubheading = computed(() => {`
`541`		`- return window.config && window.config.dashboardSubheading && window.config.dashboardSubheading !== '{{ .UI.DashboardSubheading }}' ? window.config.dashboardSubheading : "Monitor the health of your endpoints in real-time"`
`542`		`-})`
	`538`	`+const dashboardSubheading = computed(() => window.config?.dashboardSubheading ?? "Monitor the health of your endpoints in real-time")`
`543`	`539`
`544`	`540`	`onMounted(() => {`
`545`	`541`	`fetchData()`