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

Much better i18n in settings, fully translate current options. 🎉

Browse source
This commit is contained in:
wearrrrr 2024-01-28 18:05:08 -06:00
parent 50563aaa0b
commit 6d81bd5ab6
7 changed files with 75 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,25 +1,29 @@
---
import Dropdown from "../Dropdown.astro"
const themeList = [
{"name": "Alu", "value": "alu"},
{"name": "Macchiato", "value": "macchiato"},
{"name": "Mocha", "value": "mocha"}
]
import Dropdown from "../Dropdown.astro"
const languageList = [
{"name": "English", "value": "en"},
{"name": "日本語", "value": "jp"}
]
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
const themeList = [
{"name": t("settings.customization.theme.Alu"), "value": "alu"},
{"name": t("settings.customization.theme.Macchiato"), "value": "macchiato"},
{"name": t("settings.customization.theme.Mocha"), "value": "mocha"}
]
const languageList = [
{"name": "English", "value": "en"},
{"name": "日本語", "value": "jp"}
]
---
<div class="settings-container">
<div class="setting__theme">
<label class="setting-label">Theme</label>
<label class="setting-label">{t("settings.customization.theme")}</label>
<Dropdown buttonNameDefault="Alu" dropdownList={themeList}, id="dropdown__selected-theme" />
</div>
<div class="setting__language">
<label class="setting-label">Language</label>
<label class="setting-label">{t("settings.customization.language")}</label>
<Dropdown buttonNameDefault="English" dropdownList={languageList}, id="dropdown__selected-language" />
</div>
</div>

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

@ -21,9 +21,9 @@ const searchEngineList = [
]
const openPageWith = [
{ "name": t("settings.proxy.openPageWith.embed"), "value": "embed"},
{ "name": t("settings.proxy.openPageWith.embed"), "value": "embed" },
{ "name": "About:Blank", "value": "about:blank" },
{ "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab"}
{ "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab" },
]
---
@ -41,7 +41,7 @@ const openPageWith = [
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith}, id="dropdown__open-with" />
</div>
<div class="setting__bare-url">
<label class="setting-label">{t("settings.proxy.bareURL")}</label>
<label class="setting-label" for="bare-url-input">{t("settings.proxy.bareURL")}</label>
<Input inputName="bare-url" />
</div>
</div>

41
src/components/SettingsTablist.astro
View file

@ -1,16 +1,20 @@
---
import ProxyTab from "./SettingsContent/ProxyTab.astro";
import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
import { getLangFromUrl, useTranslations } from "../i18n/utils"
const lang = getLangFromUrl(Astro.url);
const t = useTranslations(lang);
---
<div class="content-hidden">
<div id="content-setting-tab-proxy">
<h1 class="content-setting-header">Proxy</h1>
<h1 class="content-setting-header">{t("settings.proxy")}</h1>
<ProxyTab />
</div>
<div id="content-setting-tab-customization">
<h1 class="content-setting-header">Customization</h1>
<h1 class="content-setting-header">{t("settings.customization")}</h1>
<CustomizationTab />
</div>
<div id="content-setting-tab-cloaking">
@ -116,11 +120,26 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
}
}
function getLocalStorageValue(localStorageItem, dropdownID) {
// I was kinda dumb for not doing this earlier.
let dropdown = document.getElementById(dropdownID);
let dropdownMenu = document.getElementById(dropdownID + "-menu");
if (dropdown && dropdownMenu) {
// Now we find the child that matches localStorageItem.value.
let dropdownItem = Array.from(dropdownMenu.children).find((item) => {
return JSON.parse(localStorage.getItem(localStorageItem)).value == item.dataset.setting
})
// Now set the inner text to the name in the dropdownItem.
return dropdownItem.innerText
}
}
function applySavedLocalStorage(localStorageItem, dropdownID) {
if (localStorage.getItem(localStorageItem)) {
let dropdown_toggle = document.getElementById(dropdownID);
if (dropdown_toggle) {
dropdown_toggle.innerText = JSON.parse(localStorage.getItem(localStorageItem)).name.charAt(0).toUpperCase() + JSON.parse(localStorage.getItem(localStorageItem)).name.slice(1)
dropdown_toggle.innerText = getLocalStorageValue(localStorageItem, dropdownID)
}
}
}
@ -128,11 +147,12 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
Array.from(item.children).forEach((item) => {
item.addEventListener('click', () => {
// Get position in item.children array
localStorage.setItem(localStorageItem, JSON.stringify({
let localStorageItemContent = {
"name": item.innerText,
"value": item.dataset.setting
}))
"value": item.dataset.setting,
}
console.log(localStorageItem)
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent))
applySavedLocalStorage(localStorageItem, dropdownID)
closeDropdown(item.parentElement.id);
if (typeof optionalCallback == "function") {
@ -196,7 +216,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
if (savedSearxngUrl != undefined) {
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
searxngUrlInput.value = JSON.parse(localStorage.getItem("alu__searxngUrl")).value
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl")
}
// Proxy settings
applyInputListeners(bareUrlInput, 'alu__bareUrl')
@ -255,10 +275,12 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
}
.content-setting-header {
color: var(--text-color);
font-weight: 400;
}
.setting-label {
color: var(--text-color);
font-size: 18px;
font-weight: 400;
/* annoying stuff with label elements. */
display: block;
opacity: 1.0;
@ -266,6 +288,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
margin-inline: 0;
user-select: none;
width: 100%;
cursor: auto;
}
.setting__searxng-url {
@ -278,7 +301,7 @@ label {
font-weight: 700;
cursor: pointer;
color: #d8d8d8;
opacity: .4;
opacity: .6;
transition: opacity .4s ease-in-out;
display: block;
width: calc(100% - 48px) ;

9
src/i18n/en.json
View file

@ -23,5 +23,12 @@
"settings.proxy.openPageWith.embed": "Embed",
"settings.proxy.openPageWith.newTab": "New Tab",
"settings.proxy.searxngURL": "Searx URL",
"settings.proxy.bareURL": "Bare URL"
"settings.proxy.bareURL": "Bare URL",
"settings.customization": "Customization",
"settings.customization.theme": "Theme",
"settings.customization.theme.Alu": "Alu",
"settings.customization.theme.Macchiato": "Macchiato",
"settings.customization.theme.Mocha": "Mocha",
"settings.customization.language": "Language"
}

9
src/i18n/jp.json
View file

@ -22,5 +22,12 @@
"settings.proxy.searxngURL": "SearxのURL",
"settings.proxy.openPageWith.embed": "埋め込み",
"settings.proxy.openPageWith.newTab": "新しいタブ",
"settings.proxy.bareURL": "BareのURL"
"settings.proxy.bareURL": "BareのURL",
"settings.customization": "カスタマイズ",
"settings.customization.theme": "テーマ",
"settings.customization.theme.Alu": "アルー",
"settings.customization.theme.Macchiato": "マキアート",
"settings.customization.theme.Mocha": "モカ",
"settings.customization.language": "言語"
}

8
src/layouts/Layout.astro
View file

@ -6,9 +6,10 @@ import ThemeLoader from '../components/ThemeLoader.astro';
interface Props {
title: string;
optionalPreloads?: string[];
}
const { title } = Astro.props;
const { title, optionalPreloads } = Astro.props;
import i18next from 'i18next';
---
@ -23,7 +24,10 @@ import i18next from 'i18next';
<link rel="icon" type="image/svg+xml" href="/favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Varela+Round&display=swap" rel="stylesheet" as="style">
{optionalPreloads?.map((item) => {
return <link rel="preload" href={item} />
})}
<meta name="generator" content={Astro.generator} />
<title>{title}</title>
<ViewTransitions />

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

@ -10,7 +10,7 @@ export function getStaticPaths () {
}
---
<Layout title="Settings | Alu">
<Layout title="Settings | Alu" optionalPreloads={["/img/aluwaves.svg", "/img/macchiatowaves.svg", "/img/mochawaves.svg"]}>
<h1 class="title-text">Settings</h1>
<SettingsTablist />
</Layout>