#77: Make page logo customizable

This commit is contained in:
TwinProduction 2021-09-11 04:33:14 -04:00
parent 7a68920889
commit db5fc8bc11
9 changed files with 32 additions and 5 deletions

View File

@ -175,6 +175,9 @@ If you want to test it locally, see [Docker](#docker).
| `web` | Web configuration. | `{}` | | `web` | Web configuration. | `{}` |
| `web.address` | Address to listen on. | `0.0.0.0` | | `web.address` | Address to listen on. | `0.0.0.0` |
| `web.port` | Port to listen on. | `8080` | | `web.port` | Port to listen on. | `8080` |
| `ui` | UI configuration. | `{}` |
| `ui.title` | Title of the page. | `Health Dashboard ǀ Gatus` |
| `ui.logo` | URL to the logo to display | `""` |
### Conditions ### Conditions

View File

@ -5,17 +5,22 @@ import (
"html/template" "html/template"
) )
const defaultTitle = "Health Dashboard | Gatus" const (
defaultTitle = "Health Dashboard | Gatus"
defaultLogo = ""
)
// UIConfig is the configuration for the UI of Gatus // UIConfig is the configuration for the UI of Gatus
type UIConfig struct { type UIConfig struct {
Title string `yaml:"title"` // Title of the page Title string `yaml:"title"` // Title of the page
Logo string `yaml:"logo"` // Logo to display on the page
} }
// GetDefaultUIConfig returns a UIConfig struct with the default values // GetDefaultUIConfig returns a UIConfig struct with the default values
func GetDefaultUIConfig() *UIConfig { func GetDefaultUIConfig() *UIConfig {
return &UIConfig{ return &UIConfig{
Title: defaultTitle, Title: defaultTitle,
Logo: defaultLogo,
} }
} }

View File

@ -18,4 +18,7 @@ func TestGetDefaultUIConfig(t *testing.T) {
if defaultUIConfig.Title != defaultTitle { if defaultUIConfig.Title != defaultTitle {
t.Error("expected GetDefaultUIConfig() to return defaultTitle, got", defaultUIConfig.Title) t.Error("expected GetDefaultUIConfig() to return defaultTitle, got", defaultUIConfig.Title)
} }
if defaultUIConfig.Logo != defaultLogo {
t.Error("expected GetDefaultUIConfig() to return defaultLogo, got", defaultUIConfig.Logo)
}
} }

View File

@ -2,6 +2,11 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<script type="text/javascript">
window.config = {
logo: "{{ .Logo }}"
};
</script>
<title>{{ .Title }}</title> <title>{{ .Title }}</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">

View File

@ -6,7 +6,8 @@
<div class="text-3xl xl:text-5xl lg:text-4xl font-light">Health Status</div> <div class="text-3xl xl:text-5xl lg:text-4xl font-light">Health Status</div>
</div> </div>
<div class="w-1/4 flex justify-end"> <div class="w-1/4 flex justify-end">
<img src="./assets/logo.png" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;"/> <img v-if="getLogo" :src="getLogo" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;"/>
<img v-if="!getLogo" src="./assets/logo.png" alt="Gatus" class="object-scale-down" style="max-width: 100px; min-width: 50px; min-height:50px;"/>
</div> </div>
</div> </div>
</div> </div>
@ -32,6 +33,11 @@ export default {
this.tooltip = {result: result, event: event}; this.tooltip = {result: result, event: event};
} }
}, },
computed: {
getLogo() {
return window.config && window.config.logo && window.config.logo !== '{{ .Logo }}' ? window.config.logo : "";
}
},
data() { data() {
return { return {
tooltip: {} tooltip: {}

View File

@ -16,6 +16,9 @@
{{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms {{ (minResponseTime === maxResponseTime ? minResponseTime : (minResponseTime + '-' + maxResponseTime)) }}ms
</slot> </slot>
</span> </span>
<!-- <span class="text-sm font-bold cursor-pointer">-->
<!-- -->
<!-- </span>-->
</div> </div>
</div> </div>
<div> <div>

View File

@ -1 +1,3 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><title>{{ .Title }}</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><script defer="defer" src="/js/chunk-vendors.js" type="module"></script><script defer="defer" src="/js/app.js" type="module"></script><link href="/css/app.css" rel="stylesheet"><script defer="defer" src="/js/chunk-vendors-legacy.js" nomodule></script><script defer="defer" src="/js/app-legacy.js" nomodule></script></head><body class="dark:bg-gray-900"><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div></body></html> <!doctype html><html lang="en"><head><meta charset="utf-8"/><script>window.config = {
logo: "{{ .Logo }}"
};</script><title>{{ .Title }}</title><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/favicon.ico"><script defer="defer" src="/js/chunk-vendors.js" type="module"></script><script defer="defer" src="/js/app.js" type="module"></script><link href="/css/app.css" rel="stylesheet"><script defer="defer" src="/js/chunk-vendors-legacy.js" nomodule></script><script defer="defer" src="/js/app-legacy.js" nomodule></script></head><body class="dark:bg-gray-900"><noscript><strong>Enable JavaScript to view this page.</strong></noscript><div id="app"></div></body></html>

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long