@intlayer/docs 8.11.2 → 8.11.3

package/docs/de/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Wie Sie eine Tanstack Start App übersetzen in 2026
-description: Erfahren Sie, wie Sie Internationalisierung (i18n) zu Ihrer Tanstack Start-Anwendung mit Intlayer hinzufügen. Folgen Sie dieser umfassenden Anleitung, um Ihre App mehrsprachig mit lokalisierungsbewusstem Routing zu machen.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Vollständiger Leitfaden zur Übersetzung TanStack Start
+description: Beste Lösung für Bundle-Größe, SEO, Performance & Wartbarkeit. Machen Sie Ihre TanStack Start App 2026 mehrsprachig, LLM-Übersetzung, Agent Skills & MCP.
 keywords:
   - Internationalisierung
   - Dokumentation
@@ -55,17 +55,47 @@ history:
 
 Diese Anleitung zeigt, wie Sie **Intlayer** für eine nahtlose Internationalisierung in Tanstack Start-Projekten mit lokalisierungsbewusstem Routing, TypeScript-Unterstützung und modernen Entwicklungspraktiken integrieren.
 
-## Was ist Intlayer?
+## Warum Intlayer gegenüber Alternativen?
 
-**Intlayer** ist eine innovative Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
+Im Vergleich zu Hauptlösungen wie „react-i18next“ oder „use-intl“ oder „paraglide“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:
 
-Mit Intlayer können Sie:
+<AccordionGroup>
+<Accordion header="Vollständige TanStack Start-Abdeckung">
 
-- **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
-- **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
-- **TypeScript-Unterstützung sicherstellen** mit automatisch generierten Typen, die die Autovervollständigung und Fehlererkennung verbessern.
-- **Von erweiterten Funktionen profitieren**, wie dynamischer Locale-Erkennung und -Umschaltung.
-- **Lokalisierungsbewusstes Routing aktivieren** mit dem dateibasierten Routing-System von Tanstack Start.
+Intlayer ist vollständig für TanStack Start optimiert und bietet **mehrsprachiges Routing**, **Cookie-Verwaltung**, **Sitemap-Generierung**, **dynamisches Laden von Inhalten** und alle Funktionen, die Sie zur Skalierung Ihrer Internationalisierungsbemühungen (i18n) benötigen.
+
+</Accordion>
+<Accordion header="Bundle-Größe">
+
+Anstatt riesige JSON-Dateien in Ihre Seiten zu laden, laden Sie nur den erforderlichen Inhalt. Intlayer hilft **Ihre Bundle- und Seitengröße um bis zu 50 % zu reduzieren**.
+
+</Accordion>
+<Accordion header="Wartbarkeit">
+
+Durch die Festlegung des Inhaltsbereichs Ihrer Anwendung wird die Wartung für umfangreiche Anwendungen erleichtert. Sie können einen einzelnen Feature-Ordner duplizieren oder löschen, ohne die mentale Belastung durch die Überprüfung Ihrer gesamten Inhaltscodebasis auf sich nehmen zu müssen. Darüber hinaus ist Intlayer **vollständig typisiert (fully typed)**, um die Genauigkeit Ihrer Inhalte sicherzustellen.
+
+</Accordion>
+<Accordion header="KI-Agent">
+
+Durch die gemeinsame Platzierung von Inhalten **reduziert sich der von Large Language Models (LLMs) benötigte Kontext**. Intlayer verfügt außerdem über eine Reihe von Tools, wie zum Beispiel eine **CLI** zum Testen auf fehlende Übersetzungen,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** und **[agent Fähigkeiten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, um die Entwicklererfahrung (DX) für KI-Agenten noch reibungsloser zu gestalten.
+
+</Accordion>
+<Accordion header="Automatisierung">
+
+Nutzen Sie die Automatisierung, um Ihre CI/CD-Pipeline mit dem LLM Ihrer Wahl auf Kosten Ihres KI-Anbieters zu übersetzen. Intlayer bietet außerdem einen **Compiler** zur Automatisierung der Inhaltsextraktion sowie eine [Webplattform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) zur Unterstützung der **Übersetzung im Hintergrund**.
+
+</Accordion>
+<Accordion header="Leistung">
+
+Das Verbinden großer JSON-Dateien mit Komponenten kann zu Leistungs- und Reaktivitätsproblemen führen. Intlayer optimiert das Laden Ihrer Inhalte zur Erstellungszeit.
+
+</Accordion>
+<Accordion header="Skalierung mit Nicht-Entwickler">
+
+Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** und ein **[vollständiges CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, um Ihnen zu helfen Verwalten Sie Ihre mehrsprachigen Inhalte in **Echtzeit** und gestalten Sie die Zusammenarbeit mit Übersetzern, Textern und anderen Teammitgliedern reibungslos. Inhalte können lokal und/oder remote gespeichert werden.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -103,11 +133,15 @@ Mit Intlayer können Sie:
 
 Siehe [Anwendungsvorlage](https://github.com/aymericzip/intlayer-tanstack-start-template) auf GitHub.
 
-### Schritt 1: Projekt erstellen
+<Steps>
+
+<Step number={1} title="Projekt erstellen">
 
 Beginnen Sie mit der Erstellung eines neuen TanStack Start-Projekts, indem Sie der Anleitung [Neues Projekt starten](https://tanstack.com/start/latest/docs/framework/react/quick-start) auf der TanStack Start-Website folgen.
 
-### Schritt 2: Intlayer-Pakete installieren
+</Step>
+
+<Step number={2} title="Intlayer-Pakete installieren">
 
 Installieren Sie die erforderlichen Pakete mit Ihrem bevorzugten Paketmanager:
 
@@ -145,7 +179,9 @@ bun x intlayer init
 - **vite-intlayer**
   Enthält das Vite-Plugin zur Integration von Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
 
-### Schritt 3: Konfiguration Ihres Projekts
+</Step>
+
+<Step number={3} title="Konfiguration Ihres Projekts">
 
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
 
@@ -166,7 +202,9 @@ export default config;
 
 > Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
-### Schritt 4: Intlayer in Ihre Vite-Konfiguration integrieren
+</Step>
+
+<Step number={4} title="Intlayer in Ihre Vite-Konfiguration integrieren">
 
 Fügen Sie das Intlayer-Plugin zu Ihrer Konfiguration hinzu:
 
@@ -196,7 +234,9 @@ export default config;
 
 > Das `intlayer()` Vite-Plugin wird verwendet, um Intlayer mit Vite zu integrieren. Es stellt die Erstellung von Inhaltsdeklarationsdateien sicher und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Darüber hinaus bietet es Aliase zur Leistungsoptimierung.
 
-### Schritt 5: Root-Layout erstellen
+</Step>
+
+<Step number={5} title="Root-Layout erstellen">
 
 Konfigurieren Sie Ihr Root-Layout zur Unterstützung der Internationalisierung, indem Sie `useParams` verwenden, um die aktuelle Locale zu erkennen und die Attribute `lang` und `dir` für das `html`-Tag festzulegen.
 
@@ -256,7 +296,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Schritt 6: Locale-Layout erstellen
+</Step>
+
+<Step number={6} title="Locale-Layout erstellen">
 
 Erstellen Sie ein Layout, das das Locale-Präfix verarbeitet und eine Validierung durchführt.
 
@@ -288,7 +330,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Für den Modus `'prefix-all'` sollten Sie stattdessen den Platzhalter `$locale` verwenden.
 > Für den Modus `'no-prefix'` oder `'search-params'` können Sie den Platzhalter ganz entfernen.
 
-### Schritt 7: Inhalte deklarieren
+</Step>
+
+<Step number={7} title="Inhalte deklarieren">
 
 Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
 
@@ -334,7 +378,9 @@ export default appContent;
 
 > Weitere Einzelheiten finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md).
 
-### Schritt 7: Lokalisierungsbewusste Komponenten und Hooks erstellen
+</Step>
+
+<Step number={7} title="Lokalisierungsbewusste Komponenten und Hooks erstellen">
 
 Erstellen Sie eine `LocalizedLink`-Komponente für lokalisierungsbewusste Navigation:
 
@@ -438,7 +484,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Schritt 8: Intlayer in Ihren Seiten nutzen
+</Step>
+
+<Step number={8} title="Intlayer in Ihren Seiten nutzen">
 
 Greifen Sie in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zu:
 
@@ -486,7 +534,9 @@ function RouteComponent() {
 
 > Um mehr über den `useIntlayer`-Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useIntlayer.md).
 
-### Schritt 9: Eine Locale-Switcher-Komponente erstellen
+</Step>
+
+<Step number={9} title="Eine Locale-Switcher-Komponente erstellen">
 
 Erstellen Sie eine Komponente, mit der Benutzer die Sprache wechseln können:
 
@@ -547,7 +597,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Um mehr über den `useLocale`-Hook zu erfahren, lesen Sie die [Dokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/packages/react-intlayer/useLocale.md).
 
-### Schritt 10: HTML-Attribute-Verwaltung
+</Step>
+
+<Step number={10} title="HTML-Attribute-Verwaltung">
 
 Wie in Schritt 5 gezeigt, können Sie die Attribute `lang` und `dir` des `html`-Tags mit `useParams` in Ihrer Root-Komponente verwalten. Dies stellt sicher, dass die richtigen Attribute auf dem Server und dem Client gesetzt werden.
 
@@ -566,7 +618,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Schritt 11: Middleware hinzufügen (Optional)
+</Step>
+
+<Step number={11} title="Middleware hinzufügen">
 
 Sie können auch den `intlayerProxy` verwenden, um serverseitiges Routing zu Ihrer Anwendung hinzuzufügen. Dieses Plugin erkennt automatisch die aktuelle Locale basierend auf der URL und setzt das entsprechende Locale-Cookie. Wenn keine Locale angegeben ist, bestimmt das Plugin die am besten geeignete Locale basierend auf den Spracheinstellungen des Browsers des Benutzers. Wenn keine Locale erkannt wird, wird auf die Standard-Locale weitergeleitet.
 
@@ -597,7 +651,9 @@ export default defineConfig({
 
 ---
 
-### Schritt 12: Metadaten internationalisieren (Optional)
+</Step>
+
+<Step number={12} title="Metadaten internationalisieren">
 
 Sie können auch den `getIntlayer`-Hook verwenden, um in Ihrer gesamten Anwendung auf Ihre Inhaltswörterbücher zuzugreifen:
 
@@ -644,7 +700,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Schritt 13: Locale in Ihren Serveraktionen abrufen (Optional)
+</Step>
+
+<Step number={13} title="Locale in Ihren Serveraktionen abrufen">
 
 Vielleicht möchten Sie von Ihren Serveraktionen oder API-Endpunkten aus auf die aktuelle Locale zugreifen.
 Dies können Sie mit dem Helfer `getLocale` von `intlayer` tun.
@@ -681,7 +739,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Schritt 14: Nicht gefundene Seiten verwalten (Optional)
+</Step>
+
+<Step number={14} title="Nicht gefundene Seiten verwalten">
 
 Wenn ein Benutzer eine nicht existierende Seite besucht, können Sie eine benutzerdefinierte 404-Seite anzeigen. Das Locale-Präfix kann beeinflussen, wie die 404-Seite ausgelöst wird.
 
@@ -757,7 +817,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### (Optional) Schritt 15 : Inhalt Ihrer Komponenten extrahieren
+</Step>
+
+<Step number={15} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
 
 Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.
 
@@ -855,7 +917,9 @@ bun run build # Or bun run dev
 
 ---
 
-### Schritt 16: Sitemap generieren (Optional)
+</Step>
+
+<Step number={16} title="Sitemap generieren">
 
 Intlayer wird mit einem integrierten Sitemap-Generator geliefert, mit dem Sie ganz einfach eine Sitemap für Ihre Anwendung erstellen können. Er berücksichtigt lokalisierte Routen und fügt die erforderlichen Metadaten für Suchmaschinen hinzu.
 
@@ -930,7 +994,9 @@ export const Route = createFileRoute("/sitemap.xml")({
 
 ---
 
-### Schritt 17: TypeScript konfigurieren (Optional)
+</Step>
+
+<Step number={17} title="TypeScript konfigurieren">
 
 Intlayer verwendet Module Augmentation, um die Vorteile von TypeScript zu nutzen und Ihre Codebasis robuster zu machen.
 
@@ -961,6 +1027,10 @@ Fügen Sie dazu die folgenden Anweisungen zu Ihrer `.gitignore`-Datei hinzu:
 
 ---
 
+</Step>
+
+</Steps>
+
 ## VS Code Erweiterung
 
 Um Ihre Entwicklungserfahrung mit Intlayer zu verbessern, können Sie die offizielle **Intlayer VS Code Erweiterung** installieren.

package/docs/de/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - So übersetzen Sie eine Vanilla JS App im Jahr 2026
-description: Entdecken Sie, wie Sie Ihre Vanilla JS Website mehrsprachig machen. Folgen Sie der Dokumentation zur Internationalisierung (i18n) und Übersetzung.
+updatedAt: 2026-05-31
+title: Vanilla JS i18n - Vollständiger Leitfaden zur Übersetzung Vanilla JS
+description: Beste Lösung für Bundle-Größe, SEO, Performance & Wartbarkeit. Machen Sie Ihre Vanilla JS Website 2026 mehrsprachig, LLM-Übersetzung, Agent Skills & MCP.
 keywords:
   - Internationalisierung
   - Dokumentation
@@ -57,28 +57,55 @@ history:
 
 <TOC/>
 
-## Was ist Intlayer?
+## Warum Intlayer gegenüber Alternativen?
 
-**Intlayer** ist eine innovative Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
+Im Vergleich zu Hauptlösungen wie „i18next“ oder „i18n.js“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:
 
-Mit Intlayer können Sie:
+<AccordionGroup>
+<Accordion header="Vollständige Vanilla JS-Abdeckung">
 
-- **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
-- **Metadaten, Routen und Inhalte dynamisch lokalisieren.**
-- **TypeScript-Unterstützung sicherstellen** mit automatisch generierten Typen, was die Autovervollständigung und Fehlererkennung verbessert.
-- **Von erweiterten Funktionen profitieren**, wie dynamischer Spracherkennung und -umschaltung.
+Intlayer ist für die perfekte Zusammenarbeit mit Vanilla JavaScript optimiert, indem es **Framework-unabhängiges Content-Management**, **TypeScript-Unterstützung** und alle für die Skalierung der Internationalisierung (i18n) erforderlichen Funktionen bietet.
 
-Dieser Leitfaden zeigt, wie man Intlayer in einer Vanilla-JavaScript-Anwendung verwendet, **ohne einen Paketmanager oder Bundler** (wie Vite, Webpack usw.) zu nutzen.
+</Accordion>
+<Accordion header="Bundle-Größe">
 
-Wenn Ihre Anwendung einen Bundler (wie Vite) verwendet, empfehlen wir stattdessen dem [Vite + Vanilla JS Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+vanilla.md) zu folgen.
+Anstatt riesige JSON-Dateien in Ihre Seiten zu laden, laden Sie nur den erforderlichen Inhalt. Intlayer hilft **Ihre Bundle- und Seitengröße um bis zu 50 % zu reduzieren**.
 
-Mithilfe des Standalone-Bundles können Sie Intlayer direkt in Ihre HTML-Dateien über eine einzige JavaScript-Datei importieren, was es perfekt für Legacy-Projekte oder einfache statische Websites macht.
+</Accordion>
+<Accordion header="Wartbarkeit">
+
+Durch die Festlegung des Inhaltsbereichs Ihrer Anwendung wird die Wartung für umfangreiche Anwendungen erleichtert. Sie können einen einzelnen Feature-Ordner duplizieren oder löschen, ohne die mentale Belastung durch die Überprüfung Ihrer gesamten Inhaltscodebasis auf sich nehmen zu müssen. Darüber hinaus ist Intlayer **vollständig typisiert (fully typed)**, um die Genauigkeit Ihrer Inhalte sicherzustellen.
+
+</Accordion>
+<Accordion header="KI-Agent">
+
+Durch die gemeinsame Platzierung von Inhalten **reduziert sich der von Large Language Models (LLMs) benötigte Kontext**. Intlayer verfügt außerdem über eine Reihe von Tools, wie zum Beispiel eine **CLI** zum Testen auf fehlende Übersetzungen,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** und **[agent Fähigkeiten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, um die Entwicklererfahrung (DX) für KI-Agenten noch reibungsloser zu gestalten.
+
+</Accordion>
+<Accordion header="Automatisierung">
+
+Nutzen Sie die Automatisierung, um Ihre CI/CD-Pipeline mit dem LLM Ihrer Wahl auf Kosten Ihres KI-Anbieters zu übersetzen. Intlayer bietet außerdem einen **Compiler** zur Automatisierung der Inhaltsextraktion sowie eine [Webplattform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) zur Unterstützung der **Übersetzung im Hintergrund**.
+
+</Accordion>
+<Accordion header="Leistung">
+
+Das Verbinden großer JSON-Dateien mit Komponenten kann zu Leistungs- und Reaktivitätsproblemen führen. Intlayer optimiert das Laden Ihrer Inhalte zur Erstellungszeit.
+
+</Accordion>
+<Accordion header="Skalierung mit Nicht-Entwickler">
+
+Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** und ein **[vollständiges CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, um Ihnen zu helfen Verwalten Sie Ihre mehrsprachigen Inhalte in **Echtzeit** und gestalten Sie die Zusammenarbeit mit Übersetzern, Textern und anderen Teammitgliedern reibungslos. Inhalte können lokal und/oder remote gespeichert werden.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vanilla JS Anwendung
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die erforderlichen Pakete mit npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > Der Bundling-Export des CLI-Befehls `intlayer standalone` erzeugt ein optimiertes Build durch Tree-Shaking ungenutzter Pakete, Locales und nicht essenzieller Logik (wie Weiterleitungen oder Präfixe), die spezifisch für Ihre Konfiguration sind.
 
-### Schritt 2: Konfiguration Ihres Projekts
+</Step>
+
+<Step number={2} title="Konfiguration Ihres Projekts">
 
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
 
@@ -162,7 +191,9 @@ export default config;
 
 > Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Speicherort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
-### Schritt 3: Das Bundle in Ihr HTML importieren
+</Step>
+
+<Step number={3} title="Das Bundle in Ihr HTML importieren">
 
 Sobald Sie das `intlayer.js`-Bundle erstellt haben, können Sie es in Ihre HTML-Datei importieren:
 
@@ -186,7 +217,9 @@ Sobald Sie das `intlayer.js`-Bundle erstellt haben, können Sie es in Ihre HTML-
 
 Das Bundle stellt `Intlayer` und `VanillaIntlayer` als globale Objekte auf `window` zur Verfügung.
 
-### Schritt 4: Intlayer in Ihrem Einstiegspunkt initialisieren
+</Step>
+
+<Step number={4} title="Intlayer in Ihrem Einstiegspunkt initialisieren">
 
 Rufen Sie in Ihrer `src/main.js` die Funktion `installIntlayer()` auf, **bevor** irgendwelche Inhalte gerendert werden, damit das globale Sprach-Singleton bereit ist.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Schritt 5: Deklarieren Sie Ihre Inhalte
+</Step>
+
+<Step number={5} title="Deklarieren Sie Ihre Inhalte">
 
 Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
 
@@ -284,7 +319,9 @@ export default appContent;
 >
 > Weitere Einzelheiten finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md).
 
-### Schritt 6: Intlayer in Ihrem JavaScript verwenden
+</Step>
+
+<Step number={6} title="Intlayer in Ihrem JavaScript verwenden">
 
 Das Objekt `window.VanillaIntlayer` bietet API-Hilfsfunktionen: `useIntlayer(key, locale?)` gibt den übersetzten Inhalt für einen bestimmten Schlüssel zurück.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Optional) Schritt 7: Die Sprache Ihrer Inhalte ändern
+</Step>
+
+<Step number={7} title="Die Sprache Ihrer Inhalte ändern" isOptional={true}>
 
 Um die Sprache Ihrer Inhalte zu ändern, verwenden Sie die Funktion `setLocale`, die von `useLocale` bereitgestellt wird.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Optional) Schritt 8: HTML Sprach- und Richtungsattribute umschalten
+</Step>
+
+<Step number={8} title="HTML Sprach- und Richtungsattribute umschalten" isOptional={true}>
 
 Aktualisieren Sie die Attribute `lang` und `dir` des `<html>`-Tags entsprechend der aktuellen Sprache für Barrierefreiheit und SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Optional) Schritt 9: Wörterbücher pro Sprache nachladen (Lazy-load)
+</Step>
+
+<Step number={9} title="Wörterbücher pro Sprache nachladen" isOptional={true}>
 
 Wenn Sie Wörterbücher pro Sprache nachladen möchten, können Sie `useDictionaryDynamic` verwenden. Dies ist nützlich, wenn Sie nicht alle Übersetzungen in der ursprünglichen Datei `intlayer.js` bündeln möchten.
 
@@ -427,3 +470,7 @@ Weitere Informationen zur Verwendung der Erweiterung finden Sie in der [Dokument
 ### Weiterführende Informationen
 
 Um tiefer einzusteigen, können Sie den [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mit dem [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) auslagern.
+
+</Step>
+
+</Steps>

package/docs/de/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: Vite + Lit i18n - Wie man eine Lit-App im Jahr 2026 übersetzt
-description: Entdecken Sie, wie Sie Ihre Vite- und Lit-Website mehrsprachig machen. Folgen Sie der Dokumentation, um sie zu internationalisieren (i18n) und zu übersetzen.
+updatedAt: 2026-05-31
+title: Vite + Lit i18n - Vollständiger Leitfaden zur Übersetzung Lit
+description: Beste Lösung für Bundle-Größe, SEO, Performance & Wartbarkeit. Machen Sie Ihre Vite and Lit App 2026 mehrsprachig, LLM-Übersetzung, Agent Skills & MCP.
 keywords:
   - Internationalisierung
   - Dokumentation
@@ -57,22 +57,55 @@ history:
 
 <TOC/>
 
-## Was ist Intlayer?
+## Warum Intlayer gegenüber Alternativen?
 
-**Intlayer** ist eine innovative Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen.
+Im Vergleich zu Hauptlösungen wie „lit-localize“ oder „i18next“ ist Intlayer eine Lösung, die über integrierte Optimierungen verfügt wie:
 
-Mit Intlayer können Sie:
+<AccordionGroup>
+<Accordion header="Volle Lit-Abdeckung">
 
-- **Übersetzungen einfach verwalten** mithilfe deklarativer Wörterbücher auf Komponentenebene.
-- **Metadaten, Routen und Inhalte dynamisch lokalisieren**.
-- **TypeScript-Unterstützung sicherstellen** mit automatisch generierten Typen, was die Autovervollständigung und Fehlererkennung verbessert.
-- **Von erweiterten Funktionen profitieren**, wie dynamischer Spracherkennung und -umschaltung.
+Intlayer ist für die perfekte Zusammenarbeit mit Lit optimiert, indem es **Content-Scoping auf Webkomponentenebene**, **TypeScript-Unterstützung** und alle für die Skalierung der Internationalisierung (i18n) erforderlichen Funktionen bietet.
+
+</Accordion>
+<Accordion header="Bundle-Größe">
+
+Anstatt riesige JSON-Dateien in Ihre Seiten zu laden, laden Sie nur den erforderlichen Inhalt. Intlayer hilft **Ihre Bundle- und Seitengröße um bis zu 50 % zu reduzieren**.
+
+</Accordion>
+<Accordion header="Wartbarkeit">
+
+Durch die Festlegung des Inhaltsbereichs Ihrer Anwendung wird die Wartung für umfangreiche Anwendungen erleichtert. Sie können einen einzelnen Feature-Ordner duplizieren oder löschen, ohne die mentale Belastung durch die Überprüfung Ihrer gesamten Inhaltscodebasis auf sich nehmen zu müssen. Darüber hinaus ist Intlayer **vollständig typisiert (fully typed)**, um die Genauigkeit Ihrer Inhalte sicherzustellen.
+
+</Accordion>
+<Accordion header="KI-Agent">
+
+Durch die gemeinsame Platzierung von Inhalten **reduziert sich der von Large Language Models (LLMs) benötigte Kontext**. Intlayer verfügt außerdem über eine Reihe von Tools, wie zum Beispiel eine **CLI** zum Testen auf fehlende Übersetzungen,**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** und **[agent Fähigkeiten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, um die Entwicklererfahrung (DX) für KI-Agenten noch reibungsloser zu gestalten.
+
+</Accordion>
+<Accordion header="Automatisierung">
+
+Nutzen Sie die Automatisierung, um Ihre CI/CD-Pipeline mit dem LLM Ihrer Wahl auf Kosten Ihres KI-Anbieters zu übersetzen. Intlayer bietet außerdem einen **Compiler** zur Automatisierung der Inhaltsextraktion sowie eine [Webplattform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) zur Unterstützung der **Übersetzung im Hintergrund**.
+
+</Accordion>
+<Accordion header="Leistung">
+
+Das Verbinden großer JSON-Dateien mit Komponenten kann zu Leistungs- und Reaktivitätsproblemen führen. Intlayer optimiert das Laden Ihrer Inhalte zur Erstellungszeit.
+
+</Accordion>
+<Accordion header="Skalierung mit Nicht-Entwickler">
+
+Intlayer ist mehr als nur eine i18n-Lösung. Es bietet einen **selbstgehosteten [visuellen Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** und ein **[vollständiges CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, um Ihnen zu helfen Verwalten Sie Ihre mehrsprachigen Inhalte in **Echtzeit** und gestalten Sie die Zusammenarbeit mit Übersetzern, Textern und anderen Teammitgliedern reibungslos. Inhalte können lokal und/oder remote gespeichert werden.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
 ## Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer Vite- und Lit-Anwendung
 
-### Schritt 1: Abhängigkeiten installieren
+<Steps>
+
+<Step number={1} title="Abhängigkeiten installieren">
 
 Installieren Sie die erforderlichen Pakete mit npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Enthält das Vite-Plugin zur Integration von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) sowie Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
 
-### Schritt 2: Konfiguration Ihres Projekts
+</Step>
+
+<Step number={2} title="Konfiguration Ihres Projekts">
 
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Über diese Konfigurationsdatei können Sie lokalisierte URLs, Middleware-Weiterleitungen, Cookie-Namen, den Ort und die Erweiterung Ihrer Inhaltsdeklarationen festlegen, Intlayer-Protokolle in der Konsole deaktivieren und vieles mehr. Eine vollständige Liste der verfügbaren Parameter finden Sie in der [Konfigurationsdokumentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/configuration.md).
 
-### Schritt 3: Intlayer in Ihre Vite-Konfiguration integrieren
+</Step>
+
+<Step number={3} title="Intlayer in Ihre Vite-Konfiguration integrieren">
 
 Fügen Sie das Intlayer-Plugin in Ihre Konfiguration ein.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Das `intlayer()` Vite-Plugin wird verwendet, um Intlayer in Vite zu integrieren. Es stellt die Erstellung von Inhaltsdeklarationsdateien sicher und überwacht diese im Entwicklungsmodus. Es definiert Intlayer-Umgebungsvariablen innerhalb der Vite-Anwendung. Darüber hinaus bietet es Aliase zur Leistungsoptimierung.
 
-### Schritt 4: Intlayer in Ihrem Einstiegspunkt initialisieren
+</Step>
+
+<Step number={4} title="Intlayer in Ihrem Einstiegspunkt initialisieren">
 
 Rufen Sie `installIntlayer()` auf, **bevor** benutzerdefinierte Elemente registriert werden, damit das globale Sprach-Singleton bereit ist, wenn sich das erste Element verbindet.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Schritt 5: Ihre Inhalte deklarieren
+</Step>
+
+<Step number={5} title="Ihre Inhalte deklarieren">
 
 Erstellen und verwalten Sie Ihre Inhaltsdeklarationen, um Übersetzungen zu speichern:
 
@@ -261,7 +302,9 @@ export default appContent;
 >
 > Weitere Einzelheiten finden Sie in der [Dokumentation zur Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md).
 
-### Schritt 6: Intlayer in Ihrem LitElement verwenden
+</Step>
+
+<Step number={6} title="Intlayer in Ihrem LitElement verwenden">
 
 Verwenden Sie `useIntlayer` innerhalb eines `LitElement`. Es gibt einen `ReactiveController`-Proxy zurück, der automatisch Neu-Renderings auslöst, sobald sich die aktive Sprache ändert – keine zusätzliche Einrichtung erforderlich.
 
@@ -306,7 +349,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Optional) Schritt 7: Die Sprache Ihres Inhalts ändern
+</Step>
+
+<Step number={7} title="Die Sprache Ihres Inhalts ändern" isOptional={true}>
 
 Um die Sprache Ihres Inhalts zu ändern, verwenden Sie die Methode `setLocale`, welche vom `useLocale`-Controller bereitgestellt wird.
 
@@ -341,7 +386,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Optional) Schritt 8: Markdown- und HTML-Inhalte rendern
+</Step>
+
+<Step number={8} title="Markdown- und HTML-Inhalte rendern" isOptional={true}>
 
 Intlayer unterstützt `md()` und `html()` Inhaltsdeklarationen. In Lit wird die kompilierte Ausgabe als rohes HTML über die `unsafeHTML`-Direktive eingefügt.
 
@@ -391,7 +438,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` ruft `toString()` auf dem `IntlayerNode` auf, was den rohen Markdown-String zurückgibt. Übergeben Sie diesen an `compileMarkdown`, um einen HTML-String zu erhalten, und rendern Sie ihn dann mit Lits `unsafeHTML`-Direktive.
 
-### (Optional) Schritt 9: Localized Routing zu Ihrer Anwendung hinzufügen
+</Step>
+
+<Step number={9} title="Localized Routing zu Ihrer Anwendung hinzufügen" isOptional={true}>
 
 Um eindeutige Routen für jede Sprache zu erstellen (nützlich für SEO), können Sie einen clientseitigen Router zusammen mit Intlayers `localeMap` / `localeFlatMap` Helfern und dem `intlayerProxy` Vite-Plugin für die serverseitige Spracherkennung verwenden.
 
@@ -411,7 +460,9 @@ export default defineConfig({
 });
 ```
 
-### (Optional) Schritt 10: Die URL ändern, wenn sich die Sprache ändert
+</Step>
+
+<Step number={10} title="Die URL ändern, wenn sich die Sprache ändert" isOptional={true}>
 
 Um die Browser-URL zu aktualisieren, wenn sich die Sprache ändert, verwenden Sie `useRewriteURL` zusammen mit dem Sprachumschalter:
 
@@ -449,7 +500,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Optional) Schritt 11: HTML-Sprach- und Richtungsattribute umschalten
+</Step>
+
+<Step number={11} title="HTML-Sprach- und Richtungsattribute umschalten" isOptional={true}>
 
 Aktualisieren Sie die Attribute `lang` und `dir` des `<html>`-Tags entsprechend der aktuellen Sprache für Barrierefreiheit und SEO.
 
@@ -474,7 +527,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Optional) Schritt 12: Den Inhalt Ihrer Komponenten extrahieren
+</Step>
+
+<Step number={12} title="Den Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
 
 Wenn Sie eine bestehende Codebasis haben, kann das Transformieren von Tausenden von Dateien zeitaufwendig sein.
 
@@ -636,3 +691,7 @@ Weitere Details zur Verwendung der Erweiterung finden Sie in der [Dokumentation
 ### Weiterführende Schritte
 
 Um tiefer einzusteigen, können Sie den [Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_visual_editor.md) implementieren oder Ihre Inhalte mithilfe des [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_CMS.md) extern verwalten.
+
+</Step>
+
+</Steps>