🌐 Adds language changing component
All checks were successful
Gitea Build Action / build-astro (push) Successful in 9m27s
All checks were successful
Gitea Build Action / build-astro (push) Successful in 9m27s
This commit is contained in:
11
src/components/LangChange.astro
Normal file
11
src/components/LangChange.astro
Normal 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>
|
||||
@@ -1,9 +1,10 @@
|
||||
export const languages = {
|
||||
en: 'English',
|
||||
sk: 'Slovak',
|
||||
en: "English",
|
||||
sk: "Slovensky",
|
||||
de: "Deutsch",
|
||||
};
|
||||
|
||||
export const defaultLang = 'en';
|
||||
export const defaultLang = "en";
|
||||
|
||||
export const ui = {
|
||||
en: {
|
||||
@@ -186,4 +187,5 @@ export const ui = {
|
||||
"main.note.source.1": "tu",
|
||||
"main.note.source.2": "",
|
||||
},
|
||||
de: {},
|
||||
} as const;
|
||||
|
||||
@@ -8,6 +8,8 @@ import "../styles/global.css"
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
<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>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
import Layout from "../../layouts/Layout.astro";
|
||||
import ArrowLink from "../../components/ArrowLink.astro"
|
||||
import {useTranslations} from "../../i18n/utils.ts";
|
||||
import LangChange from "../../components/LangChange.astro";
|
||||
|
||||
const now = new Date();
|
||||
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 ";
|
||||
|
||||
const {lang} = Astro.params;
|
||||
const t = useTranslations(lang as "en" | "sk");
|
||||
const t = useTranslations(lang as "en" | "sk" | "de");
|
||||
|
||||
export function getStaticPaths() {
|
||||
return [
|
||||
{params: {lang: "en"}},
|
||||
{params: {lang: "en"},},
|
||||
{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-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>
|
||||
<div class="h-4"/>
|
||||
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
---
|
||||
import Layout from "../layouts/Layout.astro";
|
||||
import {defaultLang} from "../i18n/ui.ts";
|
||||
|
||||
// TODO: get language from Accept-Language header
|
||||
---
|
||||
|
||||
<Layout>
|
||||
|
||||
Reference in New Issue
Block a user