From cbbed6346a437e6b9f05f646f1df0c77d2fb36eb Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sat, 4 Jun 2022 22:40:48 +0200
Subject: Migrate to VueJS 3

---
 src/App.vue                    |  6 +++---
 src/assets/app.scss            |  2 +-
 src/components/SearchInput.vue |  2 +-
 src/components/Service.vue     |  5 +++--
 src/main.js                    | 16 +++++-----------
 5 files changed, 13 insertions(+), 18 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 664867f..43ba322 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -140,8 +140,8 @@
 </template>
 
 <script>
-const jsyaml = require("js-yaml");
-const merge = require("lodash.merge");
+import jsyaml from "js-yaml";
+import merge from "lodash.merge";
 
 import Navbar from "./components/Navbar.vue";
 import GetStarted from "./components/GetStarted.vue";
@@ -153,7 +153,7 @@ import SettingToggle from "./components/SettingToggle.vue";
 import DarkMode from "./components/DarkMode.vue";
 import DynamicTheme from "./components/DynamicTheme.vue";
 
-import defaultConfig from "./assets/defaults.yml";
+import defaultConfig from "./assets/defaults.yml?raw";
 
 export default {
   name: "App",
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ae2cb6b..5102f93 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -2,7 +2,7 @@
 
 @import "./webfonts/webfonts.scss";
 
-@import "bulma";
+@import "../../node_modules/bulma/bulma";
 
 // Themes import
 @import "./themes/sui.scss";
diff --git a/src/components/SearchInput.vue b/src/components/SearchInput.vue
index 165c992..53480e7 100644
--- a/src/components/SearchInput.vue
+++ b/src/components/SearchInput.vue
@@ -75,7 +75,7 @@ export default {
       this.$emit("input", value.toLowerCase());
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     document.removeEventListener("keydown", this._keyListener);
   },
 };
diff --git a/src/components/Service.vue b/src/components/Service.vue
index 25b86d5..ac378ec 100644
--- a/src/components/Service.vue
+++ b/src/components/Service.vue
@@ -1,8 +1,9 @@
 <template>
-  <component v-bind:is="component" :item="item" :proxy="proxy"></component>
+  <component :is="component" :item="item" :proxy="proxy"></component>
 </template>
 
 <script>
+import { defineAsyncComponent } from "vue";
 import Generic from "./services/Generic.vue";
 
 export default {
@@ -17,7 +18,7 @@ export default {
       if (type === "Generic") {
         return Generic;
       }
-      return () => import(`./services/${type}.vue`);
+      return defineAsyncComponent(() => import(`./services/${type}.vue`));
     },
   },
 };
diff --git a/src/main.js b/src/main.js
index e5995a4..164d290 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,19 +1,13 @@
-import Vue from "vue";
+import { createApp, h } from "vue";
 import App from "./App.vue";
-import "./registerServiceWorker";
 
 import "@fortawesome/fontawesome-free/css/all.css";
-
 import "./assets/app.scss";
 
-Vue.config.productionTip = false;
+const app = createApp(App);
 
-Vue.component("DynamicStyle", {
-  render: function (createElement) {
-    return createElement("style", this.$slots.default);
-  },
+app.component("DynamicStyle", (_props, context) => {
+  return h("style", {}, context.slots);
 });
 
-new Vue({
-  render: (h) => h(App),
-}).$mount("#app");
+app.mount("#app");
-- 
cgit v1.2.3


From c80854cb2d1e4ee0f96e8e5185b466b6c06c5416 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 5 Jun 2022 21:48:10 +0200
Subject: Make connectivity check work with vitejs dev server

Head requests on directory path end up in 404
---
 src/components/ConnectivityChecker.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
index 2b3e47b..3066b7d 100644
--- a/src/components/ConnectivityChecker.vue
+++ b/src/components/ConnectivityChecker.vue
@@ -56,7 +56,7 @@ export default {
 
       // extra check to make sure we're not offline
       let that = this;
-      const aliveCheckUrl = window.location.href + "?t=" + new Date().valueOf();
+      const aliveCheckUrl = `${window.location.origin}${window.location.pathname}/index.html?t=${new Date().valueOf()}`;
       return fetch(aliveCheckUrl, {
         method: "HEAD",
         cache: "no-store",
-- 
cgit v1.2.3


From b4207f27821617d83e4cf018c169ca3bac30fda1 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 3 Jul 2022 21:40:47 +0200
Subject: new PWA implementation

---
 src/registerServiceWorker.js | 34 ----------------------------------
 1 file changed, 34 deletions(-)
 delete mode 100644 src/registerServiceWorker.js

(limited to 'src')

diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
deleted file mode 100644
index 1473a0a..0000000
--- a/src/registerServiceWorker.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/* eslint-disable no-console */
-
-import { register } from "register-service-worker";
-
-if (process.env.NODE_ENV === "production") {
-  register(`${process.env.BASE_URL}service-worker.js`, {
-    ready() {
-      console.log(
-        "App is being served from cache by a service worker.\n" +
-          "For more details, visit https://goo.gl/AFskqB"
-      );
-    },
-    registered() {
-      console.log("Service worker has been registered.");
-    },
-    cached() {
-      console.log("Content has been cached for offline use.");
-    },
-    updatefound() {
-      console.log("New content is downloading.");
-    },
-    updated() {
-      console.log("New content is available; please refresh.");
-    },
-    offline() {
-      console.log(
-        "No internet connection found. App is running in offline mode."
-      );
-    },
-    error(error) {
-      console.error("Error during service worker registration:", error);
-    },
-  });
-}
-- 
cgit v1.2.3


From 59994bfee8ae2151238e0ba98b84dd04ae3a43a4 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Sun, 3 Jul 2022 21:59:57 +0200
Subject: Fix lint issues

---
 src/components/ConnectivityChecker.vue  |  4 +++-
 src/components/services/OpenWeather.vue | 28 ++++++++++++++--------------
 src/components/services/UptimeKuma.vue  |  1 +
 3 files changed, 18 insertions(+), 15 deletions(-)

(limited to 'src')

diff --git a/src/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
index 3066b7d..0e724fc 100644
--- a/src/components/ConnectivityChecker.vue
+++ b/src/components/ConnectivityChecker.vue
@@ -56,7 +56,9 @@ export default {
 
       // extra check to make sure we're not offline
       let that = this;
-      const aliveCheckUrl = `${window.location.origin}${window.location.pathname}/index.html?t=${new Date().valueOf()}`;
+      const aliveCheckUrl = `${window.location.origin}${
+        window.location.pathname
+      }/index.html?t=${new Date().valueOf()}`;
       return fetch(aliveCheckUrl, {
         method: "HEAD",
         cache: "no-store",
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 79d5e37..756abf7 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -22,7 +22,7 @@
               <div v-else>
                 <p class="title is-4">{{ name }}</p>
                 <p class="subtitle is-6">
-                  {{ temp | tempSuffix(this.item.units) }}
+                  {{ temperature }}
                 </p>
               </div>
             </div>
@@ -50,6 +50,19 @@ export default {
     conditions: null,
     error: false,
   }),
+  computed: {
+    temperature: function () {
+      if (!this.temp) return "";
+
+      let unit = "K";
+      if (this.item.type === "metric") {
+        unit = "°C";
+      } else if (this.item.type === "imperial") {
+        unit = "°F";
+      }
+      return `${this.temp} ${unit}`;
+    },
+  },
   created() {
     this.fetchWeather();
   },
@@ -86,19 +99,6 @@ export default {
         });
     },
   },
-  filters: {
-    tempSuffix: function (value, type) {
-      if (!value) return "";
-
-      let unit = "K";
-      if (type === "metric") {
-        unit = "°C";
-      } else if (type === "imperial") {
-        unit = "°F";
-      }
-      return `${value} ${unit}`;
-    },
-  },
 };
 </script>
 
diff --git a/src/components/services/UptimeKuma.vue b/src/components/services/UptimeKuma.vue
index 3be53b8..5117a05 100644
--- a/src/components/services/UptimeKuma.vue
+++ b/src/components/services/UptimeKuma.vue
@@ -99,6 +99,7 @@ export default {
     },
   },
   created() {
+    /* eslint-disable */
     this.item.url = `${this.item.url}/status/${this.dashboard}`;
     this.fetchStatus();
   },
-- 
cgit v1.2.3


From 9582b1871ac63d1e625ccf6c221bd1248a1c9d03 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Mon, 11 Jul 2022 22:07:48 +0200
Subject: Fix search widget

---
 src/App.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

(limited to 'src')

diff --git a/src/App.vue b/src/App.vue
index 43ba322..4120fe5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -49,10 +49,10 @@
         <SearchInput
           class="navbar-item is-inline-block-mobile"
           :hotkey="searchHotkey()"
-          @input="filterServices"
+          @input="filterServices($event.target?.value)"
           @search-focus="showMenu = true"
-          @search-open="navigateToFirstService"
-          @search-cancel="filterServices"
+          @search-open="navigateToFirstService($event?.target?.value)"
+          @search-cancel="filterServices()"
         />
       </Navbar>
     </div>
@@ -255,11 +255,12 @@ export default {
       });
     },
     matchesFilter: function (item) {
+      const needle = this.filter?.toLowerCase();
       return (
-        item.name.toLowerCase().includes(this.filter) ||
-        (item.subtitle && item.subtitle.toLowerCase().includes(this.filter)) ||
-        (item.tag && item.tag.toLowerCase().includes(this.filter)) ||
-        (item.keywords && item.keywords.toLowerCase().includes(this.filter))
+        item.name.toLowerCase().includes(needle) ||
+        (item.subtitle && item.subtitle.toLowerCase().includes(needle)) ||
+        (item.tag && item.tag.toLowerCase().includes(needle)) ||
+        (item.keywords && item.keywords.toLowerCase().includes(needle))
       );
     },
     navigateToFirstService: function (target) {
@@ -271,6 +272,7 @@ export default {
       }
     },
     filterServices: function (filter) {
+      console.log(filter);
       this.filter = filter;
 
       if (!filter) {
-- 
cgit v1.2.3


From eb030922866f1e753162d99ea6b25a4f4e941b05 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Tue, 12 Jul 2022 14:07:10 +0200
Subject: Fix theming issue & subfolder hosting

---
 src/assets/app.scss | 2 +-
 src/main.js         | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

(limited to 'src')

diff --git a/src/assets/app.scss b/src/assets/app.scss
index 5102f93..d112482 100644
--- a/src/assets/app.scss
+++ b/src/assets/app.scss
@@ -13,7 +13,7 @@
   text-overflow: ellipsis;
 }
 
-html, body, body #app {
+html, body, body #app-mount, body #app {
   height: 100%;
   background-color: var(--background);
 }
diff --git a/src/main.js b/src/main.js
index 164d290..a1d7b47 100644
--- a/src/main.js
+++ b/src/main.js
@@ -10,4 +10,4 @@ app.component("DynamicStyle", (_props, context) => {
   return h("style", {}, context.slots);
 });
 
-app.mount("#app");
+app.mount("#app-mount");
-- 
cgit v1.2.3


From a46bede230afd80b3fbf562f4d5d7491155e3835 Mon Sep 17 00:00:00 2001
From: Bastien Wirtz <bastien.wirtz@gmail.com>
Date: Tue, 12 Jul 2022 22:26:45 +0200
Subject: Small fixes

---
 src/components/DarkMode.vue             | 2 +-
 src/components/Message.vue              | 1 -
 src/components/SettingToggle.vue        | 5 ++++-
 src/components/services/OpenWeather.vue | 4 ++--
 4 files changed, 7 insertions(+), 5 deletions(-)

(limited to 'src')

diff --git a/src/components/DarkMode.vue b/src/components/DarkMode.vue
index 677238a..4318c22 100644
--- a/src/components/DarkMode.vue
+++ b/src/components/DarkMode.vue
@@ -1,6 +1,6 @@
 <template>
   <a
-    v-on:click="toggleTheme()"
+    @click="toggleTheme()"
     aria-label="Toggle dark mode"
     class="navbar-item is-inline-block-mobile"
   >
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 00ce158..2b338ef 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -47,7 +47,6 @@ export default {
       }
       if (this.item.url) {
         let fetchedMessage = await this.downloadMessage(this.item.url);
-        console.log("done");
         if (this.item.mapping) {
           fetchedMessage = this.mapRemoteMessage(fetchedMessage);
         }
diff --git a/src/components/SettingToggle.vue b/src/components/SettingToggle.vue
index 6c8a10f..efa7caa 100644
--- a/src/components/SettingToggle.vue
+++ b/src/components/SettingToggle.vue
@@ -1,5 +1,8 @@
 <template>
-  <a v-on:click="toggleSetting()" class="navbar-item is-inline-block-mobile">
+  <a
+    @click.prevent="toggleSetting()"
+    class="navbar-item is-inline-block-mobile"
+  >
     <span><i :class="['fas', 'fa-fw', value ? icon : secondaryIcon]"></i></span>
     <slot></slot>
   </a>
diff --git a/src/components/services/OpenWeather.vue b/src/components/services/OpenWeather.vue
index 756abf7..ba0be96 100644
--- a/src/components/services/OpenWeather.vue
+++ b/src/components/services/OpenWeather.vue
@@ -55,9 +55,9 @@ export default {
       if (!this.temp) return "";
 
       let unit = "K";
-      if (this.item.type === "metric") {
+      if (this.item.units === "metric") {
         unit = "°C";
-      } else if (this.item.type === "imperial") {
+      } else if (this.item.units === "imperial") {
         unit = "°F";
       }
       return `${this.temp} ${unit}`;
-- 
cgit v1.2.3