Implement multilingual support in footer and add legal pages

This commit is contained in:
Adrian Altner 2026-04-21 02:37:13 +02:00
parent 7bd0905ecf
commit 2975984104
12 changed files with 719 additions and 8 deletions

View file

@ -1,15 +1,52 @@
---
import { DEFAULT_LOCALE, type Locale } from '~/consts';
import { getLocaleFromUrl, localizePath, t } from '~/i18n/ui';
interface Props {
locale?: Locale;
}
const locale: Locale = Astro.props.locale ?? getLocaleFromUrl(Astro.url) ?? DEFAULT_LOCALE;
const contactSegment = locale === 'de' ? 'kontakt' : 'contact';
const imprintSegment = locale === 'de' ? 'impressum' : 'imprint';
const privacySegment = locale === 'de' ? 'datenschutz' : 'privacy-policy';
const today = new Date();
---
<footer>
&copy; {today.getFullYear()} Adrian Altner
<div class="footer__inner">
<span>&copy; {today.getFullYear()} Adrian Altner</span>
<nav class="footer__links" aria-label="Legal">
<a href={localizePath(`/${contactSegment}`, locale)}>{t(locale, 'footer.contact')}</a>
<a href={localizePath(`/${imprintSegment}`, locale)}>{t(locale, 'footer.imprint')}</a>
<a href={localizePath(`/${privacySegment}`, locale)}>{t(locale, 'footer.privacy')}</a>
</nav>
</div>
</footer>
<style>
footer {
padding: 2em 1em 6em 1em;
background: linear-gradient(var(--gray-gradient)) no-repeat;
padding: 2em 20px;
font-size: 0.75em;
line-height: 0;
}
.footer__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.5em 1.25em;
}
.footer__links {
display: flex;
flex-wrap: wrap;
gap: 1em;
}
.footer__links a {
color: rgb(var(--gray));
text-align: center;
text-decoration: none;
}
.footer__links a:hover {
color: var(--accent);
}
</style>

View file

@ -1,6 +1,6 @@
---
import type { CollectionEntry } from 'astro:content';
import { DEFAULT_LOCALE, type Locale, SITE } from '~/consts';
import { type Locale, SITE } from '~/consts';
import {
aboutSegment,
categoryIndexSegment,
@ -131,6 +131,12 @@ const switchHref = await resolveSwitchHref();
h2 {
margin: 0;
font-size: 1em;
text-align: left;
}
nav > h2 a {
display: block;
padding: 1em 0;
text-align: left;
}
h2 a,
@ -138,11 +144,20 @@ const switchHref = await resolveSwitchHref();
text-decoration: none;
}
nav {
display: flex;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
justify-content: space-between;
gap: 1em;
}
nav > h2 {
justify-self: start;
}
nav > .internal-links {
justify-self: center;
}
nav > .toolbar {
justify-self: end;
}
nav a {
padding: 1em 0.5em;
color: var(--black);