12 files changed, 46 insertions, 78 deletions

diff --git a/src/App.vue b/src/App.vue
index 664867f..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>
@@ -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",
@@ -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) {
diff --git a/src/assets/app.scss b/src/assets/app.scss
index ae2cb6b..d112482 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";
@@ -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/components/ConnectivityChecker.vue b/src/components/ConnectivityChecker.vue
index 2b3e47b..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.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",
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/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/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 79d5e37..ba0be96 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.units === "metric") {
+        unit = "°C";
+      } else if (this.item.units === "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();
   },
diff --git a/src/main.js b/src/main.js
index e5995a4..a1d7b47 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-mount");
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);
-    },
-  });
-}