@intlayer/docs 9.1.3 → 9.2.0

package/docs/id/intlayer_CMS.md

@@ -244,12 +244,176 @@ Perintah ini mengunggah kamus konten awal Anda, sehingga tersedia untuk pengambi
 
 Kemudian Anda akan dapat melihat dan mengelola kamus Anda di [Intlayer CMS](https://app.intlayer.org/content).
 
+## Akses programatis dengan SDK `@intlayer/api`
+
+Selain CLI dan editor visual, Intlayer menyediakan SDK yang ter-type dalam paket [`@intlayer/api`](https://www.npmjs.com/package/@intlayer/api). Ini memungkinkan Anda memperlakukan CMS sebagai **database konten headless**: Anda dapat mengambil proyek, mengambil dictionary, dan mendorong atau memperbarui mereka langsung dari aplikasi, skrip, atau pipeline CI Anda sendiri.
+
+SDK menangani autentikasi untuk Anda. Selama `clientId` dan `clientSecret` Anda tersedia (dalam konfigurasi Intlayer atau environment), SDK memperoleh dan menyegarkan token akses OAuth2 secara otomatis serta menandatangani setiap permintaan.
+
+### Instalasi
+
+```bash packageManager="npm"
+npm install @intlayer/api
+```
+
+```bash packageManager="yarn"
+yarn add @intlayer/api
+```
+
+```bash packageManager="pnpm"
+pnpm add @intlayer/api
+```
+
+```bash packageManager="bun"
+bun add @intlayer/api
+```
+
+### Cara kerjanya: authenticator + endpoints
+
+SDK dibagi menjadi **dua import terpisah** dengan tujuan, untuk membuat bundle Anda tetap kecil:
+
+1. `createIntlayerCMS` — membuat **authenticator** yang ringan. Ini hanya membawa kredensial dan token akses yang dikelola; ia tidak mengetahui apa pun tentang domain tertentu.
+2. `dictionaryEndpoint`, `projectEndpoint`, … — **endpoint binders** per-domain, masing-masing diimpor dari subpath-nya sendiri (`@intlayer/api/dictionary`, `@intlayer/api/project`, …). Anda melewatkan authenticator ke endpoint yang Anda butuhkan.
+
+Karena setiap endpoint diimpor secara terpisah, bundle Anda hanya mencakup domain yang benar-benar Anda gunakan — mengimpor `dictionaryEndpoint` tidak akan pernah menarik klien project, AI, atau domain lainnya.
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+// Konfigurasi bersifat opsional: ketika dihilangkan, kredensial dibaca dari
+// `@intlayer/config/built`, yang menyelesaikan variabel lingkungan INTLAYER_CLIENT_ID dan
+// INTLAYER_CLIENT_SECRET.
+export const cmsAuthenticator = createIntlayerCMS();
+```
+
+> [!WARNING]
+> Kredensial CMS (`clientId` / `clientSecret`) memberikan **akses tulis** ke konten Anda. Selalu buat authenticator hanya di **sisi server** (server actions, route handlers, scripts, CI). Jangan pernah mengimpor ke kode sisi klien atau membuka kredensial Anda ke browser.
+
+Jika Anda lebih suka tidak mengandalkan konfigurasi waktu build, teruskan kredensial secara eksplisit:
+
+```typescript fileName="cms.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+
+export const cmsAuthenticator = createIntlayerCMS({
+  editor: {
+    clientId: process.env.INTLAYER_CLIENT_ID,
+    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
+    // Opsional, untuk backend yang di-host sendiri:
+    // backendURL: process.env.INTLAYER_BACKEND_URL,
+  },
+});
+```
+
+> Dapatkan kredensial Anda dengan membuat kunci akses baru di [Intlayer Dashboard - Projects](https://app.intlayer.org/projects).
+
+### Fetch projects
+
+```typescript fileName="projects.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { projectEndpoint } from "@intlayer/api/project";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Daftar proyek yang dapat diakses dengan kredensial Anda
+const { data: projects } =
+  await projectEndpoint(cmsAuthenticator).getProjects();
+
+// Baca wawasan lokalisasi agregat dari proyek yang dipilih
+const { data: insights } =
+  await projectEndpoint(cmsAuthenticator).getProjectInsights();
+```
+
+### Fetch dictionaries
+
+```typescript fileName="read-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Daftar setiap kamus jarak jauh dari proyek
+const { data: dictionaries } =
+  await dictionaryEndpoint(cmsAuthenticator).getDictionaries();
+
+// Atau dapatkan satu kamus berdasarkan kunci
+const { data: dictionary } = await dictionaryEndpoint(
+  cmsAuthenticator
+).getDictionary("my-first-dictionary-key");
+```
+
+### Push and update dictionaries
+
+Use the CMS as a database to write content back:
+
+```typescript fileName="write-dictionaries.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const cmsAuthenticator = createIntlayerCMS();
+
+// Buat kamus baru
+await dictionaryEndpoint(cmsAuthenticator).addDictionary({
+  key: "my-first-dictionary-key",
+  content: { title: "Hello world" },
+});
+
+// Upsert batch kamus (buat atau perbarui dalam satu panggilan)
+await dictionaryEndpoint(cmsAuthenticator).pushDictionaries([
+  { key: "home", content: { title: "Home" } },
+  { key: "about", content: { title: "About" } },
+]);
+
+// Perbarui kamus yang ada
+await dictionaryEndpoint(cmsAuthenticator).updateDictionary({
+  id: "<dictionary-id>",
+  key: "home",
+  content: { title: "Updated title" },
+});
+```
+
+> Tip: gunakan kembali endpoint yang terikat untuk menghindari pengulangan:
+>
+> ```typescript codeFormat="typescript"
+> const dictionary = dictionaryEndpoint(cmsAuthenticator);
+> await dictionary.pushDictionaries([myDictionary]);
+> const { data } = await dictionary.getDictionaries();
+> ```
+
+### Mengekstrak satu method
+
+Setiap endpoint method sudah terauthentikasi dan standalone (membawa penanganan token-nya sendiri), jadi Anda dapat mengekstraknya dan meneruskannya — misalnya untuk melakukannya sebagai dependency:
+
+```typescript fileName="push.ts" codeFormat="typescript"
+import { createIntlayerCMS } from "@intlayer/api";
+import { dictionaryEndpoint } from "@intlayer/api/dictionary";
+
+const dictionary = dictionaryEndpoint(createIntlayerCMS());
+
+// Sudah terauthentikasi — menyegarkan token secara otomatis pada setiap panggilan
+export const pushDictionaries = dictionary.pushDictionaries;
+
+// Penggunaan
+await pushDictionaries([{ key: "home", content: { title: "Home" } }]);
+```
+
 ## Sinkronisasi langsung
 
 Sinkronisasi Langsung memungkinkan aplikasi Anda mencerminkan perubahan konten CMS secara real-time. Tidak perlu membangun ulang atau menerapkan ulang. Saat diaktifkan, pembaruan dikirimkan ke server Sinkronisasi Langsung yang menyegarkan kamus yang dibaca aplikasi Anda.
 
 Untuk panduan pengaturan lengkap (mengaktifkan, menjalankan server Live Sync, alur kerja pengembangan lokal, dan batasan), lihat [dokumentasi Live Sync](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/live-sync.md).
 
+## Self-Hosting
+
+Intlayer dapat berjalan sepenuhnya pada infrastruktur Anda sendiri. Satu baris perintah bootstrap stack lengkap (dashboard, API, database, object storage, dan email) dengan Docker Compose:
+
+```sh
+curl -fsSL https://intlayer.org/install.sh | sh
+```
+
+Untuk panduan setup lengkap, referensi variabel environment, instruksi upgrade, dan prosedur backup/restore, lihat [Self-Hosting Guide](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/self_hosting.md).
+
+---
+
 ## Debug
 
 Jika Anda mengalami masalah dengan CMS, periksa hal-hal berikut:

package/docs/id/intlayer_with_angular_21.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
 updatedAt: 2026-05-31
-title: "Angular 21 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
-description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Angular 21 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
+title: "Angular 22 i18n - Panduan lengkap menerjemahkan aplikasi Anda"
+description: "Tidak ada lagi i18next. Panduan 2026 untuk membangun aplikasi Angular 22 multibahasa (i18n). Terjemahkan dengan agen AI dan optimalkan ukuran bundle, SEO, dan performa."
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -13,8 +13,8 @@ slugs:
   - doc
   - environment
   - angular
-applicationTemplate: https://github.com/aymericzip/intlayer-angular-21-template
-applicationShowcase: https://intlayer-angular-21-template.vercel.app/
+applicationTemplate: https://github.com/aymericzip/intlayer-angular-22-template
+applicationShowcase: https://intlayer-angular-22-template.vercel.app/
 history:
   - version: 8.9.0
     date: 2026-05-04
@@ -31,7 +31,7 @@ history:
 author: aymericzip
 ---
 
-# Terjemahkan situs web Angular 21 (Vite) Anda menggunakan Intlayer | Internasionalisasi (i18n)
+# Terjemahkan situs web Angular 22 (Vite) Anda menggunakan Intlayer | Internasionalisasi (i18n)
 
 ## Daftar Isi
 
@@ -94,7 +94,7 @@ Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://g
   <Tab label="Kode" value="code">
 
 <iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-angular-21-template?file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-22-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 menginternasionalisasikan aplikasi Anda menggunakan Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -105,7 +105,7 @@ Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://g
   <Tab label="Demo" value="demo">
 
 <iframe
-  src="https://intlayer-angular-21-template.vercel.app/"
+  src="https://intlayer-angular-22-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 - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -115,7 +115,7 @@ Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://g
   </Tab>
 </Tabs>
 
-Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-21-template) di GitHub.
+Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-angular-22-template) di GitHub.
 
 <Steps>
 
@@ -203,7 +203,7 @@ export default config;
 
 <Step number={3} title="Integrasikan Intlayer dalam Konfigurasi Angular Anda">
 
-Untuk mengintegrasikan Intlayer dengan Angular CLI, Anda perlu menggunakan pembuat (builder) kustom. Panduan ini mengasumsikan Anda menggunakan Vite/esbuild (default untuk proyek Angular 21).
+Untuk mengintegrasikan Intlayer dengan Angular CLI, Anda perlu menggunakan pembuat (builder) kustom. Panduan ini mengasumsikan Anda menggunakan Vite/esbuild (default untuk proyek Angular 22).
 
 Pertama, modifikasi `angular.json` Anda untuk menggunakan pembuat esbuild kustom. Perbarui konfigurasi `build` dan `serve`:
 

package/docs/id/intlayer_with_nextjs_14.md

@@ -42,32 +42,7 @@ history:
 author: aymericzip
 ---
 
-# Menerjemahkan situs web Next.js 14 dan App Router Anda menggunakan Intlayer | Internasionalisasi (i18n)
-
-<Tabs defaultTab="code">
-  <Tab label="Kode" value="code">
-
-<iframe
-  src="https://ide.intlayer.org/aymericzip/intlayer-next-14-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 menggunakan Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-  <Tab label="Demo" value="demo">
-
-<iframe
-  src="https://intlayer-next-14-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 - intlayer-next-14-template"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
-
-  </Tab>
-</Tabs>
+# Terjemahkan website Next.js 14 dan App Router Anda menggunakan Intlayer | Internationalization (i18n)
 
 ## Daftar Isi
 

package/docs/id/intlayer_with_react_router_v7_fs_routes.md

@@ -101,7 +101,7 @@ Lebih dari sekedar solusi i18n, Intlayer menyediakan **[editor visual](https://g
 
 <Tabs defaultTab="video">
   <Tab label="Video" value="video">
-  
+
 <iframe title="How to translate an React Router v7 (File-System Routes) app using Intlayer" class="m-auto aspect-16/9 w-full overflow-hidden rounded-lg border-0" allow="autoplay; gyroscope;" loading="lazy" width="1080" height="auto" src="https://www.youtube.com/embed/dS9L7uJeak4?autoplay=0&amp;origin=https://intlayer.org&amp;controls=0&amp;rel=1"/>
 
   </Tab>
@@ -189,6 +189,75 @@ export default [
 
 Atur layout root Anda dan layout spesifik lokal:
 
+#### Struktur File
+
+```bash
+app/
+├── root.tsx                         # Layout wrapper untuk locale routes
+└──routes/
+    ├── ($locale)._index.tsx         # Home page (/, /es, dll.)
+    ├── ($locale)._index.content.ts  # Home page content
+    ├── ($locale).about.tsx          # About page (/about, /es/about, dll.)
+    └── ($locale).about.content.ts   # About page content
+```
+
+Konvensi penamaan:
+
+- `($locale)` - Optional dynamic segment untuk parameter locale
+- `_layout` - Layout route yang membungkus child routes
+- `_index` - Index route (renders di parent path)
+- `.` (dot) - Memisahkan path segments (contoh: `($locale).about` → `/:locale?/about`)
+
+#### Komponen Layout
+
+```tsx fileName="app/root.tsx"
+import { getLocaleFromPath } from "intlayer";
+import { IntlayerProvider } from "react-intlayer";
+import {
+  isRouteErrorResponse,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+  useLoaderData,
+} from "react-router";
+
+import type { Route } from "./+types/root";
+
+import "./app.css";
+
+// ... Kode App, links dan ErrorBoundary yang tidak berubah
+
+export async function loader({ request }: Route.LoaderArgs) {
+  const locale = getLocaleFromPath(request.url);
+
+  return { locale };
+}
+
+export function Layout({
+  children,
+}: { children: React.ReactNode } & Route.ComponentProps) {
+  const data = useLoaderData<typeof loader>();
+  const { locale } = data ?? {};
+
+  return (
+    <html lang={locale}>
+      <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <IntlayerProvider locale={locale}>{children}</IntlayerProvider>
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+```
+
 #### Layout Root
 
 ```tsx fileName="app/routes/layout.tsx"
@@ -571,68 +640,6 @@ Ensure your TypeScript configuration includes the autogenerated types:
 
 ---
 
-## Documentation References
-
-- [Intlayer Documentation](https://intlayer.org)
-- [React Router v7 Documentation](https://reactrouter.com/)
-- [React Router fs-routes Documentation](https://reactrouter.com/how-to/file-route-conventions)
-- [useIntlayer hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useIntlayer.md)
-- [useLocale hook](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/packages/react-intlayer/useLocale.md)
-- [Content Declaration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/dictionary/content_file.md)
-- [Configuration](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md)
-
-This comprehensive guide provides everything you need to integrate Intlayer with React Router v7 using file-system based routing for a fully internationalized application with locale-aware routing and TypeScript support.
-
-<Steps>
-
-<Step number={11} 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, maka akan mengarahkan ulang ke locale default.
-
-> Perlu dicatat bahwa untuk menggunakan `intlayerProxy` di produksi, Anda perlu memindahkan paket `vite-intlayer` dari `devDependencies` ke `dependencies`.
-
-```typescript {3,7} fileName="vite.config.ts"
-import { reactRouter } from "@react-router/dev/vite";
-import { defineConfig } from "vite";
-import { intlayer } from "vite-intlayer";
-
-export default defineConfig({
-  plugins: [
-    reactRouter(),
-
-    intlayer({
-      proxy: {
-        ignore: (req) => req.url?.startsWith("/api"),
-      },
-    }),
-  ],
-});
-```
-
----
-
-</Step>
-
-</Steps>
-
-## Konfigurasi TypeScript
-
-Intlayer menggunakan module augmentation untuk mendapatkan manfaat dari TypeScript dan membuat codebase Anda lebih kuat.
-
-Pastikan konfigurasi TypeScript Anda menyertakan tipe yang dihasilkan secara otomatis:
-
-```json5 fileName="tsconfig.json"
-{
-  // ... konfigurasi Anda yang sudah ada
-  include: [
-    // ... include 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 meng-commit file tersebut ke repositori Git Anda.