@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/id/intlayer_with_astro.md

@@ -1,11 +1,11 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - Cara menerjemahkan aplikasi Astro di 2026
-description: Pelajari cara menambahkan internasionalisasi (i18n) ke situs web Astro Anda menggunakan Intlayer. Ikuti panduan ini untuk membuat situs web Anda multibahasa.
+title: Terjemahan Astro i18n - Cara Menerjemahkan Aplikasi Astro di tahun 2026
+description: Pelajari cara menambahkan internasionalisasi (i18n) ke situs Astro Anda menggunakan Intlayer. Ikuti panduan ini untuk membuat situs Anda multibahasa.
 keywords:
-  - Internasionalisasi
-  - Dokumentasi
+  - internasionalisasi
+  - dokumentasi
   - Intlayer
   - Vite
   - React
@@ -16,73 +16,95 @@ slugs:
   - environment
   - astro
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
   - version: 7.5.9
     date: 2025-12-30
-    changes: "Tambahkan perintah init"
+    changes: "Menambahkan perintah init"
   - version: 6.2.0
     date: 2025-10-03
-    changes: "Penyegaran untuk integrasi Astro, konfigurasi, penggunaan"
+    changes: "Pembaruan integrasi Astro, konfigurasi, dan penggunaan"
 ---
 
-# Terjemahkan situs web Astro Anda menggunakan Intlayer | Internasionalisasi (i18n)
+# Terjemahkan Situs Astro Anda dengan Intlayer | Internasionalisasi (i18n)
 
-## Apa itu Intlayer?
-
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) open-source yang inovatif, dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
-
-Dengan Intlayer, Anda dapat:
-
-- **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 autocompletion dan deteksi kesalahan.
-- **Memanfaatkan fitur canggih**, seperti deteksi dan pergantian locale secara dinamis.
+<Tabs defaultTab="code">
+  <Tab label="Kode" value="code">
 
----
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Cara menginternasionalisasi aplikasi Anda dengan Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
 
-## Panduan Langkah demi Langkah untuk Mengatur Intlayer di Astro
+  </Tab>
+  <Tab label="Demo" value="demo">
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-astro-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://intlayer-astro-template.vercel.app"
   className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Cara Menginternasionalisasi aplikasi Anda menggunakan Intlayer"
+  title="Demo — intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
-Lihat [Template Aplikasi](https://github.com/aymericzip/intlayer-astro-template) di GitHub.
+  </Tab>
+</Tabs>
+
+## Daftar Isi
+
+<TOC/>
+
+## Apa itu Intlayer?
+
+**Intlayer** adalah pustaka internasionalisasi (i18n) sumber terbuka yang inovatif yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+
+Dengan Intlayer, Anda dapat:
+
+- **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 untuk pelengkapan otomatis dan deteksi kesalahan yang lebih baik.
+- **Memanfaatkan fitur-fitur canggih**: Seperti deteksi bahasa dinamis dan peralihan bahasa.
+
+---
+
+## Panduan Langkah-demi-Langkah untuk Mengonfigurasi Intlayer di Astro
 
-### Langkah 1: Instalasi Dependensi
+Lihat [templat aplikasi](https://github.com/aymericzip/intlayer-astro-template) di GitHub.
 
-Instal paket yang diperlukan menggunakan package manager Anda:
+### Langkah 1: Instal Dependensi
+
+Instal paket yang diperlukan menggunakan manajer paket pilihan Anda:
 
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
-# Opsional: tambahkan dukungan React island
+# opsional: jika Anda ingin menambahkan dukungan island React
 npm install react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer
-# Opsional: tambahkan dukungan React island
+# opsional: jika Anda ingin menambahkan dukungan island React
 pnpm add react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer
- # Opsional: tambahkan dukungan React island
+# opsional: jika Anda ingin menambahkan dukungan island React
 yarn add react react-dom react-intlayer @astrojs/react
 ```
 
 - **intlayer**
-  Paket inti yang menyediakan alat internasionalisasi untuk manajemen konfigurasi, terjemahan, [deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md), transpile, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
+  Paket inti yang menyediakan alat i18n untuk manajemen konfigurasi, terjemahan, [deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md), transpilasi, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
 
 - **astro-intlayer**
-  Termasuk plugin integrasi Astro untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi locale yang dipilih pengguna, mengelola cookie, dan menangani pengalihan URL.
+  Plugin integrasi Astro untuk menghubungkan Intlayer dengan [bundler Vite](https://vite.dev/guide/why.html#why-bundle-for-production); juga mencakup middleware untuk mendeteksi bahasa pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 2: Konfigurasi proyek Anda
+### Langkah 2: Konfigurasikan Proyek Anda
 
-Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:
+Buat file konfigurasi untuk menentukan bahasa aplikasi Anda:
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -93,7 +115,8 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Locale lain milik Anda
+      Locales.INDONESIAN,
+      // Bahasa Anda yang lain
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -102,11 +125,11 @@ const config: IntlayerConfig = {
 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 lainnya. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
+> Melalui file konfigurasi ini, Anda dapat mengatur URL yang dilokalkan, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
 
-### Langkah 3: Integrasikan Intlayer dalam Konfigurasi Astro Anda
+### Langkah 3: Integrasikan Intlayer ke dalam konfigurasi Astro Anda
 
-Tambahkan plugin intlayer ke dalam konfigurasi Anda.
+Tambahkan plugin `intlayer` ke konfigurasi Astro Anda.
 
 ```typescript fileName="astro.config.ts"
 // @ts-check
@@ -120,7 +143,7 @@ export default defineConfig({
 });
 ```
 
-> Plugin integrasi `intlayer()` untuk Astro digunakan untuk mengintegrasikan Intlayer dengan Astro. Plugin ini memastikan pembuatan file deklarasi konten dan memantau file tersebut dalam mode pengembangan. Plugin ini juga mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Astro. Selain itu, plugin ini menyediakan alias untuk mengoptimalkan performa.
+> Plugin integrasi `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Astro. Plugin ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer di dalam aplikasi Astro dan menyediakan alias untuk mengoptimalkan kinerja.
 
 ### Langkah 4: Deklarasikan Konten Anda
 
@@ -137,6 +160,7 @@ const appContent = {
       en: "Hello World",
       fr: "Bonjour le monde",
       es: "Hola mundo",
+      id: "Halo Dunia",
     }),
   },
 } satisfies Dictionary;
@@ -144,16 +168,15 @@ const appContent = {
 export default appContent;
 ```
 
-> Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama sudah dimasukkan ke dalam direktori `contentDir` (secara default, `./src`). Dan sesuai dengan ekstensi file deklarasi konten (secara default, `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+> Deklarasi konten dapat didefinisikan di mana saja dalam aplikasi Anda, asalkan disertakan dalam `contentDir` (secara default `./src`) dan cocok dengan ekstensi file deklarasi konten (secara default `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
 
-> Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
+> Untuk informasi selengkapnya, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
 
-### Langkah 5: Gunakan konten Anda di Astro
+### Langkah 5: Menggunakan Konten di Astro
 
-Anda dapat menggunakan kamus secara langsung di file `.astro` menggunakan helper inti yang diekspor oleh `intlayer`.
+Anda dapat mengonsumsi kamus langsung di file `.astro` menggunakan pembantu inti yang diekspor dari `intlayer`.
 
 ```astro fileName="src/pages/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 import appContent from "../app.content";
@@ -161,7 +184,7 @@ import appContent from "../app.content";
 const { title } = getIntlayer('app');
 ---
 
-<html lang="en">
+<html lang="id">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -173,12 +196,11 @@ const { title } = getIntlayer('app');
 </html>
 ```
 
-### Langkah 6: Routing yang dilokalisasi
+### Langkah 6: Perutean yang Dilokalkan
 
-Buat segmen rute dinamis untuk menyajikan halaman yang dilokalisasi, misalnya `src/pages/[locale]/index.astro`:
+Buat segmen rute dinamis (misalnya, `src/pages/[locale]/index.astro`) untuk melayani halaman yang dilokalkan:
 
 ```astro fileName="src/pages/[locale]/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 
@@ -188,11 +210,11 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
-Integrasi Astro menambahkan middleware Vite selama pengembangan yang membantu dengan routing yang sadar locale dan definisi lingkungan. Anda masih dapat membuat tautan antar locale menggunakan logika Anda sendiri, atau fungsi utilitas seperti `getLocalizedUrl` dari `intlayer`.
+Integrasi Astro menambahkan middleware Vite yang membantu perutean yang sadar bahasa dan definisi lingkungan selama pengembangan. Anda juga dapat menggunakan logika Anda sendiri atau alat `intlayer` seperti `getLocalizedUrl` untuk menautkan lintas bahasa.
 
-### Langkah 7: Lanjutkan menggunakan framework favorit Anda
+### Langkah 7: Terus Gunakan Framework Favorit Anda
 
-Lanjutkan menggunakan framework favorit Anda untuk membangun aplikasi Anda.
+Lanjutkan membangun aplikasi Anda menggunakan framework pilihan Anda.
 
 - Intlayer + React: [Intlayer dengan React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+react.md)
 - Intlayer + Vue: [Intlayer dengan Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_with_vite+vue.md)
@@ -202,54 +224,150 @@ Lanjutkan menggunakan framework favorit Anda untuk membangun aplikasi Anda.
 
 ### Konfigurasi TypeScript
 
-Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.
+Intlayer menggunakan augmentasi modul (module augmentation) untuk memanfaatkan TypeScript, membuat basis kode Anda lebih kuat.
 
 ![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![Kesalahan Terjemahan](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
-Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis.
+Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dibuat secara otomatis.
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... Konfigurasi TypeScript Anda yang sudah ada
+  // ... konfigurasi TypeScript Anda yang sudah ada
   "include": [
-    // ... Konfigurasi TypeScript Anda yang sudah ada
-    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan otomatis
+    // ... konfigurasi TypeScript Anda yang sudah ada
+    ".intlayer/**/*.ts", // Sertakan tipe yang dibuat secara otomatis
   ],
 }
 ```
 
 ### Konfigurasi Git
 
-Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari meng-commit file tersebut ke repositori Git Anda.
+Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini mencegah file tersebut di-commit ke repositori Git Anda.
 
-Untuk melakukannya, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
+Untuk melakukannya, tambahkan instruksi berikut ke file `.gitignore` Anda:
 
 ```bash
-#  Abaikan file yang dihasilkan oleh Intlayer
+# Abaikan file yang dihasilkan oleh Intlayer
 .intlayer
 ```
 
 ### Ekstensi VS Code
 
-Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi VS Code Intlayer** resmi.
+Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **ekstensi resmi Intlayer untuk VS Code**.
 
-[Pasang dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Instalasi dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
 Ekstensi ini menyediakan:
 
 - **Autocompletion** untuk kunci terjemahan.
 - **Deteksi kesalahan waktu nyata** untuk terjemahan yang hilang.
-- **Pratinjau inline** dari konten yang diterjemahkan.
-- **Tindakan cepat** untuk dengan mudah membuat dan memperbarui terjemahan.
+- **Pratinjau inline** untuk konten yang diterjemahkan.
+- **Tindakan cepat** untuk membuat dan memperbarui terjemahan dengan mudah.
 
-Untuk detail lebih lanjut tentang cara menggunakan ekstensi ini, lihat [dokumentasi Ekstensi VS Code Intlayer](https://intlayer.org/doc/vs-code-extension).
+Untuk informasi selengkapnya tentang cara menggunakan ekstensi, lihat [dokumentasi ekstensi VS Code](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-### Melangkah Lebih Jauh
+### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+
+Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
+
+Untuk memudahkan proses ini, Intlayer mengusulkan [compiler](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/compiler.md) / [extractor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/extract.md) untuk mengubah komponen Anda dan mengekstrak kontennya.
+
+Untuk mengaturnya, Anda dapat menambahkan bagian `compiler` di file `intlayer.config.ts` Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Sisa konfigurasi Anda
+  compiler: {
+    /**
+     * Menunjukkan apakah compiler harus diaktifkan.
+     */
+    enabled: true,
+
+    /**
+     * Menentukan jalur file output
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Menunjukkan apakah komponen harus disimpan setelah diubah. Dengan begitu, compiler dapat dijalankan satu kali saja untuk mengubah aplikasi, lalu dapat dihapus.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks kunci kamus
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Perintah ekstrak'>
+
+Jalankan extractor untuk mengubah komponen Anda dan mengekstrak kontennya
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Compiler Babel'>
+
+Perbarui `vite.config.ts` Anda untuk menyertakan plugin `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Menambahkan plugin compiler
+  ],
+});
+```
 
-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).
+```bash packageManager="npm"
+npm run build # Atau npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
 
 ---
+
+### Perdalam Pengetahuan Anda
+
+Jika Anda ingin mempelajari lebih lanjut, Anda juga dapat menerapkan [Editor Visual](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) atau menggunakan [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md) untuk mengeksternalisasi konten Anda.