283 lines
8.1 KiB
Text
283 lines
8.1 KiB
Text
---
|
|
import type { CollectionEntry } from 'astro:content';
|
|
import { DEFAULT_LOCALE, type Locale, SITE } from '~/consts';
|
|
import {
|
|
aboutSegment,
|
|
categoryIndexSegment,
|
|
entryHref,
|
|
findTagBySlug,
|
|
findTranslation,
|
|
tagHref,
|
|
tagIndexSegment,
|
|
tagSegment,
|
|
} from '~/i18n/posts';
|
|
import { getLocaleFromUrl, localizePath, switchLocalePath, t } from '~/i18n/ui';
|
|
import HeaderLink from '~/components/HeaderLink.astro';
|
|
|
|
interface Props {
|
|
locale?: Locale;
|
|
/** The current page's content entry, if any — used to resolve a translated language-switch link. */
|
|
entry?: CollectionEntry<'posts' | 'categories'>;
|
|
}
|
|
|
|
const { entry } = Astro.props;
|
|
const locale: Locale = Astro.props.locale ?? getLocaleFromUrl(Astro.url);
|
|
const otherLocale: Locale = locale === 'de' ? 'en' : 'de';
|
|
const homeHref = localizePath('/', locale);
|
|
const aboutHref = localizePath(`/${aboutSegment(locale)}`, locale);
|
|
const categoriesHref = localizePath(`/${categoryIndexSegment(locale)}`, locale);
|
|
const tagsHref = localizePath(`/${tagIndexSegment(locale)}`, locale);
|
|
|
|
const translated = entry ? await findTranslation(entry, otherLocale) : undefined;
|
|
|
|
// If we're on a tag detail page, verify the tag exists in the target locale —
|
|
// otherwise the switched URL would 404. Fall back to the target tags index.
|
|
async function resolveSwitchHref(): Promise<string> {
|
|
if (translated) return entryHref(translated);
|
|
if (entry) return localizePath('/', otherLocale);
|
|
const parts = Astro.url.pathname.split('/').filter(Boolean);
|
|
const localePrefix = parts[0] === locale ? 1 : 0;
|
|
const first = parts[localePrefix];
|
|
const slug = parts[localePrefix + 1];
|
|
if (first === tagSegment(locale) && slug) {
|
|
const target = await findTagBySlug(otherLocale, slug);
|
|
return target
|
|
? tagHref(otherLocale, target)
|
|
: localizePath(`/${tagIndexSegment(otherLocale)}`, otherLocale);
|
|
}
|
|
return switchLocalePath(Astro.url.pathname, otherLocale);
|
|
}
|
|
const switchHref = await resolveSwitchHref();
|
|
---
|
|
|
|
<header>
|
|
<nav>
|
|
<h2><a href={homeHref}>{SITE[locale].title}</a></h2>
|
|
<div class="internal-links">
|
|
<HeaderLink href={homeHref}>{t(locale, 'nav.home')}</HeaderLink>
|
|
<HeaderLink href={aboutHref}>{t(locale, 'nav.about')}</HeaderLink>
|
|
<HeaderLink href={categoriesHref}>{t(locale, 'nav.categories')}</HeaderLink>
|
|
<HeaderLink href={tagsHref}>{t(locale, 'nav.tags')}</HeaderLink>
|
|
</div>
|
|
<div class="toolbar">
|
|
<button class="theme-toggle" type="button" aria-label="Toggle theme">
|
|
<span class="theme-toggle__thumb" aria-hidden="true"></span>
|
|
<span class="theme-toggle__icon theme-toggle__icon--sun" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="4"></circle>
|
|
<path d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"></path>
|
|
</svg>
|
|
</span>
|
|
<span class="theme-toggle__icon theme-toggle__icon--moon" aria-hidden="true">
|
|
<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
<a
|
|
class={`lang-toggle lang-toggle--${locale}`}
|
|
href={switchHref}
|
|
hreflang={otherLocale}
|
|
lang={otherLocale}
|
|
aria-label={t(locale, `lang.${otherLocale}`)}
|
|
>
|
|
<span class="lang-toggle__thumb" aria-hidden="true"></span>
|
|
<span class={`lang-toggle__label${locale === 'de' ? ' is-active' : ''}`}>DE</span>
|
|
<span class={`lang-toggle__label${locale === 'en' ? ' is-active' : ''}`}>EN</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
</header>
|
|
|
|
<script>
|
|
import { navigate } from 'astro:transitions/client';
|
|
function wireLangToggle() {
|
|
const toggle = document.querySelector<HTMLAnchorElement>('.lang-toggle');
|
|
if (!toggle || toggle.dataset.wired) return;
|
|
toggle.dataset.wired = '1';
|
|
toggle.addEventListener('click', (e) => {
|
|
if (e.metaKey || e.ctrlKey || e.shiftKey || (e as MouseEvent).button === 1) return;
|
|
const href = toggle.getAttribute('href');
|
|
if (!href) return;
|
|
e.preventDefault();
|
|
toggle.classList.add('is-switching');
|
|
window.setTimeout(() => navigate(href), 280);
|
|
});
|
|
}
|
|
function wireThemeToggle() {
|
|
const btn = document.querySelector<HTMLButtonElement>('.theme-toggle');
|
|
if (!btn || btn.dataset.wired) return;
|
|
btn.dataset.wired = '1';
|
|
btn.addEventListener('click', () => {
|
|
const next = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
|
|
document.documentElement.dataset.theme = next;
|
|
localStorage.setItem('theme', next);
|
|
});
|
|
}
|
|
wireLangToggle();
|
|
wireThemeToggle();
|
|
document.addEventListener('astro:page-load', () => {
|
|
wireLangToggle();
|
|
wireThemeToggle();
|
|
});
|
|
</script>
|
|
<style>
|
|
header {
|
|
margin: 0;
|
|
padding: 0 1em;
|
|
background: rgb(var(--surface));
|
|
box-shadow: 0 2px 8px rgba(var(--black), 5%);
|
|
}
|
|
h2 {
|
|
margin: 0;
|
|
font-size: 1em;
|
|
}
|
|
|
|
h2 a,
|
|
h2 a.active {
|
|
text-decoration: none;
|
|
}
|
|
nav {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 1em;
|
|
}
|
|
nav a {
|
|
padding: 1em 0.5em;
|
|
color: var(--black);
|
|
border-bottom: 4px solid transparent;
|
|
text-decoration: none;
|
|
}
|
|
nav a.active {
|
|
text-decoration: none;
|
|
border-bottom-color: var(--accent);
|
|
}
|
|
nav a.lang-toggle {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
padding: 3px;
|
|
margin: 0;
|
|
background: rgba(var(--gray-light), 0.7);
|
|
border: 0;
|
|
border-radius: 999px;
|
|
font-size: 0.75em;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
font-variant-numeric: tabular-nums;
|
|
font-feature-settings: 'tnum';
|
|
user-select: none;
|
|
}
|
|
nav a.lang-toggle:hover {
|
|
background: rgba(var(--gray-light), 1);
|
|
}
|
|
.lang-toggle__thumb {
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
width: calc(50% - 3px);
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
box-shadow: 0 1px 3px rgba(var(--black), 0.18);
|
|
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
.lang-toggle--en .lang-toggle__thumb {
|
|
transform: translateX(100%);
|
|
}
|
|
.lang-toggle--de.is-switching .lang-toggle__thumb {
|
|
transform: translateX(100%);
|
|
}
|
|
.lang-toggle--en.is-switching .lang-toggle__thumb {
|
|
transform: translateX(0);
|
|
}
|
|
.lang-toggle__label {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: block;
|
|
flex: 1;
|
|
width: 2.2em;
|
|
padding: 0.6em 0 0.5em;
|
|
text-align: center;
|
|
color: rgb(var(--gray));
|
|
transition: color 280ms ease;
|
|
}
|
|
.lang-toggle__label.is-active {
|
|
color: white;
|
|
}
|
|
.lang-toggle.is-switching .lang-toggle__label.is-active {
|
|
color: rgb(var(--gray));
|
|
}
|
|
.lang-toggle.is-switching .lang-toggle__label:not(.is-active) {
|
|
color: white;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.lang-toggle__thumb,
|
|
.lang-toggle__label {
|
|
transition: none;
|
|
}
|
|
}
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.6em;
|
|
}
|
|
.theme-toggle {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: stretch;
|
|
padding: 3px;
|
|
margin: 0;
|
|
border: 0;
|
|
background: rgba(var(--gray-light), 0.7);
|
|
border-radius: 999px;
|
|
cursor: pointer;
|
|
line-height: 1;
|
|
user-select: none;
|
|
font: inherit;
|
|
}
|
|
.theme-toggle:hover {
|
|
background: rgba(var(--gray-light), 1);
|
|
}
|
|
.theme-toggle__thumb {
|
|
position: absolute;
|
|
top: 3px;
|
|
bottom: 3px;
|
|
left: 3px;
|
|
width: calc(50% - 3px);
|
|
border-radius: 999px;
|
|
background: var(--accent);
|
|
box-shadow: 0 1px 3px rgba(var(--black), 0.18);
|
|
}
|
|
:global(:root[data-theme-ready]) .theme-toggle__thumb {
|
|
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
:global(:root[data-theme='dark']) .theme-toggle__thumb {
|
|
transform: translateX(100%);
|
|
}
|
|
.theme-toggle__icon {
|
|
position: relative;
|
|
z-index: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 1.8em;
|
|
height: 1.8em;
|
|
font-size: 0.9em;
|
|
color: rgb(var(--gray));
|
|
}
|
|
:global(:root[data-theme-ready]) .theme-toggle__icon {
|
|
transition: color 280ms ease;
|
|
}
|
|
:global(:root:not([data-theme='dark'])) .theme-toggle__icon--sun,
|
|
:global(:root[data-theme='dark']) .theme-toggle__icon--moon {
|
|
color: white;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.theme-toggle__thumb,
|
|
.theme-toggle__icon {
|
|
transition: none;
|
|
}
|
|
}
|
|
</style>
|