🎉🎉🎉i18n now extends partially to settings and game pages
This commit is contained in:
wearrrrr
parent
d45cd21847
commit
50563aaa0b
13 changed files with 175 additions and 142 deletions
|
|
@ -10,9 +10,7 @@ const { buttonNameDefault, dropdownList, id } = Astro.props;
|
|||
<ul class="dropdown-menu" id={id + "-menu"}>
|
||||
{
|
||||
dropdownList.map((item: any) => {
|
||||
return (
|
||||
<li class="dropdown-item" id={`proxy-${item.toLowerCase()}`} data-setting={item}>{item}</li>
|
||||
)
|
||||
return <li class="dropdown-item" data-setting={item.value}>{item.name}</li>
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@ const t = useTranslations(lang);
|
|||
<div class="footerflex">
|
||||
<div class="footerbrand">
|
||||
<p class="footerlist-heading"><a href="/">{t("footer.brand")}</a></p>
|
||||
<p>{t("footer.madeWithLove")}</p>
|
||||
<p><a target="_blank" rel="noopener noreferrer" href="https://wearr.dev">{t("footer.madeWithLove")}</a></p>
|
||||
</div>
|
||||
<div class="footerlist">
|
||||
<p class="footerlist-heading">{t("footer.services")}</p>
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ interface Props {
|
|||
|
||||
<style>
|
||||
input {
|
||||
height: 43px;
|
||||
height: 50px;
|
||||
width: 100%;
|
||||
border: 4px solid #E0E0E0;
|
||||
border-radius: 10px;
|
||||
|
|
|
|||
|
|
@ -1,15 +1,25 @@
|
|||
---
|
||||
import Dropdown from "../Dropdown.astro"
|
||||
import Input from "../Input.astro"
|
||||
|
||||
const themeList = [
|
||||
{"name": "Alu", "value": "alu"},
|
||||
{"name": "Macchiato", "value": "macchiato"},
|
||||
{"name": "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>
|
||||
<Dropdown buttonNameDefault="Alu" dropdownList={["Alu", "Macchiato", "Mocha"]}, id="dropdown__selected-theme" />
|
||||
<Dropdown buttonNameDefault="Alu" dropdownList={themeList}, id="dropdown__selected-theme" />
|
||||
</div>
|
||||
<div class="setting__language">
|
||||
<label class="setting-label">Language</label>
|
||||
<Dropdown buttonNameDefault="English" dropdownList={["English", "日本語"]}, id="dropdown__selected-language" />
|
||||
<Dropdown buttonNameDefault="English" dropdownList={languageList}, id="dropdown__selected-language" />
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,27 +1,51 @@
|
|||
---
|
||||
import Input from "../Input.astro"
|
||||
import Dropdown from "../Dropdown.astro"
|
||||
import Input from "../Input.astro"
|
||||
import Dropdown from "../Dropdown.astro"
|
||||
|
||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
||||
const proxyList = [
|
||||
{ "name": t("settings.proxy.auto"), "value": "auto" },
|
||||
{ "name": "Ultraviolet", "value": "ultraviolet" },
|
||||
{ "name": "Rammerhead", "value": "rammerhead" },
|
||||
{ "name": "Dynamic", "value": "dynamic" }
|
||||
]
|
||||
|
||||
const searchEngineList = [
|
||||
{ "name": "Google", "value": "google" },
|
||||
{ "name": "Bing", "value": "bing" },
|
||||
{ "name": "Brave", "value": "brave" },
|
||||
{ "name": "Searx", "value": "searx" }
|
||||
]
|
||||
|
||||
const openPageWith = [
|
||||
{ "name": t("settings.proxy.openPageWith.embed"), "value": "embed"},
|
||||
{ "name": "About:Blank", "value": "about:blank" },
|
||||
{ "name": t("settings.proxy.openPageWith.newTab"), "value": "newTab"}
|
||||
]
|
||||
---
|
||||
|
||||
<div class="settings-container">
|
||||
<div class="setting__selected-proxy">
|
||||
<label class="setting-label">Selected Proxy</label>
|
||||
<Dropdown buttonNameDefault="Auto" dropdownList={["Auto", "Ultraviolet", "Dynamic"]}, id="dropdown__selected-proxy" />
|
||||
<label class="setting-label">{t("settings.proxy.selectedProxy")}</label>
|
||||
<Dropdown buttonNameDefault="Ultraviolet" dropdownList={proxyList}, id="dropdown__selected-proxy" />
|
||||
</div>
|
||||
<div class="setting__search-engine">
|
||||
<label class="setting-label">Search Engine</label>
|
||||
<Dropdown buttonNameDefault="Google" dropdownList={["Google", "Bing", "Brave", "Searx"]}, id="dropdown__search-engine" />
|
||||
<label class="setting-label">{t("settings.proxy.searchEngine")}</label>
|
||||
<Dropdown buttonNameDefault="Google" dropdownList={searchEngineList}, id="dropdown__search-engine" />
|
||||
</div>
|
||||
<div class="setting__open_with">
|
||||
<label class="setting-label">Open With</label>
|
||||
<Dropdown buttonNameDefault="Embed" dropdownList={["Embed", "About:Blank", "New Tab"]}, id="dropdown__open-with" />
|
||||
<label class="setting-label">{t("settings.proxy.openPageWith")}</label>
|
||||
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith}, id="dropdown__open-with" />
|
||||
</div>
|
||||
<div class="setting__bare-url">
|
||||
<label class="setting-label">Bare URL</label>
|
||||
<label class="setting-label">{t("settings.proxy.bareURL")}</label>
|
||||
<Input inputName="bare-url" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting__searxng-url">
|
||||
<label for="searxng-url-input" class="setting-label">Searxng URL</label>
|
||||
<label for="searxng-url-input" class="setting-label">{t("settings.proxy.searxngURL")}</label>
|
||||
<Input inputName="searxng-url" defaultTextContent="https://searxng.site/" />
|
||||
</div>
|
||||
|
|
@ -42,25 +42,14 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
import { navigate } from 'astro:transitions/client';
|
||||
|
||||
// Extend window object to store currently selected tab.
|
||||
declare global {
|
||||
interface Window {
|
||||
currentlySelectedTab: string,
|
||||
loadedContentStorage: any // Technically this is an object storing strings of html, but im lazy.
|
||||
}
|
||||
}
|
||||
|
||||
<script is:inline>
|
||||
document.addEventListener("astro:before-swap", () => {
|
||||
window.currentlySelectedTab = ""
|
||||
document.removeEventListener('setting-tabChange', determineListener as EventListener)
|
||||
document.removeEventListener('setting-tabChange', determineListener)
|
||||
})
|
||||
window.currentlySelectedTab;
|
||||
window.loadedContentStorage = {}
|
||||
|
||||
function beginLoad() {
|
||||
Array.from(document.getElementsByClassName('setting-tab')).forEach((tab)=>{
|
||||
let contentToLoad = document.getElementById('content-' + tab.id)
|
||||
if (contentToLoad) {
|
||||
|
|
@ -69,26 +58,19 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
}
|
||||
|
||||
tab.addEventListener('click', (event) => {
|
||||
loadContent((event.target as HTMLElement).id)
|
||||
loadContent(event.target.id)
|
||||
})
|
||||
})
|
||||
}
|
||||
beginLoad();
|
||||
|
||||
|
||||
function loadContent(tabID: string) {
|
||||
function loadContent(tabID) {
|
||||
if (window.currentlySelectedTab == tabID) return
|
||||
else window.currentlySelectedTab = tabID
|
||||
let currentContent = document.getElementById('current-content')
|
||||
if (currentContent) {
|
||||
currentContent.style.opacity = '0'
|
||||
setTimeout(() => {
|
||||
if (currentContent) {
|
||||
currentContent.innerHTML = window.loadedContentStorage[tabID]
|
||||
currentContent.style.opacity = '1'
|
||||
} else {
|
||||
throw new Error("Current content not found!")
|
||||
}
|
||||
document.dispatchEvent(new CustomEvent('setting-tabChange', {detail: tabID }))
|
||||
document.dispatchEvent(new CustomEvent('setting-tabLoad', {detail: tabID }))
|
||||
}, 250);
|
||||
|
|
@ -103,11 +85,11 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
if (dropdown) {
|
||||
if (dropdown.style.maxHeight == '0px' || dropdown.style.maxHeight == '') {
|
||||
dropdown.style.maxHeight = dropdown.scrollHeight + 'px';
|
||||
document.getElementById(toggle.id)!.style.borderRadius = '10px 10px 0 0';
|
||||
toggle.style.borderRadius = '10px 10px 0 0';
|
||||
} else {
|
||||
dropdown.style.maxHeight = '0px';
|
||||
setTimeout(() => {
|
||||
document.getElementById(toggle.id)!.style.borderRadius = '10px';
|
||||
toggle.style.borderRadius = '10px';
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
|
@ -115,7 +97,7 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
})
|
||||
}
|
||||
|
||||
function determineListener(event: CustomEvent) {
|
||||
function determineListener(event) {
|
||||
if (event.detail == "setting-tab-proxy") {
|
||||
addDropdownListener()
|
||||
} else if (event.detail == "setting-tab-customization") {
|
||||
|
|
@ -123,110 +105,98 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
}
|
||||
}
|
||||
|
||||
function closeDropdown(dropdownID: string) {
|
||||
function closeDropdown(dropdownID) {
|
||||
let dropdown = document.getElementById(dropdownID)
|
||||
if (dropdown) {
|
||||
dropdown.style.maxHeight = '0px';
|
||||
setTimeout(() => {
|
||||
let dropdown_toggle = document.getElementById(dropdownID.replace('-menu', ''));
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.style.borderRadius = '10px';
|
||||
} else {
|
||||
throw new Error("Dropdown toggle not found!")
|
||||
}
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
|
||||
function applySavedLocalStorage(localStorageItem: string, dropdownID: string) {
|
||||
function applySavedLocalStorage(localStorageItem, dropdownID) {
|
||||
if (localStorage.getItem(localStorageItem)) {
|
||||
let dropdown_toggle = document.getElementById(dropdownID);
|
||||
if (dropdown_toggle) {
|
||||
dropdown_toggle.innerText = (localStorage.getItem(localStorageItem) || "").charAt(0).toUpperCase() + (localStorage.getItem(localStorageItem) || "").slice(1)
|
||||
dropdown_toggle.innerText = JSON.parse(localStorage.getItem(localStorageItem)).name.charAt(0).toUpperCase() + JSON.parse(localStorage.getItem(localStorageItem)).name.slice(1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function applyDropdownEventListeners(item: HTMLElement, dropdownID: string, localStorageItem: string, optionalCallback: Function | undefined = undefined) {
|
||||
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
||||
Array.from(item.children).forEach((item) => {
|
||||
item.addEventListener('click', () => {
|
||||
// TODO: Allow an optional field for a custom localStorage value, instead of the input value.
|
||||
localStorage.setItem(localStorageItem, ((item as HTMLElement).dataset.setting) || "")
|
||||
// Get position in item.children array
|
||||
localStorage.setItem(localStorageItem, JSON.stringify({
|
||||
"name": item.innerText,
|
||||
"value": item.dataset.setting
|
||||
}))
|
||||
applySavedLocalStorage(localStorageItem, dropdownID)
|
||||
if (item.parentElement) {
|
||||
closeDropdown(item.parentElement.id);
|
||||
}
|
||||
|
||||
if (typeof optionalCallback == "function") {
|
||||
optionalCallback();
|
||||
}
|
||||
})
|
||||
})
|
||||
// Array.from(item.children).forEach((item) => {
|
||||
// item.addEventListener('click', () => {
|
||||
// localStorage.setItem(localStorageItem, item.dataset.setting)
|
||||
// applySavedLocalStorage(localStorageItem, dropdownID)
|
||||
// closeDropdown(item.parentElement.id);
|
||||
|
||||
// if (typeof optionalCallback == "function") {
|
||||
// optionalCallback();
|
||||
// }
|
||||
// })
|
||||
// })
|
||||
}
|
||||
|
||||
function applyInputListeners(item: HTMLInputElement, localStorageItem: string) {
|
||||
function applyInputListeners(item, localStorageItem) {
|
||||
item.addEventListener('input', () => {
|
||||
// TODO: Allow an optional field for a custom localStorage value, instead of the input value.
|
||||
localStorage.setItem(localStorageItem, item.value)
|
||||
})
|
||||
}
|
||||
|
||||
document.addEventListener('setting-tabChange', determineListener as EventListener)
|
||||
document.addEventListener('setting-tabChange', determineListener)
|
||||
|
||||
loadContent('setting-tab-proxy')
|
||||
|
||||
function setupCustomizationSettings() {
|
||||
applySavedLocalStorage('alu__selectedTheme', 'dropdown__selected-theme');
|
||||
applySavedLocalStorage('alu__selectedLanguage', 'dropdown__selected-language');
|
||||
// TODO: Null checking lol.
|
||||
let dropdownTheme = document.getElementById('dropdown__selected-theme-menu') as HTMLElement
|
||||
let dropdownLanguage = document.getElementById('dropdown__selected-language-menu') as HTMLElement
|
||||
applyDropdownEventListeners(dropdownTheme, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
|
||||
applyDropdownEventListeners(dropdownLanguage, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
|
||||
}
|
||||
|
||||
function navigateToNewLangaugePage() {
|
||||
console.log("Here")
|
||||
console.log(localStorage.getItem("alu__selectedLanguage"))
|
||||
switch (localStorage.getItem("alu__selectedLanguage")) {
|
||||
case "English":
|
||||
window.location.href = "/en/settings/"
|
||||
break;
|
||||
case "日本語":
|
||||
window.location.href = "/jp/settings/"
|
||||
break;
|
||||
}
|
||||
beginLoad();
|
||||
|
||||
let themeDropdown = document.getElementById('dropdown__selected-theme-menu')
|
||||
let languageDropdown = document.getElementById('dropdown__selected-language-menu')
|
||||
applyDropdownEventListeners(themeDropdown, 'dropdown__selected-theme', 'alu__selectedTheme', changeTheme);
|
||||
applyDropdownEventListeners(languageDropdown, 'dropdown__selected-language', 'alu__selectedLanguage', navigateToNewLangaugePage);
|
||||
}
|
||||
|
||||
function changeTheme() {
|
||||
// || "" is safe to use here, because it will default to the default theme if the localStorage item is not found.
|
||||
let theme = localStorage.getItem('alu__selectedTheme') || ""
|
||||
let theme = JSON.parse(localStorage.getItem('alu__selectedTheme')).value
|
||||
if (theme) {
|
||||
document.documentElement.setAttribute('data-theme', theme.toLowerCase())
|
||||
}
|
||||
let footer = document.getElementById('footer');
|
||||
if (footer) {
|
||||
footer.dataset.theme = theme.toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function setupSettings(event: CustomEvent) {
|
||||
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');
|
||||
let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu') as HTMLElement
|
||||
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu') as HTMLElement
|
||||
let openWithDropdown = document.getElementById('dropdown__open-with-menu') as HTMLElement
|
||||
let bareUrlInput = document.getElementById('bare-url-input') as HTMLInputElement
|
||||
let searxngUrlInput = document.getElementById('searxng-url-input') as HTMLInputElement
|
||||
let selectedProxyDropdown = document.getElementById('dropdown__selected-proxy-menu')
|
||||
let searchEngineDropdown = document.getElementById('dropdown__search-engine-menu')
|
||||
let openWithDropdown = document.getElementById('dropdown__open-with-menu')
|
||||
let bareUrlInput = document.getElementById('bare-url-input')
|
||||
let searxngUrlInput = document.getElementById('searxng-url-input')
|
||||
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl")
|
||||
if (savedSearxngUrl != undefined) {
|
||||
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/")
|
||||
// Typescript.. we literally make sure that it won't be undefined RIGHT ABOVE THIS COMMENT.
|
||||
if (searxngUrlInput) searxngUrlInput.value = localStorage.getItem("alu__searxngUrl") || "https://searxng.site/"
|
||||
searxngUrlInput.value = JSON.parse(localStorage.getItem("alu__searxngUrl")).value
|
||||
}
|
||||
// Proxy settings
|
||||
applyInputListeners(bareUrlInput, 'alu__bareUrl')
|
||||
|
|
@ -234,9 +204,8 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
applyDropdownEventListeners(searchEngineDropdown, 'dropdown__search-engine', 'alu__search_engine', checkSearxng);
|
||||
applyDropdownEventListeners(selectedProxyDropdown, 'dropdown__selected-proxy', 'alu__selectedProxy');
|
||||
applyDropdownEventListeners(openWithDropdown, 'dropdown__open-with', 'alu__selectedOpenWith');
|
||||
// Currently does nothing functionally, but it's here for future use.
|
||||
if (localStorage.getItem('alu__bareUrl')) {
|
||||
bareUrlInput.value = localStorage.getItem('bareUrl') || ""
|
||||
if (localStorage.getItem('bareUrl')) {
|
||||
bareUrlInput.value = localStorage.getItem('bareUrl')
|
||||
} else {
|
||||
bareUrlInput.value = '/bare/'
|
||||
}
|
||||
|
|
@ -249,15 +218,26 @@ import CustomizationTab from "./SettingsContent/CustomizationTab.astro";
|
|||
function checkSearxng() {
|
||||
// This function checks if the "searxng" option was clicked, display an additional option if so.
|
||||
if (localStorage.getItem("alu__search_engine")) {
|
||||
if ((localStorage.getItem("alu__search_engine") || "").toLowerCase() == "searx") {
|
||||
(document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '1'
|
||||
if (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase() == "searx") {
|
||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '1'
|
||||
} else {
|
||||
(document.getElementsByClassName('setting__searxng-url')[0] as HTMLElement).style.opacity = '0'
|
||||
document.getElementsByClassName('setting__searxng-url')[0].style.opacity = '0'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('setting-tabLoad', setupSettings as EventListener);
|
||||
document.addEventListener('setting-tabLoad', setupSettings)
|
||||
|
||||
function navigateToNewLangaugePage() {
|
||||
switch (JSON.parse(localStorage.getItem("alu__selectedLanguage")).value) {
|
||||
case "en":
|
||||
window.location.href = "/en/settings/"
|
||||
break;
|
||||
case "jp":
|
||||
window.location.href = "/jp/settings/"
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style is:global>
|
||||
.content-hidden {
|
||||
|
|
|
|||
|
|
@ -3,10 +3,10 @@
|
|||
let currentTheme = localStorage.getItem("alu__selectedTheme")
|
||||
|
||||
if (currentTheme) {
|
||||
document.documentElement.setAttribute("data-theme", currentTheme.toLowerCase());
|
||||
document.documentElement.setAttribute("data-theme", JSON.parse(currentTheme).value.toLowerCase());
|
||||
let footer = document.getElementById('footer');
|
||||
if (footer) {
|
||||
footer.dataset.theme = currentTheme.toLowerCase();
|
||||
footer.dataset.theme = JSON.parse(currentTheme).value.toLowerCase();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -54,7 +54,7 @@
|
|||
};
|
||||
|
||||
function getSearchEngine() {
|
||||
switch (localStorage.getItem("alu__search_engine").toLowerCase()) {
|
||||
switch (JSON.parse(localStorage.getItem("alu__search_engine")).value.toLowerCase()) {
|
||||
case "google": {
|
||||
return "https://google.com/search?q=";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,5 +10,18 @@
|
|||
"footer.madeWithLove": "Made with ❤️ by wearr",
|
||||
"footer.services": "Services",
|
||||
"footer.socials": "Socials",
|
||||
"footer.aluProject": "Alu Project"
|
||||
"footer.aluProject": "Alu Project",
|
||||
|
||||
"games.title": "Games",
|
||||
|
||||
"settings.title": "Settings",
|
||||
"settings.proxy": "Proxy",
|
||||
"settings.proxy.auto": "Auto",
|
||||
"settings.proxy.selectedProxy": "Selected Proxy",
|
||||
"settings.proxy.searchEngine": "Search Engine",
|
||||
"settings.proxy.openPageWith": "Open With",
|
||||
"settings.proxy.openPageWith.embed": "Embed",
|
||||
"settings.proxy.openPageWith.newTab": "New Tab",
|
||||
"settings.proxy.searxngURL": "Searx URL",
|
||||
"settings.proxy.bareURL": "Bare URL"
|
||||
}
|
||||
|
|
@ -7,8 +7,20 @@
|
|||
"menu.search": "検索...",
|
||||
|
||||
"footer.brand": "アルー",
|
||||
"footer.madeWithLove": "「wearr」による❤️で作られました",
|
||||
"footer.madeWithLove": "wearrによる❤️で作られました",
|
||||
"footer.services": "サービス",
|
||||
"footer.socials": "ソーシャル",
|
||||
"footer.aluProject": "アループロジェクト"
|
||||
"footer.aluProject": "アループロジェクト",
|
||||
|
||||
"games.title": "ゲーム",
|
||||
|
||||
"settings.title": "設定",
|
||||
"settings.proxy": "プロキシ",
|
||||
"settings.proxy.selectedProxy": "選択されたプロキシ",
|
||||
"settings.proxy.searchEngine": "検索エンジン",
|
||||
"settings.proxy.openPageWith": "開く",
|
||||
"settings.proxy.searxngURL": "SearxのURL",
|
||||
"settings.proxy.openPageWith.embed": "埋め込み",
|
||||
"settings.proxy.openPageWith.newTab": "新しいタブ",
|
||||
"settings.proxy.bareURL": "BareのURL"
|
||||
}
|
||||
|
|
@ -100,23 +100,10 @@ body {
|
|||
body > * {
|
||||
opacity: 1;
|
||||
}
|
||||
/* Create animation to fade in elements */
|
||||
/* body > * {
|
||||
animation: fadeIn ease 0.15s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-delay: 0.15s;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
} */
|
||||
.title-text {
|
||||
color: var(--text-color);
|
||||
text-align: center;
|
||||
font-weight: 400;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,10 @@
|
|||
import Layout from "../../layouts/Layout.astro";
|
||||
import GameItem from "../../components/GameItem.astro";
|
||||
|
||||
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
||||
const lang = getLangFromUrl(Astro.url);
|
||||
const t = useTranslations(lang);
|
||||
|
||||
export function getStaticPaths () {
|
||||
return [
|
||||
{params: {lang: 'en'}},
|
||||
|
|
@ -11,7 +15,7 @@ export function getStaticPaths () {
|
|||
---
|
||||
|
||||
<Layout title="Games | Alu">
|
||||
<h1 class="title-text">Games</h1>
|
||||
<h1 class="title-text">{t("games.title")}</h1>
|
||||
<div class="grid">
|
||||
<GameItem name="1v1.lol" image="/games/1v1.lol/logo.png"></GameItem>
|
||||
<GameItem name="2048" image="/games/2048/logo.png"></GameItem>
|
||||
|
|
@ -28,7 +32,7 @@ export function getStaticPaths () {
|
|||
<GameItem name="Death Run 3D" image="/games/death-run-3d/logo.png" slugName="death-run-3d"></GameItem>
|
||||
<GameItem name="Doge Miner" image="/games/doge-miner/logo.png" slugName="doge-miner"></GameItem>
|
||||
<GameItem name="Doodle Jump" image="/games/doodle-jump/logo.png" slugName="doodle-jump"></GameItem>
|
||||
<GameItem name="doom" image="/games/doom/logo.png" slugName="doom"></GameItem>
|
||||
<GameItem name="Doom" image="/games/doom/logo.png" slugName="doom"></GameItem>
|
||||
<GameItem name="Draw The Hill" image="/games/draw-the-hill/logo.png" slugName="draw-the-hill"></GameItem>
|
||||
<GameItem name="Evil Glitch" image="/games/evil-glitch/logo.png" slugName="evil-glitch"></GameItem>
|
||||
<GameItem name="Fall Boys" image="/games/fall-boys/logo.png" slugName="fall-boys"></GameItem>
|
||||
|
|
|
|||
|
|
@ -9,17 +9,22 @@ import { ViewTransitions } from "astro:transitions";
|
|||
<meta charset="UTF-8" />
|
||||
<ViewTransitions />
|
||||
<script>
|
||||
switch (localStorage.getItem("alu__selectedLanguage")) {
|
||||
case "English":
|
||||
if (localStorage.getItem("alu__selectedLanguage") === null) window.location.href = "/en/";
|
||||
let currentLang = localStorage.getItem("alu__selectedLanguage");
|
||||
if (currentLang) {
|
||||
switch (JSON.parse(currentLang).value) {
|
||||
case "en":
|
||||
window.location.href = "/en/";
|
||||
break;
|
||||
case "日本語":
|
||||
case "jp":
|
||||
window.location.href = "/jp/";
|
||||
break;
|
||||
default:
|
||||
window.location.href = "/en/";
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
</head>
|
||||
<body></body>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue