@intlayer/docs 8.11.1 → 8.11.3

package/docs/id/dictionary/markdown.md

@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.11.0
+    date: 2026-05-28
+    changes: "Mengizinkan pra-parsing AST Markdown untuk SSR / hidrasi"
   - version: 8.10.0
     date: 2026-05-19
     changes: "Menambahkan dukungan untuk file `.content.md`"
@@ -1149,6 +1152,164 @@ export class MyComponent {
 
 ---
 
+## Rendering Sisi Server (SSR) dan Hidrasi
+
+Dibandingkan dengan parser Markdown lainnya seperti remark / rehype, Intlayer Markdown bebas ketergantungan dan berjalan di sisi klien maupun server.
+
+Namun Intlayer mengoptimalkan parsing untuk framework Server-Side Rendering (SSR) (seperti Next.js App Router, React Router, Nuxt, SvelteKit, dll.).
+
+Hidrasi di browser memakan waktu, sehingga Intlayer memungkinkan Anda untuk mem-parsing Markdown terlebih dahulu ke dalam Abstract Syntax Tree (AST) di server, lalu mengirimkannya sebagai objek JSON yang dapat diserialisasi ke frontend.
+
+Anda dapat menggunakan fungsi `parseMarkdown` dari paket Intlayer framework Anda di sisi server untuk menghasilkan AST yang dapat diserialisasi (objek `ParsedMarkdown`), dan meneruskannya secara langsung ke frontend. Semua utilitas rendering Intlayer (seperti `<MarkdownRenderer>`, `useMarkdownRenderer`, dll.) secara otomatis menerima objek AST ini dan merendernya dengan lancar.
+
+### Contoh dalam Arsitektur Server/Klien
+
+<Tabs group="framework">
+  <Tab label="React Router" value="react">
+
+    ```tsx fileName="server.ts"
+    import { parseMarkdown } from "react-intlayer/markdown";
+
+    // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+    export const loader = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Kembalikan AST sebagai JSON ke klien
+      return Response.json({ content: ast });
+    };
+    ```
+
+    ```tsx fileName="client.tsx"
+    import { useLoaderData } from "react-router";
+    import { MarkdownRenderer } from "react-intlayer/markdown";
+
+    // 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang
+    export default function Page() {
+      const { content } = useLoaderData();
+
+      // Renderer menerima string mentah atau AST hasil parsing
+      return <MarkdownRenderer content={content} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+    ```tsx fileName="app/page.tsx"
+    import { parseMarkdown } from "next-intlayer/markdown";
+    import { MarkdownRenderer } from "next-intlayer/markdown";
+
+    export default async function Page() {
+      // 1. Parsing markdown ke dalam AST yang dapat diserialisasi di server
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // 2. Render AST secara langsung
+      // Dalam Server Component, ini bekerja dengan lancar dan meneruskan AST
+    // secara langsung ke komponen klien di bawahnya jika diperlukan.
+      return <MarkdownRenderer content={ast} />;
+    }
+    ```
+
+  </Tab>
+  <Tab label="Vue / Nuxt" value="vue">
+
+    ```vue fileName="pages/index.vue"
+    <script setup lang="ts">
+    import { parseMarkdown } from "vue-intlayer/markdown";
+    import { MarkdownRenderer } from "vue-intlayer/markdown";
+
+    // 1. Ambil dan parsing markdown ke dalam AST di server
+    const { data: ast } = await useAsyncData('markdown', () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      return parseMarkdown(markdownString);
+    });
+    </script>
+
+    <template>
+      <!-- 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang -->
+      <MarkdownRenderer :content="ast" />
+    </template>
+    ```
+
+  </Tab>
+  <Tab label="SvelteKit" value="svelte">
+
+    ```typescript fileName="+page.server.ts"
+    import { parseMarkdown } from "svelte-intlayer/markdown";
+
+    // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+    export const load = async () => {
+      const markdownString = "## My title \n\nLorem Ipsum";
+      const ast = parseMarkdown(markdownString);
+
+      // Kembalikan AST ke klien
+      return { content: ast };
+    };
+    ```
+
+    ```svelte fileName="+page.svelte"
+    <script lang="ts">
+      import { MarkdownRenderer } from "svelte-intlayer/markdown";
+      export let data;
+    </script>
+
+    <!-- 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang -->
+    <MarkdownRenderer value={data.content} />
+    ```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+    Angular SSR biasanya menyelesaikan data di server selama pemuatan awal dan menghidrasi di klien. Anda dapat menggunakan resolver untuk meneruskan AST.
+
+    ```typescript fileName="app.resolver.ts"
+    import { Injectable } from "@angular/core";
+    import { Resolve } from "@angular/router";
+    import { parseMarkdown, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Injectable({ providedIn: "root" })
+    export class MarkdownResolver implements Resolve<ParsedMarkdown> {
+      resolve(): ParsedMarkdown {
+        const markdownString = "## My title \n\nLorem Ipsum";
+        // 1. Di server: Parsing markdown ke dalam AST yang dapat diserialisasi
+        return parseMarkdown(markdownString);
+      }
+    }
+    ```
+
+    ```typescript fileName="app.component.ts"
+    import { Component } from "@angular/core";
+    import { ActivatedRoute } from "@angular/router";
+    import { IntlayerMarkdownService, type ParsedMarkdown } from "angular-intlayer/markdown";
+
+    @Component({
+      selector: "app-root",
+      template: `<div [innerHTML]="renderedMarkdown"></div>`,
+    })
+    export class AppComponent {
+      renderedMarkdown: string = "";
+
+      constructor(
+        private route: ActivatedRoute,
+        private markdownService: IntlayerMarkdownService
+      ) {
+        // 2. Di klien: Render AST secara langsung tanpa mem-parsing ulang
+        this.route.data.subscribe((data) => {
+          this.renderedMarkdown = this.markdownService.renderMarkdown(
+            data.markdownAst
+          ) as string;
+        });
+      }
+    }
+    ```
+
+  </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.
+
 ## Referensi Opsi
 
 Opsi ini dapat diteruskan ke `MarkdownProvider`, `MarkdownRenderer`, `useMarkdownRenderer`, dan `renderMarkdown`.

package/docs/id/interest_of_intlayer.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-08-14
-updatedAt: 2025-09-27
+updatedAt: 2026-05-31
 title: Ketertarikan pada Intlayer
 description: Temukan manfaat dan keuntungan menggunakan Intlayer dalam proyek Anda. Pahami mengapa Intlayer menonjol di antara kerangka kerja lainnya.
 keywords:
@@ -13,6 +13,9 @@ slugs:
   - doc
   - why
 history:
+  - version: 8.11.2
+    date: 2026-05-31
+    changes: "Tambahkan Mengapa Intlayer di atas bagian alternatif"
   - version: 7.3.1
     date: 2025-11-27
     changes: "Rilis Kompiler"
@@ -26,197 +29,52 @@ history:
 
 # Mengapa Anda harus mempertimbangkan Intlayer?
 
-## Apa itu Intlayer?
-
-**Intlayer** adalah pustaka internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Ini memungkinkan deklarasi konten Anda di mana saja dalam kode Anda. Ini mengubah deklarasi konten multibahasa menjadi kamus terstruktur untuk diintegrasikan dengan mudah dalam kode Anda. Menggunakan TypeScript, **Intlayer** membuat pengembangan Anda lebih kuat dan efisien.
-
-## Mengapa Intlayer dibuat?
-
-Intlayer dibuat untuk memecahkan masalah umum yang memengaruhi semua pustaka i18n umum seperti `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, dan `vue-i18n`.
-
-Semua solusi ini mengadopsi pendekatan terpusat untuk mendaftarkan dan mengelola konten Anda. Misalnya:
-
-```bash
-.
-├── locales
-│   ├── en.json
-│   ├── es.json
-│   └── fr.json
-├── i18n.ts
-└── src
-    └── components
-        └── MyComponent
-            └── index.tsx
-```
-
-Atau di sini menggunakan namespace:
-
-```bash
-.
-├── locales
-│   ├── en
-│   │  ├── footer.json
-│   │  └── navbar.json
-│   ├── fr
-│   │  ├── footer.json
-│   │  └── navbar.json
-│   └── es
-│      ├── footer.json
-│      └── navbar.json
-├── i18n.ts
-└── src
-    └── components
-        └── MyComponent
-            └── index.tsx
-```
-
-Jenis arsitektur ini memperlambat proses pengembangan dan membuat basis kode lebih kompleks untuk dipelihara karena beberapa alasan:
-
-1. **Untuk setiap komponen baru yang dibuat, Anda harus:**
-   - Membuat sumber daya/namespace baru di folder `locales`
-   - Ingat untuk mengimpor namespace baru di halaman Anda
-   - Menerjemahkan konten Anda (seringkali dilakukan secara manual dengan salin/tempel dari penyedia AI)
-
-2. **Untuk setiap perubahan yang dilakukan pada komponen Anda, Anda harus:**
-   - Mencari sumber daya/namespace terkait (jauh dari komponen)
-   - Menerjemahkan konten Anda
-   - Memastikan konten Anda mutakhir untuk setiap lokal
-   - Memverifikasi namespace Anda tidak menyertakan kunci/nilai yang tidak digunakan
-   - Memastikan struktur file JSON Anda sama untuk semua lokal
-
-Pada proyek profesional yang menggunakan solusi ini, platform lokalisasi sering digunakan untuk membantu mengelola terjemahan konten Anda. Namun, ini dapat dengan cepat menjadi mahal untuk proyek besar.
-
-Untuk memecahkan masalah ini, Intlayer mengadopsi pendekatan yang melingkupi konten Anda per komponen dan menjaga konten Anda tetap dekat dengan komponen Anda, seperti yang sering kita lakukan dengan CSS (`styled-components`), tipe, dokumentasi (`storybook`), atau pengujian unit (`jest`).
-
-```bash codeFormat="typescript"
-.
-└── components
-    └── MyComponent
-        ├── index.content.ts
-        ├── index.test.tsx
-        ├── index.stories.tsx
-        └── index.tsx
-```
-
-```bash codeFormat="commonjs"
-.
-└── components
-    └── MyComponent
-        ├── index.content.cjs
-        ├── index.test.mjs
-        ├── index.stories.mjs
-        └── index.tsx
-```
-
-```bash codeFormat="esm"
-.
-└── components
-    └── MyComponent
-        ├── index.content.mjs
-        ├── index.test.mjs
-        ├── index.stories.mjs
-        └── index.tsx
-```
-
-```tsx fileName="./components/MyComponent/index.content.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { t, type Dictionary } from "intlayer";
-
-const componentExampleContent = {
-  key: "component-example",
-  content: {
-    myTranslatedContent: t({
-      en: "Hello World",
-      es: "Hola Mundo",
-      fr: "Bonjour le monde",
-    }),
-  },
-} satisfies Dictionary;
-
-export default componentExampleContent;
-```
-
-```tsx fileName="./components/MyComponent/index.tsx" codeFormat={["typescript", "esm"]}
-import { useIntlayer } from "react-intlayer";
-
-export const ComponentExample = () => {
-  const { myTranslatedContent } = useIntlayer("component-example");
-
-  return <span>{myTranslatedContent}</span>;
-};
-```
-
-Pendekatan ini memungkinkan Anda untuk:
-
-1. **Meningkatkan kecepatan pengembangan**
-   - File `.content.{{ts|mjs|cjs|json}}` dapat dibuat menggunakan ekstensi VSCode
-   - Alat AI penyelesaian otomatis di IDE Anda (seperti GitHub Copilot) dapat membantu Anda mendeklarasikan konten Anda, mengurangi salin/tempel
-
-2. **Membersihkan basis kode Anda**
-   - Mengurangi kompleksitas
-   - Meningkatkan pemeliharaan
-
-3. **Menduplikasi komponen Anda dan konten terkaitnya dengan lebih mudah (Contoh: komponen login/register, dll.)**
-   - Dengan membatasi risiko memengaruhi konten komponen lain
-   - Dengan menyalin/menempel konten Anda dari satu aplikasi ke aplikasi lain tanpa dependensi eksternal
-
-4. **Menghindari pengotoran basis kode Anda dengan kunci/nilai yang tidak digunakan untuk komponen yang tidak digunakan**
-   - Jika Anda tidak menggunakan komponen, Intlayer tidak akan mengimpor konten terkaitnya
-   - Jika Anda menghapus komponen, Anda akan lebih mudah mengingat untuk menghapus konten terkaitnya karena akan ada di folder yang sama
-
-5. **Mengurangi biaya penalaran bagi agen AI untuk mendeklarasikan konten multibahasa Anda**
-   - Agen AI tidak perlu memindai seluruh basis kode Anda untuk mengetahui di mana harus mengimplementasikan konten Anda
-   - Terjemahan dapat dengan mudah dilakukan oleh alat AI penyelesaian otomatis di IDE Anda (seperti GitHub Copilot)
-
-6. **Mengoptimalkan performa pemuatan**
-   - Jika sebuah komponen dimuat secara malas (lazy-loaded), konten terkaitnya akan dimuat pada saat yang sama
-
-## Fitur tambahan Intlayer
-
-| Fitur                                                                                                                     | Deskripsi                                                                                                                                                                                                                                                                                                                                                                                                     |
-| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| ![Fitur](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                            | **Dukungan Lintas-Kerangka Kerja**<br><br>Intlayer kompatibel dengan semua kerangka kerja dan pustaka utama, termasuk Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, dan banyak lagi.                                                                                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Manajemen Konten Berbasis JavaScript**<br><br>Manfaatkan fleksibilitas JavaScript untuk mendefinisikan dan mengelola konten Anda secara efisien. <br><br> - [Deklarasi konten](https://intlayer.org/doc/concept/content)                                                                                                                                                                                    |
-| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/compiler.jpg?raw=true" alt="Fitur" width="700">    | **Kompiler**<br><br>Kompiler Intlayer mengekstrak konten secara otomatis dari komponen dan menghasilkan file kamus.<br><br> - [Kompiler](https://intlayer.org/doc/compiler)                                                                                                                                                                                                                                   |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/per_locale_content_declaration_file.png?raw=true) | **File Deklarasi Konten Per-Lokal**<br><br>Percepat pengembangan Anda dengan mendeklarasikan konten Anda sekali, sebelum pembuatan otomatis.<br><br> - [File Deklarasi Konten Per-Lokal](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                    |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Lingkungan Type-Safe**<br><br>Manfaatkan TypeScript untuk memastikan definisi konten dan kode Anda bebas dari kesalahan, sambil juga mendapatkan keuntungan dari penyelesaian otomatis IDE.<br><br> - [Konfigurasi TypeScript](https://intlayer.org/doc/environment/vite-and-react#configure-typescript)                                                                                                    |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/config_file.png?raw=true)                         | **Setup yang Disederhanakan**<br><br>Mulai dan jalankan dengan cepat dengan konfigurasi minimal. Sesuaikan pengaturan untuk internasionalisasi, perutean, AI, build, dan penanganan konten dengan mudah. <br><br> - [Jelajahi integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                 |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/content_retrieval.png?raw=true)                   | **Pengambilan Konten yang Disederhanakan**<br><br>Tidak perlu memanggil fungsi `t` Anda untuk setiap bagian konten. Ambil semua konten Anda secara langsung menggunakan satu hook.<br><br> - [Integrasi React](https://intlayer.org/doc/environment/create-react-app)                                                                                                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/server_component.png?raw=true)                    | **Implementasi Komponen Server yang Konsisten**<br><br>Sangat cocok untuk komponen server Next.js, gunakan implementasi yang sama untuk komponen klien dan server, tidak perlu meneruskan fungsi `t` Anda melalui setiap komponen server. <br><br> - [Komponen Server](https://intlayer.org/doc/environment/nextjs#step-7-utilize-content-in-your-code)                                                       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/file_tree.png?raw=true)                           | **Basis Kode yang Terorganisir**<br><br>Jaga basis kode Anda lebih terorganisir: 1 komponen = 1 kamus di folder yang sama. Terjemahan yang dekat dengan komponen masing-masing meningkatkan pemeliharaan dan kejelasan. <br><br> - [Cara kerja Intlayer](https://intlayer.org/doc/concept/how-works-intlayer)                                                                                                 |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/url_routing.png?raw=true)                         | **Perutean yang Ditingkatkan**<br><br>Dukungan penuh perutean aplikasi, beradaptasi dengan mulus ke struktur aplikasi yang kompleks, untuk Next.js, React, Vite, Vue.js, dll.<br><br> - [Jelajahi integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                             |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/markdown.png?raw=true)                            | **Dukungan Markdown**<br><br>Impor dan interpretasikan file lokal dan Markdown jarak jauh untuk konten multibahasa seperti kebijakan privasi, dokumentasi, dll. Interpretasikan dan buat metadata Markdown dapat diakses dalam kode Anda.<br><br> - [File konten](https://intlayer.org/doc/concept/content/file)                                                                                              |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/visual_editor.png?raw=true)                       | **Editor Visual & CMS Gratis**<br><br>Editor visual dan CMS gratis tersedia untuk penulis konten, menghilangkan kebutuhan akan platform lokalisasi. Jaga konten Anda tetap sinkron menggunakan Git, atau eksternalisasikan secara total atau sebagian dengan CMS.<br><br> - [Editor Intlayer](https://intlayer.org/doc/concept/editor) <br> - [CMS Intlayer](https://intlayer.org/doc/concept/cms)            |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/bundle.png?raw=true)                              | **Konten Tree-shakable**<br><br>Konten tree-shakable, mengurangi ukuran bundel akhir. Memuat konten per komponen, tidak termasuk konten yang tidak digunakan dari bundel Anda. Mendukung pemuatan malas (lazy loading) untuk meningkatkan efisiensi pemuatan aplikasi. <br><br> - [Optimasi build aplikasi](https://intlayer.org/doc/concept/how-works-intlayer#app-build-optimization)                       |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/static_rendering.png?raw=true)                    | **Rendering Statis**<br><br>Tidak memblokir Rendering Statis. <br><br> - [Integrasi Next.js](https://intlayer.org/doc/environment/nextjs)                                                                                                                                                                                                                                                                     |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/AI_translation.png?raw=true)                      | **Terjemahan Berbasis AI**<br><br>Ubah situs web Anda ke dalam 231 bahasa hanya dengan satu klik menggunakan alat terjemahan bertenaga AI canggih dari Intlayer dengan penyedia AI/kunci API Anda sendiri. <br><br> - [Integrasi CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [CLI Intlayer](https://intlayer.org/doc/concept/cli) <br> - [Isi otomatis](https://intlayer.org/doc/concept/auto-fill) |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true)                                 | **Integrasi Server MCP**<br><br>Menyediakan server MCP (Model Context Protocol) untuk otomatisasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang lancar langsung di dalam lingkungan pengembangan Anda. <br><br> - [Server MCP](https://github.com/aymericzip/intlayer/blob/main/docs/id/mcp_server.md)                                                                                          |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true)                    | **Ekstensi VSCode**<br><br>Intlayer menyediakan ekstensi VSCode untuk membantu Anda mengelola konten dan terjemahan, membangun kamus, menerjemahkan konten, dan banyak lagi. <br><br> - [Ekstensi VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                         |
-| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true)                    | **Interoperabilitas**<br><br>Memungkinkan interoperabilitas dengan react-i18next, next-i18next, next-intl, dan react-intl. <br><br> - [Intlayer dan react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer dan next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer dan next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next)               |
-| Menguji Terjemahan yang Hilang (CLI/CI)                                                                                   | ✅ CLI: npx intlayer content test (audit ramah CI)                                                                                                                                                                                                                                                                                                                                                            |
-
-## Perbandingan Intlayer dengan solusi lain
-
-| Fitur                                               | `intlayer`                                                                                                                                 | `react-i18next`                                                                                                | `react-intl` (FormatJS)                                                                                                                    | `lingui`                                                          | `next-intl`                                                                                                    | `next-i18next`                                                                                                 | `vue-i18n`                                                         |
-| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ |
-| **Terjemahan Dekat Komponen**                       | ✅ Ya, konten diletakkan bersama dengan setiap komponen                                                                                    | ❌ Tidak                                                                                                       | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                       | ❌ Tidak                                                                                                       | ✅ Ya - menggunakan `Single File Components` (SFCs)                |
-| **Integrasi TypeScript**                            | ✅ Lanjutan, tipe ketat yang dihasilkan secara otomatis                                                                                    | ⚠️ Dasar; perlu konfigurasi ekstra untuk keamanan                                                              | ✅ Bagus, tapi kurang ketat                                                                                                                | ⚠️ Tipifikasi, perlu konfigurasi                                  | ✅ Bagus                                                                                                       | ⚠️ Dasar                                                                                                       | ✅ Bagus (tipe tersedia; keamanan kunci perlu pengaturan)          |
-| **Deteksi Terjemahan yang Hilang**                  | ✅ Penyorotan kesalahan TypeScript dan kesalahan/peringatan waktu build                                                                    | ⚠️ Sebagian besar string fallback saat runtime                                                                 | ⚠️ String fallback                                                                                                                         | ⚠️ Perlu konfigurasi ekstra                                       | ⚠️ Runtime fallback                                                                                            | ⚠️ Runtime fallback                                                                                            | ⚠️ Runtime fallback/peringatan (dapat dikonfigurasi)               |
-| **Konten Kaya (JSX/Markdown/komponen)**             | ✅ Dukungan langsung                                                                                                                       | ⚠️ Terbatas / hanya interpolasi                                                                                | ⚠️ Sintaks ICU, bukan JSX asli                                                                                                             | ⚠️ Terbatas                                                       | ❌ Tidak dirancang untuk node kaya                                                                             | ⚠️ Terbatas                                                                                                    | ⚠️ Terbatas (komponen melalui `<i18n-t>`, Markdown melalui plugin) |
-| **Terjemahan Berbasis AI**                          | ✅ Ya, mendukung beberapa penyedia AI. Dapat digunakan dengan kunci API Anda sendiri. Mempertimbangkan konteks aplikasi dan cakupan konten | ❌ Tidak                                                                                                       | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                       | ❌ Tidak                                                                                                       | ❌ Tidak                                                           |
-| **Editor Visual**                                   | ✅ Ya, Editor Visual lokal + CMS opsional; dapat mengeksternalisasi konten basis kode; dapat disematkan                                    | ❌ Tidak / tersedia melalui platform lokalisasi eksternal                                                      | ❌ Tidak / tersedia melalui platform lokalisasi eksternal                                                                                  | ❌ Tidak / tersedia melalui platform lokalisasi eksternal         | ❌ Tidak / tersedia melalui platform lokalisasi eksternal                                                      | ❌ Tidak / tersedia melalui platform lokalisasi eksternal                                                      | ❌ Tidak / tersedia melalui platform lokalisasi eksternal          |
-| **Perutean Terlokalisasi**                          | ✅ Ya, mendukung jalur terlokalisasi secara langsung (berfungsi dengan Next.js & Vite)                                                     | ⚠️ Tidak bawaan, memerlukan plugin (misal: `next-i18next`) atau konfigurasi router kustom                      | ❌ Tidak, hanya pemformatan pesan, perutean harus manual                                                                                   | ⚠️ Tidak bawaan, memerlukan plugin atau konfigurasi manual        | ✅ Bawaan, App Router mendukung segmen `[locale]`                                                              | ✅ Bawaan                                                                                                      | ✅ Bawaan                                                          |
-| **Pembuatan Rute Dinamis**                          | ✅ Ya                                                                                                                                      | ⚠️ Plugin/ekosistem atau pengaturan manual                                                                     | ❌ Tidak disediakan                                                                                                                        | ⚠️ Plugin/manual                                                  | ✅ Ya                                                                                                          | ✅ Ya                                                                                                          | ❌ Tidak disediakan (Nuxt i18n menyediakan)                        |
-| **Pluralisasi**                                     | ✅ Pola berbasis enumerasi                                                                                                                 | ✅ Dapat dikonfigurasi (plugin seperti i18next-icu)                                                            | ✅ (ICU)                                                                                                                                   | ✅ (ICU/messageformat)                                            | ✅ Bagus                                                                                                       | ✅ Bagus                                                                                                       | ✅ Aturan plural bawaan                                            |
-| **Pemformatan (tanggal, angka, mata uang)**         | ✅ Pemformat yang dioptimalkan (Intl di balik layar)                                                                                       | ⚠️ Melalui plugin atau penggunaan Intl kustom                                                                  | ✅ Pemformat ICU                                                                                                                           | ✅ Helper ICU/CLI                                                 | ✅ Bagus (Intl helper)                                                                                         | ✅ Bagus (Intl helper)                                                                                         | ✅ Pemformat tanggal/angka bawaan (Intl)                           |
-| **Format Konten**                                   | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml sedang dikerjakan)                                                                             | ⚠️ .json                                                                                                       | ✅ .json, .js                                                                                                                              | ⚠️ .po, .json                                                     | ✅ .json, .js, .ts                                                                                             | ⚠️ .json                                                                                                       | ✅ .json, .js                                                      |
-| **Dukungan ICU**                                    | ⚠️ Sedang dikerjakan                                                                                                                       | ⚠️ Melalui plugin (i18next-icu)                                                                                | ✅ Ya                                                                                                                                      | ✅ Ya                                                             | ✅ Ya                                                                                                          | ⚠️ Melalui plugin (`i18next-icu`)                                                                              | ⚠️ Melalui pemformat/kompiler kustom                               |
-| **SEO Helper (hreflang, sitemap)**                  | ✅ Alat bawaan: helper untuk sitemap, robots.txt, metadata                                                                                 | ⚠️ Plugin komunitas/manual                                                                                     | ❌ Bukan inti                                                                                                                              | ❌ Bukan inti                                                     | ✅ Bagus                                                                                                       | ✅ Bagus                                                                                                       | ❌ Bukan inti (Nuxt i18n menyediakan helper)                       |
-| **Ekosistem / Komunitas**                           | ⚠️ Lebih kecil tetapi tumbuh cepat dan reaktif                                                                                             | ✅ Terbesar dan matang                                                                                         | ✅ Besar                                                                                                                                   | ⚠️ Lebih kecil                                                    | ✅ Ukuran menengah, fokus pada Next.js                                                                         | ✅ Ukuran menengah, fokus pada Next.js                                                                         | ✅ Besar dalam ekosistem Vue                                       |
-| **Server-side Rendering & Server Components**       | ✅ Ya, disederhanakan untuk SSR / React Server Components                                                                                  | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ⚠️ Didukung di tingkat halaman dengan pengaturan tambahan, tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ✅ Didukung, perlu pengaturan                                     | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ⚠️ Didukung di tingkat halaman tetapi perlu meneruskan fungsi-t pada pohon komponen untuk komponen server anak | ✅ SSR melalui Nuxt/Vue SSR (tanpa RSC)                            |
-| **Tree-shaking (hanya muat konten yang digunakan)** | ✅ Ya, per komponen pada waktu build melalui plugin Babel/SWC                                                                              | ⚠️ Biasanya memuat semua (dapat ditingkatkan dengan namespace/pemecahan kode)                                  | ⚠️ Biasanya memuat semua                                                                                                                   | ❌ Bukan default                                                  | ⚠️ Parsial                                                                                                     | ⚠️ Parsial                                                                                                     | ⚠️ Parsial (dengan pemecahan kode/pengaturan manual)               |
-| **Lazy loading**                                    | ✅ Ya, per lokal / per kamus                                                                                                               | ✅ Ya (misal: backend/namespace sesuai permintaan)                                                             | ✅ Ya (pemisahan bundel lokal)                                                                                                             | ✅ Ya (impor katalog dinamis)                                     | ✅ Ya (per rute/per lokal), perlu manajemen namespace                                                          | ✅ Ya (per rute/per lokal), perlu manajemen namespace                                                          | ✅ Ya (pesan lokal asinkron)                                       |
-| **Bersihkan konten yang tidak digunakan**           | ✅ Ya, per kamus pada waktu build                                                                                                          | ❌ Tidak, hanya melalui segmentasi namespace manual                                                            | ❌ Tidak, semua pesan yang dideklarasikan dibundel                                                                                         | ✅ Ya, kunci yang tidak digunakan terdeteksi & dihapus saat build | ❌ Tidak, dapat dikelola secara manual dengan manajemen namespace                                              | ❌ Tidak, dapat dikelola secara manual dengan manajemen namespace                                              | ❌ Tidak, hanya mungkin melalui lazy-loading manual                |
-| **Manajemen Proyek Besar**                          | ✅ Mendorong modularitas, cocok untuk sistem desain                                                                                        | ⚠️ Perlu disiplin file yang baik                                                                               | ⚠️ Katalog pusat bisa menjadi besar                                                                                                        | ⚠️ Bisa menjadi kompleks                                          | ✅ Modular dengan pengaturan                                                                                   | ✅ Modular dengan pengaturan                                                                                   | ✅ Modular dengan pengaturan Vue Router/Nuxt i18n                  |
+## Mengapa Intlayer dibandingkan alternatif?
+
+Dibandingkan dengan solusi utama seperti `next-intl` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
+
+<AccordionGroup>
+<Accordion header="Ukuran bundle">
+
+Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
+
+</Accordion>
+<Accordion header="Kemampuan Pemeliharaan">
+
+Mencakup konten aplikasi Anda **memfasilitasi pemeliharaan** untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer **diketik sepenuhnya** untuk memastikan keakuratan konten Anda.
+
+</Accordion>
+<Accordion header="Agen AI">
+
+Menempatkan konten bersama **mengurangi konteks yang diperlukan** dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti **CLI** untuk menguji terjemahan yang hilang,**[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)**, dan **[agent skill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.
+
+</Accordion>
+<Accordion header="Fitur">
+
+Intlayer menawarkan sejumlah fitur tambahan yang tidak dimiliki solusi i18n lainnya, seperti [Dukungan penurunan harga](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/markdown.md), [mengambil konten eksternal](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/function_fetching.md), [file pemuatan konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/file.md), [pembaruan konten langsung](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) dan banyak lagi.
+
+</Accordion>
+<Accordion header="Otomatisasi">
+
+Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan **compiler** untuk mengotomatiskan ekstraksi konten, serta [platform web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) untuk membantu **menerjemahkan di latar belakang**.
+
+</Accordion>
+<Accordion header="Pertunjukan">
+
+Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.
+
+</Accordion>
+<Accordion header="Menskalakan tanpa pengembang">
+
+Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** yang dihosting sendiri dan **[CMS lengkap](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** untuk membantu Anda mengelola konten multibahasa secara **real-time**, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.
+
+</Accordion>
+<Accordion header="Desain lintas kerangka">
+
+Jika Anda menggunakan kerangka kerja yang berbeda untuk bagian aplikasi yang berbeda (misalnya, React, React-native, Vue, Angular, Svelte, dll.), Intlayer menyediakan cara untuk **menggunakan sinatax umum dan implementasi di semua kerangka frontend utama**. Anda juga akan dapat membagikan deklarasi konten Anda ke seluruh sistem desain, aplikasi, backend, dll.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 

package/docs/id/intlayer_with_adonisjs.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
-title: AdonisJS i18n - Cara menerjemahkan aplikasi AdonisJS di 2026
-description: Temukan cara membuat backend AdonisJS Anda multibahasa. Ikuti dokumentasi untuk menginternasionalkan (i18n) dan menerjemahkannya.
+updatedAt: 2026-05-31
+title: AdonisJS i18n - Panduan lengkap menerjemahkan AdonisJS
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan AdonisJS backend Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi

package/docs/id/intlayer_with_analog.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Analog i18n - Cara menerjemahkan aplikasi Analog di 2026
-description: Temukan cara membuat aplikasi Analog Anda multibahasa. Ikuti dokumentasi untuk menginternasionalisasi (i18n) dan menerjemahkannya.
+updatedAt: 2026-05-31
+title: Analog i18n - Panduan lengkap menerjemahkan Analog
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan Analog aplikasi Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internationalization
   - Documentation
@@ -56,16 +56,47 @@ history:
 
 <TOC/>
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah pustaka internasionalisasi (i18n) sumber terbuka yang inovatif yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `ngx-translate` atau `angular-l10n`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
+<Accordion header="Cakupan Analog Penuh">
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalisasi metadata, rute, dan konten secara dinamis**.
-- **Memastikan dukungan TypeScript** dengan tipe yang dihasilkan secara otomatis, meningkatkan pelengkapan otomatis dan deteksi kesalahan.
-- **Manfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan bahasa dinamis.
+Intlayer dioptimalkan untuk bekerja sempurna dengan Analog dengan menawarkan **perutean multibahasa**, **dukungan SSR**, dan semua fitur yang diperlukan untuk penskalaan internasionalisasi (i18n).
+
+</Accordion>
+<Accordion header="Ukuran bundle">
+
+Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
+
+</Accordion>
+<Accordion header="Kemampuan Pemeliharaan">
+
+Mencakup konten aplikasi Anda **memfasilitasi pemeliharaan** untuk aplikasi berskala besar. Anda dapat menduplikasi atau menghapus satu folder fitur tanpa beban mental untuk meninjau seluruh basis kode konten Anda. Selain itu, Intlayer **diketik sepenuhnya** untuk memastikan keakuratan konten Anda.
+
+</Accordion>
+<Accordion header="Agen AI">
+
+Menempatkan konten bersama **mengurangi konteks yang diperlukan** dengan Model Bahasa Besar (LLM). Intlayer juga dilengkapi dengan serangkaian alat, seperti **CLI** untuk menguji terjemahan yang hilang,**[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)**, dan **[agent skill](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, untuk menjadikan pengalaman pengembang (DX) lebih lancar bagi agen AI.
+
+</Accordion>
+<Accordion header="Otomatisasi">
+
+Gunakan otomatisasi untuk menerjemahkan dalam saluran CI/CD Anda menggunakan LLM pilihan Anda dengan biaya penyedia AI Anda. Intlayer juga menawarkan **compiler** untuk mengotomatiskan ekstraksi konten, serta [platform web](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) untuk membantu **menerjemahkan di latar belakang**.
+
+</Accordion>
+<Accordion header="Pertunjukan">
+
+Menghubungkan file JSON berukuran besar ke komponen dapat menyebabkan masalah kinerja dan reaktivitas. Intlayer mengoptimalkan pemuatan konten Anda pada waktu pembuatan.
+
+</Accordion>
+<Accordion header="Menskalakan tanpa pengembang">
+
+Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** yang dihosting sendiri dan **[CMS lengkap](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** untuk membantu Anda mengelola konten multibahasa secara **real-time**, membuat kolaborasi dengan penerjemah, copywriter, dan anggota tim lainnya menjadi lancar. Konten dapat disimpan secara lokal dan/atau jarak jauh.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -73,7 +104,9 @@ Dengan Intlayer, Anda dapat:
 
 Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-analog-template) di GitHub.
 
-### Langkah 1: Instal Dependensi
+<Steps>
+
+<Step number={1} title="Instal Dependensi">
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
@@ -107,7 +140,9 @@ bun x intlayer init
 - **vite-intlayer**
   Paket yang mengintegrasikan Intlayer dengan Vite. Ini menyediakan plugin untuk menangani file deklarasi konten dan menyiapkan alias untuk performa optimal.
 
-### Langkah 2: Konfigurasi Proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasi Proyek Anda">
 
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
@@ -131,7 +166,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat menyiapkan URL yang dilokalisasi, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
-### Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={3} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Untuk mengintegrasikan Intlayer dengan Analog, Anda perlu menggunakan plugin `vite-intlayer`.
 
@@ -153,7 +190,9 @@ export default defineConfig(() => ({
 
 > Plugin `intlayer()` mengonfigurasi Vite dengan Intlayer. Ini menangani file deklarasi konten dan menyiapkan alias untuk performa optimal.
 
-### Langkah 4: Deklarasikan Konten Anda
+</Step>
+
+<Step number={4} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -185,7 +224,9 @@ export default appContent;
 
 > Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
 
-### Langkah 5: Gunakan Intlayer dalam Kode Anda
+</Step>
+
+<Step number={5} title="Gunakan Intlayer dalam Kode Anda">
 
 Untuk menggunakan fitur internasionalisasi Intlayer di seluruh aplikasi Analog Anda, Anda perlu menyediakan Intlayer dalam konfigurasi aplikasi Anda.
 
@@ -223,7 +264,9 @@ export default class HomeComponent {
 
 Konten Intlayer dikembalikan sebagai `Signal`, jadi Anda mengakses nilainya dengan memanggil sinyal tersebut: `content().title`.
 
-### (Opsional) Langkah 6: Ubah bahasa konten Anda
+</Step>
+
+<Step number={6} title="Ubah bahasa konten Anda" isOptional={true}>
 
 Untuk mengubah bahasa konten Anda, Anda dapat menggunakan fungsi `setLocale` yang disediakan oleh fungsi `useLocale`. Ini memungkinkan Anda untuk mengatur lokal aplikasi dan memperbarui konten yang sesuai.
 
@@ -335,3 +378,7 @@ Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat [dokument
 ### Melangkah Lebih Jauh
 
 Untuk melangkah lebih jauh, Anda dapat mengimplementasikan [editor visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau mengeksternalisasi konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
+
+</Step>
+
+</Steps>