theme backgrounds

package.json

@@ -3,7 +3,7 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "dev": "concurrently \"vite\" \"bare-server-node --port 8080\"",
+    "dev": "concurrently \"vite\" \"tsx server.ts\"",
     "build": "vite build",
     "bstart": "npm run build && tsx server.ts",
     "start": "tsx server.ts",

src/components/ThemeProvider.tsx

@@ -1,13 +1,13 @@
 import { createContext } from "preact";
 import { useContext, useEffect, useState } from "preact/hooks";
-export type Theme =
+type Theme =
   | "main"
   | "hacker"
   | "catppuccin-mocha"
   | "catppuccin-macchiato"
   | "catppuccin-frappe"
   | "catppuccin-latte";
-export const themes: Theme[] = [
+const themes: Theme[] = [
   "main",
   "hacker",
   "catppuccin-mocha",

src/index.tsx

@@ -34,17 +34,19 @@ export default function App() {
   const particlesLoaded = (container) => {
     console.log(container);
   };
-
+  const bgImage: string | undefined = localStorage.getItem("background");
   return (
     <ThemeProvider>
-      <div class="w-srceen h-screen">
+      <div class="h-screen w-screen">
         {window.location.origin === "https://nebulaproxy.io" && <Meta />}
         {/* {window.location.origin === "http://localhost:8080" && <Meta />} */}
         <Suspense fallback={<LoadSuspense />}>
           <div className="absolute z-20 h-full w-full">
             <Routes />
           </div>
-          <div className="z-10 h-full w-full bg-primary">
+          <div
+            className={`z-10 h-full w-full bg-primary ${bgImage && `bg-[url(${bgImage})] bg-cover`}`}
+          >
             {init && particlesUrl !== "none" && (
               <Particles
                 id="tsparticles"

src/locales/en.json

@@ -72,7 +72,10 @@
       "select": "Select",
       "particles": "Particles",
       "particlesDesc": "Choose a particles wallpaper",
-      "particlesNone": "None"
+      "particlesNone": "None",
+      "background": "Background",
+      "backgroundDesc": "Choose a background image",
+      "backgroundNone": "None"
     },
     "httpProxy": {
       "title": "(Advanced) HTTP Proxy",

src/locales/es.json

@@ -69,9 +69,13 @@
     "theme": {
       "title": "Mirar",
       "subtitle": "Elige una mirada para que tus ojos no nos odienn",
+      "select": "Seleccionar",
       "particles": "Partículas",
       "particlesDesc": "Elige un fondo de pantalla de partículas",
-      "particlesNone": "Ninguna"
+      "particlesNone": "Ninguna",
+      "background": "Fondo",
+      "backgroundDesc": "Elige una imagen de fondo",
+      "backgroundNone": "Ninguna"
     },
     "httpProxy": {
       "title": "Proxy HTTP (avanzado)",

src/locales/ja.json

@@ -69,9 +69,13 @@
     "theme": {
       "title": "壁紙",
       "subtitle": "お好みの壁紙を選択してください",
+      "select": "選択する",
       "particles": "パーティクル",
       "particlesDesc": "パーティクルの種類を選択してください",
-      "particlesNone": "なし"
+      "particlesNone": "なし",
+      "background": "背景",
+      "backgroundDesc": "背景画像を選択してください",
+      "backgroundNone": "なし"
     },
     "httpProxy": {
       "title": "HTTPプロキシ (上級者向け)",

src/pages/Settings/Customization.tsx

@@ -1,3 +1,4 @@
+import { useRef } from "preact/hooks";
 import { motion } from "framer-motion";
 import { tabContentVariant, settingsPageVariant } from "./Variants";
 import { useTranslation } from "react-i18next";
@@ -5,6 +6,7 @@ import Dropdown from "./Dropdown";
 import ThemeDropdown from "./ThemeDropdown";
 
 function Customization({ id, active }) {
+  const bgInput = useRef<HTMLInputElement>(null);
   const { t } = useTranslation();
 
   const particles = [
@@ -43,6 +45,31 @@ function Customization({ id, active }) {
           </div>
           <Dropdown storageKey="particles" options={particles} refresh={true} />
         </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-2 text-center">
+          <div className="p-2 text-3xl font-bold text-input-text">
+            {t("settings.theme.background")}
+          </div>
+          <div className="text-md p-4 font-bold text-input-text">
+            {t("settings.theme.backgroundDesc")}
+          </div>
+          <input
+            ref={bgInput}
+            className="font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl text-input-text placeholder:text-input-text"
+            defaultValue={localStorage.getItem("background")}
+            placeholder={t("settings.theme.backgroundNone")}
+          />
+          <button
+            onClick={() => {
+              if (bgInput) {
+                localStorage.setItem("background", bgInput.current.value);
+                window.location.reload();
+              }
+            }}
+            className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg text-input-text"
+          >
+            {t("settings.theme.select")}
+          </button>
+        </div>
       </motion.div>
     </motion.div>
   );

src/routes.tsx

@@ -7,8 +7,8 @@ import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
 import { Faq } from "./pages/Faq";
-import { registerRemoteListener } from "@mercuryworkshop/bare-mux";
-import { setTransport } from './util/transports';
+// import { registerRemoteListener } from "@mercuryworkshop/bare-mux";
+import { setTransport } from "./util/transports";
 import "./style.css";
 import "./i18n";
 
@@ -19,15 +19,13 @@ export default function Routes() {
     "/wisp/"; // @TODO Japan - US ping
 
   if ("serviceWorker" in navigator) {
-    console.log("am bout to bus");
     navigator.serviceWorker.ready.then(async (sw) => {
-        //await registerRemoteListener(sw.active!)
-        setTransport();
+      //await registerRemoteListener(sw.active!)
+      setTransport();
+    });
+    navigator.serviceWorker.register("/sw.js", {
+      scope: "/~/"
     });
-    navigator.serviceWorker
-      .register("/sw.js", {
-        scope: "/~/"
-      })
   }
   return (
     <LocationProvider>

src/style.css

@@ -120,9 +120,7 @@
     --active-color: #8839ef !important;
   }
 }
-body {
-  background-color: var(--background-primary) !important;
-}
+
 .font-inter {
   font-family: "Inter", sans-serif;
   font-weight: 300;

vite.config.ts

@@ -59,10 +59,15 @@ export default defineConfig({
         rewrite: (path) => path.replace(/^\/bare\//, "")
       },
       "/wisp/": {
-        target: "http://localhost:3000/",
+        target: "http://localhost:8080/wisp/",
         changeOrigin: true,
         ws: true,
         rewrite: (path) => path.replace(/^\/wisp\//, "")
+      },
+      "/search": {
+        target: "http://localhost:8080/search",
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/search/, "")
       }
     }
   }