From 7f412199485555183ed7581a4153675d566cacab Mon Sep 17 00:00:00 2001 From: wearrrrr Date: Wed, 31 Jan 2024 09:54:19 -0600 Subject: [PATCH] =?UTF-8?q?Cloaking=20now=20fully=20works=20=F0=9F=8E=89?= =?UTF-8?q?=F0=9F=8E=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CloakLoader.astro | 32 ++++++++ src/components/Footer.astro | 2 +- src/components/Input.astro | 22 +++--- .../SettingsContent/CloakingTab.astro | 60 +++++++++++++-- src/components/SettingsContent/ProxyTab.astro | 4 +- src/components/SettingsTablist.astro | 74 +++++++++++++++++++ src/layouts/Layout.astro | 19 +++-- src/pages/[lang]/settings.astro | 2 +- 8 files changed, 190 insertions(+), 25 deletions(-) create mode 100644 src/components/CloakLoader.astro diff --git a/src/components/CloakLoader.astro b/src/components/CloakLoader.astro new file mode 100644 index 0000000..381a283 --- /dev/null +++ b/src/components/CloakLoader.astro @@ -0,0 +1,32 @@ + \ No newline at end of file diff --git a/src/components/Footer.astro b/src/components/Footer.astro index ff05806..0f3e90b 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -41,7 +41,7 @@ const t = useTranslations(lang); --footer-svg-url: url("/img/macchiatowaves.svg"); } #footer { - padding-top: 20vh; + padding-top: 22vh; background-image: var(--footer-svg-url); background-repeat: no-repeat; background-size: 100vw auto; diff --git a/src/components/Input.astro b/src/components/Input.astro index 0cbe946..c7b8099 100644 --- a/src/components/Input.astro +++ b/src/components/Input.astro @@ -1,29 +1,31 @@ --- -const { type, inputName, defaultTextContent } = Astro.props; -// as any should not be necessary here... but it is womp womp. +const { type, inputName, defaultTextContent, height, placeholder } = Astro.props; + +// typescript brainrot +type HTMLInputTypeAttribute = "button" | "checkbox" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "number" | "password" | "radio" | "range" | "reset" | "search" | "submit" | "tel" | "text" | "time" | "url" | "week"; + interface Props { - type?: string; + type?: HTMLInputTypeAttribute; inputName: string; defaultTextContent?: string; + height: string; + placeholder?: string; } --- -
- -
+ \ No newline at end of file diff --git a/src/components/SettingsContent/CloakingTab.astro b/src/components/SettingsContent/CloakingTab.astro index a3ba6f7..2025fa0 100644 --- a/src/components/SettingsContent/CloakingTab.astro +++ b/src/components/SettingsContent/CloakingTab.astro @@ -1,7 +1,9 @@ --- +import Input from "../Input.astro" + const presetCloaks = [ - {"cloakTitle": "Alu", "favicon": "/favicon.png"}, + {"cloakTitle": "None", "favicon": "/favicon.png"}, {"cloakTitle": "Google", "favicon": "https://t1.gstatic.com/faviconV2?client=SOCIAL&type=FAVICON&fallback_opts=TYPE,SIZE,URL&url=http://google.com&size=128"}, {"cloakTitle": "Instructure", "favicon": "https://du11hjcvx0uqb.cloudfront.net/dist/images/favicon-e10d657a73.ico"}, {"cloakTitle": "Google Classroom", "favicon": "https://ssl.gstatic.com/classroom/ic_product_classroom_144.png"}, @@ -13,14 +15,28 @@ ---
-
- {presetCloaks.map((cloak: any) => { - return
{cloak.cloakTitle}/
- })} +
+
+ {presetCloaks.map((cloak: any) => { + return
{cloak.cloakTitle}/
+ })} +
+
+ + + + +
\ No newline at end of file diff --git a/src/components/SettingsContent/ProxyTab.astro b/src/components/SettingsContent/ProxyTab.astro index 51aeb5d..a3f2e33 100644 --- a/src/components/SettingsContent/ProxyTab.astro +++ b/src/components/SettingsContent/ProxyTab.astro @@ -42,10 +42,10 @@ const openPageWith = [
- +
- +
\ No newline at end of file diff --git a/src/components/SettingsTablist.astro b/src/components/SettingsTablist.astro index 9223e40..a54c7db 100644 --- a/src/components/SettingsTablist.astro +++ b/src/components/SettingsTablist.astro @@ -193,6 +193,78 @@ const t = useTranslations(lang); applyDropdownEventListeners(languageDropdown, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage); } + function setupCloakingSettings() { + Array.from(document.getElementById('cloak-list').children).forEach((cloak) => { + cloak.addEventListener('click', () => { + console.log("Here!") + let cloakName = cloak.dataset.cloakName + let cloakIcon = cloak.dataset.cloakIcon + + let localStorageItem = { + "name": cloakName, + "icon": cloakIcon, + "isCustom": false, + } + localStorage.setItem('alu__selectedCloak', JSON.stringify(localStorageItem)) + + if (cloakName == "None") { + localStorage.removeItem('alu__selectedCloak') + cloakName = "Settings | Alu" + cloakIcon = "/favicon.png" + } + let link = document.querySelector("link[rel~='icon']"); + if (!link) { + link = document.createElement('link'); + link.rel = 'icon'; + document.head.appendChild(link); + } + link.href = cloakIcon; + document.title = cloakName; + + if (!cloak.classList.contains("selected")) { + Array.from(document.getElementById('cloak-list').children).forEach((cloak2) => { + cloak2.classList.remove('selected') + }) + cloak.classList.add('selected') + } + }) + }) + + let customNameInput = document.getElementById('cloak-custom-name-input') + let customFaviconInput = document.getElementById('cloak-custom-favicon-input') + if (localStorage.getItem('alu__selectedCloak')) { + let selectedCloak = JSON.parse(localStorage.getItem('alu__selectedCloak')) + if (selectedCloak.isCustom) { + customNameInput.value = selectedCloak.name + customFaviconInput.value = selectedCloak.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 + let localStorageItem = { + "name": cloakName, + "icon": cloakIcon, + "isCustom": true, + } + localStorage.setItem('alu__selectedCloak', JSON.stringify(localStorageItem)) + if (cloakName == "None") { + localStorage.removeItem('alu__selectedCloak') + cloakName = "Settings | Alu" + cloakIcon = "/favicon.png" + } + let link = document.querySelector("link[rel~='icon']"); + if (!link) { + link = document.createElement('link'); + link.rel = 'icon'; + document.head.appendChild(link); + } + link.href = cloakIcon; + document.title = cloakName; + }) + } + function changeTheme() { let theme = JSON.parse(localStorage.getItem('alu__selectedTheme')).value if (theme) { @@ -233,6 +305,8 @@ const t = useTranslations(lang); checkSearxng(); } else if (event.detail == "setting-tab-customization") { setupCustomizationSettings(); + } else if (event.detail == "setting-tab-cloaking") { + setupCloakingSettings(); } } diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index e40f4ca..1005c10 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -3,15 +3,19 @@ import { ViewTransitions } from 'astro:transitions'; import Header from '../components/Header.astro'; import Footer from '../components/Footer.astro'; import ThemeLoader from '../components/ThemeLoader.astro'; +import CloakLoader from '../components/CloakLoader.astro'; + +type Preload = { + "href": string + "as": string +} interface Props { title: string; - optionalPreloads?: string[]; + optionalPreloads?: Preload[]; } const { title, optionalPreloads } = Astro.props; - -import i18next from 'i18next'; --- @@ -21,17 +25,17 @@ import i18next from 'i18next'; - {optionalPreloads?.map((item) => { - return + return })} {title} +
@@ -60,7 +64,8 @@ body { :root { --background-color: #080808; --background-highlight: #252525; - --accent-color: #7900e1; + --accent-color: #6b00c9; + --accent-color-brighter: #8800ff; --text-color: #fff; --text-color-accent: #c7c7c7; --dropdown-background-color: #1e1e1e; @@ -71,6 +76,7 @@ body { --background-color: #1e1e2e; --background-highlight: #45475a; --accent-color: #181825; + --accent-color-brighter: #242539; --text-color: #cdd6f4; --text-color-accent: #bac2de; --dropdown-background-color: #32324e; @@ -81,6 +87,7 @@ body { --background-color: #24273a; --background-highlight: #494d64; --accent-color: #1e2030; + --accent-color-brighter: #525571; --text-color: #cad3f5; --text-color-accent: #b8c0e0; --dropdown-background-color: #323550; diff --git a/src/pages/[lang]/settings.astro b/src/pages/[lang]/settings.astro index 3fb215a..449a80a 100644 --- a/src/pages/[lang]/settings.astro +++ b/src/pages/[lang]/settings.astro @@ -14,7 +14,7 @@ export function getStaticPaths () { } --- - +

Settings