@intlayer/docs 8.0.4 → 8.0.5

package/docs/id/intlayer_with_analog.md

@@ -0,0 +1,371 @@
+---
+createdAt: 2025-04-18
+updatedAt: 2025-12-30
+title: Analog i18n - Cara menerjemahkan aplikasi Analog Anda – panduan 2026
+description: Temukan cara membuat aplikasi Analog Anda multibahasa. Ikuti dokumentasi untuk menginternasionalisasi (i18n) dan menerjemahkannya.
+keywords:
+  - Internationalization
+  - Documentation
+  - Intlayer
+  - Analog
+  - Angular
+  - JavaScript
+slugs:
+  - doc
+  - environment
+  - analog
+applicationTemplate: https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template
+history:
+  - version: 8.0.4
+    date: 2026-01-26
+    changes: Init history
+---
+
+# Terjemahkan aplikasi Analog (Angular) Anda menggunakan Intlayer | Internasionalisasi (i18n)
+
+## 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.
+- **Melokalisasi metadata, rute, dan konten secara dinamis**.
+- **Memastikan dukungan TypeScript** dengan tipe yang dihasilkan secara otomatis, meningkatkan pelengkapan otomatis dan deteksi kesalahan.
+- **Manfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan bahasa dinamis.
+
+---
+
+## Panduan Langkah demi Langkah untuk Menyiapkan Intlayer dalam Aplikasi Analog
+
+<Tabs defaultTab="code">
+  <Tab label="Code" value="code">
+
+<iframe
+  src="https://stackblitz.com/github/aymericzip/intlayer/tree/main/examples/vite-analog-app?embed=1&ctl=1&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 - How to Internationalize your application using Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer/tree/main/examples/analog-app-template) di GitHub.
+
+### Langkah 1: Instal Dependensi
+
+Instal paket-paket yang diperlukan menggunakan npm:
+
+```bash packageManager="npm"
+npm install intlayer angular-intlayer vite-intlayer
+npx intlayer init
+```
+
+```bash packageManager="pnpm"
+pnpm add intlayer angular-intlayer vite-intlayer
+pnpm intlayer init
+```
+
+```bash packageManager="yarn"
+yarn add intlayer angular-intlayer vite-intlayer
+yarn intlayer init
+```
+
+```bash packageManager="bun"
+bun add intlayer angular-intlayer vite-intlayer
+bunx intlayer init
+```
+
+- **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), transpilasi, dan [perintah CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/cli/index.md).
+
+- **angular-intlayer**
+  Paket yang mengintegrasikan Intlayer dengan aplikasi Angular. Ini menyediakan penyedia konteks dan hook untuk internasionalisasi Angular.
+
+- **vite-intlayer**
+  Paket yang mengintegrasikan Intlayer dengan Vite. Ini menyediakan plugin untuk menangani file deklarasi konten dan menyiapkan alias untuk performa optimal.
+
+### Langkah 2: Konfigurasi Proyek Anda
+
+Buat file konfigurasi untuk mengonfigurasi bahasa aplikasi Anda:
+
+```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Bahasa lainnya
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.mjs" codeFormat="esm"
+import { Locales } from "intlayer";
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Bahasa lainnya
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+export default config;
+```
+
+```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
+const { Locales } = require("intlayer");
+
+/** @type {import('intlayer').IntlayerConfig} */
+const config = {
+  internationalization: {
+    locales: [
+      Locales.ENGLISH,
+      Locales.FRENCH,
+      Locales.SPANISH,
+      // Bahasa lainnya
+    ],
+    defaultLocale: Locales.ENGLISH,
+  },
+};
+
+module.exports = config;
+```
+
+> Melalui file konfigurasi ini, Anda dapat menyiapkan URL yang dilokalisasi, pengalihan middleware, nama cookie, lokasi dan ekstensi deklarasi konten Anda, menonaktifkan log Intlayer di konsol, dan banyak lagi. Untuk daftar lengkap parameter yang tersedia, lihat [dokumentasi konfigurasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/configuration.md).
+
+### Langkah 3: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+
+Untuk mengintegrasikan Intlayer dengan Analog, Anda perlu menggunakan plugin `vite-intlayer`.
+
+Modifikasi file `vite.config.ts` Anda:
+
+```typescript fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer } from "vite-intlayer";
+import analog from "@analogjs/platform";
+
+// https://vitejs.dev/config/
+export default defineConfig(() => ({
+  plugins: [
+    analog(),
+    intlayer(), // Tambahkan plugin Intlayer
+  ],
+}));
+```
+
+> Plugin `intlayer()` mengonfigurasi Vite dengan Intlayer. Ini menangani file deklarasi konten dan menyiapkan alias untuk performa optimal.
+
+### Langkah 4: Deklarasikan Konten Anda
+
+Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
+
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+import { t, type Dictionary } from "intlayer";
+
+const appContent = {
+  key: "app",
+  content: {
+    title: t({
+      en: "Hello",
+      fr: "Bonjour",
+      es: "Hola",
+      id: "Halo",
+    }),
+    congratulations: t({
+      en: "Congratulations! Your app is running. 🎉",
+      fr: "Félicitations! Votre application est en cours d'exécution. 🎉",
+      es: "¡Felicidades! Tu aplikasi sedang berjalan. 🎉",
+      id: "Selamat! Aplikasi Anda sedang berjalan. 🎉",
+    }),
+  },
+} satisfies Dictionary;
+
+export default appContent;
+```
+
+> Deklarasi konten Anda dapat didefinisikan di mana saja dalam aplikasi Anda selama disertakan ke dalam direktori `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).
+
+### Langkah 5: Gunakan Intlayer dalam Kode Anda
+
+Untuk menggunakan fitur internasionalisasi Intlayer di seluruh aplikasi Analog Anda, Anda perlu menyediakan Intlayer dalam konfigurasi aplikasi Anda.
+
+```typescript fileName="src/app/app.config.ts"
+import { ApplicationConfig } from "@angular/core";
+import { provideIntlayer } from "angular-intlayer";
+
+export const appConfig: ApplicationConfig = {
+  providers: [
+    provideIntlayer(), // Tambahkan penyedia Intlayer di sini
+  ],
+};
+```
+
+Kemudian, Anda dapat menggunakan fungsi `useIntlayer` di dalam komponen apa pun.
+
+```typescript fileName="src/app/pages/index.page.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-home",
+  standalone: true,
+  template: `
+    <div class="content">
+      <h1>{{ content().title }}</h1>
+      <p>{{ content().congratulations }}</p>
+    </div>
+  `,
+})
+export default class HomeComponent {
+  content = useIntlayer("app");
+}
+```
+
+Konten Intlayer dikembalikan sebagai `Signal`, jadi Anda mengakses nilainya dengan memanggil sinyal tersebut: `content().title`.
+
+### (Opsional) Langkah 6: Ubah bahasa konten Anda
+
+Untuk mengubah bahasa konten Anda, Anda dapat menggunakan fungsi `setLocale` yang disediakan oleh fungsi `useLocale`. Ini memungkinkan Anda untuk mengatur lokal aplikasi dan memperbarui konten yang sesuai.
+
+Buat komponen untuk beralih antar bahasa:
+
+```typescript fileName="src/app/locale-switcher.component.ts"
+import { Component } from "@angular/core";
+import { CommonModule } from "@angular/common";
+import { useLocale } from "angular-intlayer";
+
+@Component({
+  selector: "app-locale-switcher",
+  standalone: true,
+  imports: [CommonModule],
+  template: `
+    <div class="locale-switcher">
+      <select
+        [value]="locale()"
+        (change)="setLocale($any($event.target).value)"
+      >
+        @for (loc of availableLocales; track loc) {
+          <option [value]="loc">{{ loc }}</option>
+        }
+      </select>
+    </div>
+  `,
+  styles: [
+    `
+      .locale-switcher {
+        margin: 1rem;
+        padding: 0.5rem;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        width: fit-content;
+      }
+    `,
+  ],
+})
+export class LocaleSwitcherComponent {
+  localeCtx = useLocale();
+
+  locale = this.localeCtx.locale;
+  availableLocales = this.localeCtx.availableLocales;
+  setLocale = this.localeCtx.setLocale;
+}
+```
+
+Kemudian, gunakan komponen ini di halaman Anda:
+
+```typescript fileName="src/app/pages/index.page.ts"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+import { LocaleSwitcherComponent } from "../locale-switcher.component";
+
+@Component({
+  selector: "app-home",
+  standalone: true,
+  imports: [LocaleSwitcherComponent],
+  template: `
+    <app-locale-switcher></app-locale-switcher>
+    <div class="content">
+      <h1>{{ content().title }}</h1>
+      <p>{{ content().congratulations }}</p>
+    </div>
+  `,
+})
+export default class HomeComponent {
+  content = useIntlayer("app");
+}
+```
+
+### Konfigurasi TypeScript
+
+Intlayer menggunakan augmentasi modul untuk mendapatkan manfaat dari TypeScript dan membuat basis kode Anda lebih kuat.
+
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.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.
+
+```json5 fileName="tsconfig.json"
+{
+  // ... Konfigurasi TypeScript Anda yang sudah ada
+  "include": [
+    // ... Konfigurasi TypeScript Anda yang sudah ada
+    ".intlayer/**/*.ts", // Sertakan tipe yang dihasilkan secara otomatis
+  ],
+}
+```
+
+### Konfigurasi Git
+
+Disarankan untuk mengabaikan file yang dihasilkan oleh Intlayer. Ini memungkinkan Anda untuk menghindari memasukkannya ke dalam repositori Git Anda.
+
+Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignore` Anda:
+
+```plaintext
+# 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.
+
+[Instal dari VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+Ekstensi ini menyediakan:
+
+- **Pelengkapan otomatis** untuk kunci terjemahan.
+- **Deteksi kesalahan real-time** untuk terjemahan yang hilang.
+- **Pratinjau sebaris** dari 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).
+
+---
+
+### 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).

package/docs/id/intlayer_with_angular.md

@@ -169,30 +169,28 @@ Untuk mengintegrasikan Intlayer dengan Angular CLI, Anda perlu menggunakan build
 
 Pertama, modifikasi `angular.json` Anda untuk menggunakan builder Webpack khusus. Perbarui konfigurasi `build` dan `serve`:
 
-```json fileName="angular.json"
+```json5 fileName="angular.json"
 {
   "projects": {
     "your-app-name": {
       "architect": {
         "build": {
-          "builder": "@angular-builders/custom-webpack:browser",
+          "builder": "@angular-builders/custom-webpack:browser", // replace "@angular-devkit/build-angular:application",
           "options": {
             "customWebpackConfig": {
-              "path": "./webpack.config.ts"
-            }
-          }
+              "path": "./webpack.config.ts",
+              "mergeStrategies": { "module.rules": "prepend" },
+            },
+            "main": "src/main.ts", // replace "browser": "src/main.ts",
+            // ...
+          },
         },
         "serve": {
           "builder": "@angular-builders/custom-webpack:dev-server",
-          "options": {
-            "customWebpackConfig": {
-              "path": "./webpack.config.ts"
-            }
-          }
-        }
-      }
-    }
-  }
+        },
+      },
+    },
+  },
 }
 ```
 

package/docs/id/packages/solid-intlayer/useIntlayer.md

@@ -33,7 +33,7 @@ Hook `useIntlayer` memungkinkan Anda mengambil konten yang dilokalkan dari sebua
 import { useIntlayer } from "solid-intlayer";
 
 const MyComponent = () => {
-  const content = useIntlayer("my_dictionary_key");
+  const content = useIntlayer("my-dictionary-key");
 
   return (
     <div>

package/docs/it/agent_skills.md

@@ -0,0 +1,53 @@
+---
+createdAt: 2026-02-09
+updatedAt: 2026-02-09
+title: Abilità dell'Agente
+description: Scopri come utilizzare le Intlayer Agent Skills per migliorare la comprensione del tuo progetto da parte del tuo agente AI.
+keywords:
+  - Intlayer
+  - Abilità dell'Agente
+  - Agente AI
+  - Internazionalizzazione
+  - Documentazione
+slugs:
+  - doc
+  - agent_skills
+history:
+  - version: 8.0.4
+    date: 2026-02-09
+    changes: Inizializza cronologia
+---
+
+## Il comando `intlayer init skills`
+
+Il comando `intlayer init skills` è il modo più semplice per configurare le abilità dell'agente nel tuo progetto. Rileva il tuo ambiente e installa i file di configurazione necessari per le tue piattaforme preferite.
+
+```bash
+npx intlayer init skills
+```
+
+Quando esegui questo comando, esso:
+
+1.  Rileverà il framework che stai utilizzando (es. Next.js, React, Vite).
+2.  Ti chiederà per quali piattaforme desideri installare le abilità (Cursor, VS Code, OpenCode, Claude Code, ecc.).
+3.  Genererà i file di configurazione richiesti (come `.cursor/mcp.json`, `.vscode/mcp.json` o `.intlayer/skills/*.md`).
+
+## Piattaforme Supportate
+
+Intlayer supporta l'integrazione con le seguenti piattaforme:
+
+### 1. Cursor
+
+Cursor supporta i server MCP (Model Context Protocol). L'esecuzione di `intlayer init skills` creerà un file `.cursor/mcp.json` che consente a Cursor di comunicare con il server MCP di Intlayer.
+
+### 2. VS Code
+
+Per gli utenti di VS Code, in particolare quelli che utilizzano GitHub Copilot o altre estensioni compatibili con MCP, il comando crea una configurazione `.vscode/mcp.json`.
+
+### 3. OpenCode
+
+OpenCode è un agente CLI interattivo progettato per compiti di ingegneria del software. Intlayer fornisce abilità specifiche per aiutare OpenCode ad assisterti nei compiti di internazionalizzazione.
+
+### 4. Claude Code
+
+Claude Code può essere configurato per utilizzare le abilità di Intlayer aggiungendo le configurazioni generate alle sue impostazioni desktop o CLI.

package/docs/it/cli/doc-translate.md

@@ -86,6 +86,7 @@ npx intlayer doc translate
 - **`--temperature [temperature]`**: Impostazione della temperatura per il modello AI.
 - **`--api-key [apiKey]`**: Fornisci la tua chiave API per il servizio AI.
 - **`--application-context [applicationContext]`**: Fornisci un contesto aggiuntivo per la traduzione AI.
+- **`--data-serialization [dataSerialization]`**: Il formato di serializzazione dei dati da utilizzare per le funzionalità AI di Intlayer. Opzioni: `json` (standard, affidabile), `toon` (meno token, meno coerente).
 - **`--custom-prompt [prompt]`**: Personalizza il prompt base utilizzato per la traduzione. (Nota: per la maggior parte dei casi d'uso, si consiglia invece l'opzione `--custom-instructions` in quanto offre un controllo migliore sul comportamento della traduzione.)
 
   > Esempio: `npx intlayer doc translate --model deepseek-chat --provider deepseek --temperature 0.5 --api-key sk-1234567890 --application-context "La mia applicazione è un negozio di gatti"`

package/docs/it/cli/fill.md

@@ -126,6 +126,7 @@ Affected dictionary keys for processing: app, comp-test, hello-world, lang-switc
 - **`--api-key [apiKey]`**: Fornisci la tua chiave API per il servizio AI.
 - **`--custom-prompt [prompt]`**: Fornisci un prompt personalizzato per le tue istruzioni di traduzione.
 - **`--application-context [applicationContext]`**: Fornisci un contesto aggiuntivo per la traduzione AI.
+- **`--data-serialization [dataSerialization]`**: Il formato di serializzazione dei dati da utilizzare per le funzionalità AI di Intlayer. Opzioni: `json` (standard, affidabile), `toon` (meno token, meno coerente).
 
   > Esempio: `npx intlayer fill --model gpt-3.5-turbo --provider openai --temperature 0.5 --api-key sk-1234567890 --application-context "La mia applicazione è un negozio di gatti"`
 

package/docs/it/configuration.md

@@ -14,6 +14,9 @@ slugs:
   - concept
   - configuration
 history:
+  - version: 8.0.5
+    date: 2026-02-06
+    changes: Aggiungi `dataSerialization` alla configurazione AI
   - version: 8.0.0
     date: 2026-01-22
     changes: Move `importMode` build configuration to `dictionary` configuration.
@@ -898,6 +901,13 @@ Intlayer supporta più provider AI per una maggiore flessibilità e scelta. I pr
   - _Esempio_: `'https://api.openai.com/v1'`
   - _Nota_: Può essere utilizzato per puntare a un endpoint API AI locale o personalizzato.
 
+- **dataSerialization**:
+  - _Tipo_: `'json' | 'toon'`
+  - _Predefinito_: `'json'`
+  - _Descrizione_: Il formato di serializzazione dei dati da utilizzare per le funzionalità AI di Intlayer.
+  - _Esempio_: `'toon'`
+  - _Nota_: `json`: Standard, affidabile; utilizza più token. `toon`: Meno token, meno coerente del JSON.
+
 ### Configurazione della Build
 
 Impostazioni che controllano come Intlayer ottimizza e costruisce l'internazionalizzazione della tua applicazione.