@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/id/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Cara Menyiapkan Intlayer dengan Storybook
-description: Pelajari cara membuat sistem desain Anda multibahasa menggunakan Intlayer dengan Storybook - kompilasi deklarasi konten, tambahkan pengalih lokal, dan pratinjau komponen Anda dalam bahasa apa pun.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Panduan lengkap menerjemahkan aplikasi Anda"
+description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Storybook multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -31,16 +31,54 @@ 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. Ini bekerja pada **tingkat komponen** - setiap komponen memiliki deklarasi kontennya sendiri - menjaga terjemahan tetap berada di tempat yang sama dengan kode yang menggunakannya.
+Dibandingkan dengan solusi utama seperti `storybook-react-i18next` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer Anda dapat:
+<AccordionGroup>
 
-- **Mengelola terjemahan secara deklaratif** dengan file konten per komponen.
-- **Mendapatkan dukungan TypeScript penuh** melalui tipe yang dibuat secara otomatis dan autolengkap IDE.
-- **Beralih lokal saat runtime** tanpa perlu memuat ulang halaman.
-- **Menerjemahkan secara otomatis** dengan integrasi penyedia AI bawaan.
+<Accordion header="Liputan Buku Cerita Lengkap">
+
+Intlayer dioptimalkan agar berfungsi sempurna dengan Storybook dengan menawarkan **dekorator cerita multibahasa**, **pengalihan lokal**, dan semua fitur yang diperlukan untuk meningkatkan internasionalisasi (i18n) di seluruh sistem desain Anda.
+
+</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>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook adalah alat standar industri untuk mengembangkan dan mendokumentasikan
 <Tabs>
 <Tab value="Vite Setup">
 
-### Langkah 1: Instal Dependensi
+<Steps>
+
+<Step number={1} title="Instal Dependensi">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Langkah 2: Buat Konfigurasi Intlayer
+</Step>
+
+<Step number={2} title="Buat Konfigurasi Intlayer">
 
 Buat `intlayer.config.ts` di root proyek Anda (atau di dalam paket sistem desain Anda):
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Langkah 3: Tambahkan Plugin Vite ke Storybook
+</Step>
+
+<Step number={3} title="Tambahkan Plugin Vite ke Storybook">
 
 Hook `viteFinal` Storybook memungkinkan Anda memperluas konfigurasi Vite internal. Impor dan tambahkan plugin `intlayer()` di sana:
 
@@ -159,7 +203,9 @@ Plugin `intlayer()` memantau file `*.content.ts` Anda dan membangun kembali kamu
 
 ---
 
-### Langkah 4: Tambahkan Dekorator `IntlayerProvider` dan Bilah Alat Lokal
+</Step>
+
+<Step number={4} title="Tambahkan Dekorator `IntlayerProvider` dan Bilah Alat Lokal">
 
 File `preview` Storybook adalah tempat yang tepat untuk membungkus setiap story dengan `IntlayerProvider` dan mengekspos pengalih lokal di bilah alat:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Langkah 1: Instal Dependensi
+</Step>
+
+<Step number={1} title="Instal Dependensi">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Langkah 2: Buat Konfigurasi Intlayer
+</Step>
+
+<Step number={2} title="Buat Konfigurasi Intlayer">
 
 Buat `intlayer.config.ts` di root proyek Anda:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Langkah 3: Konfigurasi Webpack Storybook
+</Step>
+
+<Step number={3} title="Konfigurasi Webpack Storybook">
 
 Untuk pengaturan Storybook berbasis Webpack (misalnya `@storybook/react-webpack5`), perluas konfigurasi webpack melalui `webpackFinal` untuk menambahkan alias dan loader Intlayer:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Langkah 4: Tambahkan Dekorator `IntlayerProvider` dan Bilah Alat Lokal
+</Step>
+
+<Step number={4} title="Tambahkan Dekorator `IntlayerProvider` dan Bilah Alat Lokal">
 
 Sama seperti pengaturan Vite - tambahkan dekorator dan tipe lokal global di `.storybook/preview.tsx`:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Mendeklarasikan Konten
 
 Buat file `*.content.ts` di samping setiap komponen. Intlayer akan mengambilnya secara otomatis selama proses kompilasi.

package/docs/id/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Cara menerjemahkan aplikasi SvelteKit di 2026
-description: Temukan cara membuat situs web SvelteKit Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya menggunakan Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Panduan lengkap menerjemahkan aplikasi Anda"
+description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi SvelteKit multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) sumber terbuka yang inovatif, dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern. Ini bekerja mulus dengan kemampuan Server-Side Rendering (SSR) dari **SvelteKit**.
+Dibandingkan dengan solusi utama seperti `svelte-i18n` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
 
-- **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.
-- **Memanfaatkan SSR SvelteKit** untuk internasionalisasi yang ramah SEO.
+<Accordion header="Cakupan penuh SvelteKit">
+
+Intlayer dioptimalkan untuk bekerja sempurna dengan SvelteKit 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>
 
 ---
 
@@ -116,7 +154,9 @@ Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang ak
 └── vite.config.ts
 ```
 
-### Langkah 1: Instalasi Dependencies
+<Steps>
+
+<Step number={1} title="Instalasi Dependencies">
 
 Instal paket yang diperlukan menggunakan npm:
 
@@ -148,7 +188,9 @@ bun x intlayer init
 - **svelte-intlayer**: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
 - **vite-intlayer**: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.
 
-### Langkah 2: Konfigurasi proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasi proyek Anda">
 
 Buat file konfigurasi di root proyek Anda:
 
@@ -165,7 +207,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={3} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.
 
@@ -179,7 +223,9 @@ export default defineConfig({
 });
 ```
 
-### Langkah 4: Deklarasikan Konten Anda
+</Step>
+
+<Step number={4} title="Deklarasikan Konten Anda">
 
 Buat file deklarasi konten Anda di mana saja dalam folder `src` Anda (misalnya, `src/lib/content` atau di samping komponen Anda). File-file ini mendefinisikan konten yang dapat diterjemahkan untuk aplikasi Anda menggunakan fungsi `t()` untuk setiap locale.
 
@@ -200,13 +246,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Langkah 5: Gunakan Intlayer dalam Komponen Anda
+</Step>
+
+<Step number={5} title="Gunakan Intlayer dalam Komponen Anda">
 
 Sekarang Anda dapat menggunakan fungsi `useIntlayer` di komponen Svelte mana pun. Fungsi ini mengembalikan store reaktif yang secara otomatis diperbarui saat locale berubah. Fungsi ini akan secara otomatis menghormati locale saat ini (baik selama SSR maupun navigasi sisi klien).
 
 > **Catatan:** `useIntlayer` mengembalikan store Svelte, jadi Anda perlu menggunakan prefix `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Cara menerjemahkan aplikasi SvelteKit Anda – panduan i18n 2026
 > description: Temukan cara membuat situs web SvelteKit Anda menjadi multibahasa. Ikuti dokumentasi untuk melakukan internasionalisasi (i18n) dan menerjemahkannya menggunakan Server-Side Rendering (SSR).
 > keywords:
@@ -231,6 +279,10 @@ Sekarang Anda dapat menggunakan fungsi `useIntlayer` di komponen Svelte mana pun
 
 # Terjemahkan situs web SvelteKit Anda menggunakan Intlayer | Internasionalisasi (i18n)
 
+</Step>
+
+</Steps>
+
 ## Daftar Isi
 
 <TOC/>
@@ -292,7 +344,9 @@ Untuk memulai, buat proyek SvelteKit baru. Berikut adalah struktur akhir yang ak
 └── vite.config.ts
 ```
 
-### Langkah 1: Instalasi Dependencies
+<Steps>
+
+<Step number={1} title="Instalasi Dependencies">
 
 Instal paket yang diperlukan menggunakan npm:
 
@@ -324,7 +378,9 @@ bun x intlayer init
 - **svelte-intlayer**: Menyediakan context providers dan stores untuk Svelte/SvelteKit.
 - **vite-intlayer**: Plugin Vite untuk mengintegrasikan deklarasi konten dengan proses build.
 
-### Langkah 2: Konfigurasi proyek Anda
+</Step>
+
+<Step number={2} title="Konfigurasi proyek Anda">
 
 Buat file konfigurasi di root proyek Anda:
 
@@ -341,7 +397,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={3} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Perbarui `vite.config.ts` Anda untuk menyertakan plugin Intlayer. Plugin ini menangani transpile file konten Anda.
 
@@ -355,7 +413,9 @@ export default defineConfig({
 });
 ```
 
-### Langkah 4: Deklarasikan Konten Anda
+</Step>
+
+<Step number={4} title="Deklarasikan Konten Anda">
 
 Buat file deklarasi konten Anda di mana saja dalam folder `src` Anda (misalnya, `src/lib/content` atau di samping komponen Anda). File-file ini mendefinisikan konten yang dapat diterjemahkan untuk aplikasi Anda menggunakan fungsi `t()` untuk setiap locale.
 
@@ -376,7 +436,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Langkah 5: Gunakan Intlayer dalam Komponen Anda
+</Step>
+
+<Step number={5} title="Gunakan Intlayer dalam Komponen Anda">
 
 untuk mengakses nilai reaktifnya (misalnya, `$content.title`).
 
@@ -398,7 +460,9 @@ untuk mengakses nilai reaktifnya (misalnya, `$content.title`).
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opsional) Langkah 6: Atur routing
+</Step>
+
+<Step number={6} title="Atur routing" isOptional={true}>
 
 Langkah-langkah berikut menunjukkan cara mengatur routing berbasis locale di SvelteKit. Ini memungkinkan URL Anda menyertakan prefix locale (misalnya, `/en/about`, `/fr/about`) untuk SEO yang lebih baik dan pengalaman pengguna yang lebih baik.
 
@@ -423,7 +487,9 @@ Langkah-langkah berikut menunjukkan cara mengatur routing berbasis locale di Sve
         └── +layout.svelte         # Tata letak root untuk font dan gaya global
 ```
 
-### Langkah 7: Tangani Deteksi Locale di Server (Hooks)
+</Step>
+
+<Step number={7} title="Tangani Deteksi Locale di Server">
 
 Di SvelteKit, server perlu mengetahui locale pengguna untuk merender konten yang benar selama SSR. Kita menggunakan `hooks.server.ts` untuk mendeteksi locale dari URL atau cookie.
 
@@ -635,7 +701,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opsional) Langkah 8: Tautan Internasionalisasi
+</Step>
+
+<Step number={8} title="Tautan Internasionalisasi" isOptional={true}>
 
 Untuk SEO, disarankan untuk menambahkan prefix locale pada rute Anda (misalnya, `/en/about`, `/fr/about`). Komponen ini secara otomatis menambahkan prefix locale saat ini pada setiap tautan.
 
@@ -668,7 +736,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Menavigasi ke /en/about atau /fr/about tergantung locale
 ```
 
-### (Opsional) Langkah 9: Pengalih Bahasa
+</Step>
+
+<Step number={9} title="Pengalih Bahasa" isOptional={true}>
 
 Untuk memungkinkan pengguna mengganti bahasa, perbarui URL.
 
@@ -709,7 +779,9 @@ Untuk memungkinkan pengguna mengganti bahasa, perbarui URL.
 </style>
 ```
 
-### (Opsional) Langkah 10: Tambahkan proxy backend
+</Step>
+
+<Step number={10} title="Tambahkan proxy backend" isOptional={true}>
 
 Untuk menambahkan proxy backend ke aplikasi SvelteKit Anda, Anda dapat menggunakan fungsi `intlayerProxy` yang disediakan oleh plugin `vite-intlayer`. Plugin ini akan secara otomatis mendeteksi locale terbaik untuk pengguna berdasarkan URL, cookie, dan preferensi bahasa browser.
 
@@ -728,7 +800,9 @@ export default defineConfig({
 });
 ```
 
-### (Opsional) Langkah 11: Mengatur editor / CMS intlayer
+</Step>
+
+<Step number={11} title="Mengatur editor / CMS intlayer" isOptional={true}>
 
 Untuk mengatur editor intlayer, Anda harus mengikuti [dokumentasi editor intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md).
 
@@ -753,18 +827,9 @@ Untuk dapat memvisualisasikan selector editor intlayer, Anda harus menggunakan s
 </div>
 ```
 
-### Konfigurasi Git
+</Step>
 
-Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.
-
-```plaintext fileName=".gitignore"
-# Abaikan file-file yang dihasilkan oleh Intlayer
-.intlayer
-```
-
----
-
-### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -859,6 +924,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Konfigurasi Git
+
+Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.
+
+```plaintext fileName=".gitignore"
+# Abaikan file-file yang dihasilkan oleh Intlayer
+.intlayer
+```
+
+---
 
 ### Melangkah Lebih Jauh