From 6d81bd5ab694002d663f486150f2922727821755 Mon Sep 17 00:00:00 2001 From: wearrrrr Date: Sun, 28 Jan 2024 18:05:08 -0600 Subject: [PATCH] =?UTF-8?q?Much=20better=20i18n=20in=20settings,=20fully?= =?UTF-8?q?=20translate=20current=20options.=20=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettingsContent/CustomizationTab.astro | 30 ++++++++------ src/components/SettingsContent/ProxyTab.astro | 6 +-- src/components/SettingsTablist.astro | 41 +++++++++++++++---- src/i18n/en.json | 9 +++- src/i18n/jp.json | 9 +++- src/layouts/Layout.astro | 8 +++- src/pages/[lang]/settings.astro | 2 +- 7 files changed, 75 insertions(+), 30 deletions(-) diff --git a/src/components/SettingsContent/CustomizationTab.astro b/src/components/SettingsContent/CustomizationTab.astro index 2e95bb5..a810d47 100644 --- a/src/components/SettingsContent/CustomizationTab.astro +++ b/src/components/SettingsContent/CustomizationTab.astro @@ -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"} +] ---
- +
- +
\ No newline at end of file diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro index 727db01..51aeb5d 100644 --- a/src/components/SettingsContent/ProxyTab.astro +++ b/src/components/SettingsContent/ProxyTab.astro @@ -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 = [
- +
diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro index 4f6b325..5b512f3 100644 --- a/src/components/SettingsTablist.astro +++ b/src/components/SettingsTablist.astro @@ -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); ---
-

Proxy

+

{t("settings.proxy")}

-

Customization

+

{t("settings.customization")}

@@ -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) ; diff --git a/src/i18n/en.json b/src/i18n/en.json index 20b198b..91fdae5 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -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" } \ No newline at end of file diff --git a/src/i18n/jp.json b/src/i18n/jp.json index 1b375d4..3374fce 100644 --- a/src/i18n/jp.json +++ b/src/i18n/jp.json @@ -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": "言語" } \ No newline at end of file diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 7391a03..e40f4ca 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -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'; - + + {optionalPreloads?.map((item) => { + return + })} {title} diff --git a/src/pages/[lang]/settings.astro b/src/pages/[lang]/settings.astro index 813811b..fec810b 100644 --- a/src/pages/[lang]/settings.astro +++ b/src/pages/[lang]/settings.astro @@ -10,7 +10,7 @@ export function getStaticPaths () { } --- - +

Settings