mirror of https://github.com/Lissy93/dashy.git
🔀 Merge pull request #105 from Lissy93/FEATURE/104_add-image-to-header
[FEATURE] Add option for image in header. Fixes #104. Suggested by @Docrom. To use, set `pageInfo.logo` to the path of image.
This commit is contained in:
commit
8ae65e96f7
|
@ -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:
|
||||
|
|
|
@ -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)**
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "Dashy",
|
||||
"version": "1.4.4",
|
||||
"version": "1.4.5",
|
||||
"license": "MIT",
|
||||
"main": "server",
|
||||
"scripts": {
|
||||
|
|
|
@ -1,6 +1,11 @@
|
|||
<template>
|
||||
<header>
|
||||
<PageTitle v-if="titleVisible" :title="pageInfo.title" :description="pageInfo.description" />
|
||||
<PageTitle
|
||||
v-if="titleVisible"
|
||||
:title="pageInfo.title"
|
||||
:description="pageInfo.description"
|
||||
:logo="pageInfo.logo"
|
||||
/>
|
||||
<Nav v-if="navVisible" :links="pageInfo.navLinks" class="nav" />
|
||||
</header>
|
||||
</template>
|
||||
|
|
|
@ -1,7 +1,10 @@
|
|||
<template>
|
||||
<router-link to="/" class="page-titles">
|
||||
<img v-if="logo" :src="logo" class="site-logo" />
|
||||
<div class="text">
|
||||
<h1>{{ title }}</h1>
|
||||
<span class="subtitle">{{ description }}</span>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
|
||||
|
@ -11,6 +14,7 @@ export default {
|
|||
props: {
|
||||
title: String,
|
||||
description: String,
|
||||
logo: String,
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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": [
|
||||
|
|
Loading…
Reference in New Issue