🔀 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.

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:

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)**
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Dashy",
-  "version": "1.4.4",
+  "version": "1.4.5",
   "license": "MIT",
   "main": "server",
   "scripts": {

src/components/PageStrcture/Header.vue

@@ -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>

src/components/PageStrcture/PageTitle.vue

@@ -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;
   }

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;
   }
 

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": [