Main page fully translated, add dynamic routing weeee
This commit is contained in:
wearrrrr
parent
e98458148a
commit
9454eda791
14 changed files with 80 additions and 216 deletions
|
|
@ -1,11 +1,10 @@
|
||||||
import { defineConfig } from 'astro/config';
|
import { defineConfig } from 'astro/config';
|
||||||
import astroI18next from "astro-i18next";
|
|
||||||
|
|
||||||
import node from "@astrojs/node";
|
import node from "@astrojs/node";
|
||||||
|
|
||||||
// https://astro.build/config
|
// https://astro.build/config
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
integrations: [astroI18next()],
|
integrations: [],
|
||||||
output: "hybrid",
|
output: "hybrid",
|
||||||
adapter: node({
|
adapter: node({
|
||||||
mode: "middleware",
|
mode: "middleware",
|
||||||
|
|
|
||||||
|
|
@ -1,24 +1,32 @@
|
||||||
|
---
|
||||||
|
|
||||||
|
import { getLangFromUrl, useTranslations } from "../i18n/utils"
|
||||||
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
<div id="footer">
|
<div id="footer">
|
||||||
<div class="footerflex">
|
<div class="footerflex">
|
||||||
<div class="footerbrand">
|
<div class="footerbrand">
|
||||||
<p class="footerlist-heading"><a href="/">Alu</a></p>
|
<p class="footerlist-heading"><a href="/">{t("footer.brand")}</a></p>
|
||||||
<p>Made with ❤️ by <a target="_blank" href="https://wearr.dev">wearr</a></p>
|
<p>{t("footer.madeWithLove")}</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="footerlist">
|
<div class="footerlist">
|
||||||
<p class="footerlist-heading">Services</p>
|
<p class="footerlist-heading">{t("footer.services")}</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/titaniumnetwork-dev/Ultraviolet">Ultraviolet</a></li>
|
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/titaniumnetwork-dev/Ultraviolet">Ultraviolet</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
<div class="footerlist">
|
<div class="footerlist">
|
||||||
<p class="footerlist-heading">Socials</p>
|
<p class="footerlist-heading">{t("footer.socials")}</p>
|
||||||
<ul>
|
<ul>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wearrrrr/AlusUnblocker">GitHub</a></li>
|
<li><a target="_blank" rel="noopener noreferrer" href="https://github.com/wearrrrr/AlusUnblocker">GitHub</a></li>
|
||||||
<li><a target="_blank" rel="noopener noreferrer" href="#">Discord</a></li>
|
<li><a target="_blank" rel="noopener noreferrer" href="#">Discord</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<p class="copyright">Alu Project © 2024</p>
|
<p class="copyright">{t("footer.aluProject")} © 2024</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@ const { name, image, slugName } = Astro.props;
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="game">
|
<div class="game">
|
||||||
<a href=`./${slugName || name}`><img class="game-img" src=`${image}` alt=""></a>
|
<a href=`/games/${slugName || name}`><img class="game-img" src=`${image}` alt=""></a>
|
||||||
<p class="game-title">{name}</p>
|
<p class="game-title">{name}</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
14
src/i18n/en.json
Normal file
14
src/i18n/en.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"nav.brand": "Alu",
|
||||||
|
"nav.games": "Games",
|
||||||
|
"nav.settings": "Settings",
|
||||||
|
|
||||||
|
"menu.welcome": "Welcome to Alu",
|
||||||
|
"menu.search": "Search...",
|
||||||
|
|
||||||
|
"footer.brand": "Alu",
|
||||||
|
"footer.madeWithLove": "Made with ❤️ by wearr",
|
||||||
|
"footer.services": "Services",
|
||||||
|
"footer.socials": "Socials",
|
||||||
|
"footer.aluProject": "Alu Project"
|
||||||
|
}
|
||||||
14
src/i18n/jp.json
Normal file
14
src/i18n/jp.json
Normal file
|
|
@ -0,0 +1,14 @@
|
||||||
|
{
|
||||||
|
"nav.brand": "アルー",
|
||||||
|
"nav.games": "ゲーム",
|
||||||
|
"nav.settings": "設定",
|
||||||
|
|
||||||
|
"menu.welcome": "アルーにようこそ",
|
||||||
|
"menu.search": "検索...",
|
||||||
|
|
||||||
|
"footer.brand": "アルー",
|
||||||
|
"footer.madeWithLove": "「wearr」による❤️で作られました",
|
||||||
|
"footer.services": "サービス",
|
||||||
|
"footer.socials": "ソーシャル",
|
||||||
|
"footer.aluProject": "アループロジェクト"
|
||||||
|
}
|
||||||
|
|
@ -1,19 +1,15 @@
|
||||||
|
import en from './en.json';
|
||||||
|
import jp from './jp.json';
|
||||||
|
|
||||||
|
|
||||||
export const languages = {
|
export const languages = {
|
||||||
en: 'English',
|
en: 'English',
|
||||||
jp: "日本語",
|
jp: "日本語",
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultLang = 'en';
|
export const defaultLang = 'en';
|
||||||
|
|
||||||
export const ui = {
|
export const ui = {
|
||||||
en: {
|
en,
|
||||||
'nav.brand': 'Alu',
|
jp
|
||||||
'nav.games': "Games",
|
};
|
||||||
'nav.settings': "Settings",
|
|
||||||
},
|
|
||||||
jp: {
|
|
||||||
'nav.brand': 'アルー',
|
|
||||||
'nav.games': "ゲーム",
|
|
||||||
'nav.settings': "設定",
|
|
||||||
},
|
|
||||||
} as const;
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
---
|
---
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="404 | Alu">
|
<Layout title="404 | Alu">
|
||||||
|
|
@ -1,6 +1,13 @@
|
||||||
---
|
---
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import GameItem from "../../components/GameItem.astro";
|
import GameItem from "../../components/GameItem.astro";
|
||||||
|
|
||||||
|
export function getStaticPaths () {
|
||||||
|
return [
|
||||||
|
{params: {lang: 'en'}},
|
||||||
|
{params: {lang: 'jp'}},
|
||||||
|
];
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Games | Alu">
|
<Layout title="Games | Alu">
|
||||||
|
|
@ -1,13 +1,24 @@
|
||||||
---
|
---
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
import UVRegistrar from "../../components/UVRegistrar.astro";
|
import UVRegistrar from "../../components/UVRegistrar.astro";
|
||||||
|
|
||||||
|
import { getLangFromUrl, useTranslations } from "../../i18n/utils"
|
||||||
|
const lang = getLangFromUrl(Astro.url);
|
||||||
|
const t = useTranslations(lang);
|
||||||
|
|
||||||
|
export function getStaticPaths () {
|
||||||
|
return [
|
||||||
|
{params: {lang: 'en'}},
|
||||||
|
{params: {lang: 'jp'}},
|
||||||
|
];
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Alu">
|
<Layout title="Alu">
|
||||||
<div class="main-content">
|
<div class="main-content">
|
||||||
<h1 class="title-text">Welcome to Alu</h1>
|
<h1 class="title-text">{t("menu.welcome")}</h1>
|
||||||
<form class="url-input-form" id="url-input-form">
|
<form class="url-input-form" id="url-input-form">
|
||||||
<input class="url-input" type="text" placeholder="Search...">
|
<input class="url-input" type="text" placeholder={t("menu.search")}>
|
||||||
<div id="loading-content">Loading...</div>
|
<div id="loading-content">Loading...</div>
|
||||||
<div id="top-bar"></div>
|
<div id="top-bar"></div>
|
||||||
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
||||||
|
|
@ -1,6 +1,13 @@
|
||||||
---
|
---
|
||||||
import SettingsTablist from "../../components/SettingsTablist.astro";
|
import SettingsTablist from "../../components/SettingsTablist.astro";
|
||||||
import Layout from "../../layouts/Layout.astro";
|
import Layout from "../../layouts/Layout.astro";
|
||||||
|
|
||||||
|
export function getStaticPaths () {
|
||||||
|
return [
|
||||||
|
{params: {lang: 'en'}},
|
||||||
|
{params: {lang: 'jp'}},
|
||||||
|
];
|
||||||
|
}
|
||||||
---
|
---
|
||||||
|
|
||||||
<Layout title="Settings | Alu">
|
<Layout title="Settings | Alu">
|
||||||
|
|
@ -1,92 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "../../layouts/Layout.astro";
|
|
||||||
import GameItem from "../../components/GameItem.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="Games | Alu">
|
|
||||||
<h1 class="title-text">Games</h1>
|
|
||||||
<div class="grid">
|
|
||||||
<GameItem name="1v1.lol" image="/games/1v1.lol/logo.png"></GameItem>
|
|
||||||
<GameItem name="2048" image="/games/2048/logo.png"></GameItem>
|
|
||||||
<GameItem name="The Backrooms" image="/games/backrooms/logo.png" slugName="backrooms"></GameItem>
|
|
||||||
<GameItem name="Baldi's Basics" image="/games/baldi/logo.png" slugName="baldi"></GameItem>
|
|
||||||
<GameItem name="Cannon Basketball 4" image="/games/cannon-basketball-4/logo.png" slugName="cannon-basketball-4"></GameItem>
|
|
||||||
<GameItem name="Cell Machine" image="/games/cell-machine/logo.png" slugName="cell-machine"></GameItem>
|
|
||||||
<GameItem name="Chrome Dino" image="/games/chrome-dino/logo.png" slugName="chrome-dino"></GameItem>
|
|
||||||
<GameItem name="Cookie Clicker" image="/games/cookie-clicker/logo.png" slugName="cookie-clicker"></GameItem>
|
|
||||||
<GameItem name="CSGO Clicker" image="/games/csgo-clicker/logo.png" slugName="csgo-clicker"></GameItem>
|
|
||||||
<GameItem name="Cut The Rope" image="/games/ctr/logo.png" slugName="ctr"></GameItem>
|
|
||||||
<GameItem name="Cut The Rope - Holiday" image="/games/ctr-holiday/logo.png" slugName="ctr-holiday"></GameItem>
|
|
||||||
<GameItem name="Cut The Rope - Time Travel" image="/games/ctr-tr/logo.png" slugName="ctr-tr"></GameItem>
|
|
||||||
<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="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>
|
|
||||||
<GameItem name="Fireboy and Watergirl" image="/games/firewater/logo.png" slugName="firewater"></GameItem>
|
|
||||||
<GameItem name="Fireboy and Watergirl 2" image="/games/firewater2/logo.png" slugName="firewater2"></GameItem>
|
|
||||||
<GameItem name="Five Nights at Freddy's" image="/games/fnaf/logo.png" slugName="fnaf"></GameItem>
|
|
||||||
<GameItem name="Five Nights at Freddy's 2" image="/games/fnaf2/logo.png" slugName="fnaf2"></GameItem>
|
|
||||||
<GameItem name="Five Nights at Freddy's 3" image="/games/fnaf3/logo.png" slugName="fnaf3"></GameItem>
|
|
||||||
<GameItem name="Five Nights at Freddy's 4" image="/games/fnaf4/logo.png" slugName="fnaf4"></GameItem>
|
|
||||||
<GameItem name="Game Inside" image="/games/game-inside/logo.png" slugName="game-inside"></GameItem>
|
|
||||||
<GameItem name="Google Snake" image="/games/google-snake/logo.png" slugName="google-snake"></GameItem>
|
|
||||||
<GameItem name="Grindcraft" image="/games/grindcraft/logo.png" slugName="grindcraft"></GameItem>
|
|
||||||
<GameItem name="Idle Breakout" image="/games/idle-breakout/logo.png" slugName="idle-breakout"></GameItem>
|
|
||||||
<GameItem name="Just One Boss" image="/games/just-one-boss/logo.png" slugName="just-one-boss"></GameItem>
|
|
||||||
<GameItem name="Line Rider" image="/games/line-rider/logo.png" slugName="line-rider"></GameItem>
|
|
||||||
<GameItem name="Minecraft Classic" image="/games/minecraft-classic/logo.png" slugName="minecraft-classic"></GameItem>
|
|
||||||
<GameItem name="Minesweeper" image="/games/minesweeper/logo.png" slugName="minesweeper"></GameItem>
|
|
||||||
<GameItem name="Moto X3M" image="/games/moto-x3m/logo.png" slugName="moto-x3m"></GameItem>
|
|
||||||
<GameItem name="Moto X3M Pool Party" image="/games/moto-x3m-pool/logo.png" slugName="moto-x3m-pool"></GameItem>
|
|
||||||
<GameItem name="Moto X3M Spooky Land" image="/games/moto-x3m-spooky/logo.png" slugName="moto-x3m-spooky"></GameItem>
|
|
||||||
<GameItem name="Moto X3M Winter" image="/games/moto-x3m-winter/logo.png" slugName="moto-x3m-winter"></GameItem>
|
|
||||||
<GameItem name="osu!" image="/games/osu/logo.png" slugName="osu"></GameItem>
|
|
||||||
<GameItem name="Retro Bowl" image="/games/retro-bowl/logo.png" slugName="retro-bowl"></GameItem>
|
|
||||||
<GameItem name="Slope" image="/games/slope/logo.png" slugName="slope"></GameItem>
|
|
||||||
<GameItem name="Super Mario 64" image="/games/sm64/logo.png" slugName="sm64"></GameItem>
|
|
||||||
<GameItem name="Solitaire" image="/games/solitaire/logo.png" slugName="solitaire"></GameItem>
|
|
||||||
<GameItem name="Superhot" image="/games/superhot/logo.png" slugName="superhot"></GameItem>
|
|
||||||
<GameItem name="There is No Game" image="/games/there-is-no-game/logo.png" slugName="there-is-no-game"></GameItem>
|
|
||||||
<GameItem name="Ultima 6" image="/games/ul6/logo.png" slugName="ul6"></GameItem>
|
|
||||||
<GameItem name="Vex 3" image="/games/vex3/logo.png" slugName="vex3"></GameItem>
|
|
||||||
<GameItem name="Vex 4" image="/games/vex4/logo.png" slugName="vex4"></GameItem>
|
|
||||||
<GameItem name="Vex 5" image="/games/vex5/logo.png" slugName="vex5"></GameItem>
|
|
||||||
<GameItem name="Vex 6" image="/games/vex6/logo.png" slugName="vex6"></GameItem>
|
|
||||||
<GameItem name="World's Hardest Game" image="/games/worlds-hardest-game/logo.png" slugName="worlds-hardest-game"></GameItem>
|
|
||||||
<GameItem name="World's Hardest Game 2" image="/games/worlds-hardest-game-2/logo.png" slugName="worlds-hardest-game-2"></GameItem>
|
|
||||||
<GameItem name="You are Bezos" image="/games/you-are-bezos/logo.png" slugName="you-are-bezos"></GameItem>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
|
|
||||||
.grid {
|
|
||||||
color: var(--text-color);
|
|
||||||
margin-top: -10px;
|
|
||||||
height: max-content;
|
|
||||||
width: calc(100% - 60px);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
text-align: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 1rem;
|
|
||||||
margin-left: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 973px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: repeat(3, 1fr);
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media only screen and (max-width: 467px) {
|
|
||||||
.grid {
|
|
||||||
grid-template-columns: repeat(2, 1fr);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "../../layouts/Layout.astro";
|
|
||||||
import UVRegistrar from "../../components/UVRegistrar.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="Alu">
|
|
||||||
<div class="main-content">
|
|
||||||
<h1 class="title-text">Welcome to Alu</h1>
|
|
||||||
<form class="url-input-form" id="url-input-form">
|
|
||||||
<input class="url-input" type="text" placeholder="Search...">
|
|
||||||
<div id="loading-content">Loading...</div>
|
|
||||||
<div id="top-bar"></div>
|
|
||||||
<iframe title="proxy-iframe" id="proxy-frame"></iframe>
|
|
||||||
</form>
|
|
||||||
</div>
|
|
||||||
<UVRegistrar></UVRegistrar>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
form {
|
|
||||||
width: 30%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title-text {
|
|
||||||
font-size: 38px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-input-form {
|
|
||||||
border: none;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-input {
|
|
||||||
display: block;
|
|
||||||
background: transparent url("/img/search.svg") no-repeat 13px center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-input {
|
|
||||||
background-color: #080808;
|
|
||||||
color: #D8DEE9;
|
|
||||||
border: 3px solid white;
|
|
||||||
border-radius: 30px;
|
|
||||||
padding: 15px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
transition: 400ms ease-out;
|
|
||||||
outline: none;
|
|
||||||
font-family: 'Varela Round', sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.url-input::placeholder {
|
|
||||||
color: #D8DEE9;
|
|
||||||
}
|
|
||||||
|
|
||||||
#loading-content {
|
|
||||||
color: white;
|
|
||||||
padding: 8px;
|
|
||||||
position: relative;
|
|
||||||
opacity: 0;
|
|
||||||
transition: 250ms ease-in-out;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
---
|
|
||||||
import Layout from "../../layouts/Layout.astro";
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="404 | Alu">
|
|
||||||
<div class="main-content error-page">
|
|
||||||
<h1>404!</h1>
|
|
||||||
<p>The content you have requested could not be found!</p>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.error-page {
|
|
||||||
color: white
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
---
|
|
||||||
import { changeLanguage } from "i18next";
|
|
||||||
import Switch from "../../components/Switch.astro";
|
|
||||||
import SettingsTablist from "../../components/SettingsTablist.astro";
|
|
||||||
import Layout from "../../layouts/Layout.astro";
|
|
||||||
import ThemeLoader from "../../components/ThemeLoader.astro";
|
|
||||||
|
|
||||||
changeLanguage("en");
|
|
||||||
---
|
|
||||||
|
|
||||||
<Layout title="Settings | Alu">
|
|
||||||
<h1 class="title-text">Settings</h1>
|
|
||||||
<SettingsTablist />
|
|
||||||
</Layout>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
h1 {
|
|
||||||
font-size: 40px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Add table
Reference in a new issue