@intlayer/docs 8.11.2 → 8.11.3

package/docs/de/lsp.md

@@ -0,0 +1,351 @@
+---
+createdAt: 2025-06-07
+updatedAt: 2026-05-31
+title: Intlayer LSP-Server
+description: Erfahren Sie, wie der Intlayer Language Server die Funktion "Gehe zu Definition" und andere IDE-Features für useIntlayer, getIntlayer und verwandte Aufrufe in allen unterstützten Editoren bereitstellt.
+keywords:
+  - LSP
+  - Language Server
+  - Gehe zu Definition
+  - IDE
+  - Intlayer
+  - VS Code
+  - Neovim
+  - TypeScript
+slugs:
+  - doc
+  - lsp
+history:
+  - version: 8.12.0
+    date: 2026-06-01
+    changes: "Release LSP"
+---
+
+# Intlayer LSP-Server
+
+Der **Intlayer Language Server** ist eine Implementierung des [Language Server Protocols (LSP)](https://microsoft.github.io/language-server-protocol/), die Ihre IDE mit Intlayer-spezifischer Intelligenz erweitert. Er bietet derzeit **Gehe zu Definition (Go to Definition)** für Wörterbuchschlüssel-Aufrufe, sodass Sie direkt von `useIntlayer("my-key")` in Ihrer Komponente zu der `.content.ts`-Datei springen können, die diesen deklariert.
+
+---
+
+## Warum den LSP verwenden?
+
+Wenn Sie Intlayer verwenden, ist die Verbindung zwischen einem Aufrufe wie `useIntlayer("homepage")` und seiner Deklaration in `src/homepage.content.ts` implizit. Ohne Tooling müssen Sie manuell nach der Datei suchen. Der LSP macht diese Verbindung explizit:
+
+**Erkennung durch AI-Agenten**
+
+AI-Programmierassistenten (Cursor, Windsurf, GitHub Copilot, Claude Code, Codex) verlassen sich auf den Language Server, um Symbole aufzulösen und dateiübergreifende Beziehungen zu verstehen. Wenn der Intlayer-LSP läuft, können Agenten `useIntlayer("key")` bis zu seiner Deklaration zurückverfolgen. Dies gibt ihnen genauen Kontext über verfügbare Inhaltsschlüssel, die Struktur jedes Wörterbuchs und die zu lesenden oder zu bearbeitenden Dateien.
+
+**Gehe zu Definition**
+
+Platzieren Sie Ihren Cursor auf einer beliebigen Wörterbuchschlüssel-Zeichenkette innerhalb eines unterstützten Getter-Aufrufs und drücken Sie `F12` (oder `Cmd/Ctrl+Klick`). Der Editor öffnet die Inhaltsdeklarationsdatei und positioniert den Cursor auf der Zeile `key:`.
+
+**Unterstützung für zusammengeführte Wörterbücher**
+
+Ein Schlüssel kann auf mehrere Inhaltsdateien aufgeteilt sein (Intlayer führt sie zusammen). Der Server gibt einen Ort (`Location`) pro Quelldatei zurück, sodass Sie zu jeder Deklaration navigieren können.
+
+**Funktioniert überall**
+
+Unterstützt alle `*-intlayer`-Pakete (`next-intlayer`, `react-intlayer`, `vue-intlayer`, `svelte-intlayer`, `solid-intlayer`, `preact-intlayer`, `angular-intlayer`, `lit-intlayer`, `express-intlayer`, `hono-intlayer`, `fastify-intlayer`, `adonis-intlayer`, `intlayer`).
+
+### Unterstützte Getter-Aufrufe
+
+Der Server erkennt die folgenden Funktionsaufrufe und extrahiert das erste String-Literal-Argument als Wörterbuchschlüssel:
+
+| Funktion      | Beispiel                      |
+| ------------- | ----------------------------- |
+| `useIntlayer` | `useIntlayer("hero")`         |
+| `getIntlayer` | `getIntlayer("hero", locale)` |
+
+TypeScript-Generics und zusätzliche Argumente werden ignoriert – nur die Schlüssel-Zeichenkette zählt.
+
+> `useDictionary` und `getDictionary` erwarten ein bereits importiertes `Dictionary`-Objekt als erstes Argument anstelle eines Schlüssel-Strings, weshalb sie nicht von "Gehe zu Definition" profitieren und nicht vom Server verfolgt werden.
+
+---
+
+## Installation
+
+Der LSP-Server wird als Teil von `@intlayer/lsp` verteilt:
+
+```bash packageManager="npm"
+npm install --save-dev @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn add --dev @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add --save-dev @intlayer/lsp
+```
+
+```bash packageManager="bun"
+bun add --dev @intlayer/lsp
+```
+
+Das Paket stellt das Binärprogramm `intlayer-lsp` zur Verfügung, das Editoren als Server-Executable verwenden.
+
+---
+
+## Einrichtung als Claude Code Plugin
+
+Der Intlayer LSP ist als **Claude Code Plugin** verfügbar, das direkt im Intlayer-GitHub-Repository gehostet wird. Durch die Installation erhält Claude Code native Unterstützung für "Gehe zu Definition" für all Ihre `useIntlayer`- / `getIntlayer`-Aufrufe.
+
+### 1. Installieren Sie das Language-Server-Binärprogramm
+
+```bash packageManager="npm"
+npm install -g @intlayer/lsp
+```
+
+```bash packageManager="yarn"
+yarn global add @intlayer/lsp
+```
+
+```bash packageManager="pnpm"
+pnpm add -g @intlayer/lsp
+```
+
+Dadurch wird das Binärprogramm `intlayer-lsp` zu Ihrem PATH hinzugefügt, welches durch den Eintrag `lspServers` des Plugins aufgerufen wird.
+
+### 2. Registrieren Sie den Intlayer-Marktplatz und installieren Sie das Plugin
+
+```bash
+claude plugin marketplace add intlayer@github:aymericzip/intlayer
+claude plugin install intlayer-lsp@intlayer
+claude plugin enable intlayer-lsp@intlayer
+```
+
+Claude Code fügt `"intlayer-lsp@intlayer": true` zu Ihren `enabledPlugins` hinzu und startet den Language Server automatisch für die unterstützten Dateitypen (`.ts`, `.tsx`, `.js`, `.jsx`, `.vue`, `.svelte`).
+
+### 3. Aktivieren Sie das LSP-Tool (falls nicht bereits aktiv)
+
+Einige Claude Code-Versionen erfordern das Setzen des LSP-Feature-Flags. Fügen Sie Folgendes zu Ihrer `~/.claude/settings.json` hinzu, wenn "Gehe zu Definition" nach der Installation nicht funktioniert:
+
+```json fileName="~/.claude/settings.json"
+{
+  "env": {
+    "ENABLE_LSP_TOOL": "1"
+  }
+}
+```
+
+Starten Sie Claude Code neu – bei der Navigation in Ihrer Intlayer-Codebasis wird nun `goToDefinition`, `findReferences` und andere LSP-Operationen anstelle eines Fallbacks auf `grep` verwendet.
+
+---
+
+## Einrichtung in VS Code (über Erweiterung — empfohlen)
+
+Wenn Sie die [Intlayer VS Code-Erweiterung](https://marketplace.visualstudio.com/items?itemName=Intlayer.intlayer-vs-code-extension) installiert haben, startet der Language Server automatisch. Keine zusätzliche Konfiguration erforderlich.
+
+> Siehe die [VS Code-Erweiterungsdokumentation](https://intlayer.org/doc/vs-code-extension) für Installation und weitere Funktionen.
+
+---
+
+## Manuelle Einrichtung in VS Code
+
+Wenn Sie die Intlayer-Erweiterung nicht verwenden, können Sie den Language Server manuell über eine generische LSP-Client-Erweiterung wie [**vscode-glspc**](https://marketplace.visualstudio.com/items?itemName=sibiraj-s.vscode-scss-formatter) oder durch Schreiben einer eigenen kleinen Erweiterung einrichten. Der empfohlene Weg ist die Verwendung der Intlayer-Erweiterung.
+
+Als Referenz startet der Server über die Binärdatei `intlayer-lsp` über stdio:
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+Die Intlayer-Erweiterung liest diese Einstellungen, um den Server zu starten. Wenn Sie sich ausschließlich auf die Erweiterung verlassen, sind keine manuellen Einstellungen erforderlich.
+
+---
+
+## Einrichtung in Cursor
+
+[Cursor](https://www.cursor.com/) ist ein VS Code-Fork mit integrierten AI-Funktionen. Es verwendet dasselbe Erweiterungs-Ökosystem, daher funktioniert die **Intlayer VS Code-Erweiterung** ohne zusätzliche Konfiguration – installieren Sie sie einmal und Cursor erkennt sie automatisch.
+
+Wenn Sie eine manuelle Konfiguration bevorzugen, liest Cursor auch `.vscode/settings.json` aus dem Workspace-Root, sodass das obige VS Code-Snippet direkt angewendet wird.
+
+---
+
+## Einrichtung in Windsurf
+
+[Windsurf](https://windsurf.com/) (von Codeium) ist ein weiterer auf VS Code basierender Editor. Installieren Sie die Intlayer-Erweiterung aus dem VS Code Marketplace und der Language Server wird automatisch aktiviert, genau wie in VS Code und Cursor.
+
+Für eine manuelle Konfiguration erstellen Sie `.vscode/settings.json` im Projekt-Root:
+
+```json fileName=".vscode/settings.json"
+{
+  "intlayer.languageServer.command": "npx",
+  "intlayer.languageServer.args": ["@intlayer/lsp"]
+}
+```
+
+---
+
+## Einrichtung in Zed
+
+[Zed](https://zed.dev/) bietet native LSP-Unterstützung über seine Spracheinstellungen. Fügen Sie einen Eintrag in Ihren Zed-Benutzereinstellungen hinzu (`~/.config/zed/settings.json`):
+
+```json fileName="~/.config/zed/settings.json"
+{
+  "lsp": {
+    "intlayer-lsp": {
+      "binary": {
+        "path": "npx",
+        "arguments": ["--yes", "@intlayer/lsp"]
+      }
+    }
+  },
+  "languages": {
+    "TypeScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "TSX": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "JavaScript": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Vue.js": {
+      "language_servers": ["intlayer-lsp", "..."]
+    },
+    "Svelte": {
+      "language_servers": ["intlayer-lsp", "..."]
+    }
+  }
+}
+```
+
+Der Platzhalter `"..."` teilt Zed mit, die Standard-Language-Server neben dem von Intlayer beizubehalten.
+
+---
+
+## Einrichtung für AI-Agenten-CLIs (Claude Code, Codex, etc.)
+
+**Claude Code** verfügt über erstklassige LSP-Plugin-Unterstützung – folgen Sie der [Claude Code Plugin Einrichtung](#einrichtung-als-claude-code-plugin) oben, um die vollständige "Gehe zu Definition"-Erfahrung direkt in Ihren Terminal-Sitzungen zu nutzen.
+
+**OpenAI Codex** und andere Terminal-basierte Tools agieren noch nicht als LSP-Clients – sie lesen und schreiben Dateien direkt, anstatt eine persistente Language-Server-Sitzung aufrechtzuerhalten. Für diese Tools ergibt sich der Wert des laufenden LSPs indirekt: Wenn der Server in einem Begleit-Editor (VS Code, Cursor, Windsurf, ...) aktiv ist, steht der Live-Index des Editors jedem AI-Agenten zur Verfügung, der ihn über den vom Editor bereitgestellten Kontext abfragen kann (z. B. Cursor Composer, Windsurf Cascade, GitHub Copilot Chat).
+
+Wenn Sie ausschließlich in einem Terminal ohne geöffneten Editor arbeiten, können Sie den Language Server im Hintergrund starten, damit er für jeden Editor bereit ist, der sich später mit demselben Workspace verbindet:
+
+```bash
+# Server im Hintergrund aktiv halten
+npx @intlayer/lsp &
+```
+
+---
+
+## Manuelle Einrichtung in Neovim
+
+Registrieren Sie mit [nvim-lspconfig](https://github.com/neovim/nvim-lspconfig) eine benutzerdefinierte Serverkonfiguration:
+
+```lua fileName="~/.config/nvim/init.lua"
+local lspconfig = require('lspconfig')
+local configs = require('lspconfig.configs')
+
+if not configs.intlayer_lsp then
+  configs.intlayer_lsp = {
+    default_config = {
+      -- Server mit npx starten, damit keine globale Installation erforderlich ist
+      cmd = { 'npx', '--yes', '@intlayer/lsp' },
+      filetypes = {
+        'typescript',
+        'typescriptreact',
+        'javascript',
+        'javascriptreact',
+        'vue',
+        'svelte',
+      },
+      root_dir = lspconfig.util.root_pattern(
+        'intlayer.config.ts',
+        'intlayer.config.js',
+        'package.json'
+      ),
+    },
+  }
+end
+
+lspconfig.intlayer_lsp.setup({})
+```
+
+Nach dem Neustart von Neovim ruft das Drücken von `gd` über einem Intlayer-Schlüssel "Gehe zu Definition" auf.
+
+---
+
+## Manuelle Einrichtung in anderen Editoren
+
+Jeder Editor, der das Language Server Protocol unterstützt, kann `@intlayer/lsp` verwenden. Der Server bietet:
+
+- **Transport** – Node.js IPC / stdio (Standard)
+- **Executable** – `npx @intlayer/lsp` (oder das lokal installierte `intlayer-lsp`-Binärprogramm)
+- **Capabilities** – `definitionProvider: true`, `textDocumentSync: Incremental`
+
+Konsultieren Sie die LSP-Dokumentation Ihres Editors für das genaue Konfigurationsformat (z. B. `languageserver.json` für [coc.nvim](https://github.com/neoclide/coc.nvim) oder die LSP-Client-Einstellungen in [Helix](https://helix-editor.com)).
+
+### Beispiel: coc.nvim
+
+```json fileName="~/.config/nvim/coc-settings.json"
+{
+  "languageserver": {
+    "intlayer": {
+      "command": "npx",
+      "args": ["@intlayer/lsp"],
+      "filetypes": [
+        "typescript",
+        "typescriptreact",
+        "javascript",
+        "javascriptreact",
+        "vue",
+        "svelte"
+      ],
+      "rootPatterns": [
+        "intlayer.config.ts",
+        "intlayer.config.js",
+        "package.json"
+      ]
+    }
+  }
+}
+```
+
+### Beispiel: Helix
+
+```toml fileName="~/.config/helix/languages.toml"
+[[language]]
+name = "typescript"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[[language]]
+name = "tsx"
+language-servers = ["intlayer-lsp", "typescript-language-server"]
+
+[language-server.intlayer-lsp]
+command = "npx"
+args = ["@intlayer/lsp"]
+```
+
+---
+
+## Wie es funktioniert
+
+Wenn der Server startet, löst er die Intlayer-Konfiguration aus dem Workspace-Root mithilfe von `getConfiguration()` auf. Dies gibt ihm die `build`- und `system`-Pfade, die zum Auffinden von kompilierten Wörterbüchern benötigt werden.
+
+Bei jeder **Gehe zu Definition**-Anfrage:
+
+1. Der Server liest den vollständigen Text des geöffneten Dokuments.
+2. Er scannt nach Getter-Aufrufen (`useIntlayer`, `getIntlayer` usw.) mithilfe eines regulären Ausdrucks.
+3. Er prüft, ob die Cursorposition in einen dieser Aufrufe fällt.
+4. Wenn dies der Fall ist, extrahiert er den Wörterbuchschlüssel (Erfassungsgruppe 3 des regulären Ausdrucks) und ruft `getUnmergedDictionaries()` auf, um jede Inhaltsdatei zu lokalisieren, die diesen Schlüssel deklariert.
+5. Er liest jede übereinstimmende Datei und findet die genaue Zeile mit `key: "<key>"`, um den Cursor präzise zu positionieren.
+6. Er gibt ein Array von `Location`-Objekten zurück – eines pro Quelldatei.
+
+Die Konfiguration wird verzögert aufgelöst und pro Sitzung zwischengespeichert. Sie wird bei jeder `initialize`-Anfrage (z. B. wenn Sie einen neuen Workspace-Ordner öffnen) zurückgesetzt.
+
+---
+
+## Fehlerbehebung
+
+| Symptom                                         | Mögliche Ursache              | Lösung                                                                                                |
+| ----------------------------------------------- | ----------------------------- | ----------------------------------------------------------------------------------------------------- |
+| Gehe zu Definition tut nichts                   | Server läuft nicht            | Überprüfen Sie, ob `@intlayer/lsp` installiert ist und vom Editor gestartet wird                      |
+| Falscher Workspace-Root erkannt                 | Mehrere Workspace-Ordner      | Stellen Sie sicher, dass der Ordner, der `intlayer.config.ts` enthält, der erste Workspace-Ordner ist |
+| Definitionen für einen Schlüssel nicht gefunden | Konfiguration nicht aufgelöst | Überprüfen Sie, ob `intlayer.config.ts` (oder `.js`) im Workspace-Root existiert                      |
+| Server stürzt beim Start ab                     | Node.js-Version zu alt        | Benötigt Node.js ≥ 14.18                                                                              |

package/docs/de/releases/v7.md

@@ -32,7 +32,7 @@ Willkommen bei Intlayer v7! Dieses große Release bringt bedeutende Verbesserung
 - Neue Routing-Modi: `prefix-no-default`, `prefix-all`, `no-prefix`, `search-params`
 - DSGVO-konforme Sprachspeicherung mit localStorage als Standard
 - Flexible Speicher-Konfiguration: Cookies, localStorage, sessionStorage oder mehrere gleichzeitig
-- 30 % kleinere Paketgröße des Visual Editors
+- 30 % kleinere Bundle-Größe des Visual Editors
 - Erweiterte Middleware-Konfigurationsoptionen
 - Aktualisiertes Verhalten des Fill-Kommandos für bessere Inhaltsverwaltung
 - Verbesserte Stabilität durch vollständige Aktualisierung der Content-Declaration-Dateien

package/docs/en/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-09-27
+updatedAt: 2026-05-31
 title: Interest of Intlayer
 description: Discover the benefits and advantages of using Intlayer in your projects. Understand why Intlayer stands out among other frameworks.
 keywords:
@@ -13,6 +13,9 @@ slugs:
   - doc
   - why
 history:
+  - version: 8.11.2
+    date: 2026-05-31
+    changes: "Add Why Intlayer over alternatives section"
   - version: 7.3.1
     date: 2025-11-27
     changes: "Release Compiler"
@@ -30,6 +33,53 @@ history:
 
 **Intlayer** is an internationalization library designed specifically for JavaScript developers. It allows the declaration of your content everywhere in your code. It converts declarations of multilingual content into structured dictionaries to integrate easily in your code. Using TypeScript, **Intlayer** makes your development stronger and more efficient.
 
+## Why Intlayer over alternatives?
+
+Compared to main solutions like `next-intl` or `i18next`, Intlayer is a solution that comes with integrated optimizations such as:
+
+<AccordionGroup>
+<Accordion header="Bundle size">
+
+Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
+
+</Accordion>
+<Accordion header="Maintainability">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+</Accordion>
+<Accordion header="AI Agent">
+
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[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)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+
+</Accordion>
+<Accordion header="Feature">
+
+Intlayer offers a bench of additional features that other i18n solutions do not have, such as [Markdown support](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [fetching external content](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md), [file content loading](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md), [live content update](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/cli/live.md), [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) and more.
+
+</Accordion>
+<Accordion header="Automation">
+
+Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**.
+
+</Accordion>
+<Accordion header="Performance">
+
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
+
+</Accordion>
+<Accordion header="Scaling with none-dev">
+
+More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
+
+</Accordion>
+<Accordion header="Cross framework design">
+
+If you use different frameworks for different part of your application (e.g., React, React-native, Vue, Angular, Svelte, etc.), Intlayer provides a way to **use a common synatax and implementation across all main frontend frameworks**. You will also be able to share your content declaration across your design-system, apps, backend etc.
+
+</Accordion>
+</AccordionGroup>
+
 ## Why was Intlayer created?
 
 Intlayer was created to solve a common problem that affects all common i18n libraries such as `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, and `vue-i18n`.
@@ -218,8 +268,6 @@ This approach allows you to:
 | **Purge unused content**                      | ✅ Yes, per-dictionary at build time                                                                                                | ❌ No, only via manual namespace segmentation                                                            | ❌ No, all declared messages are bundled                                                                                         | ✅ Yes, unused keys detected & dropped at build       | ❌ No, can be managed manually with namespace management                                                 | ❌ No, can be managed manually with namespace management                                                 | ❌ No, only possible via manual lazy-loading                 |
 | **Management of Large Projects**              | ✅ Encourages modular, suited for design-system                                                                                     | ⚠️ Needs good file discipline                                                                            | ⚠️ Central catalogs can get large                                                                                                | ⚠️ May get complex                                    | ✅ Modular with setup                                                                                    | ✅ Modular with setup                                                                                    | ✅ Modular with Vue Router/Nuxt i18n setup                   |
 
----
-
 ## GitHub STARs
 
 GitHub stars are a strong indicator of a project's popularity, community trust, and long-term relevance. While not a direct measure of technical quality, they reflect how many developers find the project useful, follow its progress, and are likely to adopt it. For estimating the value of a project, stars help compare traction across alternatives and provide insights into ecosystem growth.

package/docs/en/intlayer_with_adonisjs.md

@@ -2,7 +2,7 @@
 createdAt: 2025-08-23
 updatedAt: 2026-05-31
 title: AdonisJS i18n - Complete guide to translate an AdonisJS app
-description: Optimized solution for bundle size, SEO, performances & maintainability. Make your AdonisJS backend multilingual in 2026, LLM translation, Agent Skills & MCP.
+description: Best solution for bundle size, SEO, performances & maintainability. Make your AdonisJS backend multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Internationalization
   - Documentation

package/docs/en/intlayer_with_analog.md

@@ -2,7 +2,7 @@
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
 title: Analog i18n - Complete guide to translate an Analog app
-description: Optimized solution for bundle size, SEO, performances & maintainability. Make your Analog application multilingual in 2026, LLM translation, Agent Skills & MCP.
+description: Best solution for bundle size, SEO, performances & maintainability. Make your Analog app multilingual in 2026, LLM translation, Agent Skills & MCP.
 keywords:
   - Internationalization
   - Documentation
@@ -56,16 +56,47 @@ history:
 
 <TOC/>
 
-## What is Intlayer?
+## Why Intlayer over alternatives?
 
-**Intlayer** is an innovative, open-source internationalization (i18n) library designed to simplify multilingual support in modern web applications.
+Compared to main solutions like `ngx-translate` or `angular-l10n`, Intlayer is a solution that comes with integrated optimizations such as:
 
-With Intlayer, you can:
+<AccordionGroup>
+<Accordion header="Full Analog coverage">
 
-- **Easily manage translations** using declarative dictionaries at the component level.
-- **Dynamically localize metadata**, routes, and content.
-- **Ensure TypeScript support** with autogenerated types, improving autocompletion and error detection.
-- **Benefit from advanced features**, like dynamic locale detection and switching.
+Intlayer is optimized to work perfectly with Analog by offering **multilingual routing**, **SSR support**, and all the features needed for scaling internationalization (i18n).
+
+</Accordion>
+<Accordion header="Bundle size">
+
+Instead of loading massive JSON files into your pages, load only the necessary content. Intlayer helps **reduce your bundle and page sizes by up to 50%**.
+
+</Accordion>
+<Accordion header="Maintainability">
+
+Scoping your application's content **facilitates maintenance** for large-scale applications. You can duplicate or delete a single feature folder without the mental burden of reviewing your entire content codebase. Additionally, Intlayer is **fully typed** to ensure your content's accuracy.
+
+</Accordion>
+<Accordion header="AI Agent">
+
+Co-locating content **reduces the context needed** by Large Language Models (LLMs). Intlayer also comes with a suite of tools, such as a **CLI** to test for missing translations,**[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)**, and **[agent skills](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, to make the developer experience (DX) even smoother for AI agents.
+
+</Accordion>
+<Accordion header="Automation">
+
+Use automation to translate in your CI/CD pipeline using the LLM of your choice at the cost of your AI provider. Intlayer also offers a **compiler** to automate content extraction, as well as a [web platform](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) to help **translate in the background**.
+
+</Accordion>
+<Accordion header="Performance">
+
+Connecting massive JSON files to components can lead to performance and reactivity issues. Intlayer optimizes your content loading at build time.
+
+</Accordion>
+<Accordion header="Scaling with none-dev">
+
+More than just an i18n solution, Intlayer provides an **self-hosted [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** and a **[full CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** to help you manage your multilingual content in **real-time**, making collaboration with translators, copywriters, and other team members seamless. Content can be stored locally and/or remotely.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -73,7 +104,9 @@ With Intlayer, you can:
 
 See [Application Template](https://github.com/aymericzip/intlayer-analog-template) on GitHub.
 
-### Step 1: Install Dependencies
+<Steps>
+
+<Step number={1} title="Install Dependencies">
 
 Install the necessary packages using npm:
 
@@ -107,7 +140,9 @@ bun x intlayer init
 - **vite-intlayer**
   The package that integrates Intlayer with Vite. It provides a plugin to handle content declaration files and sets up aliases for optimal performance.
 
-### Step 2: Configuration of your project
+</Step>
+
+<Step number={2} title="Configuration of your project">
 
 Create a config file to configure the languages of your application:
 
@@ -131,7 +166,9 @@ export default config;
 
 > Through this configuration file, you can set up localized URLs, middleware redirection, cookie names, the location and extension of your content declarations, disable Intlayer logs in the console, and more. For a complete list of available parameters, refer to the [configuration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md).
 
-### Step 3: Integrate Intlayer in Your Vite Configuration
+</Step>
+
+<Step number={3} title="Integrate Intlayer in Your Vite Configuration">
 
 To integrate Intlayer with Analog, you need to use the `vite-intlayer` plugin.
 
@@ -153,7 +190,9 @@ export default defineConfig(() => ({
 
 > The `intlayer()` plugin configures Vite with Intlayer. It handles content declaration files and sets up aliases for optimal performance.
 
-### Step 4: Declare Your Content
+</Step>
+
+<Step number={4} title="Declare Your Content">
 
 Create and manage your content declarations to store translations:
 
@@ -183,7 +222,9 @@ export default appContent;
 
 > For more details, refer to the [content declaration documentation](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md).
 
-### Step 5: Utilize Intlayer in Your Code
+</Step>
+
+<Step number={5} title="Utilize Intlayer in Your Code">
 
 To utilize Intlayer's internationalization features throughout your Analog application, you need to provide Intlayer in your application configuration.
 
@@ -221,7 +262,9 @@ export default class HomeComponent {
 
 Intlayer content is returned as a `Signal`, so you access the values by calling the signal: `content().title`.
 
-### (Optional) Step 6: Change the language of your content
+</Step>
+
+<Step number={6} title="Change the language of your content" isOptional={true}>
 
 To change the language of your content, you can use the `setLocale` function provided by the `useLocale` function. This allows you to set the locale of the application and update the content accordingly.
 
@@ -333,3 +376,7 @@ For more details on how to use the extension, refer to the [Intlayer VS Code Ext
 ### Go Further
 
 To go further, you can implement the [visual editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md) or externalize your content using the [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md).
+
+</Step>
+
+</Steps>