Refactor routing and resource fetching to use BASE_URL for improved environment compatibility

src/main.ts

@@ -1,9 +1,9 @@
-if (location.pathname === "/waybar") {
+if (location.pathname === import.meta.env.BASE_URL + "/waybar") {
   import("./routes/waybar/waybar").then(({ createWaybarPage }) =>
     createWaybarPage()
   );
 }
 
-if (location.pathname === "/") {
+if (location.pathname === import.meta.env.BASE_URL) {
   import("./routes/root/root").then(({ createRootPage }) => createRootPage());
 }

src/routes/root/root.ts

@@ -3,6 +3,8 @@ const appElement = document.getElementById("app")!;
 
 export const createRootPage = async () => {
   appElement.innerHTML = `
-    <iframe id="waybar-iframe" src="/waybar"></iframe>
+    <iframe id="waybar-iframe" src="${
+      import.meta.env.BASE_URL
+    }/waybar"></iframe>
   `;
 };

src/routes/waybar/configParser.ts

@@ -282,7 +282,9 @@ export interface WaybarConfig {
 }
 
 export const parseConfig = async () => {
-  const response = await fetch("/resources/config.jsonc");
+  const response = await fetch(
+    import.meta.env.BASE_URL + "/resources/config.jsonc"
+  );
   const jsoncString = await response.text();
   return parse(jsoncString) as WaybarConfig;
 };

src/routes/waybar/utils.ts

@@ -4,9 +4,9 @@ export const clamp = (val: number, min: number, max: number) =>
   Math.min(Math.max(val, min), max);
 
 const fetchFontAwesomeStylesheet = async () => {
-  const raw = await fetch("/fontawesome/css/fontawesome.min.css").then((res) =>
+  const raw = await fetch(
-    res.text()
+    import.meta.env.BASE_URL + "/fontawesome/css/fontawesome.min.css"
-  );
+  ).then((res) => res.text());
   return raw;
 };
 

src/routes/waybar/waybar.ts

@@ -9,7 +9,7 @@ const appElement = document.getElementById("app")!;
 export const createWaybarPage = async () => {
   const styleElement = document.createElement("link");
   styleElement.rel = "stylesheet";
-  styleElement.href = "/resources/style.css";
+  styleElement.href = import.meta.env.BASE_URL + "/resources/style.css";
   document.head.appendChild(styleElement);
 
   const config = await parseConfig();

vite.config.ts

@@ -0,0 +1,5 @@
+import { defineConfig } from "vite";
+
+export default defineConfig({
+  base: "/waybar-online",
+});