Bare Server Switching done (almost)

index.html

@@ -14,6 +14,7 @@
     <script src="/uv/uv.bundle.js"></script>
     <script src="/uv/uv.config.js"></script>
     <script src="/dynamic/dynamic.config.js"></script>
+    <script src="/libs/localforage.js" defer></script>
     <script>
       if ("serviceWorker" in navigator) {
         window.addEventListener("load", () => {

public/sw.js

@@ -3,28 +3,49 @@ importScripts("/uv/uv.config.js");
 importScripts(__uv$config.sw || "/uv/uv.sw.js");
 importScripts("/dynamic/dynamic.config.js");
 importScripts("/dynamic/dynamic.worker.js");
+//import our IDB lib
+importScripts('/libs/localforage.js');
+ localforage.config({
+    driver: localforage.INDEXEDDB,
+    name: 'Nebula',
+    version: 1.0,
+    storeName: 'nebula_config',
+    description: 'Nebula Config for things reliant on IndexedDB'
+})
 
-const sw = new UVServiceWorker();
-const dynamic = new Dynamic();
 
-self.dynamic = dynamic;
+const dynPromise = new Promise(async (resolve) => {
+    try {
+        const bare = await localforage.getItem('bare') || location.origin + "/bare/";
+        self.__dynamic$config.bare.path = bare;
+        self.dynamic = new Dynamic(self.__dynamic$config);
+    }
+    catch (error) { console.log(error); }
+    resolve();
+});
+
+const uvPromise = new Promise(async (resolve) => {
+    try {
+        const bare = await localforage.getItem('bare') || location.origin + "/bare/";
+        self.__uv$config.bare = bare;
+        self.uv = new UVServiceWorker(self.__uv$config);
+    }
+    catch (error) { console.log(error); }
+    resolve();
+});
 
 self.addEventListener("fetch", (event) => {
-  if (
+  if ( event.request.url.startsWith(location.origin + self.__dynamic$config.prefix )) {
-    event.request.url.startsWith(location.origin + self.__dynamic$config.prefix)
+      event.respondWith((async function() {
-  ) {
+          try { await dynPromise } catch (error) { }
-    event.respondWith(
+          if (await self.dynamic.route(event)) { return await self.dynamic.fetch(event); }
-      (async function () {
+          await fetch(event.request);
-        if (await dynamic.route(event)) {
+      })());
-          return await dynamic.fetch(event);
+  }
-        }
+  else if ( event.request.url.startsWith(location.origin + self.__uv$config.prefix )) {
-
+      event.respondWith((async function() {
-        return await fetch(event.request);
+          try { await uvPromise } catch (error) { }
-      })()
+          return await self.uv.fetch(event);
-    );
+      })());
-  } else if (
-    event.request.url.startsWith(location.origin + __uv$config.prefix)
-  ) {
-    event.respondWith(sw.fetch(event));
   }
 });

src/locales/en.json

@@ -53,6 +53,10 @@
       "title": "Search Engine",
       "subtitle": "Choose your search engine"
     },
+    "bare": {
+        "title": "Bare Server",
+        "subtitle": "Enter the URL of your bare server"
+    },
     "theme": {
       "title": "Theme",
       "subtitle": "Choose a theme so your eyes don't hate us"

src/pages/Settings/BareInput.tsx

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "preact/hooks";
+import { set } from "../../util/IDB";
+
+interface BareInputProps {
+    placeholder: string;
+    storageKey: string;
+}
+
+function BareInput(props: BareInputProps) { 
+    const value = localStorage.getItem(props.storageKey) || "/bare/";
+    const [inputValue, setInputValue] = useState(value); 
+    function handleChange(event: any) {
+        setInputValue(event.target.value);
+        set(props.storageKey, event.target.value);
+        localStorage.setItem(props.storageKey, event.target.value);
+    }
+
+    return (
+        <input type="text" placeholder={props.placeholder}
+            value={inputValue} onChange={handleChange}
+        className="font-roboto flex flex-row p-4 h-14 w-56 border border-input-border-color bg-input text-center text-xl rounded-2xl"/>
+    );
+}
+
+export default BareInput;

src/pages/Settings/Proxy.tsx

@@ -1,6 +1,7 @@
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import Dropdown from "./Dropdown";
+import BareInput from "./BareInput";
 import { useTranslation } from "react-i18next";
 
 const Proxy = ({ id, active }) => {
@@ -73,6 +74,15 @@ const Proxy = ({ id, active }) => {
             refresh={false}
           />
         </div>
+        <div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-7 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.bare.title")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.bare.subtitle")}
+          </div>
+          <BareInput placeholder="/bare/" storageKey="bare" />
+        </div>
       </motion.div>
     </motion.div>
   );

src/util/IDB.js

@@ -0,0 +1,13 @@
+function set(key, value) {
+    localforage.config({
+        driver: localforage.INDEXEDDB,
+        name: 'Nebula',
+        version: 1.0,
+        storeName: 'nebula_config',
+        description: 'Nebula Config for things reliant on IndexedDB'
+    })
+    localforage.setItem(key, value);
+}
+
+ 
+export { set };