mmintelandClaude Opus 5.5
75993100fa
The site now exists in German (at the root, with /impressum and /datenschutz) and English (/en). A request without a language follows the visitor's choice from the language switch, then the browser language, then German; the old English legal addresses move to /en for good. All visible texts are data in src/content/de.ts and en.ts, so components hold none of their own. The header carries a DE/EN switch whose bit curtain covers the page while it is swapped and reopens at the same reading position. Title, description, canonical, hreflang, Open Graph, the share image, the sitemap and the structured data are per language. The privacy notice now describes the cookie that remembers the chosen language. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
109 lines
3.7 KiB
TypeScript
109 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { usePathname } from "next/navigation";
|
|
import * as React from "react";
|
|
import { LOCALES, localeCookie, type Locale } from "@/src/domain/locale";
|
|
import { switchPath } from "@/src/domain/routes";
|
|
import { DecodeText } from "./bits/DecodeText";
|
|
import { useContent, useLocale } from "./ContentProvider";
|
|
import {
|
|
getIdleState,
|
|
getSwitchState,
|
|
startSwitch,
|
|
subscribe,
|
|
} from "./locale-switch-store";
|
|
|
|
const EASE = "cubic-bezier(0.23, 1, 0.32, 1)";
|
|
|
|
/**
|
|
* LanguageSwitch: the two languages side by side, with a marker that slides to
|
|
* the chosen one. Choosing a language closes the bit curtain (see BitCurtain),
|
|
* swaps the page behind it and keeps the reading position. The choice is stored
|
|
* in a cookie so that the language detection does not undo it.
|
|
*
|
|
* The options are plain links to the other language's address, so the switch
|
|
* also works without JavaScript and for search engines.
|
|
*/
|
|
export const LanguageSwitch: React.FC<{
|
|
/** `pill` for the header, `text` for the footer. */
|
|
variant?: "pill" | "text";
|
|
}> = ({ variant = "pill" }) => {
|
|
const locale = useLocale();
|
|
const { nav } = useContent();
|
|
const pathname = usePathname();
|
|
const state = React.useSyncExternalStore(
|
|
subscribe,
|
|
getSwitchState,
|
|
getIdleState,
|
|
);
|
|
// The marker moves as soon as a language is chosen, before the page follows.
|
|
const shown = state.phase === "idle" ? locale : state.target;
|
|
|
|
const choose = (target: Locale) => (event: React.MouseEvent) => {
|
|
if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
|
|
return;
|
|
}
|
|
event.preventDefault();
|
|
if (target === locale) return;
|
|
document.cookie = localeCookie(target);
|
|
startSwitch(locale, target, switchPath(pathname, target));
|
|
};
|
|
|
|
if (variant === "text") {
|
|
return (
|
|
<nav aria-label={nav.language} className="flex gap-x-4">
|
|
{LOCALES.map((option) => (
|
|
<a
|
|
key={option}
|
|
href={switchPath(pathname, option)}
|
|
hrefLang={option}
|
|
lang={option}
|
|
aria-current={option === locale ? "true" : undefined}
|
|
onClick={choose(option)}
|
|
className={`no-underline transition-colors duration-300 hover:text-slate-900 ${
|
|
option === locale ? "text-slate-900" : "text-slate-400"
|
|
}`}
|
|
>
|
|
{nav.languageNames[option]}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<nav
|
|
aria-label={nav.language}
|
|
className="group/lang relative flex items-center rounded-full border border-slate-200 bg-white/70 p-[3px] font-mono text-[10px] font-bold tracking-[0.2em] transition-colors duration-500 hover:border-slate-400"
|
|
>
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute inset-y-[3px] left-[3px] w-[calc(50%-3px)] rounded-full bg-slate-900 shadow-sm transition-transform duration-500"
|
|
style={{
|
|
transform: `translateX(${LOCALES.indexOf(shown) * 100}%)`,
|
|
transitionTimingFunction: EASE,
|
|
}}
|
|
/>
|
|
{LOCALES.map((option) => (
|
|
<a
|
|
key={option}
|
|
href={switchPath(pathname, option)}
|
|
hrefLang={option}
|
|
lang={option}
|
|
aria-label={nav.languageNames[option]}
|
|
aria-current={option === locale ? "true" : undefined}
|
|
title={nav.languageNames[option]}
|
|
onClick={choose(option)}
|
|
className={`relative z-10 grid h-8 w-10 place-items-center rounded-full pl-[0.2em] no-underline transition-colors duration-300 md:h-9 md:w-11 ${
|
|
option === shown
|
|
? "text-white"
|
|
: "text-slate-400 hover:text-slate-900"
|
|
}`}
|
|
>
|
|
<DecodeText text={option.toUpperCase()} trigger="hover" />
|
|
</a>
|
|
))}
|
|
</nav>
|
|
);
|
|
};
|