@intlayer/docs 9.5.5 → 9.5.7

package/docs/id/dictionary/html.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-01-20
-updatedAt: 2026-01-22
+updatedAt: 2026-09-21
 title: Konten HTML
 description: Pelajari cara mendeklarasikan dan menggunakan konten HTML dengan komponen kustom di Intlayer. Ikuti dokumentasi ini untuk menyematkan konten mirip HTML yang kaya dengan penggantian komponen dinamis dalam proyek yang di-internasionalisasi.
 keywords:
@@ -13,6 +13,8 @@ keywords:
   - React
   - Vue
   - Svelte
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -235,6 +237,83 @@ Saat Anda mengakses konten melalui `useIntlayer`, node HTML sudah disiapkan untu
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Di Remix 3, node HTML diselesaikan menjadi string HTML. Sisipkan dengan prop `innerHTML` dari Remix JSX, atau dengan `html.raw` dalam tampilan `html-template`.
+
+    ```tsx fileName="src/views/home.tsx"
+    import { useIntlayer } from "remix-intlayer";
+
+    export const HomePage = () => () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return <div innerHTML={myHtmlContent.value} />;
+    };
+    ```
+
+    ```ts fileName="src/views/home.ts"
+    import { html } from "remix/html-template";
+    import { useIntlayer } from "remix-intlayer";
+
+    export const renderHomePage = () => {
+      const { myHtmlContent } = useIntlayer("app");
+
+      return html.raw`<div>${myHtmlContent.value}</div>`;
+    };
+    ```
+
+    > Remix secara default menghindari nilai yang diinterpolasi. `innerHTML` dan `html.raw` adalah dua pengecualian, yang dibutuhkan oleh string HTML.
+
+    Gunakan metode `.use()` untuk mengganti tag atau memetakan komponen kustom. Penggantian adalah fungsi yang mengembalikan string HTML:
+
+    ```tsx
+    <div
+      innerHTML={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Di Astro, node HTML diselesaikan menjadi string HTML. Sisipkan dengan direktif `set:html` dalam template, atau dengan `innerHTML` dalam `<script>` klien.
+
+    ```astro fileName="src/pages/index.astro"
+    ---
+    import { useIntlayer } from "astro-intlayer";
+
+    const { myHtmlContent } = useIntlayer("app");
+    ---
+
+    <div set:html={myHtmlContent.value} />
+    ```
+
+    ```astro fileName="src/components/Content.astro"
+    <div id="content"></div>
+
+    <script>
+      import { useIntlayer } from "astro-intlayer";
+
+      const { myHtmlContent } = useIntlayer("app");
+
+      document.querySelector("#content")!.innerHTML = myHtmlContent.value;
+    </script>
+    ```
+
+    > Astro secara default menghindari `{ekspresi}`. `set:html` adalah pengecualian, yang dibutuhkan oleh string HTML.
+
+    Gunakan metode `.use()` untuk mengganti tag atau memetakan komponen kustom. Penggantian adalah fungsi yang mengembalikan string HTML:
+
+    ```astro
+    <div
+      set:html={myHtmlContent.use({
+        p: ({ children }) => `<p class="prose">${children}</p>`,
+        CustomLink: ({ children }) => `<a href="/details">${children}</a>`,
+      })}
+    />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Konfigurasi Global dengan `HTMLProvider`
@@ -470,6 +549,41 @@ Anda dapat mengonfigurasi rendering HTML secara global untuk seluruh aplikasi An
     > Mengimpor renderer HTML Anda secara dinamis adalah cara yang baik untuk mengurangi ukuran bundle aplikasi Anda.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix tidak memiliki pohon komponen untuk menampung provider, sehingga konfigurasi diinstal sekali, sebagai singleton, saat server dimulai. Ini mengonfigurasi renderer yang dikembalikan oleh `useHTMLRenderer()`. Node `html` yang dikembalikan oleh `useIntlayer` dirender apa adanya; ganti tag per node dengan `.use()`.
+
+    ```typescript fileName="src/router.ts"
+    import { installIntlayerHTML } from "remix-intlayer/html";
+
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+    ```
+
+    > Gunakan `installIntlayerHTMLDynamic(async () => …)` untuk memuat renderer secara lazy; loader hanya berjalan pada panggilan pertama.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro tidak memiliki pohon komponen untuk menampung provider, sehingga konfigurasi diinstal sekali, sebagai singleton, di middleware (server) dan dalam `<script>` klien (browser). Ini mengonfigurasi renderer yang dikembalikan oleh `useHTMLRenderer()`. Node `html` yang dikembalikan oleh `useIntlayer` dirender apa adanya; ganti tag per node dengan `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerHTML } from "astro-intlayer/html";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Berjalan sekali saat server dimulai; middleware Intlayer itu sendiri
+    // didaftarkan oleh integrasi, sebelum file ini.
+    installIntlayerHTML({
+      renderHTML: (html) => html.replaceAll("<p>", '<p class="prose">'),
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    > Gunakan `installIntlayerHTMLDynamic(async () => …)` untuk memuat renderer secara lazy; loader hanya berjalan pada panggilan pertama.
+
+  </Tab>
 </Tabs>
 
 ### Merender Manual & Alat Lanjutan
@@ -642,15 +756,69 @@ Jika Anda perlu merender string HTML mentah atau memiliki kontrol lebih atas pem
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useHTMLRenderer()` Hook
+
+    Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya oleh `installIntlayerHTML()`. Ini mengembalikan string HTML.
+
+    ```tsx
+    import { useHTMLRenderer } from "remix-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+
+    return <div innerHTML={renderHTML("<p>Hello <strong>World</strong></p>")} />;
+    ```
+
+    #### Utilitas `renderHTML()`
+
+    Utilitas mandiri yang mengabaikan konfigurasi global.
+
+    ```tsx
+    import { renderHTML } from "remix-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useHTMLRenderer()` Hook
+
+    Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya oleh `installIntlayerHTML()`. Ini mengembalikan string HTML.
+
+    ```astro
+    ---
+    import { useHTMLRenderer } from "astro-intlayer/html";
+
+    const renderHTML = useHTMLRenderer();
+    ---
+
+    <div set:html={renderHTML("<p>Hello <strong>World</strong></p>")} />
+    ```
+
+    #### Utilitas `renderHTML()`
+
+    Utilitas mandiri yang mengabaikan konfigurasi global.
+
+    ```astro
+    ---
+    import { renderHTML } from "astro-intlayer/html";
+
+    const html = renderHTML("<p>Hello</p>");
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Referensi Opsi
 
 Opsi-opsi ini dapat diteruskan ke `HTMLProvider`, `HTMLRenderer`, `useHTMLRenderer`, dan `renderHTML`.
 
-| Opsi         | Tipe                  | Default | Deskripsi                                                                                                 |
-| :----------- | :-------------------- | :------ | :-------------------------------------------------------------------------------------------------------- |
-| `components` | `Record<string, any>` | `{}`    | Peta dari tag HTML atau nama komponen kustom ke komponen.                                                 |
-| `renderHTML` | `Function`            | `null`  | Fungsi render kustom untuk menggantikan sepenuhnya parser HTML default (Hanya untuk provider Vue/Svelte). |
+| Opsi         | Tipe                  | Default | Deskripsi                                                                                                           |
+| :----------- | :-------------------- | :------ | :------------------------------------------------------------------------------------------------------------------ |
+| `components` | `Record<string, any>` | `{}`    | Peta dari tag HTML atau nama komponen kustom ke komponen.                                                           |
+| `renderHTML` | `Function`            | `null`  | Fungsi rendering kustom untuk sepenuhnya menggantikan parser HTML default (penyedia Vue, Svelte, Remix, dan Astro). |
 
 > Catatan: Untuk React dan Preact, tag HTML standar disediakan secara otomatis. Anda hanya perlu meneruskan prop `components` jika ingin menimpanya atau menambahkan komponen kustom.

package/docs/id/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-05-19
+updatedAt: 2026-09-21
 title: Markdown
 description: Pelajari cara mendeklarasikan dan menggunakan konten Markdown di situs web multibahasa Anda dengan Intlayer. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengintegrasikan Markdown dengan mulus ke dalam proyek Anda.
 keywords:
@@ -11,6 +11,8 @@ keywords:
   - Next.js
   - JavaScript
   - React
+  - Remix
+  - Astro
 slugs:
   - doc
   - concept
@@ -487,6 +489,111 @@ Rendering Markdown mendukung **MDX** — gunakan komponen JSX/kerangka kerja apa
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    Di Remix 3, node Markdown dirender di server menjadi string HTML. Sisipkan dengan prop `innerHTML` dari Remix JSX, atau dengan `html.raw` dalam tampilan `html-template`.
+
+    ```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 secara default menghindari nilai yang diinterpolasi. `innerHTML` dan `html.raw` adalah dua pengecualian, yang dibutuhkan oleh string Markdown yang dirender.
+
+    Anda juga dapat memberikan penggantian lokal untuk tag tertentu menggunakan metode `.use()`. Penggantian adalah fungsi yang mengembalikan string HTML:
+
+    ```tsx
+    <div
+      innerHTML={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` adalah string HTML yang dirender, sedangkan `String()` / `.toString()` mengembalikan sumber Markdown mentah:
+
+    ```tsx
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Dan Anda dapat mengakses metadata markdown Anda seperti:
+
+    ```tsx
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    Di Astro, node Markdown dirender menjadi string HTML. Sisipkan dengan direktif `set:html` dalam template, atau dengan `innerHTML` dalam `<script>` klien.
+
+    ```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 secara default menghindari `{ekspresi}`. `set:html` adalah pengecualian, yang dibutuhkan oleh string Markdown yang dirender.
+
+    Anda juga dapat memberikan penggantian lokal untuk tag tertentu menggunakan metode `.use()`. Penggantian adalah fungsi yang mengembalikan string HTML:
+
+    ```astro
+    <div
+      set:html={myMarkdownContent.use({
+        h1: ({ children }) => `<h1 class="text-3xl font-bold">${children}</h1>`,
+      })}
+    />
+    ```
+
+    `.value` adalah string HTML yang dirender, sedangkan `String()` / `.toString()` mengembalikan sumber Markdown mentah:
+
+    ```astro
+    myMarkdownContent.value // "<h1>…</h1>"
+    String(myMarkdownContent) // "# …"
+    myMarkdownContent.toString() // "# …"
+    ```
+
+    Dan Anda dapat mengakses metadata markdown Anda seperti:
+
+    ```astro
+    myMarkdownContent.metadata
+    myMarkdownContent.metadata.title
+    ```
+
+  </Tab>
 </Tabs>
 
 ### 2. Utilitas Pembantu (Hanya String Markdown)
@@ -698,6 +805,60 @@ Utilitas ini merender **hanya string Markdown mentah** dan independen dari `useI
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+    #### `useMarkdownRenderer()` Hook
+
+    Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya oleh `installIntlayerMarkdown()`. Ini mengembalikan string HTML.
+
+    ```tsx
+    import { useMarkdownRenderer } from "remix-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+
+    return <div innerHTML={renderMarkdown("# My Title")} />;
+    ```
+
+    #### Utilitas `renderMarkdown()`
+
+    Utilitas mandiri yang mengabaikan konfigurasi global.
+
+    ```tsx
+    import { renderMarkdown } from "remix-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+    #### `useMarkdownRenderer()` Hook
+
+    Dapatkan fungsi renderer yang telah dikonfigurasi sebelumnya oleh `installIntlayerMarkdown()`. Ini mengembalikan string HTML.
+
+    ```astro
+    ---
+    import { useMarkdownRenderer } from "astro-intlayer/markdown";
+
+    const renderMarkdown = useMarkdownRenderer({ forceBlock: true });
+    ---
+
+    <div set:html={renderMarkdown("# My Title")} />
+    ```
+
+    #### Utilitas `renderMarkdown()`
+
+    Utilitas mandiri yang mengabaikan konfigurasi global.
+
+    ```astro
+    ---
+    import { renderMarkdown } from "astro-intlayer/markdown";
+
+    const html = renderMarkdown("# My Title", { forceBlock: true });
+    ---
+
+    <div set:html={html} />
+    ```
+
+  </Tab>
 </Tabs>
 
 ## Konfigurasi Global dengan `MarkdownProvider`
@@ -997,6 +1158,73 @@ Utilitas ini merender **hanya string Markdown mentah** dan independen dari `useI
     > Mengimpor perender Markdown Anda secara dinamis adalah cara yang bagus untuk mengurangi ukuran bundel aplikasi Anda.
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix tidak memiliki pohon komponen untuk menampung provider, sehingga konfigurasi diinstal sekali, sebagai singleton, saat server dimulai. Ini mengonfigurasi renderer yang dikembalikan oleh `useMarkdownRenderer()`. Node `md` yang dikembalikan oleh `useIntlayer` dirender dengan kompiler default; ganti tag per node dengan `.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>`,
+      },
+    });
+    ```
+
+    Anda juga dapat menggunakan renderer markdown Anda sendiri:
+
+    ```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;
+      },
+    });
+    ```
+
+    > Gunakan `installIntlayerMarkdownDynamic(async () => …)` untuk memuat renderer secara lazy; loader hanya berjalan pada panggilan pertama.
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Astro tidak memiliki pohon komponen untuk menampung provider, sehingga konfigurasi diinstal sekali, sebagai singleton, di middleware (server) dan dalam `<script>` klien (browser). Ini mengonfigurasi renderer yang dikembalikan oleh `useMarkdownRenderer()`. Node `md` yang dikembalikan oleh `useIntlayer` dirender dengan kompiler default; ganti tag per node dengan `.use()`.
+
+    ```typescript fileName="src/middleware.ts"
+    import { installIntlayerMarkdown } from "astro-intlayer/markdown";
+    import { defineMiddleware } from "astro:middleware";
+
+    // Berjalan sekali saat server dimulai; middleware Intlayer itu sendiri
+    // didaftarkan oleh integrasi, sebelum file ini.
+    installIntlayerMarkdown({
+      forceBlock: true,
+      components: {
+        h1: ({ children }) => `<h1 class="text-2xl font-bold">${children}</h1>`,
+      },
+    });
+
+    export const onRequest = defineMiddleware((_context, next) => next());
+    ```
+
+    Anda juga dapat menggunakan renderer markdown Anda sendiri:
+
+    ```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;
+      },
+    });
+    ```
+
+    > Gunakan `installIntlayerMarkdownDynamic(async () => …)` untuk memuat renderer secara lazy; loader hanya berjalan pada panggilan pertama.
+
+  </Tab>
 </Tabs>
 
 ## Suspense
@@ -1325,6 +1553,40 @@ Anda dapat menggunakan fungsi `parseMarkdown` dari paket Intlayer framework Anda
     ```
 
   </Tab>
+  <Tab label="Remix" value="remix">
+
+    Remix 3 merender di server dan mengalirkan HTML, sehingga tidak ada AST yang perlu dikirim ke klien. Parse sekali, dan render AST di mana pun halaman dibangun:
+
+    ```tsx fileName="src/views/article.tsx"
+    import { parseMarkdown, renderMarkdown } from "remix-intlayer/markdown";
+
+    // 1. Parse markdown menjadi AST yang dapat diserialisasi (misalnya sekali, saat pemuatan modul)
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+
+    export const ArticlePage = () => () => (
+      // 2. Render AST: renderer menerima string mentah atau AST yang telah diparse
+      <article innerHTML={renderMarkdown(ast)} />
+    );
+    ```
+
+  </Tab>
+  <Tab label="Astro" value="astro">
+
+    Halaman Astro dirender di server, sehingga tidak ada AST yang perlu dikirim ke klien. Parse Markdown di frontmatter dan render dengan `set:html`:
+
+    ```astro fileName="src/pages/article.astro"
+    ---
+    import { parseMarkdown, renderMarkdown } from "astro-intlayer/markdown";
+
+    // 1. Parse markdown menjadi AST yang dapat diserialisasi
+    const ast = parseMarkdown("## My title \n\nLorem Ipsum");
+    ---
+
+    <!-- 2. Render AST: renderer menerima string mentah atau AST yang telah diparse -->
+    <article set:html={renderMarkdown(ast)} />
+    ```
+
+  </Tab>
 </Tabs>
 
 Pola ini memastikan bahwa logika parsing Markdown dieksekusi sepenuhnya di server, secara signifikan mengurangi waktu eksekusi di sisi klien dan meningkatkan kecepatan hidrasi awal.

package/docs/id/intlayer_with_analog.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Analog i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Analog multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -157,6 +157,28 @@ bun add intlayer angular-intlayer vite-intlayer
 </Step>
 <Step number={2} title="Konfigurasi Proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, `angular-intlayer` menyediakan `provideIntlayer()`, yang didaftarkan di `src/app/app.config.ts` sehingga setiap komponen dan halaman berbasis file dapat membaca kontennya melalui sinyal `useIntlayer`. Analog dibangun di atas Vite, sehingga plugin `intlayer()` dari `vite-intlayer` ditambahkan di samping `analog()` di `vite.config.ts` untuk memantau dan membangun kembali deklarasi konten Anda serta menjalankan proxy locale. Deklarasi konten ditempatkan bersama komponen dan halaman di `src/app/`.
+
+```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
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/id/intlayer_with_angular_19.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 19 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Angular 19 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -167,6 +167,29 @@ bun add @angular-builders/custom-webpack --dev
 </Step>
 <Step number={2} title="Konfigurasi proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, `angular-intlayer` menyediakan `provideIntlayer()`, yang didaftarkan di `src/app/app.config.ts` sehingga setiap komponen dapat membaca kontennya melalui sinyal `useIntlayer`. Angular CLI dialihkan ke custom builder Webpack, dan `webpack.config.ts` menggabungkan plugin Intlayer ke dalam build untuk memantau dan membangun kembali deklarasi konten Anda. Deklarasi konten ditempatkan bersama komponen di `src/app/`.
+
+```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
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}

package/docs/id/intlayer_with_angular_21.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-31
+updatedAt: 2026-09-21
 title: "Angular 22 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Angular 22 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -166,6 +166,29 @@ bun add @angular-builders/custom-esbuild --dev
 </Step>
 <Step number={2} title="Konfigurasi proyek Anda">
 
+### Arsitektur
+
+Dalam arsitektur ini, `angular-intlayer` menyediakan `provideIntlayer()`, yang didaftarkan di `src/app/app.config.ts` sehingga setiap komponen dapat membaca kontennya melalui sinyal `useIntlayer`. Angular CLI dialihkan ke custom builder esbuild, dan `esbuild.plugins.ts` mendaftarkan plugin Intlayer ke dalam build untuk memantau dan membangun kembali deklarasi konten Anda. Deklarasi konten ditempatkan bersama komponen di `src/app/`.
+
+```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
+```
+
+### Konfigurasi
+
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}