Feat: custom wisp server urls

NebulaServices · Nov 9, 2024 · c9e92d9 · c9e92d9
1 parent 9bc00ba
commit c9e92d9
Show file tree

Hide file tree

Showing 17 changed files with 190 additions and 153 deletions.
diff --git a/.changeset/config.json b/.changeset/config.json
@@ -1,12 +1,12 @@
 {
-  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
-  "changelog": ["@changesets/changelog-github", { "repo": "nebulaservices/nebula" }],
-  "commit": false,
-  "fixed": [],
-  "linked": [],
-  "access": "public",
-  "baseBranch": "main",
-  "updateInternalDependencies": "patch",
-  "ignore": [],
-  "privatePackages": { "version": true, "tag": true }
+    "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+    "changelog": ["@changesets/changelog-github", { "repo": "nebulaservices/nebula" }],
+    "commit": false,
+    "fixed": [],
+    "linked": [],
+    "access": "public",
+    "baseBranch": "main",
+    "updateInternalDependencies": "patch",
+    "ignore": [],
+    "privatePackages": { "version": true, "tag": true }
 }
diff --git a/public/nebula.css b/public/nebula.css
@@ -1,19 +1,19 @@
 :root {
-  --background-primary: #191724;
-  --background-lighter: #16121f;
-  --navbar-color: #26233a;
-  --navbar-height: 60px;
-  --navbar-text-color: #7967dd;
-  --navbar-link-color: #e0def4;
-  --navbar-link-hover-color: gray;
-  --navbar-font: "Roboto";
-  --input-text-color: #e0def4;
-  --input-placeholder-color: white;
-  --input-background-color: #1f1d2e;
-  --input-border-color: #eb6f92;
-  --input-border-size: 1.3px;
-  --navbar-logo-filter: none;
-  --dropdown-option-hover-color: #312a49;
-  --tab-color: var(--black);
-  --border-color: #16121f;
+    --background-primary: #191724;
+    --background-lighter: #16121f;
+    --navbar-color: #26233a;
+    --navbar-height: 60px;
+    --navbar-text-color: #7967dd;
+    --navbar-link-color: #e0def4;
+    --navbar-link-hover-color: gray;
+    --navbar-font: "Roboto";
+    --input-text-color: #e0def4;
+    --input-placeholder-color: white;
+    --input-background-color: #1f1d2e;
+    --input-border-color: #eb6f92;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+    --dropdown-option-hover-color: #312a49;
+    --tab-color: var(--black);
+    --border-color: #16121f;
 }
diff --git a/public/sw.js b/public/sw.js
@@ -9,7 +9,7 @@ const ww = new WorkerWare({ debug: false });
 if (navigator.userAgent.includes("Firefox")) {
     Object.defineProperty(globalThis, "crossOriginIsolated", {
         value: true,
-        writable: true 
+        writable: true
     });
 }
 

diff --git a/server/serverFactory.ts b/server/serverFactory.ts
@@ -1,33 +1,29 @@
 import { createServer } from "node:http";
-import {
-  FastifyServerFactory,
-  FastifyServerFactoryHandler,
-  RawServerDefault,
-} from "fastify";
+import { FastifyServerFactory, FastifyServerFactoryHandler, RawServerDefault } from "fastify";
 import wisp from "wisp-server-node";
 import { LOG_LEVEL, WispOptions } from "wisp-server-node/dist/Types.js";
 import { parsedDoc } from "./config.js";
 
 const wispOptions: WispOptions = {
-  logLevel: parsedDoc.server.server.logging ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE,
-  pingInterval: 30,
+    logLevel: parsedDoc.server.server.logging ? LOG_LEVEL.DEBUG : LOG_LEVEL.NONE,
+    pingInterval: 30
 };
 
 const serverFactory: FastifyServerFactory = (
-  handler: FastifyServerFactoryHandler
+    handler: FastifyServerFactoryHandler
 ): RawServerDefault => {
-  const httpServer = createServer();
-  httpServer.on("request", (req, res) => {
-    handler(req, res);
-  });
-  httpServer.on("upgrade", (req, socket, head) => {
-    if (parsedDoc.server.server.wisp) {
-      if (req.url?.endsWith("/wisp/")) {
-        wisp.routeRequest(req, socket as any, head, wispOptions);
-      }
-    }
-  });
-  return httpServer;
+    const httpServer = createServer();
+    httpServer.on("request", (req, res) => {
+        handler(req, res);
+    });
+    httpServer.on("upgrade", (req, socket, head) => {
+        if (parsedDoc.server.server.wisp) {
+            if (req.url?.endsWith("/wisp/")) {
+                wisp.routeRequest(req, socket as any, head, wispOptions);
+            }
+        }
+    });
+    return httpServer;
 };
 
 export { serverFactory };
diff --git a/src/components/settings/SettingsCard.astro b/src/components/settings/SettingsCard.astro
@@ -3,12 +3,22 @@ interface Inputs {
     input: boolean;
     required?: boolean;
     placeholder?: string;
+    validate?: boolean;
+    validateString?: string;
 }
 interface SelectOptions {
     value: string;
     name: string;
     disabled: boolean;
 }
+
+interface Both {
+    enabled: boolean;
+    showOnSelect?: {
+        value: string;
+    };
+    showOnInput?: boolean;
+}
 interface Selects {
     select: boolean;
     name?: string;
@@ -24,27 +34,31 @@ interface Props {
     description: string;
     input: Inputs;
     select: Selects;
+    both: Both;
     button: Buttons;
 }
 
-const { title, description, input, select, button } = Astro.props;
+const { title, description, input, select, both, button } = Astro.props;
 ---
 
-<div class="w-64 rounded-3xl bg-navbar-color h-64 flex flex-col items-center p-4">
+<div class={`${both.enabled ? "h-72" : "h-64"} w-64 rounded-3xl bg-navbar-color flex flex-col items-center p-4`}>
     <h1 class="text-3xl font-bold mb-2"> { title } </h1>
     <p class="text-md w-full text-ellipsis text-center"> { description } </p>
     <div class="w-full h-full flex-grow flex justify-center items-center flex-col gap-4">
         <!-- We only want to render an input if it's enabled -->
-        {input.input &&
+        {(input.input && !both.enabled) &&
             <input class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" required={input.required} placeholder={input.placeholder}></input>
         }
         <!-- Same with dropdown selections -->
         {select.select &&
-        <select id={select.name?.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()} class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" multiple={select.multiple} name={select.name}>
+            <select id={select.name?.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()} class="text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" multiple={select.multiple} name={select.name}>
                 {select.options!.map((option) => (
-                    <option disabled={option.disabled} value={option.value}>{option.name}</option>
+                    <option id={option.value} disabled={option.disabled} value={option.value}>{option.name}</option>
                 ))}
-            </select>
+            </select>      
+        }
+        {(both.enabled && both.showOnSelect?.value) && 
+                <input id={'inputOnSelectValue' + both.showOnSelect?.value} class="hidden text-md w-full h-10 p-2 bg-input border border-input-border-color rounded-md text-input-text" required={input.required} placeholder={input.placeholder}></input>
         }
         <button id={button.id.replace(/[^a-zA-Z0-9]/g, '').toLowerCase()} class="w-36 h-10 rounded-md border border-input-border-color text-input-text bg-input hover:border-input hover:bg-input-border-color hover:text-input hover:font-bold active:bg-input active:text-input-text transition-all duration-200"> 
             {button.name}

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -4,8 +4,8 @@ import Header from "@components/Header.astro";
 import MobileNavigation from "@components/MobileNavigation.astro";
 import SettingsLoader from "@components/settings/Loader.astro";
 interface Props {
-  title: string;
-  noHeader?: string;
+    title: string;
+    noHeader?: string;
 }
 
 const { title, noHeader } = Astro.props;

diff --git a/src/layouts/SettingsLayout.astro b/src/layouts/SettingsLayout.astro
@@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-row font-roboto">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:border-r-2 max:md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
+      <div class="items-center md:p-3 sm:p-3 flex flex-row border-border-color md:gap-10 xl:gap-10 max-sm:gap-5 sm:gap-5 md:border-r-2 lg:w-2/12 md:w-3/12 md:flex-col md:bg-navbar-color md:gap-0 overflow-x-auto md:overflow-x-hidden overflow-y-hidden max-md:ml-1 max-md:mr-1 max-md:max-h-24 max-md:min-h-24 max-md:justify-left max-md:scroll-ml-3 max-md:scroll-mr-3 max-md:snap-x max-md:snap-mandatory">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>
@@ -26,7 +26,7 @@ import { Icon } from "astro-icon/components";
         <Icon name="ph:user" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
       </SidebarButton>
     </div>
-    <div class="p-8 md:pb-2 flex-grow overflow-y-auto">
+    <div class="p-8 md:pb-2 w-full flex-grow overflow-y-auto">
       <p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>
       <p class="text-2xl">{title}</p>
       <slot />

diff --git a/src/pages/[lang]/catalog/pagnation.astro b/src/pages/[lang]/catalog/pagnation.astro
@@ -4,12 +4,14 @@
   id="pagnation_input"
   placeholder="..."
 />
-<script is:inline data-astro-rerun>
-  document
-    .getElementById("pagnation_input")
-    .addEventListener("keyup", function (event) {
-      if (event.key === "Enter") {
-        window.location.href = document.getElementById("pagnation_input").value;
-      }
+<script>
+import { pageLoad } from "@utils/events";
+pageLoad(() => {
+    const pagenationInput = document.getElementById('pagnation_input') as HTMLInputElement;
+    pagenationInput?.addEventListener("keyup", function (event) {
+        if (event.key === "Enter") {
+            window.location.href = pagenationInput?.value;
+        }
     });
+  });
 </script>
diff --git a/src/pages/[lang]/games.astro b/src/pages/[lang]/games.astro
@@ -11,15 +11,13 @@ export const prerender = true;
     <iframe id="chango" class="w-full h-full"></iframe>
 </Layout>
 <script>
-    import { initSw, loadProxyScripts, setTransport } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
+    import { setTransport, getSWStuff } from "@utils/registerSW.ts"; //../../utils/registerSW.ts
     import { Settings } from "@utils/settings/index";
     import { pageLoad } from "@utils/events";
     pageLoad(async () => {
+        const { conn } = getSWStuff();
         const iframe = document.getElementById("chango") as HTMLIFrameElement;
-        const conn = await loadProxyScripts();
         await setTransport(conn, localStorage.getItem(Settings.ProxySettings.transport) as string);
-        await initSw().then(() => {
-            if (iframe) return iframe.src = __uv$config!.prefix + __uv$config.encodeUrl!("https://radon.games");
-        });
+        if (iframe) return iframe.src = __uv$config!.prefix + __uv$config.encodeUrl!("https://radon.games");
     });
 </script>
diff --git a/src/pages/[lang]/index.astro b/src/pages/[lang]/index.astro
@@ -3,11 +3,8 @@ import Logo from "@components/Logo.astro";
 import Layout from "@layouts/Layout.astro";
 import { getLangFromUrl, useTranslations } from "../../i18n/utils";
 export function getStaticPaths() {
-  const STATIC_PATHS = [
-    { params: { lang: "en_US" } },
-    { params: { lang: "jp" } },
-  ];
-  return STATIC_PATHS;
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
 }
 export const prerender = true;
 const lang = getLangFromUrl(Astro.url);
@@ -115,6 +112,7 @@ import { VERSION } from "astro:env/client";
     const iframe = document.getElementById("neb-iframe") as HTMLIFrameElement;
     const omnibox = document.getElementById("omnibox") as HTMLDivElement;
     const copyright = document.getElementById("version") as HTMLDivElement;
+    const client = new BareClient();
     input?.addEventListener("keypress", async function (event: any) {
       if (event.key === "Enter") {
         copyright.classList.add("hidden");
@@ -147,7 +145,6 @@ import { VERSION } from "astro:env/client";
         omnibox.classList.add("hidden");
       }
       if (value.length >= 3) {
-        const client = new BareClient();
         const data = await client.fetch(`https://api.duckduckgo.com/ac?q=${encodeURIComponent(value)}&format=json`);
         const dataRes = await data.json();
         const filteredData = dataRes.slice(0, 8); //Trim to only about 8 results. Any more and our omnibox dies

diff --git a/src/pages/[lang]/settings/misc.astro b/src/pages/[lang]/settings/misc.astro
@@ -34,6 +34,7 @@ export const prerender = true;
                     {name: 'Japanese', value: 'jp', disabled: false},
                 ]
             }}
+            both={{enabled: false}}
         />
         <SettingsCard
             title="Proxy Catalog"
@@ -47,7 +48,8 @@ export const prerender = true;
                     {name: 'False', value: 'false', disabled: false},
                     {name: 'True', value: 'true', disabled: false}
                 ]
-            }}
+                }}
+                both={{enabled: false}}
             />
         <SettingsCard
             title="Catalog URL"
@@ -59,6 +61,7 @@ export const prerender = true;
             }}
             button={{name: 'Change', id: 'setcataloghostname' }}
             select={{select: false}}
+            both={{enabled: false}}
         />
     </SettingsSection>
   </SettingsLayout>