diff --git a/index.html b/index.html index 4aeb7ad..470d7db 100644 --- a/index.html +++ b/index.html @@ -20,7 +20,7 @@ } - +
diff --git a/src/LoadSuspense.tsx b/src/LoadSuspense.tsx new file mode 100644 index 0000000..f5eccbc --- /dev/null +++ b/src/LoadSuspense.tsx @@ -0,0 +1,26 @@ +import './Suspense.css' + +export function LoadSuspense() { + return ( +
+ + + + + +
+ ); +} diff --git a/src/Suspense.css b/src/Suspense.css new file mode 100644 index 0000000..203026c --- /dev/null +++ b/src/Suspense.css @@ -0,0 +1,23 @@ +.suspenseContainer { + display: flex; + height: 100vh; + width: 100vw; + align-items: center; + justify-content: center; + background-color: #191724; +} + +@keyframes pulse-brighter { + 0%, + 100% { + opacity: 1; + } + 50% { + opacity: 0.5; + } +} + +.animate-pulse-brighter { + animation: pulse-brighter 2s infinite; + height: 11rem; +} diff --git a/src/index.tsx b/src/index.tsx index eccc3b6..e17fecb 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,26 +1,15 @@ import { render } from "preact"; -import { LocationProvider, Router, Route } from "preact-iso"; -import { Home } from "./pages/Home"; -import { NotFound } from "./pages/_404.jsx"; -import { DiscordPage } from "./pages/discord.jsx"; -import { ProxyFrame } from "./pages/ProxyFrame.js"; -import { Settings } from "./pages/Settings/index.js"; +import { Suspense, lazy } from "preact/compat"; +import { LoadSuspense } from "./LoadSuspense"; +const Routes = lazy(() => import("./routes")); -import "./style.css"; -import "./themes/main.css"; -import "./i18n"; - -export function App() { +export default function App() { return ( - - - - - - - - - + }> +
+ +
+ ); } diff --git a/src/locales/en.json b/src/locales/en.json index 8cca3c4..3bfcddf 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -47,6 +47,10 @@ "cloaking": { "title": "Cloaking", "subtitle": "Choose how your tab looks" + }, + "search": { + "title": "Search Engine", + "subtitle": "Choose your search engine" } }, "titles": { @@ -54,5 +58,6 @@ "settings": "Nebula - Settings", "discord": "Nebula - Discord", "404": "Nebula - 404" - } + }, + "comingsoon": "Coming soon!" } diff --git a/src/locales/es.json b/src/locales/es.json index 68107f3..41b28b6 100644 --- a/src/locales/es.json +++ b/src/locales/es.json @@ -47,6 +47,10 @@ "cloaking": { "title": "Encubrimiento", "subtitle": "Elige cómo se ve tu pestaña" + }, + "search": { + "title": "Motor de búsqueda", + "subtitle": "Elija su motor de búsqueda para Nebula." } }, "titles": { @@ -54,5 +58,6 @@ "settings": "Nebula - Ajustes", "discord": "Nebula - Discord", "404": "Nebula - 404" - } + }, + "comingsoon": "¡Próximamente!" } diff --git a/src/locales/ja.json b/src/locales/ja.json index 4a19b46..5d59edf 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -47,6 +47,10 @@ "cloaking": { "title": "クローキング", "subtitle": "タブの見た目を選択する" + }, + "search": { + "title": "検索エンジン", + "subtitle": "ネビュラの検索エンジンを選択してください" } }, "titles": { @@ -54,5 +58,6 @@ "settings": "ネブラ - セッティング", "discord": "ネブラ - Discord", "404": "ネブラ - 404" - } + }, + "comingsoon": "近日公開" } diff --git a/src/pages/ProxyFrame.tsx b/src/pages/ProxyFrame.tsx index 8cea2fb..6dd0a8c 100644 --- a/src/pages/ProxyFrame.tsx +++ b/src/pages/ProxyFrame.tsx @@ -1,5 +1,6 @@ import { RammerheadEncode } from "../util/RammerheadEncode"; import { searchUtil } from "../util/searchUtil"; +import { LoadSuspense } from "../LoadSuspense"; import { useEffect, useState } from "preact/hooks"; //import our Iframe component import { Iframe } from "../components/iframe/Iframe"; @@ -19,12 +20,14 @@ export function ProxyFrame(props: { url: string }) { // pass the URL encoded with encodeURIcomponent const localProxy = localStorage.getItem("proxy") || "automatic"; const proxyMode = localStorage.getItem("proxyMode") || "embed"; + const searchEngine = + localStorage.getItem("searchEngine") || "https://google.com/search?q=%s"; const [ProxiedUrl, setProxiedUrl] = useState(undefined); let decodedUrl = decodeURIComponent(props.url); //attempt to convert to a valid url - decodedUrl = searchUtil(decodedUrl, "https://google.com/search?q=%s"); + decodedUrl = searchUtil(decodedUrl, searchEngine); let proxyRef; @@ -111,8 +114,8 @@ export function ProxyFrame(props: { url: string }) { originalTitle={t("titles.home")} originalFavicon="/logo.png" /> - {proxyMode === "direct" &&

Loading {localProxy}...

} - {proxyMode === "aboutblank" &&

Loading {localProxy}...

} + {proxyMode === "direct" && } + {proxyMode === "aboutblank" && } {proxyMode === "embed" &&