Streamer272/svitan.dev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🌐 Adds language changing component
All checks were successful
Gitea Build Action / build-astro (push) Successful in 9m27s
Details

Browse Source
This commit is contained in:
Daniel Svitan
2025-10-22 16:01:39 +02:00
parent c36d08a347
commit 1dd5e87765
5 changed files with 27 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/LangChange.astro Normal file
View File

@@ -0,0 +1,11 @@
---
import {languages} from "../i18n/ui.ts";
const {lang} = Astro.params;
---
<div class="absolute top-2 right-2 flex gap-x-2">
{Object.keys(languages).map((code) =>
code === lang ? "" : <a href={`/${code}/`} class="underline">{code.toUpperCase()}</a>
)}
</div>

8
src/i18n/ui.ts
View File

@@ -1,9 +1,10 @@
export const languages = { export const languages = {
en: 'English', en: "English",
sk: 'Slovak', sk: "Slovensky",
de: "Deutsch",
}; };
export const defaultLang = 'en'; export const defaultLang = "en";
export const ui = { export const ui = {
en: { en: {
@@ -186,4 +187,5 @@ export const ui = {
"main.note.source.1": "tu", "main.note.source.1": "tu",
"main.note.source.2": "", "main.note.source.2": "",
}, },
de: {},
} as const; } as const;

2
src/layouts/Layout.astro
View File

@@ -8,6 +8,8 @@ import "../styles/global.css"
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} /> <meta name="generator" content={Astro.generator} />
<meta name="author" content="Daniel Svitan (streamer272 / selfsigned-ash)" />
<meta name="keywords" content="Daniel Svitan portfolio CV" />
<title>Daniel's portfolio</title> <title>Daniel's portfolio</title>
</head> </head>
<body> <body>

10
src/pages/[lang]/index.astro
View File

@@ -2,6 +2,7 @@
import Layout from "../../layouts/Layout.astro"; import Layout from "../../layouts/Layout.astro";
import ArrowLink from "../../components/ArrowLink.astro" import ArrowLink from "../../components/ArrowLink.astro"
import {useTranslations} from "../../i18n/utils.ts"; import {useTranslations} from "../../i18n/utils.ts";
import LangChange from "../../components/LangChange.astro";
const now = new Date(); const now = new Date();
let years = now.getFullYear() - 2006 - 1; let years = now.getFullYear() - 2006 - 1;
@@ -11,12 +12,13 @@ if (now.getMonth() > 7 || (now.getMonth() === 7 && now.getDate() >= 23)) {
let a = years === 18 ? "an " : "a "; let a = years === 18 ? "an " : "a ";
const {lang} = Astro.params; const {lang} = Astro.params;
const t = useTranslations(lang as "en" | "sk"); const t = useTranslations(lang as "en" | "sk" | "de");
export function getStaticPaths() { export function getStaticPaths() {
return [ return [
{params: {lang: "en"}}, {params: {lang: "en"},},
{params: {lang: "sk"},}, {params: {lang: "sk"},},
{params: {lang: "de"},},
]; ];
} }
--- ---
@@ -56,7 +58,9 @@ export function getStaticPaths() {
<div class="w-screen h-full flex items-center justify-start flex-col overflow-x-scroll"> <div class="w-screen h-full flex items-center justify-start flex-col overflow-x-scroll">
<div class="w-1 h-10 shrink-0"/> <div class="w-1 h-10 shrink-0"/>
<main class="w-[90vw] sm:w-[80vw] md:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto"> <main class="w-[90vw] sm:w-[80vw] md:w-[70vw] lg:w-[60vw] xl:w-[50vw] border-solid border-black border-1 p-3 shrink-0 overflow-auto relative">
<LangChange/>
<p>{t("main.note.accessibility")}</p> <p>{t("main.note.accessibility")}</p>
<div class="h-4"/> <div class="h-4"/>

2
src/pages/index.astro
View File

@@ -1,6 +1,8 @@
--- ---
import Layout from "../layouts/Layout.astro"; import Layout from "../layouts/Layout.astro";
import {defaultLang} from "../i18n/ui.ts"; import {defaultLang} from "../i18n/ui.ts";
// TODO: get language from Accept-Language header
--- ---
<Layout> <Layout>