JoshS/nyvora.app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Feat: wisp server switcher

Browse source
This commit is contained in:
MotorTruck1221 2025-05-03 18:33:50 -06:00
parent ab6f588fb1
commit a2c497363e
No known key found for this signature in database
GPG key ID: 08F417E2B8B61EA4
7 changed files with 102 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
src/components/Loader.astro
View file

@ -4,7 +4,12 @@
const settings = new Settings();
const sw = new SW();
const init = async () => {
settings.searchEngine();
await sw.wispServer();
}
init();
document.addEventListener('astro:after-swap', async () => {
//const settings = await Settings.getInstance();
settings.theme();

14
src/components/ui/Button.astro Normal file
View file

@ -0,0 +1,14 @@
---
import { Icon } from 'astro-icon/components';
interface Props {
id: string;
text: string;
icon?: string
}
const { id, text, icon } = Astro.props;
---
<button id={id} class="bg-(--primary) hover:bg-(--primary)/90 cursor-pointer text-(--primary-foreground) inline-flex items-center jusitfy-center whitespace-nowrap rounded-lg text-sm font-medium transition-colors h-10 px-4 py-2">
{icon ? <Icon name={icon} class="text-(--primary-foreground) h-5 w-5 mr-2" /> : null}
{text}
</button>

2
src/components/ui/Dropdown.astro
View file

@ -7,7 +7,7 @@ interface Props {
const { id, options } = Astro.props;
---
<select id=`dropdownBox-${id}` class="flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
<select id=`dropdownBox-${id}` class="cursor-pointer flex h-10 w-[180px] items-center justify-between text-(--foreground) background-(--background) rounded-lg border border-(--border) px-3 py-2">
{options.map((el) =>
<option class="w-full bg-(--accent) rounded-sm p-1" value={el.value}>{el.name}</option>
)}

8
src/components/ui/Input.astro
View file

@ -0,0 +1,8 @@
---
interface Props {
placeholder: string;
id: string;
}
const { placeholder, id } = Astro.props;
---
<input class="h-10 w-full rounded-md border border-(--border) px-3 py-2 text-sm" placeholder={placeholder} id={id} ></input>

64
src/pages/[...settings]/index.astro
View file

@ -2,6 +2,7 @@
import SettingsLayout from "@layouts/SettingsLayout.astro";
import Dropdown from "@components/ui/Dropdown.astro";
import Input from "@components/ui/Input.astro";
import Button from "@components/ui/Button.astro";
import { SearchEngines, type DropdownOptions } from "@utils/types";
const SearchEngineOptions: DropdownOptions[] = [];
Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
@ -35,9 +36,18 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
<p> Search Engine </p>
<Dropdown id="sSwitcher" options={SearchEngineOptions} />
</div>
<div class="mt-2">
<div class="mt-2 w-80">
<div>
<p> Wisp Server </p>
<Input />
<Input id="wispServerSwitcher" placeholder="Wisp server URL (EX: wss://radiusproxy.app/wisp/" />
</div>
<div class="mt-2 mb-2 hidden" id="wispServerInfo">
<p class="text-blue-500" id="wispServerInfo-inner"> Checking URL... </p>
</div>
<div class="mt-2 flex flex-row gap-4">
<Button id="wispServerSave" text="Save Changes" icon="lucide:save" />
<Button id="wispServerReset" text="Reset" icon="lucide:rotate-ccw" />
</div>
</div>
</div>
</div>
@ -76,12 +86,59 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
const searchEngine = async (opts: Options) => {
const seEl = document.getElementById("dropdownBox-sSwitcher") as HTMLSelectElement;
seEl.value = opts.storageManager.getVal("searchEngine") || "ddg";
seEl.value = opts.storageManager.getVal("searchEngine") || SearchEngines.DuckDuckGo;
seEl.addEventListener("change", async () => {
opts.settings.searchEngine(seEl.value);
});
}
const wispServer = async (opts: Options) => {
const wispServerSwitcher = document.getElementById("wispServerSwitcher") as HTMLInputElement;
const wispServerInfo = document.getElementById("wispServerInfo") as HTMLElement;
const wispServerInfoInner = document.getElementById("wispServerInfo-inner") as HTMLParagraphElement;
const wispServerSave = document.getElementById("wispServerSave") as HTMLButtonElement;
const wispServerReset = document.getElementById("wispServerReset") as HTMLButtonElement;
wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
const reset = (hide: boolean = true) => {
if (hide) wispServerInfo.classList.add("hidden");
wispServerInfoInner.innerText = "Checking URL..."
wispServerInfoInner.classList.remove("text-red-500");
wispServerInfoInner.classList.remove("text-green-500");
};
wispServerSave.addEventListener("click", async () => {
const server = wispServerSwitcher.value;
wispServerInfo.classList.remove("hidden");
if (!server.match(/^wss?:\/\/.*/)) {
reset(false);
wispServerInfoInner.innerText = "Invalid URL! \nURL's MUST start with wss:// or ws://";
wispServerInfoInner.classList.add("text-red-500");
}
else {
//TODO: we need to actually check if the wisp server exists. But for now, this will work
reset(false);
wispServerInfoInner.innerText = "Wisp Server Set!";
wispServerInfoInner.classList.add("text-green-500");
await opts.sw.wispServer(wispServerSwitcher.value, true);
}
// We reset this after 4 seconds (any errors OR success)
setTimeout(reset, 4000);
});
wispServerReset.addEventListener("click", async () => {
wispServerInfo.classList.remove("hidden");
wispServerInfoInner.innerText = "Wisp Server Reset!";
wispServerInfoInner.classList.add("text-green-500");
await opts.sw.wispServer(`${(location.protocol === "https:" ? "wss://" : "ws://")}${location.host}/wisp/`, true);
wispServerSwitcher.value = opts.storageManager.getVal("wispServer");
setTimeout(reset, 4000);
});
}
document.addEventListener("astro:page-load", async () => {
try {
const settings = await Settings.getInstance();
@ -90,6 +147,7 @@ Object.keys(SearchEngines).forEach((k) => SearchEngineOptions.push(
await transport({settings, sw, storageManager});
await proxy({settings, sw, storageManager});
await searchEngine({settings, sw, storageManager});
await wispServer({settings, sw, storageManager});
} catch (err) { console.log(err) }
});
</script>

11
src/utils/proxy.ts
View file

@ -60,17 +60,22 @@ class SW {
this.#storageManager.setVal("transport", transport || this.#storageManager.getVal("transport") || 'epoxy');
switch(transport) {
case 'epoxy': {
await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
}
case 'libcurl': {
await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
await this.#baremuxConn!.setTransport("/libcurl/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
}
default: {
await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: 'ws://localhost:4321/wisp/' }]);
await this.#baremuxConn!.setTransport("/epoxy/index.mjs", [ { wisp: this.#storageManager.getVal('wispServer') }]);
}
}
}
async wispServer(wispServer?: string, set?: true) {
this.#storageManager.setVal("wispServer", wispServer || this.#storageManager.getVal('wispServer') || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/");
if (set) await this.setTransport();
}
constructor() {
SW.#instance.add(this);
this.#storageManager = new StoreManager("radius||settings");

5
src/utils/settings.ts
View file

@ -1,6 +1,7 @@
import { StoreManager } from "./storage";
import { BareMuxConnection } from "@mercuryworkshop/bare-mux";
import { SW } from "@utils/proxy.ts";
import { SearchEngines } from "./types";
/**
* The settings class
* Initializes it's own StorageManager, and handles everything within the class itself
@ -75,8 +76,8 @@ class Settings {
this.#storageManager.setVal('proxy', prox);
}
searchEngine(engine: string) {
this.#storageManager.setVal('searchEngine', engine);
searchEngine(engine?: string) {
this.#storageManager.setVal('searchEngine', engine || SearchEngines.DuckDuckGo);
}
async *#init() {