X-Git-Url: https://git.immae.eu/?a=blobdiff_plain;f=src%2FApp.vue;h=1f4f5099625a26583174a504bf862d0497e32661;hb=451b1ac62450fb2c4f8e2382bcf422bb7a434700;hp=d7054a7f453c8e0bd03eb0f64975482c44722d44;hpb=db738288fa7c99a3d5aa47f35a634297c7b1f506;p=github%2Fbastienwirtz%2Fhomer.git

diff --git a/src/App.vue b/src/App.vue
index d7054a7..1f4f509 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -13,8 +13,10 @@
       <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" />
-            <i v-if="config.icon" :class="['fa-fw', config.icon]"></i>
+            <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">
             <span class="headline">{{ config.subtitle }}</span>
@@ -26,7 +28,7 @@
       <Navbar
         :open="showMenu"
         :links="config.links"
-        @navbar:toggle="showMenu = !showMenu"
+        @navbar-toggle="showMenu = !showMenu"
       >
         <DarkMode @updated="isDark = $event" />
 
@@ -40,9 +42,9 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           @input="filterServices"
-          @search:focus="showMenu = true"
-          @search:open="navigateToFirstService"
-          @search:cancel="filterServices"
+          @search-focus="showMenu = true"
+          @search-open="navigateToFirstService"
+          @search-cancel="filterServices"
         />
       </Navbar>
     </div>
@@ -51,7 +53,7 @@
       <div v-cloak class="container">
         <ConnectivityChecker
           v-if="config.connectivityCheck"
-          @network:status-update="offline = $event"
+          @network-status-update="offline = $event"
         />
         <div v-if="!offline">
           <!-- Optional messages -->
@@ -62,11 +64,16 @@
             <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
-                v-for="item in group.items"
-                :key="item.name"
+                v-for="(item, index) in group.items"
+                :key="index"
                 v-bind:item="item"
                 :class="['column', `is-${12 / config.columns}`]"
               />
@@ -85,12 +92,17 @@
             >
               <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
-                v-for="item in group.items"
+                v-for="(item, index) in group.items"
+                :key="index"
                 v-bind:item="item"
-                :key="item.url"
               />
             </div>
           </div>
@@ -149,19 +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.title} | ${this.config.subtitle}`;
+    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) {
@@ -190,6 +224,7 @@ export default {
     matchesFilter: function (item) {
       return (
         item.name.toLowerCase().includes(this.filter) ||
+        (item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||
         (item.tag && item.tag.toLowerCase().includes(this.filter))
       );
     },
@@ -235,6 +270,11 @@ export default {
         },
       };
     },
+    createStylesheet: function (css) {
+      let style = document.createElement("style");
+      style.appendChild(document.createTextNode(css));
+      document.head.appendChild(style);
+    },
   },
 };
 </script>