@intlayer/docs 9.5.5 → 9.5.7

package/docs/de/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Erfahren Sie, wie Sie Markdown-Inhalte auf Ihrer mehrsprachigen Website mit Intlayer deklarieren und verwenden. Befolgen Sie die Schritte in dieser Online-Dokumentation, um Markdown nahtlos in Ihr Projekt zu integrieren.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Das Markdown-Rendering unterstützt **MDX** — verwenden Sie jede JSX/Framework
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    In Remix 3 werden Markdown-Knoten auf dem Server in einen HTML-String gerendert. Fügen Sie ihn mit der `innerHTML`-Prop von Remix JSX oder mit `html.raw` in einer `html-template`-Ansicht ein.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return <div innerHTML={myMarkdownContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myMarkdownContent } = useIntlayer("app");
+
+      return html.raw`<div>${myMarkdownContent.value}</div>`;
+    };
+    ```
+
+    > Remix maskiert interpolierte Werte standardmäßig. `innerHTML` und `html.raw` sind die beiden Ausnahmen, die ein gerenderter Markdown-String benötigt.
+
+    Sie können auch lokale Überschreibungen für bestimmte Tags mithilfe der Methode `.use()` bereitstellen. Überschreibungen sind Funktionen, die einen HTML-String zurückgeben:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` ist der gerenderte HTML-String, während `String()` / `.toString()` den rohen Markdown-Quellcode zurückgeben:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Und Sie können wie folgt auf Ihre Markdown-Metadaten zugreifen:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    In Astro werden Markdown-Knoten in einen HTML-String gerendert. Fügen Sie ihn mit der `set:html`-Direktive im Template oder mit `innerHTML` in einem clientseitigen `<script>` ein.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myMarkdownContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myMarkdownContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myMarkdownContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myMarkdownContent.value;
+    </script>
+    ```
+
+    > Astro maskiert `{Ausdrücke}` standardmäßig. `set:html` ist die Ausnahme, die ein gerenderter Markdown-String benötigt.
+
+    Sie können auch lokale Überschreibungen für bestimmte Tags mithilfe der Methode `.use()` bereitstellen. Überschreibungen sind Funktionen, die einen HTML-String zurückgeben:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` ist der gerenderte HTML-String, während `String()` / `.toString()` den rohen Markdown-Quellcode zurückgeben:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Und Sie können wie folgt auf Ihre Markdown-Metadaten zugreifen:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Hilfsprogramme (Nur Markdown-Strings)
@@ -698,6 +805,60 @@ Diese Dienstprogramme rendern **nur reine Markdown-Strings** und sind unabhängi
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` Hook
+
+    Holen Sie sich eine von `installIntlayerMarkdown()` vorkonfigurierte Renderer-Funktion. Sie gibt einen HTML-String zurück.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### `renderMarkdown()` Utility
+
+    Eigenständiges Dienstprogramm, das die globale Konfiguration ignoriert.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` Hook
+
+    Holen Sie sich eine von `installIntlayerMarkdown()` vorkonfigurierte Renderer-Funktion. Sie gibt einen HTML-String zurück.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### `renderMarkdown()` Utility
+
+    Eigenständiges Dienstprogramm, das die globale Konfiguration ignoriert.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Globale Konfiguration mit `MarkdownProvider`
@@ -997,6 +1158,73 @@ Der `MarkdownProvider` (oder sein Framework-Äquivalent) konfiguriert die Markdo
     > Das dynamische Importieren Ihres Markdown-Renderers ist eine gute Möglichkeit, die Bundle-Größe Ihrer Anwendung zu reduzieren.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix verfügt über keinen Komponentenbaum, der einen Provider aufnehmen könnte, daher wird die Konfiguration einmalig als Singleton beim Serverstart installiert. Sie konfiguriert den von `useMarkdownRenderer()` zurückgegebenen Renderer. Die von `useIntlayer` zurückgegebenen `md`-Knoten werden mit dem Standard-Compiler gerendert; überschreiben Sie deren Tags pro Knoten mit `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+    ```
+
+    Sie können auch Ihren eigenen Markdown-Renderer verwenden:
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerMarkdown } from "remix-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Verwenden Sie `installIntlayerMarkdownDynamic(async () => …)`, um den Renderer selbst träge zu laden; der Loader wird nur beim ersten Aufruf ausgeführt.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro verfügt über keinen Komponentenbaum, der einen Provider aufnehmen könnte, daher wird die Konfiguration einmalig als Singleton in der Middleware (Server) und in einem clientseitigen `<script>` (Browser) installiert. Sie konfiguriert den von `useMarkdownRenderer()` zurückgegebenen Renderer. Die von `useIntlayer` zurückgegebenen `md`-Knoten werden mit dem Standard-Compiler gerendert; überschreiben Sie deren Tags pro Knoten mit `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Wird einmal beim Serverstart ausgeführt; die Intlayer-Middleware selbst wird
+    // vor dieser Datei durch die Integration registriert.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Sie können auch Ihren eigenen Markdown-Renderer verwenden:
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+
+    installIntlayerMarkdown({
+      renderMarkdown: async (md) => {
+        const { marked } = await import("marked");
+        return marked(md) as string;
+      },
+    });
+    ```
+
+    > Verwenden Sie `installIntlayerMarkdownDynamic(async () => …)`, um den Renderer selbst träge zu laden; der Loader wird nur beim ersten Aufruf ausgeführt.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ Sie können die Funktion `parseMarkdown` aus dem Intlayer-Paket Ihres Frameworks
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 rendert auf dem Server und streamt HTML, sodass kein AST an den Client übertragen werden muss. Einmal parsen und das AST überall dort rendern, wo die Seite erstellt wird:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Parsen des Markdowns in ein serialisierbares AST (z. B. einmalig beim Modulladen)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Rendern des AST: Der Renderer akzeptiert einen rohen String oder das geparste AST
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro-Seiten werden auf dem Server gerendert, sodass kein AST an den Client übertragen werden muss. Parsen Sie das Markdown im Frontmatter und rendern Sie es mit `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Parsen des Markdowns in ein serialisierbares AST
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Rendern des AST: Der Renderer akzeptiert einen rohen String oder das geparste AST -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Dieses Muster stellt sicher, dass die Markdown-Parsing-Logik vollständig auf dem Server ausgeführt wird, was die clientseitige Ausführungszeit erheblich verkürzt und die anfängliche Hydratisierungsgeschwindigkeit verbessert.

package/docs/de/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Analog i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Analog-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Konfiguration Ihres Projekts">
 
+### Architektur
+
+In dieser Architektur stellt `angular-intlayer` `provideIntlayer()` bereit, das in `src/app/app.config.ts` registriert ist, damit jede Komponente und dateibasierte Seite ihren Inhalt über das `useIntlayer`-Signal lesen kann. Analog basiert auf Vite, daher wird das `intlayer()`-Plugin von `vite-intlayer` neben `analog()` in `vite.config.ts` hinzugefügt, um Ihre Inhaltsdeklarationen zu überwachen und neu zu erstellen sowie den Gebietsschema-Proxy auszuführen. Inhaltsdeklarationen werden neben Komponenten und Seiten in `src/app/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── pages
+│   │   │   └── index.page.ts         # File-based route using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── vite.config.ts                    # analog() and intlayer() Vite plugins
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/de/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Angular 19-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -164,6 +164,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Konfiguration Ihres Projekts">
 
+### Architektur
+
+In dieser Architektur stellt `angular-intlayer` `provideIntlayer()` bereit, das in `src/app/app.config.ts` registriert ist, damit jede Komponente ihren Inhalt über das `useIntlayer`-Signal lesen kann. Die Angular CLI wird auf den benutzerdefinierten Webpack-Builder umgestellt, und `webpack.config.ts` bindet das Intlayer-Plugin in den Build ein, um Ihre Inhaltsdeklarationen zu überwachen und neu zu erstellen. Inhaltsdeklarationen werden neben Komponenten in `src/app/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom Webpack builder for build and serve
+├── intlayer.config.ts
+├── package.json
+├── tsconfig.json
+└── webpack.config.ts                 # mergeConfig() from angular-intlayer/webpack
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu konfigurieren:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/de/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Angular 22-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Konfiguration Ihres Projekts">
 
+### Architektur
+
+In dieser Architektur stellt `angular-intlayer` `provideIntlayer()` bereit, das in `src/app/app.config.ts` registriert ist, damit jede Komponente ihren Inhalt über das `useIntlayer`-Signal lesen kann. Die Angular CLI wird auf den benutzerdefinierten esbuild-Builder umgestellt, und `esbuild.plugins.ts` registriert das Intlayer-Plugin im Build, um Ihre Inhaltsdeklarationen zu überwachen und neu zu erstellen. Inhaltsdeklarationen werden neben Komponenten in `src/app/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app
+│   │   ├── app.component.html        # Root template reading the content signal
+│   │   ├── app.component.ts          # Root component using useIntlayer
+│   │   ├── app.config.ts             # Application config with provideIntlayer()
+│   │   ├── app.content.ts            # App content declaration
+│   │   └── locale-switcher.component.ts
+│   └── main.ts
+├── angular.json                      # Custom esbuild builder for build and serve
+├── esbuild.plugins.ts                # intlayerEsbuildPlugin() from angular-intlayer/esbuild
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung festzulegen:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/de/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-09-19
+updatedAt: 2026-09-21
 title: "Astro i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -160,6 +160,29 @@ bun add intlayer astro-intlayer
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer`, und Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── app.content.tsx               # App content declaration
+│   ├── components
+│   │   └── LocaleSwitcher.astro      # Locale switcher component
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page (rest param also serves the default locale)
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() integration
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -400,7 +423,7 @@ const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
 ```
 
 > **Hinweis zur Persistenz:**
-> `setLocale` aus dem clientseitigen `useLocale` speichert die Sprachpräferenz des Benutzers in einem Cookie. Dadurch kann sich die Intlayer-Middleware die Auswahl merken und den Benutzer bei zukünftigen Besuchen automatisch zu seiner bevorzugten Sprache weiterleiten.
+> `setLocale` aus dem clientseitigen `useLocale` speichert die Sprachpräferenz des Nutzers in einem Cookie. Dies ermöglicht es Intlayer, die Auswahl zu speichern und den Nutzer bei zukünftigen Besuchen automatisch zu seiner bevorzugten Sprache weiterzuleiten: On-Demand gerenderte Seiten (ein Adapter mit `output: 'server'` oder `prerender = false`) werden von der Intlayer-Middleware weitergeleitet, bevor HTML gesendet wird, während vorgerenderte Seiten, die als statische Dateien bereitgestellt werden, durch ein kleines Skript weitergeleitet werden, das die Integration in jede Seite einfügt. Setzen Sie `routing.enableProxy` auf `false`, um beides zu deaktivieren. In `astro dev` wird das Cookie als Weiterleitungsquelle ignoriert, es sei denn, `routing.enableProxy` ist auf `true` gesetzt, sodass ein veraltetes Cookie die Seiten, an denen Sie arbeiten, nicht kapern kann.
 >
 > **Server- / Client-Interkompatibilität:**
 > `astro-intlayer` löst im Frontmatter (beim Lesen von `Astro.locals`) zu seinen Server-Hooks auf und in `<script>`-Blöcken sowie Inseln (Islands) zu den Client-Hooks von `vanilla-intlayer`, mit identischen Namen und Inhaltsstrukturen. `setLocale` und `onChange` wirken nur auf dem Client, rufen Sie dort einmal `installIntlayer()` auf, um den Client-Store zu initialisieren. `astro-intlayer/client` stellt den Client-Einstiegspunkt explizit bereit.
@@ -427,10 +450,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -471,11 +494,12 @@ export const GET: APIRoute = ({ site }) => {
 
 Bauen Sie Ihre Anwendung mit dem Framework Ihrer Wahl weiter auf.
 
-- Intlayer + React: [Intlayer mit React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+react.md)
-- Intlayer + Vue: [Intlayer mit Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+vue.md)
-- Intlayer + Svelte: [Intlayer mit Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+svelte.md)
-- Intlayer + Solid: [Intlayer mit Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+solid.md)
-- Intlayer + Preact: [Intlayer mit Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_vite+preact.md)
+- Intlayer + React: [Intlayer mit React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_react.md)
+- Intlayer + Vue: [Intlayer mit Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_vue.md)
+- Intlayer + Svelte: [Intlayer mit Svelte](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_svelte.md)
+- Intlayer + Solid: [Intlayer mit Solid](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_solid.md)
+- Intlayer + Preact: [Intlayer mit Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_preact.md)
+- Intlayer + Lit: [Intlayer mit Lit](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/intlayer_with_astro_lit.md)
 </Step>
 
 <Step number={15} title="Inhalt Ihrer Komponenten extrahieren" isOptional={true}>
@@ -541,21 +565,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev

package/docs/de/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-08-30
+updatedAt: 2026-09-21
 title: "Astro + Lit i18n - Vollständiger Leitfaden zur Übersetzung Ihrer App"
 description: "Kein i18next mehr. Der 2026-Leitfaden zum Erstellen einer mehrsprachigen (i18n) Astro + Lit-App. Übersetzen Sie mit KI-Agenten und optimieren Sie Bundle-Größe, SEO und Performance."
 keywords:
@@ -20,6 +20,9 @@ slugs:
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
 applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
+  - version: 9.5.5
+    date: 2026-09-19
+    changes: "Verwendung der useIntlayer / useLocale Hooks von astro-intlayer in der Astro-Seite"
   - version: 8.9.0
     date: 2026-05-04
     changes: "Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
@@ -151,7 +154,7 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
   Das Kernpaket, das i18n-Tools für Konfigurationsmanagement, Übersetzungen, [Inhaltsdeklaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/dictionary/content_file.md), Transpilation und [CLI-Befehle](https://github.com/aymericzip/intlayer/blob/main/docs/docs/de/cli/index.md) bereitstellt.
 
 - **astro-intlayer**
-  Enthält das Astro-Integrations-Plugin, um Intlayer mit dem [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production) zu verbinden, sowie die Middleware zur Erkennung der bevorzugten Sprache des Benutzers, zur Verwaltung von Cookies und zur Handhabung von URL-Weiterleitungen.
+  Enthält das Astro-Integrations-Plugin zur Einbindung von Intlayer in den [Vite-Bundler](https://vite.dev/guide/why.html#why-bundle-for-production), eine Middleware, die das Gebietsschema jeder Anfrage in `Astro.locals.intlayer` auflöst, sowie die Hooks `useIntlayer` / `useDictionary` / `useLocale`. Derselbe Importpfad löst im `.astro`-Frontmatter zur Server-Implementierung und in `<script>`-Blöcken zur Client-Implementierung (unterstützt durch `vanilla-intlayer`) auf.
 
 - **lit**
   Das Kern-Lit-Paket zum Erstellen schneller und leichter Web Components.
@@ -165,6 +168,30 @@ bun add intlayer astro-intlayer lit lit-intlayer @astrojs/lit
 </Step>
 <Step number={2} title="Konfigurieren Sie Ihr Projekt">
 
+### Architektur
+
+In dieser Architektur erstellt die in `astro.config.ts` registrierte `intlayer()`-Integration Ihre Wörterbücher und fügt eine Middleware hinzu, die das Gebietsschema jeder Anfrage auflöst und unter `Astro.locals.intlayer` bereitstellt. Seiten befinden sich unter einem Rest-Segment `src/pages/[...locale]/`, sodass das Standard-Gebietsschema ohne Präfix bereitgestellt wird und jedes andere Gebietsschema eine eigene dedizierte URL erhält. `.astro`-Dateien lesen den Inhalt mit den `useIntlayer` / `useLocale`-Hooks von `astro-intlayer` für das Server-Rendering, und die Lit-Insel (`src/components/lit/LitDemo.ts`) empfängt das vom Server erkannte Gebietsschema als Prop und übergibt es an `lit-intlayer` für den interaktiven Teil. Inhaltsdeklarationen werden neben Ihren Komponenten in `src/` abgelegt.
+
+```bash
+.
+├── src
+│   ├── components
+│   │   └── lit
+│   │       ├── app.content.ts        # App content declaration
+│   │       └── LitDemo.ts            # Lit custom element (content + locale switcher)
+│   └── pages
+│       ├── [...locale]
+│       │   └── index.astro           # Localized page mounting the custom element
+│       ├── robots.txt.ts             # robots.txt endpoint
+│       └── sitemap.xml.ts            # Localized sitemap endpoint
+├── astro.config.ts                   # Astro config with the intlayer() and lit() integrations
+├── intlayer.config.ts
+├── package.json
+└── tsconfig.json
+```
+
+### Konfiguration
+
 Erstellen Sie eine Konfigurationsdatei, um die Sprachen Ihrer Anwendung zu definieren:
 
 ```typescript fileName="intlayer.config.ts"
@@ -246,19 +273,21 @@ export default litDemoContent;
 </Step>
 <Step number={5} title="Inhalt in Astro verwenden">
 
-Sie können die Wörterbücher direkt in Ihren `.astro`-Dateien verwenden, indem Sie die von `intlayer` exportierten Kern-Helfer nutzen. Sie sollten außerdem SEO-Metadaten (wie hreflang und Canonical-Links) zu jeder Seite hinzufügen. Lit-Custom-Elements werden über ein Client-`<script>` importiert und im Body platziert.
+Verwenden Sie Ihre Wörterbücher in `.astro`-Dateien mit den von `astro-intlayer` exportierten Hooks. Sie teilen die Signaturen von `react-intlayer`: `useIntlayer("key")` gibt den Inhalt eines Wörterbuchs zurück und `useLocale()` das aktuelle Gebietsschema, ohne dass Argumente übergeben werden müssen.
+
+Das Gebietsschema stammt von der `astro-intlayer`-Middleware, die die Integration vor Ihrer eigenen `src/middleware.ts` registriert. Sie löst es für jede Anfrage auf, aus dem URL-Präfix, dann dem vom Client gespeicherten Gebietsschema (Cookie oder Header), dann `Accept-Language`, und speichert es in `Astro.locals.intlayer`. Vorgerenderte Seiten verwenden nur die URL, da sie einmal für jeden Besucher gerendert werden.
+
+Lit-Custom-Elements werden über ein Client-`<script>` importiert und im Body platziert.
 
 ```astro fileName="src/pages/[...locale]/index.astro"
 ---
+import { useIntlayer, useLocale } from "astro-intlayer";
 import {
-  getIntlayer,
-  getLocaleFromPath,
   getLocalizedUrl,
-  getHTMLTextDir,
   getPrefix,
   localeMap,
   defaultLocale,
-  type LocalesValues,
+  getHTMLTextDir,
 } from "intlayer";
 
 export const getStaticPaths = () => {
@@ -267,8 +296,11 @@ export const getStaticPaths = () => {
   }));
 };
 
-const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
-const { greeting } = getIntlayer("lit-demo", locale);
+// Vom Middleware aufgelöstes Gebietsschema (z. B. /de/about -> 'de')
+const { locale } = useLocale();
+
+// Inhalt des 'lit-demo'-Wörterbuchs für dieses Gebietsschema
+const { greeting } = useIntlayer("lit-demo");
 ---
 
 <!doctype html>
@@ -327,6 +359,8 @@ const { greeting } = getIntlayer("lit-demo", locale);
 > <img src={String(content.image.src)} alt={String(content.image)} />
 > ```
 
+> `Astro.locals.intlayer` stellt auch `locale`, `defaultLocale` und `availableLocales` für Ihre eigenen Middlewares und Endpunkte bereit. Übergeben Sie ein Gebietsschema oder einen Selektor als zweites Argument (`useIntlayer("app", "fr")`, `useIntlayer("faq", { item: 2 })`), um das Anfrage-Gebietsschema für einen Aufruf zu überschreiben.
+
 > **Hinweis zum Routing-Setup:**
 > Die von Ihnen verwendete Verzeichnisstruktur hängt von der Einstellung `middleware.routing` in `intlayer.config.ts` ab:
 >
@@ -483,10 +517,10 @@ const pathList: SitemapUrlEntry[] = [
   { path: "/about", changefreq: "monthly", priority: 0.7 },
 ];
 
-const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
-
 export const GET: APIRoute = async ({ site }) => {
-  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
+  const xmlOutput = generateSitemap(pathList, {
+    siteUrl: "https://example.com",
+  });
 
   return new Response(xmlOutput, {
     headers: { "Content-Type": "application/xml" },
@@ -586,21 +620,7 @@ bun x intlayer extract
  </Tab>
  <Tab value='Babel-Compiler'>
 
-> Since v9, the `intlayerCompiler` is included in the `intlayer` plugin. So you don't need to add it manually.
-
-Aktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:
-
-```ts fileName="vite.config.ts"
-import { defineConfig } from "vite";
-import { intlayer, intlayerCompiler } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    intlayer(),
-    intlayerCompiler(), // Adds the compiler plugin
-  ],
-});
-```
+Bauen Sie Ihre Anwendung, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren
 
 ```bash packageManager="npm"
 npm run build # Oder npm run dev