993 lines
27 KiB
Markdown
993 lines
27 KiB
Markdown
# Multilinguale SPA — UI-Lokalisierung + Listen-Filter (Plan 3/3)
|
||
|
||
> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
|
||
|
||
**Goal:** UI-Chrome-Strings (Menü, Footer, Buttons, Seitentitel, Meldungen) werden über `svelte-i18n` lokalisiert — `de` als Default, `en` als zweite Sprache, Browser-Locale als Initial-Auswahl. Ein Locale-Store steuert zusätzlich die Listen-Seiten (Startseite + Archiv), sodass nur Posts in der aktiven Sprache erscheinen. Ein dezenter Umschalter im Header wechselt die Sprache.
|
||
|
||
**Architecture:** Locale-Store (`writable<'de'|'en'>`) bootstrapt aus `navigator.language`, persistiert in `localStorage`, speist `svelte-i18n` und die Listen-Filter. UI-Strings liegen in `app/src/lib/i18n/messages/{de,en}.json`, werden via `$t(...)` in Templates genutzt. Listen-Seiten (`+page.svelte`, `archiv/+page.svelte`) filtern `posts` client-seitig nach `l`-Tag gegen den aktiven Locale.
|
||
|
||
**Tech Stack:** SvelteKit (Svelte 5 Runes), TypeScript, `svelte-i18n` (runtime, ~10 KB), Vitest.
|
||
|
||
---
|
||
|
||
## Spec-Referenz
|
||
|
||
Umsetzt den Abschnitt **UI-Lokalisierung (Chrome)** sowie die noch offene „Nur Posts der aktiven Sprache in Listen zeigen"-Forderung aus `docs/superpowers/specs/2026-04-21-multilingual-posts-design.md`. Damit sind alle Spec-Anforderungen nach Plan 1/2/3 umgesetzt.
|
||
|
||
## Datei-Struktur
|
||
|
||
**Zu erstellen:**
|
||
- `app/src/lib/i18n/index.ts` — initialisiert `svelte-i18n`, registriert Locale-Bundles, exportiert `t`, `locale` und den projekteigenen `activeLocale`-Store.
|
||
- `app/src/lib/i18n/messages/de.json` — DE-Strings für UI-Chrome.
|
||
- `app/src/lib/i18n/messages/en.json` — EN-Strings, identische Keys.
|
||
- `app/src/lib/i18n/activeLocale.ts` — Custom-Writable-Store, der Locale persistiert (localStorage) und mit `svelte-i18n` syncronisiert.
|
||
- `app/src/lib/i18n/activeLocale.test.ts` — Unit-Tests für Bootstrap, Persistence, Fallback.
|
||
- `app/src/lib/components/LanguageSwitcher.svelte` — Umschalter im Header, zwei Buttons „DE/EN".
|
||
|
||
**Zu ändern:**
|
||
- `app/src/routes/+layout.svelte` — Menü-/Footer-Strings via `$t`, `LanguageSwitcher` einbinden, i18n-Init im Script.
|
||
- `app/src/routes/+page.svelte` — Hero-Texte via `$t`, Liste nach `activeLocale` filtern.
|
||
- `app/src/routes/archiv/+page.svelte` — Seitenüberschrift via `$t`, Liste nach `activeLocale` filtern.
|
||
- `app/src/routes/impressum/+page.svelte` — Alle statischen Strings via `$t`.
|
||
- `app/src/routes/[...slug]/+page.svelte` — Breadcrumb („← Zurück zur Übersicht") via `$t`; Fehlermeldungen via `$t`.
|
||
- `app/src/lib/components/LoadingOrError.svelte` — falls es hartkodierte Strings enthält, auf `$t` umstellen.
|
||
- `app/src/lib/components/LanguageAvailability.svelte` — „Auch verfügbar in:" via `$t` statt hartkodiert.
|
||
- `app/src/lib/components/PostView.svelte` — „(ohne Titel)" + Datumsformat-Locale via `$t` bzw. `activeLocale`.
|
||
- `app/package.json` — `svelte-i18n` als Dependency.
|
||
|
||
**Nicht angefasst:**
|
||
- Post-Content (`event.content`) — Markdown-Body bleibt in Autorensprache, wird nicht übersetzt.
|
||
- `app/src/lib/nostr/*` — Relay-Loader sind sprach-agnostisch.
|
||
- URL-Schema — weiterhin `/<slug>/`, kein Sprach-Präfix.
|
||
|
||
---
|
||
|
||
## Task 1: svelte-i18n installieren und Messages-Files anlegen
|
||
|
||
**Files:**
|
||
- Create: `app/src/lib/i18n/messages/de.json`, `app/src/lib/i18n/messages/en.json`
|
||
- Modify: `app/package.json`, `app/package-lock.json`
|
||
|
||
- [ ] **Step 1: Dependency installieren**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm install svelte-i18n
|
||
```
|
||
|
||
Prüfen:
|
||
```bash
|
||
grep "svelte-i18n" /Users/joerglohrer/repositories/joerglohrerde/app/package.json
|
||
```
|
||
Expected: eine Zeile wie `"svelte-i18n": "^4.x.x"`.
|
||
|
||
- [ ] **Step 2: Messages-Dateien anlegen**
|
||
|
||
Erstelle `app/src/lib/i18n/messages/de.json`:
|
||
|
||
```json
|
||
{
|
||
"nav": {
|
||
"home": "Home",
|
||
"archive": "Archiv",
|
||
"imprint": "Impressum",
|
||
"brand_aria": "Zur Startseite"
|
||
},
|
||
"home": {
|
||
"greeting": "Hi 🖖 Willkommen auf meinem Blog 🤗",
|
||
"latest": "Neueste Beiträge",
|
||
"more_archive": "Alle Beiträge im Archiv →",
|
||
"empty": "Keine Posts gefunden auf den abgefragten Relays."
|
||
},
|
||
"archive": {
|
||
"title": "Archiv",
|
||
"subtitle": "Alle Beiträge, nach Jahr gruppiert.",
|
||
"doc_title": "Archiv – Jörg Lohrer"
|
||
},
|
||
"post": {
|
||
"back_to_overview": "← Zurück zur Übersicht",
|
||
"untitled": "(ohne Titel)",
|
||
"published_on": "Veröffentlicht am {date}",
|
||
"also_available_in": "Auch verfügbar in:",
|
||
"not_found": "Post \"{slug}\" nicht gefunden.",
|
||
"unknown_error": "Unbekannter Fehler"
|
||
},
|
||
"imprint": {
|
||
"doc_title": "Impressum – Jörg Lohrer"
|
||
},
|
||
"lang": {
|
||
"de": "Deutsch",
|
||
"en": "English",
|
||
"switch_aria": "Sprache wechseln"
|
||
}
|
||
}
|
||
```
|
||
|
||
Erstelle `app/src/lib/i18n/messages/en.json` mit denselben Keys:
|
||
|
||
```json
|
||
{
|
||
"nav": {
|
||
"home": "Home",
|
||
"archive": "Archive",
|
||
"imprint": "Imprint",
|
||
"brand_aria": "Go to homepage"
|
||
},
|
||
"home": {
|
||
"greeting": "Hi 🖖 Welcome to my blog 🤗",
|
||
"latest": "Latest posts",
|
||
"more_archive": "All posts in the archive →",
|
||
"empty": "No posts found on the queried relays."
|
||
},
|
||
"archive": {
|
||
"title": "Archive",
|
||
"subtitle": "All posts, grouped by year.",
|
||
"doc_title": "Archive – Jörg Lohrer"
|
||
},
|
||
"post": {
|
||
"back_to_overview": "← Back to overview",
|
||
"untitled": "(untitled)",
|
||
"published_on": "Published on {date}",
|
||
"also_available_in": "Also available in:",
|
||
"not_found": "Post \"{slug}\" not found.",
|
||
"unknown_error": "Unknown error"
|
||
},
|
||
"imprint": {
|
||
"doc_title": "Imprint – Jörg Lohrer"
|
||
},
|
||
"lang": {
|
||
"de": "German",
|
||
"en": "English",
|
||
"switch_aria": "Switch language"
|
||
}
|
||
}
|
||
```
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/package.json app/package-lock.json app/src/lib/i18n/messages/de.json app/src/lib/i18n/messages/en.json && git commit -m "chore(app): svelte-i18n + ui-messages-files (de/en)"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 2: `activeLocale`-Store mit Persistence
|
||
|
||
**Files:**
|
||
- Create: `app/src/lib/i18n/activeLocale.ts`
|
||
- Create: `app/src/lib/i18n/activeLocale.test.ts`
|
||
|
||
- [ ] **Step 1: Test schreiben**
|
||
|
||
Erstelle `app/src/lib/i18n/activeLocale.test.ts`:
|
||
|
||
```typescript
|
||
import { describe, it, expect, beforeEach, vi } from 'vitest';
|
||
import { detectInitialLocale } from './activeLocale';
|
||
|
||
describe('detectInitialLocale', () => {
|
||
beforeEach(() => {
|
||
// Kein localStorage zwischen Tests
|
||
globalThis.localStorage?.clear?.();
|
||
});
|
||
|
||
it('nimmt wert aus localStorage, wenn vorhanden und gültig', () => {
|
||
const storage = new Map<string, string>([['locale', 'en']]);
|
||
expect(detectInitialLocale({
|
||
storage: {
|
||
getItem: (k) => storage.get(k) ?? null,
|
||
setItem: () => {}
|
||
},
|
||
navigatorLanguage: 'de-DE',
|
||
supported: ['de', 'en']
|
||
})).toBe('en');
|
||
});
|
||
|
||
it('fällt auf navigator.language zurück, wenn storage leer', () => {
|
||
expect(detectInitialLocale({
|
||
storage: {
|
||
getItem: () => null,
|
||
setItem: () => {}
|
||
},
|
||
navigatorLanguage: 'en-US',
|
||
supported: ['de', 'en']
|
||
})).toBe('en');
|
||
});
|
||
|
||
it('normalisiert navigator.language (de-DE → de)', () => {
|
||
expect(detectInitialLocale({
|
||
storage: {
|
||
getItem: () => null,
|
||
setItem: () => {}
|
||
},
|
||
navigatorLanguage: 'de-AT',
|
||
supported: ['de', 'en']
|
||
})).toBe('de');
|
||
});
|
||
|
||
it('fällt auf ersten supported eintrag, wenn navigator unbekannt', () => {
|
||
expect(detectInitialLocale({
|
||
storage: {
|
||
getItem: () => null,
|
||
setItem: () => {}
|
||
},
|
||
navigatorLanguage: 'fr-FR',
|
||
supported: ['de', 'en']
|
||
})).toBe('de');
|
||
});
|
||
|
||
it('ignoriert ungültige werte im storage', () => {
|
||
const storage = new Map<string, string>([['locale', 'fr']]);
|
||
expect(detectInitialLocale({
|
||
storage: {
|
||
getItem: (k) => storage.get(k) ?? null,
|
||
setItem: () => {}
|
||
},
|
||
navigatorLanguage: 'en-US',
|
||
supported: ['de', 'en']
|
||
})).toBe('en');
|
||
});
|
||
});
|
||
```
|
||
|
||
- [ ] **Step 2: Test laufen, Erwartung FAIL**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit
|
||
```
|
||
|
||
Expected: FAIL — Modul existiert nicht.
|
||
|
||
- [ ] **Step 3: Store und Detect-Funktion implementieren**
|
||
|
||
Erstelle `app/src/lib/i18n/activeLocale.ts`:
|
||
|
||
```typescript
|
||
import { writable, type Writable } from 'svelte/store';
|
||
|
||
export type SupportedLocale = 'de' | 'en';
|
||
export const SUPPORTED_LOCALES: readonly SupportedLocale[] = ['de', 'en'] as const;
|
||
const STORAGE_KEY = 'locale';
|
||
|
||
interface Storage {
|
||
getItem: (key: string) => string | null;
|
||
setItem: (key: string, value: string) => void;
|
||
}
|
||
|
||
export interface DetectArgs {
|
||
storage: Storage;
|
||
navigatorLanguage: string | undefined;
|
||
supported: readonly string[];
|
||
}
|
||
|
||
export function detectInitialLocale(args: DetectArgs): SupportedLocale {
|
||
const stored = args.storage.getItem(STORAGE_KEY);
|
||
if (stored && (args.supported as readonly string[]).includes(stored)) {
|
||
return stored as SupportedLocale;
|
||
}
|
||
const nav = (args.navigatorLanguage ?? '').slice(0, 2).toLowerCase();
|
||
if ((args.supported as readonly string[]).includes(nav)) {
|
||
return nav as SupportedLocale;
|
||
}
|
||
return args.supported[0] as SupportedLocale;
|
||
}
|
||
|
||
function createActiveLocale(): Writable<SupportedLocale> & { bootstrap: () => void } {
|
||
const store = writable<SupportedLocale>('de');
|
||
let bootstrapped = false;
|
||
|
||
function bootstrap() {
|
||
if (bootstrapped) return;
|
||
bootstrapped = true;
|
||
if (typeof window === 'undefined') return;
|
||
const initial = detectInitialLocale({
|
||
storage: window.localStorage,
|
||
navigatorLanguage: window.navigator.language,
|
||
supported: SUPPORTED_LOCALES
|
||
});
|
||
store.set(initial);
|
||
store.subscribe((v) => {
|
||
try {
|
||
window.localStorage.setItem(STORAGE_KEY, v);
|
||
} catch {
|
||
// private-mode / quota — ignorieren
|
||
}
|
||
});
|
||
}
|
||
|
||
return {
|
||
subscribe: store.subscribe,
|
||
set: store.set,
|
||
update: store.update,
|
||
bootstrap
|
||
};
|
||
}
|
||
|
||
export const activeLocale = createActiveLocale();
|
||
```
|
||
|
||
- [ ] **Step 4: Test laufen, Erwartung PASS**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit
|
||
```
|
||
|
||
Expected: 46 passed (41 pre-existing + 5 neue).
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/lib/i18n/activeLocale.ts app/src/lib/i18n/activeLocale.test.ts && git commit -m "feat(app): activeLocale-store mit persistence + initial-detection"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 3: `i18n/index.ts` — svelte-i18n-Registrierung und Sync
|
||
|
||
**Files:**
|
||
- Create: `app/src/lib/i18n/index.ts`
|
||
|
||
- [ ] **Step 1: Datei erstellen**
|
||
|
||
Erstelle `app/src/lib/i18n/index.ts`:
|
||
|
||
```typescript
|
||
import { addMessages, init, locale, _ } from 'svelte-i18n';
|
||
import de from './messages/de.json';
|
||
import en from './messages/en.json';
|
||
import { activeLocale, SUPPORTED_LOCALES } from './activeLocale';
|
||
|
||
let initialized = false;
|
||
|
||
export function initI18n(): void {
|
||
if (initialized) return;
|
||
initialized = true;
|
||
addMessages('de', de);
|
||
addMessages('en', en);
|
||
init({
|
||
fallbackLocale: 'de',
|
||
initialLocale: 'de'
|
||
});
|
||
activeLocale.bootstrap();
|
||
activeLocale.subscribe((l) => {
|
||
locale.set(l);
|
||
});
|
||
}
|
||
|
||
export { _ as t, locale, activeLocale, SUPPORTED_LOCALES };
|
||
```
|
||
|
||
- [ ] **Step 2: Typecheck**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -5
|
||
```
|
||
|
||
Expected: 0 errors, 0 warnings.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/lib/i18n/index.ts && git commit -m "feat(app): i18n-init registriert messages und syncs mit activeLocale"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 4: `LanguageSwitcher`-Komponente
|
||
|
||
**Files:**
|
||
- Create: `app/src/lib/components/LanguageSwitcher.svelte`
|
||
|
||
- [ ] **Step 1: Komponente erstellen**
|
||
|
||
Erstelle `app/src/lib/components/LanguageSwitcher.svelte`:
|
||
|
||
```svelte
|
||
<script lang="ts">
|
||
import { t, activeLocale, SUPPORTED_LOCALES } from '$lib/i18n';
|
||
import type { SupportedLocale } from '$lib/i18n/activeLocale';
|
||
|
||
let current = $state<SupportedLocale>('de');
|
||
activeLocale.subscribe((v) => (current = v));
|
||
|
||
function select(lang: SupportedLocale) {
|
||
activeLocale.set(lang);
|
||
}
|
||
</script>
|
||
|
||
<div class="switcher" role="group" aria-label={$t('lang.switch_aria')}>
|
||
{#each SUPPORTED_LOCALES as code}
|
||
<button
|
||
type="button"
|
||
class="btn"
|
||
class:active={current === code}
|
||
aria-pressed={current === code}
|
||
onclick={() => select(code)}
|
||
>{code.toUpperCase()}</button>
|
||
{/each}
|
||
</div>
|
||
|
||
<style>
|
||
.switcher {
|
||
display: inline-flex;
|
||
gap: 0.25rem;
|
||
margin-left: 0.5rem;
|
||
}
|
||
.btn {
|
||
background: transparent;
|
||
border: 1px solid var(--border);
|
||
color: var(--muted);
|
||
border-radius: 3px;
|
||
padding: 1px 7px;
|
||
font-size: 0.8rem;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
}
|
||
.btn:hover {
|
||
color: var(--fg);
|
||
}
|
||
.btn.active {
|
||
color: var(--accent);
|
||
border-color: var(--accent);
|
||
}
|
||
</style>
|
||
```
|
||
|
||
- [ ] **Step 2: Typecheck**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -5
|
||
```
|
||
|
||
Expected: 0 errors.
|
||
|
||
- [ ] **Step 3: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/lib/components/LanguageSwitcher.svelte && git commit -m "feat(app): LanguageSwitcher-komponente mit de/en-buttons"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 5: Layout lokalisieren + Switcher einbinden
|
||
|
||
**Files:**
|
||
- Modify: `app/src/routes/+layout.svelte`
|
||
|
||
- [ ] **Step 1: Imports und i18n-Init ergänzen**
|
||
|
||
Öffne `app/src/routes/+layout.svelte`. Im `<script>`-Block, nach `import { bootstrapReadRelays } ...`, ergänze:
|
||
|
||
```typescript
|
||
import { initI18n, t } from '$lib/i18n';
|
||
import LanguageSwitcher from '$lib/components/LanguageSwitcher.svelte';
|
||
|
||
initI18n();
|
||
```
|
||
|
||
- [ ] **Step 2: Brand-ARIA und Nav-Labels umstellen**
|
||
|
||
Ersetze den Header-Block:
|
||
|
||
```svelte
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<a href="/" class="brand" aria-label="Zur Startseite">Jörg Lohrer</a>
|
||
<nav aria-label="Hauptnavigation">
|
||
<a href="/" class:active={isActive('/')}>Home</a>
|
||
<a href="/archiv/" class:active={isActive('/archiv/')}>Archiv</a>
|
||
<a href="/impressum/" class:active={isActive('/impressum/')}>Impressum</a>
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
```
|
||
|
||
durch:
|
||
|
||
```svelte
|
||
<header class="site-header">
|
||
<div class="header-inner">
|
||
<a href="/" class="brand" aria-label={$t('nav.brand_aria')}>Jörg Lohrer</a>
|
||
<nav aria-label={$t('nav.brand_aria')}>
|
||
<a href="/" class:active={isActive('/')}>{$t('nav.home')}</a>
|
||
<a href="/archiv/" class:active={isActive('/archiv/')}>{$t('nav.archive')}</a>
|
||
<a href="/impressum/" class:active={isActive('/impressum/')}>{$t('nav.imprint')}</a>
|
||
<LanguageSwitcher />
|
||
</nav>
|
||
</div>
|
||
</header>
|
||
```
|
||
|
||
- [ ] **Step 3: Impressum-Footer-Link-Label per `$t`**
|
||
|
||
Im Footer-Block, ersetze `<a href="/impressum/">Impressum</a>` durch:
|
||
|
||
```svelte
|
||
<a href="/impressum/">{$t('nav.imprint')}</a>
|
||
```
|
||
|
||
- [ ] **Step 4: Dev-Server starten und im Browser prüfen**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && timeout 15 npm run dev 2>&1 | head -5
|
||
```
|
||
|
||
Falls Vite einen Server ohne Fehler startet, ist die Basis OK.
|
||
|
||
- [ ] **Step 5: Typecheck + Tests**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 Errors, 46 Tests passed.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/routes/+layout.svelte && git commit -m "feat(app): layout-header lokalisiert + sprach-switcher eingebunden"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 6: Startseite (`+page.svelte`) lokalisieren + Listen-Filter
|
||
|
||
**Files:**
|
||
- Modify: `app/src/routes/+page.svelte`
|
||
|
||
- [ ] **Step 1: Imports ergänzen**
|
||
|
||
Öffne `app/src/routes/+page.svelte`. Im `<script>`-Block, ergänze nach den bestehenden Imports:
|
||
|
||
```typescript
|
||
import { t, activeLocale } from '$lib/i18n';
|
||
import { get } from 'svelte/store';
|
||
```
|
||
|
||
- [ ] **Step 2: Filter-Hilfsfunktion und `latest` anpassen**
|
||
|
||
Direkt vor `const latest = $derived(posts.slice(0, LATEST_COUNT));` die bestehende Zeile ersetzen durch:
|
||
|
||
```typescript
|
||
let currentLocale = $state('de');
|
||
activeLocale.subscribe((v) => (currentLocale = v));
|
||
|
||
const filtered = $derived.by(() =>
|
||
posts.filter((p) => {
|
||
const l = p.tags.find((t) => t[0] === 'l')?.[1];
|
||
// Ohne l-tag: als 'de' behandeln, damit alte Posts sichtbar bleiben
|
||
return (l ?? 'de') === currentLocale;
|
||
})
|
||
);
|
||
const latest = $derived(filtered.slice(0, LATEST_COUNT));
|
||
const hasMore = $derived(filtered.length > LATEST_COUNT);
|
||
```
|
||
|
||
(Die bestehende `hasMore`-Zeile weiter unten entfernen, sonst doppelt.)
|
||
|
||
- [ ] **Step 3: Fehler- und Titel-Strings per `$t`**
|
||
|
||
Ersetze in `onMount`:
|
||
|
||
```typescript
|
||
if (list.length === 0) {
|
||
error = 'Keine Posts gefunden auf den abgefragten Relays.';
|
||
}
|
||
```
|
||
durch:
|
||
```typescript
|
||
if (list.length === 0) {
|
||
error = get(t)('home.empty');
|
||
}
|
||
```
|
||
|
||
und:
|
||
```typescript
|
||
error = e instanceof Error ? e.message : 'Unbekannter Fehler';
|
||
```
|
||
durch:
|
||
```typescript
|
||
error = e instanceof Error ? e.message : get(t)('post.unknown_error');
|
||
```
|
||
|
||
- [ ] **Step 4: Template-Strings umstellen**
|
||
|
||
Ersetze im Template:
|
||
|
||
```svelte
|
||
<p class="hero-greeting">
|
||
Hi <span aria-hidden="true">🖖</span> Willkommen auf meinem Blog
|
||
<span aria-hidden="true">🤗</span>
|
||
</p>
|
||
```
|
||
|
||
durch:
|
||
|
||
```svelte
|
||
<p class="hero-greeting">{$t('home.greeting')}</p>
|
||
```
|
||
|
||
Ersetze `<h2 class="section-title">Neueste Beiträge</h2>` durch:
|
||
|
||
```svelte
|
||
<h2 class="section-title">{$t('home.latest')}</h2>
|
||
```
|
||
|
||
Ersetze den „Alle Beiträge im Archiv →"-Link durch:
|
||
|
||
```svelte
|
||
<a href="/archiv/" class="more-link">{$t('home.more_archive')}</a>
|
||
```
|
||
|
||
- [ ] **Step 5: Typecheck + Tests**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 Errors, 46 passed.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/routes/+page.svelte && git commit -m "feat(app): startseite lokalisiert + liste nach aktivem locale gefiltert"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 7: Archiv-Seite lokalisieren + Listen-Filter
|
||
|
||
**Files:**
|
||
- Modify: `app/src/routes/archiv/+page.svelte`
|
||
|
||
- [ ] **Step 1: Imports ergänzen**
|
||
|
||
Im `<script>`-Block nach den existierenden Imports:
|
||
|
||
```typescript
|
||
import { t, activeLocale } from '$lib/i18n';
|
||
import { get } from 'svelte/store';
|
||
```
|
||
|
||
- [ ] **Step 2: Filter einbauen und `groupsByYear` daran knüpfen**
|
||
|
||
Direkt vor `const groupsByYear = ...`:
|
||
|
||
```typescript
|
||
let currentLocale = $state('de');
|
||
activeLocale.subscribe((v) => (currentLocale = v));
|
||
|
||
const filtered = $derived.by(() =>
|
||
posts.filter((p) => {
|
||
const l = p.tags.find((t) => t[0] === 'l')?.[1];
|
||
return (l ?? 'de') === currentLocale;
|
||
})
|
||
);
|
||
```
|
||
|
||
Ersetze in `groupsByYear` das `for (const p of posts)` durch `for (const p of filtered)`.
|
||
|
||
- [ ] **Step 3: Fehler-Strings per `$t`**
|
||
|
||
Ersetze in `onMount`:
|
||
```typescript
|
||
error = 'Keine Posts gefunden auf den abgefragten Relays.';
|
||
```
|
||
→
|
||
```typescript
|
||
error = get(t)('home.empty');
|
||
```
|
||
|
||
und:
|
||
```typescript
|
||
error = e instanceof Error ? e.message : 'Unbekannter Fehler';
|
||
```
|
||
→
|
||
```typescript
|
||
error = e instanceof Error ? e.message : get(t)('post.unknown_error');
|
||
```
|
||
|
||
- [ ] **Step 4: Template-Strings umstellen**
|
||
|
||
Ersetze:
|
||
|
||
```svelte
|
||
<svelte:head>
|
||
<title>Archiv – Jörg Lohrer</title>
|
||
</svelte:head>
|
||
|
||
<h1 class="title">Archiv</h1>
|
||
<p class="meta">Alle Beiträge, nach Jahr gruppiert.</p>
|
||
```
|
||
|
||
durch:
|
||
|
||
```svelte
|
||
<svelte:head>
|
||
<title>{$t('archive.doc_title')}</title>
|
||
</svelte:head>
|
||
|
||
<h1 class="title">{$t('archive.title')}</h1>
|
||
<p class="meta">{$t('archive.subtitle')}</p>
|
||
```
|
||
|
||
- [ ] **Step 5: Typecheck + Tests**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 Errors, 46 passed.
|
||
|
||
- [ ] **Step 6: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/routes/archiv/+page.svelte && git commit -m "feat(app): archiv-seite lokalisiert + nach locale gefiltert"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 8: Post-Route + Komponenten lokalisieren
|
||
|
||
**Files:**
|
||
- Modify: `app/src/routes/[...slug]/+page.svelte`
|
||
- Modify: `app/src/lib/components/LanguageAvailability.svelte`
|
||
- Modify: `app/src/lib/components/PostView.svelte`
|
||
|
||
- [ ] **Step 1: Post-Route**
|
||
|
||
Öffne `app/src/routes/[...slug]/+page.svelte`. Im `<script>`-Block, nach den bestehenden Imports:
|
||
|
||
```typescript
|
||
import { t } from '$lib/i18n';
|
||
import { get } from 'svelte/store';
|
||
```
|
||
|
||
Ersetze im `$effect`-Block:
|
||
```typescript
|
||
error = `Post "${currentDtag}" nicht gefunden.`;
|
||
```
|
||
→
|
||
```typescript
|
||
error = get(t)('post.not_found', { values: { slug: currentDtag } });
|
||
```
|
||
|
||
Ersetze:
|
||
```typescript
|
||
error = e instanceof Error ? e.message : 'Unbekannter Fehler';
|
||
```
|
||
→
|
||
```typescript
|
||
error = e instanceof Error ? e.message : get(t)('post.unknown_error');
|
||
```
|
||
|
||
Ersetze im Template:
|
||
```svelte
|
||
<nav class="breadcrumb"><a href="/">← Zurück zur Übersicht</a></nav>
|
||
```
|
||
→
|
||
```svelte
|
||
<nav class="breadcrumb"><a href="/">{$t('post.back_to_overview')}</a></nav>
|
||
```
|
||
|
||
- [ ] **Step 2: LanguageAvailability**
|
||
|
||
Öffne `app/src/lib/components/LanguageAvailability.svelte`. Import ergänzen:
|
||
|
||
```typescript
|
||
import { t } from '$lib/i18n';
|
||
```
|
||
|
||
Ersetze im Template:
|
||
```svelte
|
||
Auch verfügbar in:
|
||
```
|
||
→
|
||
```svelte
|
||
{$t('post.also_available_in')}
|
||
```
|
||
|
||
- [ ] **Step 3: PostView — „ohne Titel" + Datums-Locale**
|
||
|
||
Öffne `app/src/lib/components/PostView.svelte`. Import ergänzen:
|
||
|
||
```typescript
|
||
import { t, activeLocale } from '$lib/i18n';
|
||
```
|
||
|
||
Ersetze:
|
||
```typescript
|
||
const title = $derived(tagValue(event, 'title') || '(ohne Titel)');
|
||
```
|
||
→
|
||
```typescript
|
||
let currentLocale = $state('de');
|
||
activeLocale.subscribe((v) => (currentLocale = v));
|
||
|
||
const title = $derived(tagValue(event, 'title') || $t('post.untitled'));
|
||
```
|
||
|
||
Und den Datums-Block:
|
||
```typescript
|
||
const date = $derived(
|
||
new Date(publishedAt * 1000).toLocaleDateString('de-DE', {
|
||
year: 'numeric',
|
||
month: 'long',
|
||
day: 'numeric'
|
||
})
|
||
);
|
||
```
|
||
→
|
||
```typescript
|
||
const date = $derived(
|
||
new Date(publishedAt * 1000).toLocaleDateString(
|
||
currentLocale === 'en' ? 'en-US' : 'de-DE',
|
||
{ year: 'numeric', month: 'long', day: 'numeric' }
|
||
)
|
||
);
|
||
```
|
||
|
||
Und im Template:
|
||
```svelte
|
||
Veröffentlicht am {date}
|
||
```
|
||
→
|
||
```svelte
|
||
{$t('post.published_on', { values: { date } })}
|
||
```
|
||
|
||
- [ ] **Step 4: Typecheck + Tests**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 Errors, 46 passed.
|
||
|
||
- [ ] **Step 5: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add 'app/src/routes/[...slug]/+page.svelte' app/src/lib/components/LanguageAvailability.svelte app/src/lib/components/PostView.svelte && git commit -m "feat(app): post-route + komponenten lokalisiert (titel, datum, hinweise)"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 9: Impressum lokalisieren
|
||
|
||
**Files:**
|
||
- Modify: `app/src/routes/impressum/+page.svelte`
|
||
|
||
Impressum hat einen Mix aus Template-Text und Rechts-Text (Postanschrift), der nicht übersetzt werden sollte. Wir lokalisieren den Seitentitel und ggf. Überschriften — der juristische Kern (Anbieterkennzeichnung, Haftungshinweise) bleibt auf Deutsch.
|
||
|
||
- [ ] **Step 1: Datei öffnen und sichten**
|
||
|
||
```bash
|
||
cat /Users/joerglohrer/repositories/joerglohrerde/app/src/routes/impressum/+page.svelte
|
||
```
|
||
|
||
- [ ] **Step 2: Minimal-Anpassung**
|
||
|
||
Ergänze im `<script>`-Block (oder erstelle ihn, falls er fehlt):
|
||
|
||
```svelte
|
||
<script lang="ts">
|
||
import { t } from '$lib/i18n';
|
||
</script>
|
||
```
|
||
|
||
Ersetze `<svelte:head><title>Impressum – Jörg Lohrer</title></svelte:head>` durch:
|
||
|
||
```svelte
|
||
<svelte:head>
|
||
<title>{$t('imprint.doc_title')}</title>
|
||
</svelte:head>
|
||
```
|
||
|
||
Der restliche Inhalt bleibt auf Deutsch — juristische Anbieterkennzeichnung nach deutschem Recht; eine englische Version würde neue rechtliche Prüfung erfordern (Out of Scope).
|
||
|
||
- [ ] **Step 3: Typecheck**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 Errors.
|
||
|
||
- [ ] **Step 4: Commit**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git add app/src/routes/impressum/+page.svelte && git commit -m "feat(app): impressum-seitentitel lokalisiert (inhalt bleibt DE)"
|
||
```
|
||
|
||
---
|
||
|
||
## Task 10: Ende-zu-Ende-Test im Browser
|
||
|
||
**Files:** — (reine Verifikation)
|
||
|
||
- [ ] **Step 1: Dev-Server**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run dev
|
||
```
|
||
|
||
- [ ] **Step 2: Browser-Tests**
|
||
|
||
Öffne `http://localhost:5173/`. Prüfe:
|
||
|
||
1. **Standard-Locale:** Erstes Öffnen — Sprache ist `de` (wenn Browser deutsch) oder `en` (wenn englisch). Titel, Menü, Greeting in dieser Sprache.
|
||
2. **Switcher klicken:** Klick auf „EN" im Header-Switcher — Menü, Greeting, „Latest posts", Archiv-Link-Text wechseln. URL ändert sich **nicht**.
|
||
3. **Liste gefiltert:** Startseite zeigt nur englische Posts (Bible Selfies), Archiv nur englische. Klick auf „DE" — deutsche Posts erscheinen.
|
||
4. **Post-Detail:** Klick auf einen deutschen Post (Liste auf DE) — Datumsformat deutsch („17. April 2025"). Klick auf „Auch verfügbar in: English" auf `bibel-selfies` — englische Version erscheint, Datumsformat englisch („April 17, 2025"), Breadcrumb „← Back to overview".
|
||
5. **Persistence:** Browser-Seite reload — aktive Sprache bleibt (aus localStorage).
|
||
6. **404-Case:** Öffne `/nicht-da/` — Fehlermeldung im aktiven Locale.
|
||
|
||
Stoppe Dev-Server.
|
||
|
||
- [ ] **Step 3: Kein Commit nötig.**
|
||
|
||
---
|
||
|
||
## Task 11: Gesamt-Testlauf + Deploy
|
||
|
||
**Files:** — (Verifikation + Deploy)
|
||
|
||
- [ ] **Step 1: Vitest**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run test:unit
|
||
```
|
||
|
||
Expected: 46 passed.
|
||
|
||
- [ ] **Step 2: Svelte-check**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npx svelte-check --tsconfig tsconfig.json 2>&1 | tail -3
|
||
```
|
||
|
||
Expected: 0 errors, 0 warnings.
|
||
|
||
- [ ] **Step 3: Build**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde/app && npm run build 2>&1 | tail -10
|
||
```
|
||
|
||
Expected: Build erfolgreich.
|
||
|
||
- [ ] **Step 4: Push und Deploy auf prod**
|
||
|
||
```bash
|
||
cd /Users/joerglohrer/repositories/joerglohrerde && git push
|
||
DEPLOY_TARGET=prod /Users/joerglohrer/repositories/joerglohrerde/scripts/deploy-svelte.sh 2>&1 | tail -10
|
||
```
|
||
|
||
**WICHTIG:** `DEPLOY_TARGET=prod` explizit setzen. Der Skript-Default zielt auf `svelte.joerg-lohrer.de` (historischer Cutover-Stand). Prod-Cutover läuft über STAGING_FTP_*-Webroot mit SITE_URL `https://joerg-lohrer.de` — das ist das `prod`-Target.
|
||
|
||
Expected: Upload fertig, Live-Check HTTP 200 mit aktuellem `last-modified`.
|
||
|
||
- [ ] **Step 5: Live-Verifikation**
|
||
|
||
Öffne `https://joerg-lohrer.de/` und wiederhole Task 10 Step 2 auf der Live-Seite.
|
||
|
||
- [ ] **Step 6: Kein Commit — Abschluss.**
|
||
|
||
---
|
||
|
||
## Fertig
|
||
|
||
Nach Task 11:
|
||
- `svelte-i18n` aktiv, UI-Chrome in `de`/`en`
|
||
- Locale-Store mit Persistence + Browser-Locale-Default
|
||
- `LanguageSwitcher` im Header, zwei Buttons
|
||
- Listen-Seiten (Startseite + Archiv) nur Posts des aktiven Locales
|
||
- PostView zeigt Datum im aktiven Locale, Hinweise übersetzt
|
||
- Impressum-Titel übersetzt, juristischer Inhalt bewusst DE
|
||
- Live-Deploy auf prod
|
||
|
||
**Damit ist die Spec `2026-04-21-multilingual-posts-design.md` vollständig umgesetzt — über Plan 1 (Publish-Pipeline), Plan 2 (SPA-Translation-Links) und Plan 3 (UI-i18n + Listen-Filter).**
|