Implement multilingual support in footer and add legal pages
This commit is contained in:
parent
7bd0905ecf
commit
2975984104
12 changed files with 719 additions and 8 deletions
|
|
@ -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>
|
||||
© {today.getFullYear()} Adrian Altner
|
||||
<div class="footer__inner">
|
||||
<span>© {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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue