RevelaNetwork/Revela-v4
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fully migrate to Alu.store

Browse source
This commit is contained in:
wearrrrr 2024-07-29 19:30:30 -05:00
parent d41b427266
commit e6b1d52987
8 changed files with 69 additions and 82 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/alu.d.ts vendored
View file

@ -5,7 +5,7 @@ export declare global {
type DefaultKeys = {
[key: string]: AluKey;
};
type Key = Record<string, string>;
type Key = Record<string?, string>;
type ValidStoreKeys = "proxy" | "search" | "openpage" | "wisp" | "bareUrl" | "transport" | "searxng" | "theme" | "lang" | "cloak";
}
}

4
src/components/SettingsContent/CustomizationTab.astro
View file

@ -24,10 +24,10 @@ const languageList = [
<div class="settings-container">
<div class="setting__theme">
<label for="dropdown__selected-theme" aria-label="Theme" class="setting-label">{t("settings.customization.theme")}</label>
<Dropdown buttonNameDefault="Alu" localStorageKey="alu__selectedTheme" dropdownList={themeList} id="dropdown__selected-theme" />
<Dropdown buttonNameDefault="Alu" localStorageKey="theme" dropdownList={themeList} id="dropdown__selected-theme" />
</div>
<div class="setting__language">
<label for="dropdown__selected-language" aria-label="Language" class="setting-label">{t("settings.customization.language")}</label>
<Dropdown buttonNameDefault="English" localStorageKey="alu__selectedLanguage" dropdownList={languageList} id="dropdown__selected-language" />
<Dropdown buttonNameDefault="English" localStorageKey="lang" dropdownList={languageList} id="dropdown__selected-language" />
</div>
</div>

10
src/components/SettingsContent/ProxyTab.astro
View file

@ -39,19 +39,19 @@ const wispURLList = [
<div class="settings-container">
<div class="setting__selected-proxy">
<label for="dropdown__selected-proxy" aria-label="Selected Proxy" class="setting-label">{t("settings.proxy.selectedProxy")}</label>
<Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="alu__selectedProxy" id="dropdown__selected-proxy" />
<Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList} localStorageKey="proxy" id="dropdown__selected-proxy" />
</div>
<div class="setting__search-engine">
<label for="dropdown__search-engine" aria-label="Search Engine" class="setting-label">{t("settings.proxy.searchEngine")}</label>
<Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="alu__searchEngine" id="dropdown__search-engine" />
<Dropdown buttonNameDefault="Google" dropdownList={searchEngineList} localStorageKey="search" id="dropdown__search-engine" />
</div>
<div class="setting__open_with">
<label for="dropdown__open-with" aria-label="Open Page With" class="setting-label">{t("settings.proxy.openPageWith")}</label>
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="openpage" id="dropdown__open-with" />
</div>
<div class="setting__wisp_url">
<label for="dropdown__wisp-url" aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
<Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="alu__selectedWispURL" id="dropdown__wisp-url" />
<Dropdown buttonNameDefault={wispURLList[0].name} dropdownList={wispURLList} localStorageKey="wisp" id="dropdown__wisp-url" />
</div>
<div class="setting__bare_url">
<label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
@ -59,7 +59,7 @@ const wispURLList = [
</div>
<div class="setting__transport">
<label for="dropdown__transport" aria-label="Wisp Transport" class="setting-label">{t("settings.proxy.transport")}</label>
<Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="alu__selectedTransport" id="dropdown__transport" />
<Dropdown buttonNameDefault="Epoxy" dropdownList={transportsList} localStorageKey="transport" id="dropdown__transport" />
</div>
</div>
<div class="setting__searxng-url">

7
src/components/UI/Dropdown.astro
View file

@ -1,5 +1,12 @@
---
const { buttonNameDefault, dropdownList, id, localStorageKey } = Astro.props;
interface Props {
buttonNameDefault: string;
dropdownList: { name: string; value: string }[];
id: string;
localStorageKey: Alu.ValidStoreKeys;
}
---
<div class="dropdown">

13
src/components/ts/AluStore.ts
View file

@ -16,25 +16,19 @@ const KEYSTORE: Alu.DefaultKeys = {
value: "wss://aluu.xyz/wisp/",
},
bareUrl: {
name: `${window.location.protocol}//${window.location.host}/bare/`,
value: `${window.location.protocol}//${window.location.host}/bare/`,
},
transport: {
name: "Epoxy",
value: "epoxy",
value: "/epoxy/index.mjs",
},
searxng: {
name: "https://searxng.site",
value: "https://searxng.site",
},
theme: {
name: "Alu",
value: "alu",
},
lang: {
name: "English",
value: "en",
},
};
if (localStorage.getItem("AluStore") === null) {
@ -57,12 +51,17 @@ class AluStore {
return this.store[key];
}
public set(key: Alu.ValidStoreKeys, value: Alu.Key): void {
console.log(value);
this.store[key] = value;
this.save();
}
public reset(key: Alu.ValidStoreKeys) {
this.set(key, KEYSTORE[key]);
}
public remove(key: Alu.ValidStoreKeys) {
delete this.store[key];
this.save();
}
private save(): void {
localStorage.setItem("AluStore", JSON.stringify(this.store));
}

4
src/i18n/utils.ts
View file

@ -9,8 +9,9 @@ for (const lang in ui) {
STATIC_PATHS.push({ params: { lang } });
}
function getLangFromUrl(url: URL) {
const [lang] = url.pathname.split("/");
const [,lang] = url.pathname.split("/");
if (lang in ui) return lang as keyof typeof ui;
return defaultLang;
}
@ -29,5 +30,4 @@ function useTranslations(lang: LanguageKeys) {
}
export const i18n = { getLangFromUrl, useTranslations, inferLangUseTranslations };
export { STATIC_PATHS };

75
src/pages/[lang]/settings.astro
View file

@ -151,7 +151,7 @@ export function getStaticPaths() {
if (dropdown && dropdownMenu) {
// Now we find the child that matches localStorageItem.value.
const dropdownItem = Array.from(dropdownMenu.children).find((item) => {
return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting;
return Alu.store.get(localStorageItem).value == item.dataset.setting;
});
// Now set the inner text to the name in the dropdownItem.
return dropdownItem.innerText;
@ -159,7 +159,7 @@ export function getStaticPaths() {
}
function applySavedLocalStorage(localStorageItem, dropdownID) {
if (localStorage.getItem(localStorageItem)) {
if (Alu.store.get(localStorageItem)) {
const dropdown_toggle = document.getElementById(dropdownID);
if (dropdown_toggle) {
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID);
@ -176,7 +176,7 @@ export function getStaticPaths() {
name: child.innerText,
value: child.dataset.setting,
};
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
Alu.store.set(localStorageItem, localStorageItemContent);
applySavedLocalStorage(localStorageItem, dropdown.id);
closeDropdown(dropdownSibling.id);
@ -189,7 +189,7 @@ export function getStaticPaths() {
function applyInputListeners(item, localStorageItem) {
item.addEventListener("input", () => {
localStorage.setItem(localStorageItem, item.value);
Alu.store.set(localStorageItem, { value: item.value });
});
}
@ -226,8 +226,8 @@ export function getStaticPaths() {
}
});
}
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
applySavedLocalStorage("theme", "dropdown__selected-theme");
applySavedLocalStorage("lang", "dropdown__selected-language");
const themeDropdown = document.getElementById("dropdown__selected-theme");
const languageDropdown = document.getElementById("dropdown__selected-language");
@ -242,15 +242,15 @@ export function getStaticPaths() {
let cloakName = cloak.dataset.cloakName;
let cloakIcon = cloak.dataset.cloakIcon;
const localStorageItem = {
const cloakItem = {
name: cloakName,
icon: cloakIcon,
isCustom: false,
};
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
Alu.store.set("cloak", cloakItem);
if (cloakName == "None") {
localStorage.removeItem("alu__selectedCloak");
Alu.store.remove("cloak");
cloakName = "Settings | Alu";
cloakIcon = "/favicon.svg";
}
@ -274,25 +274,25 @@ export function getStaticPaths() {
const customNameInput = document.getElementById("cloak-custom-name-input");
const customFaviconInput = document.getElementById("cloak-custom-favicon-input");
if (localStorage.getItem("alu__selectedCloak")) {
const selectedCloak = JSON.parse(localStorage.getItem("alu__selectedCloak"));
if (selectedCloak.isCustom) {
customNameInput.value = selectedCloak.name;
customFaviconInput.value = selectedCloak.icon;
const cloak = Alu.store.get("cloak");
if (cloak) {
if (cloak.isCustom) {
customNameInput.value = cloak.name;
customFaviconInput.value = cloak.icon;
}
}
document.getElementById("cloak-custom-button").addEventListener("click", () => {
let cloakName = document.getElementById("cloak-custom-name-input").value;
let cloakIcon = document.getElementById("cloak-custom-favicon-input").value;
const localStorageItem = {
const cloakItem = {
name: cloakName,
icon: cloakIcon,
isCustom: true,
};
localStorage.setItem("alu__selectedCloak", JSON.stringify(localStorageItem));
Alu.store.set("cloak", cloakItem);
if (cloakName == "None") {
localStorage.removeItem("alu__selectedCloak");
Alu.store.remove("cloak");
cloakName = "Settings | Alu";
cloakIcon = "/favicon.svg";
}
@ -308,23 +308,17 @@ export function getStaticPaths() {
}
function changeTheme() {
const theme = JSON.parse(localStorage.getItem("alu__selectedTheme")).value;
if (theme) {
document.documentElement.setAttribute("data-theme", theme.toLowerCase());
const footer = document.getElementById("footer");
if (footer) {
footer.dataset.theme = theme.toLowerCase();
}
}
const theme = Alu.store.get("theme").value;
document.documentElement.setAttribute("data-theme", theme);
}
function setupSettings(event) {
if (event.detail == "setting-tab-proxy") {
applySavedLocalStorage("alu__selectedProxy", "dropdown__selected-proxy");
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
applySavedLocalStorage("alu__selectedWispURL", "dropdown__wisp-url");
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
applySavedLocalStorage("proxy", "dropdown__selected-proxy");
applySavedLocalStorage("search", "dropdown__search-engine");
applySavedLocalStorage("openpage", "dropdown__open-with");
applySavedLocalStorage("wisp", "dropdown__wisp-url");
applySavedLocalStorage("transport", "dropdown__transport");
// Dropdowns
const selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
const searchEngineDropdown = document.getElementById("dropdown__search-engine");
@ -335,15 +329,8 @@ export function getStaticPaths() {
// Inputs
const searxngUrlInput = document.getElementById("searxng-url-input");
const bareURLInput = document.getElementById("bare-url-input");
const savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
if (savedSearxngUrl != null) {
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
}
const savedBareUrl = localStorage.getItem("alu__bareUrl");
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
bareURLInput.value = localStorage.getItem("alu__bareUrl");
bareURLInput.value = Alu.store.get("bareUrl").value;
// Proxy settings
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
applyDropdownEventListeners(dropdown);
@ -351,8 +338,8 @@ export function getStaticPaths() {
applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
checkSearxng();
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
applyInputListeners(bareURLInput, "alu__bareUrl");
applyInputListeners(searxngUrlInput, "searxng");
applyInputListeners(bareURLInput, "bareUrl");
} else if (event.detail == "setting-tab-customization") {
setupCustomizationSettings();
} else if (event.detail == "setting-tab-cloaking") {
@ -362,20 +349,18 @@ export function getStaticPaths() {
function checkSearxng() {
// Callback for search engine dropdown
const search_engine = JSON.parse(localStorage.getItem("alu__search_engine"));
if (search_engine) {
if (search_engine.value.toLowerCase() == "searx") {
const searchEngine = Alu.store.get("search");
if (searchEngine.value.toLowerCase() == "searx") {
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "1";
} else {
document.getElementsByClassName("setting__searxng-url")[0].style.opacity = "0";
}
}
}
document.addEventListener("setting-tabLoad", setupSettings);
function navigateToNewLangaugePage() {
const value = JSON.parse(localStorage.getItem("alu__selectedLanguage")).value;
const value = Alu.store.get("lang").value;
const currentLanguage = window.location.pathname.split("/")[1];
if (value == currentLanguage) return;
window.location.href = `/${value}/settings`;

30
src/pages/index.astro
View file

@ -1,8 +1,4 @@
---
import { ViewTransitions } from "astro:transitions";
---
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
@ -19,7 +15,7 @@ import { ViewTransitions } from "astro:transitions";
<meta property="twitter:title" content="Alu" />
<meta property="twitter:description" content="Alu is a sleek web proxy supporting multiple standards of communication, and wide levels of customization." />
<meta property="twitter:image" content="/logo.png" />
<ViewTransitions />
<script src="@components/ts/AluStore.ts"></script>
<script src="https://www.googletagmanager.com/gtag/js?id=G-P1JX4G9KSF" is:inline></script>
<script is:inline>
window.dataLayer = window.dataLayer || [];
@ -31,26 +27,26 @@ import { ViewTransitions } from "astro:transitions";
gtag("config", "G-P1JX4G9KSF");
</script>
<script>
const currentLang = localStorage.getItem("alu__selectedLanguage");
const lang = Alu.store.get("lang");
const redirect = (loc: string) => (window.location.href = loc);
if (currentLang) {
if (lang) {
try {
const parsed = JSON.parse(currentLang).value;
redirect(`/${parsed}/`);
redirect(`/${lang.value}/`);
} catch {
localStorage.clear();
window.location.reload();
}
} else {
if (navigator.language.includes("ja")) {
localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "jp" }));
const lang = navigator.language;
if (lang.includes("ja")) {
Alu.store.set("lang", { value: "jp" });
redirect("/jp/");
} else if (navigator.language.includes("fr")) {
localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "fr" }));
} else if (lang.includes("es")) {
Alu.store.set("lang", { value: "fr" });
redirect("/fr/");
} else {
localStorage.setItem("alu__selectedLanguage", JSON.stringify({ value: "en" }));
redirect("/en/");
} else if (lang.includes("fr")) {
Alu.store.set("lang", { value: "es" });
redirect("/es/");
}
}
</script>