@intlayer/docs 8.11.2 → 8.11.3

package/docs/id/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Cara menerjemahkan aplikasi Tanstack Start di 2026
-description: Pelajari cara menambahkan internasionalisasi (i18n) ke aplikasi TanStack Start Anda menggunakan Intlayer. Ikuti panduan komprehensif ini untuk membuat aplikasi Anda multibahasa dengan routing yang mendukung locale.
+updatedAt: 2026-05-31
+title: Tanstack Start i18n - Panduan lengkap menerjemahkan TanStack Start
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan TanStack Start aplikasi Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -54,17 +54,47 @@ history:
 
 Panduan ini mendemonstrasikan cara mengintegrasikan **Intlayer** untuk internasionalisasi yang mulus dalam proyek TanStack Start dengan routing yang mendukung locale, dukungan TypeScript, dan praktik pengembangan modern.
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) sumber terbuka yang inovatif yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `react-i18next` atau `use-intl`, atau `paraglide`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
+<Accordion header="Cakupan TanStack Start penuh">
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalkan 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 locale secara dinamis.
-- **Aktifkan routing yang mendukung locale** dengan sistem routing berbasis file TanStack Start.
+Intlayer sepenuhnya dioptimalkan untuk TanStack Start, menyediakan **perutean multibahasa**, **manajemen cookie**, **pembuatan peta situs**, **pemuatan konten dinamis**, dan semua fitur yang diperlukan untuk meningkatkan upaya internasionalisasi Anda (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>
 
 ---
 
@@ -102,11 +132,15 @@ Dengan Intlayer, Anda dapat:
 
 Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-tanstack-start-template) di GitHub.
 
-### Langkah 1: Buat Proyek
+<Steps>
+
+<Step number={1} title="Buat Proyek">
 
 Mulailah dengan membuat proyek TanStack Start baru dengan mengikuti panduan [Memulai proyek baru](https://tanstack.com/start/latest/docs/framework/react/quick-start) di situs web TanStack Start.
 
-### Langkah 2: Pasang Paket Intlayer
+</Step>
+
+<Step number={2} title="Pasang Paket Intlayer">
 
 Pasang paket yang diperlukan menggunakan manajer paket pilihan Anda:
 
@@ -144,7 +178,9 @@ bun x intlayer init
 - **vite-intlayer**
   Termasuk plugin Vite untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi locale yang disukai pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 3: Konfigurasi proyek Anda
+</Step>
+
+<Step number={3} title="Konfigurasi proyek Anda">
 
 Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
 
@@ -165,7 +201,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, 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 4: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={4} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Tambahkan plugin intlayer ke dalam konfigurasi Anda:
 
@@ -195,7 +233,9 @@ export default config;
 
 > Plugin Vite `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Vite. Ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Vite. Selain itu, ini menyediakan alias untuk mengoptimalkan kinerja.
 
-### Langkah 5: Buat Layout Root
+</Step>
+
+<Step number={5} title="Buat Layout Root">
 
 Konfigurasikan layout root Anda untuk mendukung internasionalisasi dengan menggunakan `useParams` untuk mendeteksi locale saat ini dan mengatur atribut `lang` dan `dir` pada tag `html`.
 
@@ -255,7 +295,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Langkah 6: Buat Layout Locale
+</Step>
+
+<Step number={6} title="Buat Layout Locale">
 
 Buat layout yang menangani awalan locale dan melakukan validasi.
 
@@ -287,7 +329,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Untuk mode `'prefix-all'`, Anda mungkin lebih suka mengganti slot menjadi `$locale` sebagai gantinya.
 > Untuk mode `'no-prefix'` atau `'search-params'`, Anda dapat menghapus slot sepenuhnya.
 
-### Langkah 7: Deklarasikan Konten Anda
+</Step>
+
+<Step number={7} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -333,7 +377,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 8: Buat Komponen dan Hook yang Menyadari Locale
+</Step>
+
+<Step number={8} title="Buat Komponen dan Hook yang Menyadari Locale">
 
 Buat komponen `LocalizedLink` untuk navigasi yang menyadari locale:
 
@@ -437,7 +483,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Langkah 9: Manfaatkan Intlayer di Halaman Anda
+</Step>
+
+<Step number={9} title="Manfaatkan Intlayer di Halaman Anda">
 
 Akses kamus konten Anda di seluruh aplikasi Anda:
 
@@ -485,7 +533,9 @@ function RouteComponent() {
 
 > Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useIntlayer.md).
 
-### Langkah 10: Buat Komponen Locale Switcher
+</Step>
+
+<Step number={10} title="Buat Komponen Locale Switcher">
 
 Buat komponen untuk memungkinkan pengguna mengganti bahasa:
 
@@ -546,7 +596,9 @@ export const LocaleSwitcher: FC = () => {
 
 > Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/react-intlayer/useLocale.md).
 
-### Langkah 11: Manajemen Atribut HTML
+</Step>
+
+<Step number={11} title="Manajemen Atribut HTML">
 
 Seperti yang terlihat pada Langkah 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` menggunakan `useParams` di komponen root Anda. Ini memastikan bahwa atribut yang benar diatur pada server dan klien.
 
@@ -565,7 +617,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Langkah 12: Tambahkan middleware (Opsional)
+</Step>
+
+<Step number={12} title="Tambahkan middleware">
 
 Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan routing sisi server ke aplikasi Anda. Plugin ini akan secara otomatis mendeteksi locale saat ini berdasarkan URL dan mengatur cookie locale yang sesuai. Jika tidak ada locale yang ditentukan, plugin akan menentukan locale yang paling sesuai berdasarkan preferensi bahasa browser pengguna. Jika tidak ada locale yang terdeteksi, itu akan dialihkan ke locale default.
 
@@ -596,7 +650,9 @@ export default defineConfig({
 
 ---
 
-### Langkah 13: Internasionalisasi Metadata Anda (Opsional)
+</Step>
+
+<Step number={13} title="Internasionalisasi Metadata Anda">
 
 Anda juga dapat menggunakan hook `getIntlayer` untuk mengakses kamus konten Anda di seluruh aplikasi Anda:
 
@@ -643,7 +699,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Langkah 14: Ambil locale dalam server actions Anda (Opsional)
+</Step>
+
+<Step number={14} title="Ambil locale dalam server actions Anda">
 
 Anda mungkin ingin mengakses locale saat ini dari dalam server actions atau endpoint API Anda.
 Anda dapat melakukannya menggunakan pembantu `getLocale` dari `intlayer`.
@@ -680,7 +738,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Langkah 15: Kelola halaman tidak ditemukan (Opsional)
+</Step>
+
+<Step number={15} title="Kelola halaman tidak ditemukan">
 
 Ketika seorang pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman tidak ditemukan yang disesuaikan dan awalan locale dapat mempengaruhi cara halaman tidak ditemukan dipicu.
 
@@ -756,7 +816,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Langkah 16: Konfigurasi TypeScript (Opsional)
+</Step>
+
+<Step number={16} title="Konfigurasi TypeScript">
 
 Intlayer menggunakan augmentasi modul untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.
 
@@ -774,7 +836,9 @@ Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara oto
 
 ---
 
-### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+</Step>
+
+<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -885,6 +949,10 @@ Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignor
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Ekstensi VS Code
 
 Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi VS Code Intlayer** resmi.

package/docs/id/intlayer_with_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-31
-updatedAt: 2026-05-06
-title: Vanilla JS i18n - Cara menerjemahkan aplikasi Vanilla JS di tahun 2026
-description: Temukan cara membuat situs web Vanilla JS Anda multibahasa. Ikuti dokumentasi untuk internasionalisasi (i18n) dan menerjemahkannya.
+updatedAt: 2026-05-31
+title: Vanilla JS i18n - Panduan lengkap menerjemahkan Vanilla JS
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan Vanilla JS situs web Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -57,28 +57,55 @@ 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 `i18next` atau `i18n.js`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
+<Accordion header="Cakupan penuh Vanilla JS">
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalkan metadata, rute, dan konten secara dinamis**.
-- **Memastikan dukungan TypeScript** dengan tipe data yang dibuat secara otomatis, meningkatkan pelengkapan otomatis dan deteksi kesalahan.
-- **Manfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan bahasa dinamis.
+Intlayer dioptimalkan agar berfungsi sempurna dengan Vanilla JavaScript dengan menawarkan **manajemen konten tanpa kerangka kerja**, **dukungan TypeScript**, dan semua fitur yang diperlukan untuk meningkatkan internasionalisasi (i18n).
 
-Panduan ini menunjukkan cara menggunakan Intlayer dalam aplikasi Vanilla JavaScript **tanpa menggunakan manajer paket atau bundler** (seperti Vite, Webpack, dsb.).
+</Accordion>
+<Accordion header="Ukuran bundle">
 
-Jika aplikasi Anda menggunakan bundler (seperti Vite), kami menyarankan untuk mengikuti [Panduan Vite + Vanilla JS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+vanilla.md) sebagai gantinya.
+Daripada memuat file JSON berukuran besar ke halaman Anda, muat saja konten yang diperlukan. Intlayer membantu **mengurangi ukuran bundle dan halaman Anda hingga 50%**.
 
-Menggunakan bundel mandiri, Anda dapat mengimpor Intlayer secara langsung ke dalam file HTML Anda melalui file JavaScript tunggal, menjadikannya sempurna untuk proyek lama atau situs statis sederhana.
+</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>
 
 ---
 
 ## Panduan Langkah demi Langkah untuk Menyiapkan Intlayer dalam Aplikasi Vanilla JS
 
-### Langkah 1: Instal Dependensi
+<Steps>
+
+<Step number={1} title="Instal Dependensi">
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
@@ -138,7 +165,9 @@ bun x intlayer build
 
 > Ekspor penggabungan (bundling) dari CLI `intlayer standalone` menghasilkan build yang dioptimalkan melalui pemusnahan kode mati (tree-shaking) untuk paket, lokal, dan logika non-esensial (seperti pengalihan atau awalan) yang tidak digunakan khusus untuk konfigurasi Anda.
 
-### Langkah 2: Konfigurasi Proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasi Proyek Anda">
 
 Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:
 
@@ -162,7 +191,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar parameter lengkap yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
-### Langkah 3: Impor bundel di HTML Anda
+</Step>
+
+<Step number={3} title="Impor bundel di HTML Anda">
 
 Setelah Anda menghasilkan bundel `intlayer.js`, Anda dapat mengimpornya di file HTML Anda:
 
@@ -186,7 +217,9 @@ Setelah Anda menghasilkan bundel `intlayer.js`, Anda dapat mengimpornya di file
 
 Bundel tersebut mengekspos `Intlayer` dan `VanillaIntlayer` sebagai objek global di `window`.
 
-### Langkah 4: Bootstrap Intlayer di titik masuk (entry point) Anda
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer di titik masuk (entry point) Anda">
 
 Di `src/main.js` Anda, panggil `installIntlayer()` **sebelum** ada konten yang dirender sehingga singleton bahasa global sudah siap.
 
@@ -206,7 +239,9 @@ installIntlayer();
 installIntlayerMarkdown();
 ```
 
-### Langkah 5: Deklarasikan Konten Anda
+</Step>
+
+<Step number={5} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -284,7 +319,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 6: Gunakan Intlayer dalam JavaScript Anda
+</Step>
+
+<Step number={6} title="Gunakan Intlayer dalam JavaScript Anda">
 
 Objek `window.VanillaIntlayer` menyediakan pembantu API: `useIntlayer(key, locale?)` mengembalikan konten yang diterjemahkan untuk kunci yang diberikan.
 
@@ -318,7 +355,9 @@ document.querySelector(".read-the-docs").textContent = String(
 > img.alt = content.viteLogoLabel.value;
 > ```
 
-### (Opsional) Langkah 7: Ubah bahasa konten Anda
+</Step>
+
+<Step number={7} title="Ubah bahasa konten Anda" isOptional={true}>
 
 Untuk mengubah bahasa konten Anda, gunakan fungsi `setLocale` yang diekspos oleh `useLocale`.
 
@@ -353,7 +392,9 @@ export function setupLocaleSwitcher(container) {
 }
 ```
 
-### (Opsional) Langkah 8: Ganti Bahasa HTML dan Atribut Arah
+</Step>
+
+<Step number={8} title="Ganti Bahasa HTML dan Atribut Arah" isOptional={true}>
 
 Perbarui atribut `lang` dan `dir` dari tag `<html>` agar sesuai dengan bahasa saat ini untuk aksesibilitas dan SEO.
 
@@ -371,7 +412,9 @@ useLocale({
 });
 ```
 
-### (Opsional) Langkah 9: Muat kamus secara bertahap (lazy-load) per bahasa
+</Step>
+
+<Step number={9} title="Muat kamus secara bertahap (lazy-load) per bahasa" isOptional={true}>
 
 Jika Anda ingin memuat kamus secara bertahap per bahasa, Anda dapat menggunakan `useDictionaryDynamic`. Ini berguna jika Anda tidak ingin menggabungkan semua terjemahan dalam file `intlayer.js` awal.
 
@@ -427,3 +470,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>

package/docs/id/intlayer_with_vite+lit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-23
-updatedAt: 2026-05-06
-title: i18n Vite + Lit - Cara menerjemahkan aplikasi Lit di tahun 2026
-description: Temukan cara membuat situs web Vite dan Lit Anda multibahasa. Ikuti dokumentasi untuk internasionalisasi (i18n) dan terjemahan.
+updatedAt: 2026-05-31
+title: i18n Vite + Lit - Panduan lengkap menerjemahkan Lit
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan Vite and Lit aplikasi Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -57,22 +57,55 @@ history:
 
 <TOC/>
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) sumber terbuka yang inovatif yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `lit-localize` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
+<Accordion header="Cakupan Cahaya Penuh">
 
-- **Mengelola terjemahan dengan mudah** menggunakan kamus deklaratif di tingkat komponen.
-- **Melokalkan metadata, rute, dan konten secara dinamis**.
-- **Memastikan dukungan TypeScript** dengan tipe yang dibuat secara otomatis, meningkatkan pelengkapan otomatis dan deteksi kesalahan.
-- **Memanfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan bahasa dinamis.
+Intlayer dioptimalkan agar berfungsi sempurna dengan Lit dengan menawarkan **pelingkupan konten tingkat Komponen Web**, **dukungan TypeScript**, 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>
 
 ---
 
 ## Panduan langkah demi langkah untuk menyiapkan Intlayer di aplikasi Vite dan Lit
 
-### Langkah 1: Instal Dependensi
+<Steps>
+
+<Step number={1} title="Instal Dependensi">
 
 Instal paket-paket yang diperlukan menggunakan npm:
 
@@ -110,7 +143,9 @@ bun x intlayer init
 - **vite-intlayer**
   Menyertakan plugin Vite untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 2: Konfigurasi Proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasi Proyek Anda">
 
 Buat file konfigurasi untuk menyiapkan bahasa aplikasi Anda:
 
@@ -134,7 +169,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, 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 ke dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={3} title="Integrasikan Intlayer ke dalam Konfigurasi Vite Anda">
 
 Tambahkan plugin intlayer ke konfigurasi Anda.
 
@@ -150,7 +187,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Vite. Plugin ini memastikan pembangunan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Vite. Selain itu, plugin ini menyediakan alias untuk mengoptimalkan performa.
 
-### Langkah 4: Bootstrap Intlayer di Entry Point Anda
+</Step>
+
+<Step number={4} title="Bootstrap Intlayer di Entry Point Anda">
 
 Panggil `installIntlayer()` **sebelum** elemen kustom apa pun didaftarkan sehingga singleton lokal global siap saat elemen pertama terhubung.
 
@@ -175,7 +214,9 @@ installIntlayerMarkdown();
 import "./my-element.js";
 ```
 
-### Langkah 5: Deklarasikan Konten Anda
+</Step>
+
+<Step number={5} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -261,7 +302,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 6: Gunakan Intlayer di LitElement Anda
+</Step>
+
+<Step number={6} title="Gunakan Intlayer di LitElement Anda">
 
 Gunakan `useIntlayer` di dalam `LitElement`. Ini mengembalikan proxy `ReactiveController` yang secara otomatis memicu perenderan ulang setiap kali bahasa aktif berubah - tidak diperlukan pengaturan tambahan.
 
@@ -306,7 +349,9 @@ export class MyElement extends LitElement {
 > html`<img alt=${String(content.viteLogo)} />`;
 > ```
 
-### (Opsional) Langkah 7: Ubah Bahasa Konten Anda
+</Step>
+
+<Step number={7} title="Ubah Bahasa Konten Anda" isOptional={true}>
 
 Untuk mengubah bahasa konten Anda, gunakan metode `setLocale` yang disediakan oleh pengontrol `useLocale`.
 
@@ -341,7 +386,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opsional) Langkah 8: Render Konten Markdown dan HTML
+</Step>
+
+<Step number={8} title="Render Konten Markdown dan HTML" isOptional={true}>
 
 Intlayer mendukung deklarasi konten `md()` dan `html()`. Di Lit, output terkompilasi disuntikkan sebagai HTML mentah melalui arahan `unsafeHTML`.
 
@@ -391,7 +438,9 @@ export class MyElement extends LitElement {
 > [!TIP]
 > `String(content.editNote)` memanggil `toString()` pada `IntlayerNode`, yang mengembalikan string Markdown mentah. Berikan ke `compileMarkdown` untuk mendapatkan string HTML, lalu render dengan arahan `unsafeHTML` Lit.
 
-### (Opsional) Langkah 9: Tambahkan Perutean Terlokalisasi ke Aplikasi Anda
+</Step>
+
+<Step number={9} title="Tambahkan Perutean Terlokalisasi ke Aplikasi Anda" isOptional={true}>
 
 Untuk membuat rute unik untuk setiap bahasa (berguna untuk SEO), Anda dapat menggunakan perute sisi klien bersama dengan pembantu `localeMap` / `localeFlatMap` Intlayer, dan plugin Vite `intlayerProxy` untuk deteksi bahasa sisi server.
 
@@ -408,7 +457,9 @@ export default defineConfig({
 });
 ```
 
-### (Opsional) Langkah 10: Ubah URL saat Bahasa Berubah
+</Step>
+
+<Step number={10} title="Ubah URL saat Bahasa Berubah" isOptional={true}>
 
 Untuk memperbarui URL browser saat bahasa berubah, gunakan `useRewriteURL` beserta pengalih bahasa:
 
@@ -446,7 +497,9 @@ export class LocaleSwitcher extends LitElement {
 }
 ```
 
-### (Opsional) Langkah 11: Alihkan Atribut Bahasa dan Arah HTML
+</Step>
+
+<Step number={11} title="Alihkan Atribut Bahasa dan Arah HTML" isOptional={true}>
 
 Perbarui atribut `lang` dan `dir` dari tag `<html>` agar sesuai dengan bahasa saat ini untuk aksesibilitas dan SEO.
 
@@ -471,7 +524,9 @@ export class MyElement extends LitElement {
 }
 ```
 
-### (Opsional) Langkah 12: Ekstrak Konten Komponen Anda
+</Step>
+
+<Step number={12} title="Ekstrak Konten Komponen Anda" isOptional={true}>
 
 Jika Anda memiliki codebase yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -633,3 +688,7 @@ Untuk detail lebih lanjut tentang cara menggunakan ekstensi, lihat [dokumentasi
 ### 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 mengeksternalisasikan konten Anda menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
+
+</Step>
+
+</Steps>