From 7201d7120e0a91ba43b35b5625ff99ecf67ba127 Mon Sep 17 00:00:00 2001 From: incognitotgt Date: Thu, 11 Apr 2024 17:02:53 -0400 Subject: [PATCH 1/7] revamp themes --- public/themes/catppuccinFrappe.css | 30 ------ public/themes/catppuccinLatte.css | 30 ------ public/themes/catppuccinMacchiato.css | 30 ------ public/themes/catppuccinMocha.css | 30 ------ public/themes/hacker.css | 30 ------ public/themes/main.css | 30 ------ src/components/ThemeProvider.tsx | 74 +++++++++++++++ src/index.tsx | 46 +++++---- src/locales/en.json | 8 +- src/locales/es.json | 8 +- src/locales/ja.json | 8 +- src/pages/Settings/Customization.tsx | 12 +-- src/pages/Settings/ThemeDropdown.tsx | 53 +++++++++++ src/style.css | 128 +++++++++++++++++++++++++- 14 files changed, 289 insertions(+), 228 deletions(-) delete mode 100644 public/themes/catppuccinFrappe.css delete mode 100644 public/themes/catppuccinLatte.css delete mode 100644 public/themes/catppuccinMacchiato.css delete mode 100644 public/themes/catppuccinMocha.css delete mode 100644 public/themes/hacker.css delete mode 100644 public/themes/main.css create mode 100644 src/components/ThemeProvider.tsx create mode 100644 src/pages/Settings/ThemeDropdown.tsx diff --git a/public/themes/catppuccinFrappe.css b/public/themes/catppuccinFrappe.css deleted file mode 100644 index db0aeb2..0000000 --- a/public/themes/catppuccinFrappe.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #303446 !important; - --background-lighter: #292c3c !important; - --navbar-color: #292c3c !important; - --navbar-height: 60px !important; - --navbar-text-color: #c6d0f5 !important; - --navbar-link-color: #8caaee !important; - --navbar-link-hover-color: #ca9ee6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #c6d0f5 !important; - --input-placeholder-color: #a5adce !important; - --input-background-color: #232634 !important; - --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #232634 !important; - --tab-color: #414559 !important; - --active-color: #ca9ee6 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinLatte.css b/public/themes/catppuccinLatte.css deleted file mode 100644 index e3a882d..0000000 --- a/public/themes/catppuccinLatte.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #eff1f5 !important; - --background-lighter: #e6e9ef !important; - --navbar-color: #e6e9ef !important; - --navbar-height: 60px !important; - --navbar-text-color: #4c4f69 !important; - --navbar-link-color: #1e66f5 !important; - --navbar-link-hover-color: #8839ef !important; - --navbar-font: "Roboto" !important; - --input-text-color: #4c4f69 !important; - --input-placeholder-color: #6c6f85 !important; - --input-background-color: #dce0e8 !important; - --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #dce0e8 !important; - --tab-color: #ccd0da !important; - --active-color: #8839ef !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinMacchiato.css b/public/themes/catppuccinMacchiato.css deleted file mode 100644 index a11bab6..0000000 --- a/public/themes/catppuccinMacchiato.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #24273a !important; - --background-lighter: #1e2030 !important; - --navbar-color: #1e2030 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cad3f5 !important; - --navbar-link-color: #8aadf4 !important; - --navbar-link-hover-color: #c6a0f6 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cad3f5 !important; - --input-placeholder-color: #a5adcb !important; - --input-background-color: #181926 !important; - --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #181926 !important; - --tab-color: #363a4f !important; - --active-color: #c6a0f6 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/catppuccinMocha.css b/public/themes/catppuccinMocha.css deleted file mode 100644 index b35f41c..0000000 --- a/public/themes/catppuccinMocha.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #1e1e2e !important; - --background-lighter: #181825 !important; - --navbar-color: #181825 !important; - --navbar-height: 60px !important; - --navbar-text-color: #cdd6f4 !important; - --navbar-link-color: #89b4fa !important; - --navbar-link-hover-color: #cba6f7 !important; - --navbar-font: "Roboto" !important; - --input-text-color: #cdd6f4 !important; - --input-placeholder-color: #a6adc8 !important; - --input-background-color: #11111b !important; - --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #11111b !important; - --tab-color: #313244 !important; - --active-color: #cba6f7 !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/hacker.css b/public/themes/hacker.css deleted file mode 100644 index ed10228..0000000 --- a/public/themes/hacker.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -:root { - --background-primary: #000 !important; - --background-lighter: #000 !important; - --navbar-color: #000 !important; - --navbar-height: 60px !important; - --navbar-text-color: greenyellow !important; - --navbar-link-color: greenyellow !important; - --navbar-link-hover-color: green !important; - --navbar-font: "Roboto" !important; - --input-text-color: greenyellow !important; - --input-placeholder-color: white !important; - --input-background-color: #000 !important; - --input-border-color: greenyellow !important; - --input-border-size: 1.3px !important; - --navbar-logo-filter: none !important; - --dropdown-option-hover-color: #312a49 !important; - --tab-color: var(--black) !important; - --border-color: greenyellow !important; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/public/themes/main.css b/public/themes/main.css deleted file mode 100644 index fb1727c..0000000 --- a/public/themes/main.css +++ /dev/null @@ -1,30 +0,0 @@ -@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); - -: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; -} - -.font-inter { - font-family: "Inter", sans-serif; - font-weight: 300; -} - -.font-roboto { - font-family: "Roboto"; -} diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx new file mode 100644 index 0000000..c1d09cd --- /dev/null +++ b/src/components/ThemeProvider.tsx @@ -0,0 +1,74 @@ +import { createContext } from "preact"; +import { useContext, useEffect, useState } from "preact/hooks"; +export type Theme = + | "main" + | "hacker" + | "catppuccin-mocha" + | "catppuccin-macchiato" + | "catppuccin-frappe" + | "catppuccin-latte"; +export const themes: Theme[] = [ + "main", + "hacker", + "catppuccin-mocha", + "catppuccin-macchiato", + "catppuccin-frappe", + "catppuccin-latte" +]; +type ThemeProviderProps = { + children: React.ReactNode; +}; +type ThemeProviderState = { + themes: Theme[]; + theme: Theme; + setTheme: (theme: Theme) => void; +}; + +const initialState: ThemeProviderState = { + themes: themes, + theme: "main", + setTheme: () => null +}; + +const ThemeProviderContext = createContext(initialState); + +export function ThemeProvider({ children, ...props }: ThemeProviderProps) { + const defaultTheme = "main"; + const storageKey = "theme"; + const [theme, setTheme] = useState( + () => (localStorage.getItem(storageKey) as Theme) || defaultTheme + ); + + useEffect(() => { + const root = window.document.documentElement; + + themes.forEach((theme) => { + root.classList.remove(theme); + }); + + root.classList.add(theme); + }, [theme, themes]); + + const value = { + theme, + themes, + setTheme: (theme: Theme) => { + localStorage.setItem(storageKey, theme); + setTheme(theme); + } + }; + + return ( + + {children} + + ); +} +export const useTheme = () => { + const context = useContext(ThemeProviderContext); + + if (context === undefined) + throw new Error("useTheme must be used within a ThemeProvider"); + + return context; +}; diff --git a/src/index.tsx b/src/index.tsx index 4932a74..a4a75c0 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,12 @@ import { render } from "preact"; import { Suspense, lazy } from "preact/compat"; import { LoadSuspense } from "./LoadSuspense"; -import { Helmet } from "react-helmet"; import Meta from "./components/Meta"; import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useState } from "preact/compat"; +import { ThemeProvider } from "./components/ThemeProvider"; const Routes = lazy(() => import("./routes")); @@ -36,29 +36,27 @@ export default function App() { }; return ( -
- {window.location.origin === "https://nebulaproxy.io" && } - {/* {window.location.origin === "http://localhost:8080" && } */} - - - - - }> -
- -
-
- {init && particlesUrl !== "none" && ( - - )} -
- -
+ +
+ {window.location.origin === "https://nebulaproxy.io" && } + {/* {window.location.origin === "http://localhost:8080" && } */} + }> +
+ +
+
+ {init && particlesUrl !== "none" && ( + + )} +
+ +
+ ); } diff --git a/src/locales/en.json b/src/locales/en.json index f953a6c..3338f68 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -94,10 +94,10 @@ "main": "Main", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "URL copied to clipboard!", "bareError": "That didn't quite work. Double check that the bare server exists and isn't blocked.", diff --git a/src/locales/es.json b/src/locales/es.json index 6f7493b..2f94792 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -93,10 +93,10 @@ "main": "Por defecto", "hacker": "Hacker", "crismas": "Naidad🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "¡URL copiada al portapapeles!", "bareError": "Esto no es funcional. Vuelva a verificar que el servidor bare exista y no esté bloqueado.", diff --git a/src/locales/ja.json b/src/locales/ja.json index 4d85d04..49198f6 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -93,10 +93,10 @@ "main": "標準", "hacker": "Hacker", "crismas": "Crismas🐴🎄", - "catppuccinMocha": "Catppuccin Mocha", - "catppuccinMacchiato": "Catppuccin Macchiato", - "catppuccinFrappe": "Catppuccin Frappe", - "catppuccinLatte": "Catppuccin Latte" + "catppuccin-mocha": "Catppuccin Mocha", + "catppuccin-macchiato": "Catppuccin Macchiato", + "catppuccin-frappe": "Catppuccin Frappe", + "catppuccin-latte": "Catppuccin Latte" }, "clipboard": "コピーしました!", "bareError": "処理を実行できませんでした　Bareサーバーが存在し、そしてアクセスが拒否されていない事も確認してから、再度お試してください", diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index feffc73..5406a85 100644 --- a/src/pages/Settings/Customization.tsx +++ b/src/pages/Settings/Customization.tsx @@ -2,19 +2,11 @@ import { motion } from "framer-motion"; import { tabContentVariant, settingsPageVariant } from "./Variants"; import { useTranslation } from "react-i18next"; import Dropdown from "./Dropdown"; +import ThemeDropdown from "./ThemeDropdown"; function Customization({ id, active }) { const { t } = useTranslation(); - const themes = [ - { id: "main", label: t("themes.main") }, - { id: "hacker", label: t("themes.hacker") }, - { id: "catppuccinMocha", label: t("themes.catppuccinMocha") }, - { id: "catppuccinMacchiato", label: t("themes.catppuccinMacchiato") }, - { id: "catppuccinFrappe", label: t("themes.catppuccinFrappe") }, - { id: "catppuccinLatte", label: t("themes.catppuccinLatte") } - ]; - const particles = [ { id: "none", label: t("settings.theme.particlesNone") }, { id: "/crismas.json", label: t("themes.crismas") } @@ -40,7 +32,7 @@ function Customization({ id, active }) {
{t("settings.theme.subtitle")}
- +
diff --git a/src/pages/Settings/ThemeDropdown.tsx b/src/pages/Settings/ThemeDropdown.tsx new file mode 100644 index 0000000..e93bc1b --- /dev/null +++ b/src/pages/Settings/ThemeDropdown.tsx @@ -0,0 +1,53 @@ +import { useState } from "preact/hooks"; +import { FaAngleDown } from "react-icons/fa"; +import { useTheme } from "../../components/ThemeProvider"; +import { useTranslation } from "react-i18next"; + +const ThemeDropdown = () => { + const [isOpen, setIsOpen] = useState(false); + const { t } = useTranslation(); + const { theme, setTheme, themes } = useTheme(); + const options = themes.map((theme) => { + return { id: theme, label: t(`themes.${theme}`) }; + }); + return ( +
+
setIsOpen(!isOpen)} + > +
+
+
+ {options.find((o) => o.id === theme)?.label} +
+
+ +
+
+ {isOpen && ( +
+ {options.map((option, index) => ( +
{ + setIsOpen(false); + setTheme(option.id); + }} + > + {option.label} +
+ ))} +
+ )} +
+
+ ); +}; + +export default ThemeDropdown; diff --git a/src/style.css b/src/style.css index 465f414..05d6a22 100644 --- a/src/style.css +++ b/src/style.css @@ -1,9 +1,133 @@ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;700;900&display=swap"); - +@import url("https://fonts.googleapis.com/css2?family=Dongle&family=Roboto:wght@100&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; - +@layer base { + :root, + .main { + --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; + } + .hacker { + --background-primary: #000 !important; + --background-lighter: #000 !important; + --navbar-color: #000 !important; + --navbar-height: 60px !important; + --navbar-text-color: greenyellow !important; + --navbar-link-color: greenyellow !important; + --navbar-link-hover-color: green !important; + --navbar-font: "Roboto" !important; + --input-text-color: greenyellow !important; + --input-placeholder-color: white !important; + --input-background-color: #000 !important; + --input-border-color: greenyellow !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #312a49 !important; + --tab-color: var(--black) !important; + --border-color: greenyellow !important; + } + .catppuccin-mocha { + --background-primary: #1e1e2e !important; + --background-lighter: #181825 !important; + --navbar-color: #181825 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cdd6f4 !important; + --navbar-link-color: #89b4fa !important; + --navbar-link-hover-color: #cba6f7 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cdd6f4 !important; + --input-placeholder-color: #a6adc8 !important; + --input-background-color: #11111b !important; + --input-border-color: color-mix(in srgb, #11111b, #cba6f7 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #11111b !important; + --tab-color: #313244 !important; + --active-color: #cba6f7 !important; + } + .catppuccin-macchiato { + --background-primary: #24273a !important; + --background-lighter: #1e2030 !important; + --navbar-color: #1e2030 !important; + --navbar-height: 60px !important; + --navbar-text-color: #cad3f5 !important; + --navbar-link-color: #8aadf4 !important; + --navbar-link-hover-color: #c6a0f6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #cad3f5 !important; + --input-placeholder-color: #a5adcb !important; + --input-background-color: #181926 !important; + --input-border-color: color-mix(in srgb, #181926, #c6a0f6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #181926 !important; + --tab-color: #363a4f !important; + --active-color: #c6a0f6 !important; + } + .catppuccin-frappe { + --background-primary: #303446 !important; + --background-lighter: #292c3c !important; + --navbar-color: #292c3c !important; + --navbar-height: 60px !important; + --navbar-text-color: #c6d0f5 !important; + --navbar-link-color: #8caaee !important; + --navbar-link-hover-color: #ca9ee6 !important; + --navbar-font: "Roboto" !important; + --input-text-color: #c6d0f5 !important; + --input-placeholder-color: #a5adce !important; + --input-background-color: #232634 !important; + --input-border-color: color-mix(in srgb, #232634, #ca9ee6 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #232634 !important; + --tab-color: #414559 !important; + --active-color: #ca9ee6 !important; + } + .catppuccin-latte { + --background-primary: #eff1f5 !important; + --background-lighter: #e6e9ef !important; + --navbar-color: #e6e9ef !important; + --navbar-height: 60px !important; + --navbar-text-color: #4c4f69 !important; + --navbar-link-color: #1e66f5 !important; + --navbar-link-hover-color: #8839ef !important; + --navbar-font: "Roboto" !important; + --input-text-color: #4c4f69 !important; + --input-placeholder-color: #6c6f85 !important; + --input-background-color: #dce0e8 !important; + --input-border-color: color-mix(in srgb, #dce0e8, #8839ef 50%) !important; + --input-border-size: 1.3px !important; + --navbar-logo-filter: none !important; + --dropdown-option-hover-color: #dce0e8 !important; + --tab-color: #ccd0da !important; + --active-color: #8839ef !important; + } +} body { background-color: var(--background-primary) !important; } +.font-inter { + font-family: "Inter", sans-serif; + font-weight: 300; +} + +.font-roboto { + font-family: "Roboto"; +} From c0272a798d30c3e0481adc8df60eef6be5c765cd Mon Sep 17 00:00:00 2001 From: incognitotgt Date: Sun, 14 Apr 2024 19:08:34 -0400 Subject: [PATCH 2/7] theme backgrounds --- package.json | 2 +- src/components/ThemeProvider.tsx | 4 ++-- src/index.tsx | 8 +++++--- src/locales/en.json | 5 ++++- src/locales/es.json | 6 +++++- src/locales/ja.json | 6 +++++- src/pages/Settings/Customization.tsx | 27 +++++++++++++++++++++++++++ src/routes.tsx | 16 +++++++--------- src/style.css | 4 +--- vite.config.ts | 7 ++++++- 10 files changed, 63 insertions(+), 22 deletions(-) diff --git a/package.json b/package.json index f63a280..b4c1cd5 100644 --- a/package.json +++ b/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", diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index c1d09cd..2c21bee 100644 --- a/src/components/ThemeProvider.tsx +++ b/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", diff --git a/src/index.tsx b/src/index.tsx index a4a75c0..1c2b20e 100644 --- a/src/index.tsx +++ b/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 ( -
+
{window.location.origin === "https://nebulaproxy.io" && } {/* {window.location.origin === "http://localhost:8080" && } */} }>
-
+
{init && particlesUrl !== "none" && ( (null); const { t } = useTranslation(); const particles = [ @@ -43,6 +45,31 @@ function Customization({ id, active }) {
+
+
+ {t("settings.theme.background")} +
+
+ {t("settings.theme.backgroundDesc")} +
+ + +
); diff --git a/src/routes.tsx b/src/routes.tsx index a2ffe7b..6b2d632 100644 --- a/src/routes.tsx +++ b/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 ( diff --git a/src/style.css b/src/style.css index 05d6a22..f8d13dc 100644 --- a/src/style.css +++ b/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; diff --git a/vite.config.ts b/vite.config.ts index 8a9bb2c..5f20584 100644 --- a/vite.config.ts +++ b/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/, "") } } } From d7bb56b8150f96fde41af5f743494196b3997e50 Mon Sep 17 00:00:00 2001 From: incognitotgt Date: Mon, 15 Apr 2024 01:13:50 -0400 Subject: [PATCH 3/7] use normal css for bg image --- src/index.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/index.tsx b/src/index.tsx index 1c2b20e..b998a20 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -45,7 +45,12 @@ export default function App() {
{init && particlesUrl !== "none" && ( Date: Mon, 15 Apr 2024 01:16:45 -0400 Subject: [PATCH 4/7] format code and fix a tiny issue --- src/index.tsx | 3 ++- src/pages/Settings/PersonCard.tsx | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/src/index.tsx b/src/index.tsx index b998a20..a8854b8 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -49,7 +49,8 @@ export default function App() { style={{ backgroundImage: bgImage ? `url(${bgImage})` : "none", backgroundSize: "contain", - backgroundRepeat: "space" + backgroundRepeat: "repeat", + backgroundPosition: "center" }} > {init && particlesUrl !== "none" && ( diff --git a/src/pages/Settings/PersonCard.tsx b/src/pages/Settings/PersonCard.tsx index 5b4077f..69d41e0 100644 --- a/src/pages/Settings/PersonCard.tsx +++ b/src/pages/Settings/PersonCard.tsx @@ -6,7 +6,7 @@ interface props { export const PersonCard = (props) => { return ( -
+

From 7117e67e0a863f45af6ae8b824d105591975454d Mon Sep 17 00:00:00 2001 From: incognitotgt Date: Mon, 15 Apr 2024 16:22:16 -0400 Subject: [PATCH 5/7] use hook for background --- src/components/ThemeProvider.tsx | 16 ++++++- src/index.tsx | 69 ++++++++++++++-------------- src/pages/Settings/Customization.tsx | 12 ++--- src/routes.tsx | 2 +- 4 files changed, 54 insertions(+), 45 deletions(-) diff --git a/src/components/ThemeProvider.tsx b/src/components/ThemeProvider.tsx index 2c21bee..71b1567 100644 --- a/src/components/ThemeProvider.tsx +++ b/src/components/ThemeProvider.tsx @@ -21,13 +21,17 @@ type ThemeProviderProps = { type ThemeProviderState = { themes: Theme[]; theme: Theme; + background: string; setTheme: (theme: Theme) => void; + setBackground: (background: string) => void; }; const initialState: ThemeProviderState = { themes: themes, theme: "main", - setTheme: () => null + background: "", + setTheme: () => null, + setBackground: () => null }; const ThemeProviderContext = createContext(initialState); @@ -35,9 +39,13 @@ const ThemeProviderContext = createContext(initialState); export function ThemeProvider({ children, ...props }: ThemeProviderProps) { const defaultTheme = "main"; const storageKey = "theme"; + const bgKey = "background"; const [theme, setTheme] = useState( () => (localStorage.getItem(storageKey) as Theme) || defaultTheme ); + const [background, setBackground] = useState(() => + localStorage.getItem(bgKey) + ); useEffect(() => { const root = window.document.documentElement; @@ -45,16 +53,20 @@ export function ThemeProvider({ children, ...props }: ThemeProviderProps) { themes.forEach((theme) => { root.classList.remove(theme); }); - root.classList.add(theme); }, [theme, themes]); const value = { theme, themes, + background, setTheme: (theme: Theme) => { localStorage.setItem(storageKey, theme); setTheme(theme); + }, + setBackground: (background: string) => { + localStorage.setItem(bgKey, background); + setBackground(background); } }; diff --git a/src/index.tsx b/src/index.tsx index a8854b8..03e8377 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -6,11 +6,10 @@ import Particles, { initParticlesEngine } from "@tsparticles/react"; import { loadSlim } from "@tsparticles/slim"; import { useEffect, useState } from "preact/compat"; -import { ThemeProvider } from "./components/ThemeProvider"; +import { ThemeProvider, useTheme } from "./components/ThemeProvider"; const Routes = lazy(() => import("./routes")); -const theme = localStorage.getItem("theme") || "main"; const particlesUrl = localStorage.getItem("particles") || "none"; export default function App() { @@ -30,42 +29,44 @@ export default function App() { setInit(true); }); }, []); - + const { background } = useTheme(); const particlesLoaded = (container) => { console.log(container); }; - const bgImage: string | undefined = localStorage.getItem("background"); return ( - -

- {window.location.origin === "https://nebulaproxy.io" && } - {/* {window.location.origin === "http://localhost:8080" && } */} - }> -
- -
-
- {init && particlesUrl !== "none" && ( - - )} -
- -
- +
+ {window.location.origin === "https://nebulaproxy.io" && } + {/* {window.location.origin === "http://localhost:8080" && } */} + }> +
+ +
+
+ {init && particlesUrl !== "none" && ( + + )} +
+ +
); } -render(, document.getElementById("app")); +render( + + + , + document.getElementById("app") +); diff --git a/src/pages/Settings/Customization.tsx b/src/pages/Settings/Customization.tsx index b826c19..ed02e42 100644 --- a/src/pages/Settings/Customization.tsx +++ b/src/pages/Settings/Customization.tsx @@ -1,4 +1,5 @@ import { useRef } from "preact/hooks"; +import { useTheme } from "../../components/ThemeProvider"; import { motion } from "framer-motion"; import { tabContentVariant, settingsPageVariant } from "./Variants"; import { useTranslation } from "react-i18next"; @@ -8,7 +9,7 @@ import ThemeDropdown from "./ThemeDropdown"; function Customization({ id, active }) { const bgInput = useRef(null); const { t } = useTranslation(); - + const { background, setBackground } = useTheme(); const particles = [ { id: "none", label: t("settings.theme.particlesNone") }, { id: "/crismas.json", label: t("themes.crismas") } @@ -55,16 +56,11 @@ function Customization({ id, active }) {