@intlayer/docs 9.0.0-canary.4 → 9.0.0-canary.6

package/docs/id/formatters.md

@@ -53,6 +53,8 @@ author: aymericzip
 
 Intlayer menyediakan serangkaian pembantu ringan yang dibangun di atas API `Intl` asli, ditambah pembungkus `Intl` yang di-cache untuk menghindari pembuatan formatter berat berulang kali. Utilitas ini sepenuhnya sadar lokal dan dapat digunakan dari paket utama `intlayer`.
 
+## React Formatters
+
 ### Impor
 
 ```ts
@@ -80,6 +82,61 @@ import {
 
 Jika Anda menggunakan React, hooks juga tersedia; lihat `react-intlayer/format`.
 
+### Hook yang Tersedia
+
+Semua hook secara otomatis menggunakan locale dari `IntlayerProvider` atau `IntlayerServerProvider`.
+
+| Hook                | Description                          | Example Output                |
+| ------------------- | ------------------------------------ | ----------------------------- |
+| `useNumber()`       | Format angka dengan pengelompokan    | `"123,456.789"`               |
+| `useCurrency()`     | Format nilai mata uang               | `"€1,234.50"`                 |
+| `usePercentage()`   | Format persentase                    | `"25%"`                       |
+| `useDate()`         | Format tanggal dan waktu             | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Format waktu relatif                 | `"in 3 days"`                 |
+| `useUnit()`         | Format nilai dengan satuan           | `"5 kilometers"`              |
+| `useCompact()`      | Format angka dalam notasi kompak     | `"1.2K"`                      |
+| `useList()`         | Format array sebagai daftar          | `"apple, banana, and orange"` |
+| `useIntl()`         | Dapatkan objek `Intl` terikat locale | Akses penuh API `Intl`        |
+
+### Contoh Lengkap
+
+```tsx
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "react-intlayer/format";
+
+const MyComponent = () => {
+  const number = useNumber();
+  const currency = useCurrency();
+  const date = useDate();
+  const percentage = usePercentage();
+  const compact = useCompact();
+  const list = useList();
+  const relativeTime = useRelativeTime();
+  const unit = useUnit();
+
+  return (
+    <div>
+      <p>{number(123456.789)}</p>
+      <p>{currency(1234.5, { currency: "EUR" })}</p>
+      <p>{date(new Date(), "short")}</p>
+      <p>{percentage(0.25)}</p>
+      <p>{compact(1200)}</p>
+      <p>{list(["apple", "banana", "orange"])}</p>
+      <p>{relativeTime(new Date(), new Date(Date.now() + 86400000))}</p>
+      <p>{unit(5, { unit: "kilometer" })}</p>
+    </div>
+  );
+};
+```
+
 ## Intl yang Di-cache
 
 `Intl` yang diekspor adalah pembungkus tipis yang di-cache di sekitar `Intl` global. Ini menyimpan instance dari `NumberFormat`, `DateTimeFormat`, `RelativeTimeFormat`, `ListFormat`, `DisplayNames`, `Collator`, dan `PluralRules`, yang menghindari pembuatan ulang formatter yang sama berulang kali.
@@ -134,6 +191,61 @@ const regionNames = new Intl.DisplayNames("fr", { type: "region" });
 regionNames.of("US"); // "États-Unis"
 ```
 
+### Composables yang Tersedia
+
+Semua composables mengembalikan computed refs yang secara otomatis menggunakan locale dari `IntlayerProvider` yang diinjeksi.
+
+| Composable          | Deskripsi                            | Contoh Output                 |
+| ------------------- | ------------------------------------ | ----------------------------- |
+| `useNumber()`       | Format angka dengan pengelompokan    | `"123,456.789"`               |
+| `useCurrency()`     | Format nilai mata uang               | `"€1,234.50"`                 |
+| `usePercentage()`   | Format persentase                    | `"25%"`                       |
+| `useDate()`         | Format tanggal dan waktu             | `"Aug 2, 2025"`               |
+| `useRelativeTime()` | Format waktu relatif                 | `"in 3 days"`                 |
+| `useUnit()`         | Format nilai dengan unit             | `"5 kilometers"`              |
+| `useCompact()`      | Format angka dalam notasi kompak     | `"1.2K"`                      |
+| `useList()`         | Format array sebagai daftar          | `"apple, banana, and orange"` |
+| `useIntl()`         | Dapatkan objek `Intl` terikat locale | Akses API `Intl` lengkap      |
+
+### Contoh Lengkap
+
+```vue
+<script setup>
+import {
+  useNumber,
+  useCurrency,
+  useDate,
+  usePercentage,
+  useCompact,
+  useList,
+  useRelativeTime,
+  useUnit,
+} from "vue-intlayer/format";
+
+const number = useNumber();
+const currency = useCurrency();
+const date = useDate();
+const percentage = usePercentage();
+const compact = useCompact();
+const list = useList();
+const relativeTime = useRelativeTime();
+const unit = useUnit();
+</script>
+
+<template>
+  <div>
+    <p>{{ number.value(123456.789) }}</p>
+    <p>{{ currency.value(1234.5, { currency: "EUR" }) }}</p>
+    <p>{{ date.value(new Date(), "short") }}</p>
+    <p>{{ percentage.value(0.25) }}</p>
+    <p>{{ compact.value(1200) }}</p>
+    <p>{{ list.value(["apple", "banana", "orange"]) }}</p>
+    <p>{{ relativeTime.value(new Date(), new Date(Date.now() + 86400000)) }}</p>
+    <p>{{ unit.value(5, { unit: "kilometer" }) }}</p>
+  </div>
+</template>
+```
+
 ### `Intl.Collator`
 
 Untuk perbandingan dan pengurutan string yang sadar lokal:
@@ -150,6 +262,10 @@ const words = ["äpfel", "zebra", "100", "20"];
 words.sort(collator.compare); // ["20", "100", "äpfel", "zebra"]
 ```
 
+## Vanilla JS / Node.js Formatters
+
+Untuk konteks non-framework, impor formatter langsung dari `intlayer`. Perhatikan bahwa Anda harus melewatkan locale secara manual.
+
 ### `Intl.PluralRules`
 
 Untuk menentukan bentuk jamak dalam berbagai locale:
@@ -303,6 +419,8 @@ const content = getTranslation(
 - **locale**: Locale target (default ke locale default yang dikonfigurasi)
 - **fallback**: Apakah akan kembali ke locale default (default true)
 
+### Fitur Intl Tambahan
+
 ### `getIntlayer(dictionaryKey, locale?, plugins?)`
 
 Mengambil dan mengubah konten dari kamus berdasarkan kunci:
@@ -468,6 +586,8 @@ list(["red", "green", "blue"], { locale: "fr", type: "disjunction" }); // "rouge
 list([1, 2, 3], { type: "unit" }); // "1, 2, 3"
 ```
 
+## Utilitas Penanganan Konten
+
 ## Catatan
 
 - Semua helper menerima input `string`; secara internal akan dikonversi menjadi angka atau tanggal.

package/docs/id/interest_of_intlayer.md

@@ -30,6 +30,10 @@ author: aymericzip
 
 # Mengapa Anda harus mempertimbangkan Intlayer?
 
+## Apa itu Intlayer?
+
+**Intlayer** adalah perpustakaan internasionalisasi yang dirancang khusus untuk pengembang JavaScript. Ini memungkinkan deklarasi konten Anda di mana saja dalam kode Anda. Ini mengonversi 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 dibandingkan alternatif?
 
 Dibandingkan dengan solusi utama seperti `next-intl` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
@@ -87,6 +91,195 @@ Jika Anda menggunakan kerangka kerja yang berbeda untuk bagian aplikasi yang ber
 
 ---
 
+## Mengapa Intlayer dibuat?
+
+Intlayer dibuat untuk mengatasi masalah umum yang mempengaruhi semua library i18n populer seperti `next-intl`, `react-i18next`, `react-intl`, `next-i18next`, `react-intl`, dan `vue-i18n`.
+
+Semua solusi ini mengadopsi pendekatan terpusat untuk mendaftar dan mengelola konten Anda. Contohnya:
+
+```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
+```
+
+Tipe arsitektur ini memperlambat proses pengembangan dan membuat codebase lebih kompleks untuk dipertahankan karena beberapa alasan:
+
+1. **Untuk setiap komponen baru yang dibuat, Anda harus:**
+   - Membuat resource/namespace baru di folder `locales`
+   - Mengingat untuk mengimpor namespace baru di halaman Anda
+   - Menerjemahkan konten Anda (sering dilakukan secara manual dengan copy/paste dari penyedia AI)
+
+2. **Untuk setiap perubahan yang dilakukan pada komponen Anda, Anda harus:**
+   - Mencari resource/namespace terkait (jauh dari komponen)
+   - Menerjemahkan konten Anda
+   - Memastikan konten Anda terbaru untuk setiap locale
+   - Memverifikasi namespace Anda tidak mencakup key/value yang tidak digunakan
+   - Memastikan struktur file JSON Anda sama untuk semua locale
+
+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 mengatasi masalah ini, Intlayer mengadopsi pendekatan yang membatasi konten Anda per-komponen dan menjaga konten Anda dekat dengan komponen Anda, seperti yang sering kita lakukan dengan CSS (`styled-components`), types, dokumentasi (`storybook`), atau unit tests (`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({
+      id: "Halo Dunia",
+      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 autocompletion di IDE Anda (seperti GitHub Copilot) dapat membantu Anda mendeklarasikan konten Anda, mengurangi copy/paste
+
+2. **Membersihkan codebase Anda**
+   - Mengurangi kompleksitas
+   - Meningkatkan maintainability
+
+3. **Menduplikasi komponen Anda dan konten terkait dengan lebih mudah (Contoh: komponen login/register, dll.)**
+   - Dengan membatasi risiko berdampak pada konten komponen lain
+   - Dengan copy/paste konten Anda dari satu aplikasi ke aplikasi lain tanpa dependensi eksternal
+
+4. **Hindari mengotori codebase Anda dengan key/value 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. **Kurangi biaya reasoning untuk agen AI untuk mendeklarasikan konten multibahasa Anda**
+   - Agen AI tidak akan harus memindai seluruh codebase Anda untuk mengetahui di mana harus mengimplementasikan konten Anda
+   - Terjemahan dapat dilakukan dengan mudah oleh alat AI autocompletion di IDE Anda (seperti GitHub Copilot)
+
+6. **Optimalkan kinerja loading**
+   - Jika komponen di-lazy-load, konten terkaitnya akan dimuat pada saat yang sama
+
+## Fitur Tambahan Intlayer
+
+| Feature                                                                                                                   | Description                                                                                                                                                                                                                                                                                                                                                                                                        |
+| ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/frameworks.png?raw=true)                          | **Dukungan Lintas Framework**<br><br>Intlayer kompatibel dengan semua framework dan library utama, termasuk Next.js, React, Vite, Vue.js, Nuxt, Preact, Express, dan lainnya.                                                                                                                                                                                                                                      |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/javascript_content_management.jpg?raw=true)       | **Manajemen Konten Bertenaga 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="Feature" width="700">  | **Compiler**<br><br>Intlayer Compiler mengekstrak konten secara otomatis dari komponen dan menghasilkan file kamus.<br><br> - [Compiler](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-Locale**<br><br>Percepat pengembangan Anda dengan mendeklarasikan konten Anda sekali, sebelum pembuatan otomatis.<br><br> - [File Deklarasi Konten Per-Locale](https://intlayer.org/doc/concept/per-locale-file)                                                                                                                                                                       |
+| ![Feature](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)                      | **Lingkungan Aman Tipe**<br><br>Manfaatkan TypeScript untuk memastikan definisi konten dan kode Anda bebas kesalahan, sambil juga menikmati autocompletion 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)                         | **Penyiapan Disederhanakan**<br><br>Mulai dengan cepat dengan konfigurasi minimal. Sesuaikan pengaturan untuk internasionalisasi, routing, 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 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 Konsisten**<br><br>Sangat cocok untuk komponen server Next.js, gunakan implementasi yang sama untuk komponen klien dan server, tidak perlu melewatkan fungsi `t` Anda di 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)                           | **Codebase Terorganisir**<br><br>Jaga codebase Anda lebih terorganisir: 1 komponen = 1 kamus dalam folder yang sama. Terjemahan yang dekat dengan komponen mereka masing-masing meningkatkan kemudahan 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)                         | **Routing Ditingkatkan**<br><br>Dukungan lengkap routing aplikasi, beradaptasi dengan mulus dengan 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 locale 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 tersinkronisasi menggunakan Git, atau eksternalisasi sepenuhnya atau sebagian dengan CMS.<br><br> - [Intlayer Editor](https://intlayer.org/doc/concept/editor) <br> - [Intlayer CMS](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 bundle akhir. Memuat konten per komponen, mengecualikan konten yang tidak digunakan dari bundle Anda. Mendukung lazy loading untuk meningkatkan efisiensi loading 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 Bertenaga AI**<br><br>Ubah situs web Anda menjadi 231 bahasa dengan hanya satu klik menggunakan alat terjemahan bertenaga AI Intlayer yang canggih menggunakan penyedia/kunci API AI Anda sendiri. <br><br> - [Integrasi CI/CD](https://intlayer.org/doc/concept/ci-cd) <br> - [Intlayer CLI](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 MCP Server**<br><br>Menyediakan server MCP (Model Context Protocol) untuk otomasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang mulus langsung dalam lingkungan pengembangan Anda. <br><br> - [MCP Server](https://github.com/aymericzip/intlayer/blob/main/docs/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 Anda, menerjemahkan konten Anda, dan lainnya. <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)                    |
+| Testing Missing Translations (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 dengan Komponen**                | ✅ Ya, konten diletakkan bersama setiap komponen                                                                                       | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                            | ✅ Ya - menggunakan `Single File Components` (SFCs)        |
+| **Integrasi TypeScript**                            | ✅ Lanjutan, tipe yang ketat dan auto-generated                                                                                        | ⚠️ Dasar; konfigurasi tambahan untuk keamanan                                                                       | ✅ Baik, tetapi kurang ketat                                                                                                               | ⚠️ Typing, perlu konfigurasi                                      | ✅ Baik                                                                                                             | ⚠️ Dasar                                                                                                            | ✅ Baik (tipe tersedia; keamanan kunci perlu setup)        |
+| **Deteksi Terjemahan Hilang**                       | ✅ Error TypeScript dan error/warning saat build-time                                                                                  | ⚠️ Sebagian besar fallback string saat runtime                                                                      | ⚠️ Fallback string                                                                                                                         | ⚠️ Perlu konfigurasi tambahan                                     | ⚠️ Fallback runtime                                                                                                 | ⚠️ Fallback runtime                                                                                                 | ⚠️ Fallback/peringatan runtime (dapat dikonfigurasi)       |
+| **Konten Kaya (JSX/Markdown/komponen)**             | ✅ Dukungan langsung                                                                                                                   | ⚠️ Terbatas / interpolasi saja                                                                                      | ⚠️ Sintaks ICU, bukan JSX asli                                                                                                             | ⚠️ Terbatas                                                       | ❌ Tidak dirancang untuk node kaya                                                                                  | ⚠️ Terbatas                                                                                                         | ⚠️ Terbatas (komponen via `<i18n-t>`, Markdown via plugin) |
+| **Terjemahan Bertenaga AI**                         | ✅ Ya, mendukung multiple AI provider. Dapat digunakan dengan API key Anda sendiri. Mempertimbangkan konteks aplikasi dan scope konten | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                                                   | ❌ Tidak                                                          | ❌ Tidak                                                                                                            | ❌ Tidak                                                                                                            | ❌ Tidak                                                   |
+| **Editor Visual**                                   | ✅ Ya, Visual Editor lokal + CMS opsional; dapat mengeksternal konten codebase; embeddable                                             | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                                                      | ❌ Tidak / tersedia via platform lokalisasi eksternal             | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal                                                               | ❌ Tidak / tersedia via platform lokalisasi eksternal      |
+| **Routing Terlokalisasi**                           | ✅ Ya, mendukung path terlokalisasi out of the box (bekerja dengan Next.js & Vite)                                                     | ⚠️ Tidak built-in, memerlukan plugin (mis. `next-i18next`) atau konfigurasi router custom                           | ❌ Tidak, hanya pemformatan pesan, routing harus manual                                                                                    | ⚠️ Tidak built-in, memerlukan plugin atau konfigurasi manual      | ✅ Built-in, App Router mendukung segmen `[locale]`                                                                 | ✅ Built-in                                                                                                         | ✅ Built-in                                                |
+| **Generasi Rute Dinamis**                           | ✅ Ya                                                                                                                                  | ⚠️ Plugin/ekosistem atau setup 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)                                            | ✅ Baik                                                                                                             | ✅ Baik                                                                                                             | ✅ Aturan plural built-in                                  |
+| **Pemformatan (tanggal, angka, mata uang)**         | ✅ Formatter yang optimal (Intl under the hood)                                                                                        | ⚠️ Via plugin atau penggunaan Intl custom                                                                           | ✅ Formatter ICU                                                                                                                           | ✅ Pembantu ICU/CLI                                               | ✅ Baik (pembantu Intl)                                                                                             | ✅ Baik (pembantu Intl)                                                                                             | ✅ Formatter tanggal/angka built-in (Intl)                 |
+| **Format Konten**                                   | ✅ .tsx, .ts, .js, .json, .md, .txt, (.yaml WIP)                                                                                       | ⚠️ .json                                                                                                            | ✅ .json, .js                                                                                                                              | ⚠️ .po, .json                                                     | ✅ .json, .js, .ts                                                                                                  | ⚠️ .json                                                                                                            | ✅ .json, .js                                              |
+| **Dukungan ICU**                                    | ⚠️ WIP                                                                                                                                 | ⚠️ Via plugin (i18next-icu)                                                                                         | ✅ Ya                                                                                                                                      | ✅ Ya                                                             | ✅ Ya                                                                                                               | ⚠️ Via plugin (`i18next-icu`)                                                                                       | ⚠️ Via formatter/compiler custom                           |
+| **Pembantu SEO (hreflang, sitemap)**                | ✅ Tool built-in: pembantu untuk sitemap, robots.txt, metadata                                                                         | ⚠️ Plugin komunitas/manual                                                                                          | ❌ Bukan core                                                                                                                              | ❌ Bukan core                                                     | ✅ Baik                                                                                                             | ✅ Baik                                                                                                             | ❌ Bukan core (Nuxt i18n menyediakan pembantu)             |
+| **Ekosistem / Komunitas**                           | ⚠️ Lebih kecil tetapi berkembang cepat dan responsif                                                                                   | ✅ Terbesar dan matang                                                                                              | ✅ Besar                                                                                                                                   | ⚠️ Lebih kecil                                                    | ✅ Mid-size, fokus Next.js                                                                                          | ✅ Mid-size, fokus Next.js                                                                                          | ✅ Besar di ekosistem Vue                                  |
+| **Server-side Rendering & Server Components**       | ✅ Ya, streamlined untuk SSR / React Server Components                                                                                 | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ⚠️ Didukung di level halaman dengan setup tambahan, tetapi perlu melewatkan t-functions di component tree untuk children server components | ✅ Didukung, setup diperlukan                                     | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ⚠️ Didukung di level halaman tetapi perlu melewatkan t-functions di component tree untuk children server components | ✅ SSR via Nuxt/Vue SSR (tidak ada RSC)                    |
+| **Tree-shaking (muat hanya konten yang digunakan)** | ✅ Ya, per-komponen saat build time via plugin Babel/SWC                                                                               | ⚠️ Biasanya memuat semua (dapat ditingkatkan dengan namespace/code-splitting)                                       | ⚠️ Biasanya memuat semua                                                                                                                   | ❌ Bukan default                                                  | ⚠️ Parsial                                                                                                          | ⚠️ Parsial                                                                                                          | ⚠️ Parsial (dengan code-splitting/setup manual)            |
+| **Lazy loading**                                    | ✅ Ya, per-locale / per-dictionary                                                                                                     | ✅ Ya (mis., backend/namespace on demand)                                                                           | ✅ Ya (split locale bundle)                                                                                                                | ✅ Ya (dynamic catalog import)                                    | ✅ Ya (per-route/per-locale), perlu manajemen namespace                                                             | ✅ Ya (per-route/per-locale), perlu manajemen namespace                                                             | ✅ Ya (async locale message)                               |
+| **Hapus konten yang tidak digunakan**               | ✅ Ya, per-dictionary saat build time                                                                                                  | ❌ Tidak, hanya via segmentasi namespace manual                                                                     | ❌ Tidak, semua pesan yang dideklarasikan di-bundle                                                                                        | ✅ Ya, kunci yang tidak digunakan terdeteksi & dihapus saat build | ❌ Tidak, dapat dikelola manual dengan manajemen namespace                                                          | ❌ Tidak, dapat dikelola manual dengan manajemen namespace                                                          | ❌ Tidak, hanya mungkin via lazy-loading manual            |
+| **Manajemen Proyek Besar**                          | ✅ Mendorong modular, cocok untuk design-system                                                                                        | ⚠️ Perlu disiplin file yang baik                                                                                    | ⚠️ Katalog pusat dapat membesar                                                                                                            | ⚠️ Mungkin menjadi kompleks                                       | ✅ Modular dengan setup                                                                                             | ✅ Modular dengan setup                                                                                             | ✅ Modular dengan setup Vue Router/Nuxt i18n               |
+
 ## Bintang GitHub
 
 Bintang GitHub adalah indikator kuat dari popularitas proyek, kepercayaan komunitas, dan relevansi jangka panjang. Meskipun bukan ukuran langsung dari kualitas teknis, bintang-bintang tersebut mencerminkan berapa banyak pengembang yang menganggap proyek tersebut berguna, mengikuti kemajuannya, dan kemungkinan akan mengadopsinya. Untuk memperkirakan nilai suatu proyek, bintang membantu membandingkan daya tarik di berbagai alternatif dan memberikan wawasan tentang pertumbuhan ekosistem.

package/docs/id/intlayer_with_astro.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
@@ -317,7 +317,134 @@ Integrasi Astro menambahkan middleware Vite yang membantu perutean yang sadar ba
 
 </Step>
 
-<Step number={7} title="Terus Gunakan Framework Favorit Anda">
+<Step number={7} title="Menambahkan Pengalih Bahasa">
+
+Untuk memungkinkan pengguna beralih antar bahasa, Anda dapat membuat komponen `LocaleSwitcher`. Komponen ini harus menampilkan daftar semua bahasa yang didukung dan menautkan ke halaman yang sama di setiap bahasa.
+
+```astro fileName="src/components/LocaleSwitcher.astro"
+---
+import {
+  locales,
+  getLocaleName,
+  getLocalizedUrl,
+  getLocaleFromPath,
+  getPathWithoutLocale,
+  type LocalesValues,
+} from "intlayer";
+
+const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
+const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
+---
+
+<nav>
+  {
+    locales.map((localeItem) => (
+      <a
+        href={getLocalizedUrl(pathWithoutLocale, localeItem)}
+        data-locale={localeItem}
+        aria-current={localeItem === locale ? "page" : undefined}
+      >
+        {getLocaleName(localeItem)}
+      </a>
+    ))
+  }
+</nav>
+
+<script>
+  import { setLocaleInStorageClient, getLocalizedUrl, type LocalesValues } from "intlayer";
+
+  const localeLinks = document.querySelectorAll("[data-locale]");
+
+  localeLinks.forEach((link) => {
+    link.addEventListener("click", (e) => {
+      const locale = link.getAttribute("data-locale") as LocalesValues;
+
+      // Update the locale cookie
+      setLocaleInStorageClient(locale);
+    });
+  });
+</script>
+
+<style>
+  nav {
+    display: flex;
+    gap: 1rem;
+  }
+  a[aria-current="page"] {
+    font-weight: bold;
+    text-decoration: underline;
+  }
+</style>
+```
+
+> **Catatan tentang Persistensi:**
+> Menggunakan `setLocaleInStorageClient` dalam skrip sisi klien memastikan bahwa preferensi bahasa pengguna disimpan dalam cookie. Hal ini memungkinkan middleware Intlayer mengingat pilihan tersebut dan secara otomatis mengarahkan pengguna ke bahasa pilihan mereka pada kunjungan berikutnya.
+
+</Step>
+
+<Step number={8} title="Sitemap dan Robots.txt">
+
+Intlayer menawarkan utilitas untuk secara dinamis membuat peta situs yang dilokalkan dan file robots.txt Anda.
+
+#### Sitemap
+
+Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.
+
+> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.
+
+Buat `src/pages/sitemap.xml.ts` untuk menghasilkan peta situs yang mencakup semua rute yang dilokalkan.
+
+```typescript fileName="src/pages/sitemap.xml.ts"
+import type { APIRoute } from "astro";
+import { generateSitemap, type SitemapUrlEntry } from "intlayer";
+
+const pathList: SitemapUrlEntry[] = [
+  { path: "/", changefreq: "daily", priority: 1.0 },
+  { 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 });
+
+  return new Response(xmlOutput, {
+    headers: { "Content-Type": "application/xml" },
+  });
+};
+```
+
+#### Robots.txt
+
+Buat `src/pages/robots.txt.ts` untuk mengontrol perayapan mesin pencari.
+
+```typescript fileName="src/pages/robots.txt.ts"
+import type { APIRoute } from "astro";
+import { getMultilingualUrls } from "intlayer";
+
+const getAllMultilingualUrls = (urls: string[]) =>
+  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
+
+const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
+
+export const GET: APIRoute = ({ site }) => {
+  const robotsTxt = [
+    "User-agent: *",
+    "Allow: /",
+    ...disallowedPaths.map((path) => `Disallow: ${path}`),
+    "",
+    `Sitemap: ${new URL("/sitemap.xml", site).href}`,
+  ].join("\n");
+
+  return new Response(robotsTxt, {
+    headers: { "Content-Type": "text/plain" },
+  });
+};
+```
+
+</Step>
+
+<Step number={9} title="Terus Gunakan Framework Favorit Anda">
 
 Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.
 
@@ -328,7 +455,7 @@ Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.
 - Intlayer + Preact: [Intlayer dengan Preact](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+preact.md)
   </Step>
 
-<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
+<Step number={15} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 

package/docs/id/intlayer_with_astro_lit.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Lit i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Lit multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_preact.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Preact i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Preact multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_react.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + React i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + React multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_solid.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Solid i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Solid multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_svelte.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Svelte i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Svelte multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_vanilla.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vanilla JS i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Vanilla JS multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_astro_vue.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Astro + Vue i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Astro + Vue multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_nextjs_14.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2024-12-06
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 14 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js 14 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:

package/docs/id/intlayer_with_nextjs_15.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-10-25
-updatedAt: 2026-05-31
+updatedAt: 2026-06-23
 title: "Next.js 15 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
 description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Next.js 15 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords: