Merge pull request #196 from GaaH/use-logo-in-groups

Use logo in groups

diff --combined docs/configuration.md
index 75ce7cde1f13677274688a01e98ccf1cf2fc9a6e,3ff49fa85161621fcd5d30db82fae9987e1acd68..a472b416d7ed707946b8d615975d96aa64200355
--- 1/docs/configuration.md
--- 2/docs/configuration.md
+++ b/docs/configuration.md
@@@ -92,11 -92,6 +92,11 @@@ links
    - name: "link 2"
      icon: "fas fa-book"
      url: "https://github.com/bastienwirtz/homer"
 +  # this will link to a second homer page that will load config from page2.yml and keep default config values as in config.yml file
 +  # see url field and assets/page.yml used in this example:
 +  - name: "Second Page"
 +    icon: "fas fa-file-alt"
 +    url: "#page2"
  
  # Services
  # First level array represents a group.
@@@ -104,6 -99,8 +104,8 @@@
  services:
    - name: "Application"
      icon: "fas fa-code-branch"
+     # A path to an image can also be provided. Note that icon take precedence if both icon and logo are set.
+     # logo: "path/to/logo"
      items:
        - name: "Awesome app"
          logo: "assets/tools/sample.png"

diff --combined src/App.vue
index aff340cfb4cb1a33450667b2d3f2eab2a1fe591d,486ef036d30696eae1698c27f29b86a8751f2395..1f4f5099625a26583174a504bf862d0497e32661
--- 1/src/App.vue
--- 2/src/App.vue
+++ b/src/App.vue
@@@ -13,9 -13,7 +13,9 @@@
        <section v-if="config.header" class="first-line">
          <div v-cloak class="container">
            <div class="logo">
 -            <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
 +            <a href="#">
 +              <img v-if="config.logo" :src="config.logo" alt="dashboard logo" />
 +            </a>
              <i v-if="config.icon" :class="config.icon"></i>
            </div>
            <div class="dashboard-title">
@@@ -64,6 -62,11 +64,11 @@@
              <template v-for="group in services">
                <h2 v-if="group.name" class="column is-full group-title">
                  <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
+                 <div v-else-if="group.logo" class="group-logo media-left">
+                   <figure class="image is-48x48">
+                     <img :src="group.logo" :alt="`${group.name} logo`" />
+                   </figure>
+                 </div>
                  {{ group.name }}
                </h2>
                <Service
@@@ -87,6 -90,11 +92,11 @@@
              >
                <h2 v-if="group.name" class="group-title">
                  <i v-if="group.icon" :class="['fa-fw', group.icon]"></i>
+                 <div v-else-if="group.logo" class="group-logo media-left">
+                   <figure class="image is-48x48">
+                     <img :src="group.logo" :alt="`${group.name} logo`" />
+                   </figure>
+                 </div>
                  {{ group.name }}
                </h2>
                <Service
@@@ -151,41 -159,28 +161,41 @@@ export default 
      };
    },
    created: async function () {
 -    const defaults = jsyaml.load(defaultConfig);
 -    let config;
 -    try {
 -      config = await this.getConfig();
 -    } catch (error) {
 -      console.log(error);
 -      config = this.handleErrors("⚠️ Error loading configuration", error);
 -    }
 -    this.config = merge(defaults, config);
 -    this.services = this.config.services;
 -    document.title =
 -      this.config.documentTitle ||
 -      `${this.config.title} | ${this.config.subtitle}`;
 -    if (this.config.stylesheet) {
 -      let stylesheet = "";
 -      for (const file of this.config.stylesheet) {
 -        stylesheet += `@import "${file}";`;
 -      }
 -      this.createStylesheet(stylesheet);
 -    }
 +    this.buildDashboard();
 +    window.onhashchange = this.buildDashboard;
    },
    methods: {
 +    buildDashboard: async function () {
 +      const defaults = jsyaml.load(defaultConfig);
 +      let config;
 +      try {
 +        config = await this.getConfig();
 +        const path =
 +          window.location.hash.substring(1) != ""
 +            ? window.location.hash.substring(1)
 +            : null;
 +
 +        if (path) {
 +          let pathConfig = await this.getConfig(`assets/${path}.yml`); // the slash (/) is included in the pathname
 +          config = Object.assign(config, pathConfig);
 +        }
 +      } catch (error) {
 +        console.log(error);
 +        config = this.handleErrors("⚠️ Error loading configuration", error);
 +      }
 +      this.config = merge(defaults, config);
 +      this.services = this.config.services;
 +      document.title =
 +        this.config.documentTitle ||
 +        `${this.config.title} | ${this.config.subtitle}`;
 +      if (this.config.stylesheet) {
 +        let stylesheet = "";
 +        for (const file of this.config.stylesheet) {
 +          stylesheet += `@import "${file}";`;
 +        }
 +        this.createStylesheet(stylesheet);
 +      }
 +    },
      getConfig: function (path = "assets/config.yml") {
        return fetch(path).then((response) => {
          if (response.redirected) {