diff --git a/README.md b/README.md index 5e495cb91c..bcf041bf5a 100644 --- a/README.md +++ b/README.md @@ -345,6 +345,8 @@ Custom links for the navigation menu are defined under [`pageInfo.navLinks`](htt You can display either custom text or HTML in the footer, using the `pageInfo.footerText` attribute. +To display a logo or image asset next to the title, set `pageInfo.logo` to the path to your picture (either local or remote). + It's also possible to hide parts of the page that you do not need (e.g. navbar, footer, search, heading, etc). This is done using the [`appConfig.hideComponents`](https://github.com/Lissy93/dashy/blob/master/docs/configuring.md#appconfighidecomponents-optional) attribute. For example, a `pageInfo` section might look something like this: diff --git a/docs/configuring.md b/docs/configuring.md index 4e1ca03873..3b03513cf6 100644 --- a/docs/configuring.md +++ b/docs/configuring.md @@ -38,6 +38,7 @@ To disallow any changes from being written to disk via the UI config editor, set **`description`** | `string` | _Optional_ | Description of your dashboard, also displayed as a subtitle **`navLinks`** | `array` | _Optional_ | Optional list of a maximum of 6 links, which will be displayed in the navigation bar. See [`navLinks`](#pageinfonavlinks-optional) **`footerText`** | `string` | _Optional_ | Text to display in the footer (note that this will override the default footer content). This can also include HTML and inline CSS +**`logo`** | `string` | _Optional_ | The path to an image to display in the header (to the right of the title). This can be either local, where `/` is the root of `./public`, or any remote image, such as `https://i.ibb.co/yhbt6CY/dashy.png`. It's recommended to scale your image down, so that it doesn't impact load times **[⬆️ Back to Top](#configuring)** diff --git a/package.json b/package.json index a7c219edc7..19b06176b4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "Dashy", - "version": "1.4.4", + "version": "1.4.5", "license": "MIT", "main": "server", "scripts": { diff --git a/src/components/PageStrcture/Header.vue b/src/components/PageStrcture/Header.vue index aa49d6c377..754f331357 100644 --- a/src/components/PageStrcture/Header.vue +++ b/src/components/PageStrcture/Header.vue @@ -1,6 +1,11 @@ diff --git a/src/components/PageStrcture/PageTitle.vue b/src/components/PageStrcture/PageTitle.vue index e64a72a885..98d7521215 100644 --- a/src/components/PageStrcture/PageTitle.vue +++ b/src/components/PageStrcture/PageTitle.vue @@ -1,7 +1,10 @@ @@ -11,6 +14,7 @@ export default { props: { title: String, description: String, + logo: String, }, }; @@ -20,7 +24,9 @@ export default { .page-titles { display: flex; - flex-direction: column; + flex-wrap: wrap; + flex-direction: row; + align-items: center; text-decoration: none; h1 { color: var(--heading-text-color); @@ -33,7 +39,13 @@ export default { text-shadow: 1px 1px 2px #130f23; opacity: var(--dimming-factor); } + img.site-logo { + margin: 0.2rem 0.5rem 0.2rem 0; + max-width: 3.5rem; + height: fit-content; + } @include phone { + flex-direction: column; text-align: center; padding: 0.25rem 0; } diff --git a/src/utils/ConfigAccumalator.js b/src/utils/ConfigAccumalator.js index 1237897cef..b1426eef72 100644 --- a/src/utils/ConfigAccumalator.js +++ b/src/utils/ConfigAccumalator.js @@ -48,11 +48,13 @@ export default class ConfigAccumulator { } catch (e) { localPageInfo = {}; } + const filePageInfo = this.conf.pageInfo || {}; const pi = this.conf.pageInfo || defaults; // The page info object to return - pi.title = localPageInfo.title || conf.pageInfo.title || defaults.title; - pi.description = localPageInfo.description || conf.pageInfo.description || defaults.description; - pi.navLinks = localPageInfo.navLinks || conf.pageInfo.navLinks || defaults.navLinks; - pi.footerText = localPageInfo.footerText || conf.pageInfo.footerText || defaults.footerText; + pi.title = localPageInfo.title || filePageInfo.title || defaults.title; + pi.logo = localPageInfo.logo || filePageInfo.logo || defaults.logo; + pi.description = localPageInfo.description || filePageInfo.description || defaults.description; + pi.navLinks = localPageInfo.navLinks || filePageInfo.navLinks || defaults.navLinks; + pi.footerText = localPageInfo.footerText || filePageInfo.footerText || defaults.footerText; return pi; } diff --git a/src/utils/ConfigSchema.json b/src/utils/ConfigSchema.json index c07d1e954d..874fd18bb1 100644 --- a/src/utils/ConfigSchema.json +++ b/src/utils/ConfigSchema.json @@ -39,6 +39,15 @@ }, "footerText": { "type": "string" + }, + "logo": { + "type": "string", + "description": "Path to an optional image asset, to be displayed in the header", + "pattern": "^(http|\/)", + "examples": [ + "/web-icons/dashy-logo.png", + "https://i.ibb.co/yhbt6CY/dashy.png" + ] } }, "required": [