@intlayer/docs 8.9.8 → 8.10.0-canary.0

package/docs/id/dictionary/markdown.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-02-07
-updatedAt: 2026-01-22
+updatedAt: 2026-05-19
 title: Markdown
 description: Pelajari cara mendeklarasikan dan menggunakan konten Markdown di situs web multibahasa Anda dengan Intlayer. Ikuti langkah-langkah dalam dokumentasi online ini untuk mengintegrasikan Markdown secara mulus ke dalam proyek Anda.
 keywords:
@@ -17,6 +17,9 @@ slugs:
   - content
   - markdown
 history:
+  - version: 8.10.0
+    date: 2026-05-19
+    changes: "Menambahkan dukungan file `.content.md`"
   - version: 8.5.0
     date: 2026-03-24
     changes: "Add `intlayerMarkdown` plugin object; use `app.use(intlayerMarkdown)` instead of `app.use(installIntlayerMarkdown)`"
@@ -43,6 +46,38 @@ Intlayer mendukung konten teks kaya yang didefinisikan menggunakan sintaks Markd
 Anda dapat menyatakan konten Markdown menggunakan fungsi `md` atau cukup sebagai string (jika mengandung sintaks Markdown).
 
 <Tabs>
+  <Tab label=".content.md" value=".content.md">
+    Sejak versi `8.10.0`, Anda dapat mendeklarasikan konten Markdown secara langsung di file `.content.md`. Intlayer akan secara otomatis mendeteksi dan mengurai konten Markdown tersebut.
+
+    ```md fileName="markdown-file.id.content.md"
+    ---
+    key: my-markdown-content
+    description: Konten saya
+    locale: id
+    ---
+
+    # Konten saya
+
+    Berikut adalah contoh konten markdown
+    ```
+
+    Bidang frontmatter `locale` adalah bidang yang menentukan lokal (bahasa) dari konten. Bidang ini opsional. Jika tidak disediakan, Intlayer akan menggunakan lokal default, yang juga digunakan sebagai lokal cadangan (fallback) jika tidak ada terjemahan yang tersedia untuk lokal tertentu.
+
+    Contoh struktur file:
+
+    ```text
+    content/
+    ├── en/
+    │   └── markdown-file.en.content.md
+    ├── fr/
+    │   └── markdown-file.fr.content.md
+    └── es/
+        └── markdown-file.es.content.md
+    ```
+
+    Anda dapat menambahkan properti apa pun yang didefinisikan dalam [definisi Kamus (Dictionary)](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md) ke dalam front-matter.
+
+  </Tab>
   <Tab label="Pembungkusan Manual" value="manual-wrapping">
     Gunakan fungsi `md` untuk menyatakan konten Markdown secara eksplisit. Ini berguna jika Anda ingin memastikan sebuah string diperlakukan sebagai Markdown meskipun tidak mengandung sintaks yang jelas.
 

package/docs/id/intlayer_with_analog.md

@@ -44,7 +44,7 @@ history:
 <iframe
   src="https://intlayer-analog-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-analog-template"
+  title="Demo - intlayer-analog-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_angular.md

@@ -68,7 +68,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-angular-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"
+  title="Demo - intlayer-angular-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_astro.md

@@ -48,7 +48,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_astro_lit.md

@@ -47,7 +47,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -262,7 +262,7 @@ const { greeting } = getIntlayer("lit-demo", locale);
     />
   </head>
   <body>
-    <!-- Elemen kustom Lit — menerima bahasa yang dideteksi server sebagai properti -->
+    <!-- Elemen kustom Lit - menerima bahasa yang dideteksi server sebagai properti -->
     <lit-demo locale={locale}></lit-demo>
   </body>
 </html>

package/docs/id/intlayer_with_astro_preact.md

@@ -46,7 +46,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -110,7 +110,7 @@ bun x intlayer init
   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.
 
 - **preact**
-  Paket inti Preact — alternatif yang cepat dan ringan untuk React.
+  Paket inti Preact - alternatif yang cepat dan ringan untuk React.
 
 - **preact-intlayer**
   Paket untuk mengintegrasikan Intlayer ke dalam aplikasi Preact. Paket ini menyediakan `IntlayerProvider` serta hook `useIntlayer` dan `useLocale` untuk internasionalisasi di Preact.
@@ -365,7 +365,7 @@ export const LocaleSwitcher: FunctionalComponent = () => {
 > **Catatan tentang Persistensi:**
 > Menggunakan `onLocaleChange` untuk mengarahkan ulang melalui `window.location.href` memastikan bahwa URL bahasa baru dikunjungi. Hal ini memungkinkan middleware Intlayer menyetel cookie bahasa dan mengingat preferensi pengguna untuk kunjungan mendatang.
 
-> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` — gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
+> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` - gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
 
 ### Langkah 8: Sitemap dan Robots.txt
 

package/docs/id/intlayer_with_astro_react.md

@@ -49,7 +49,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -361,7 +361,7 @@ export function LocaleSwitcher() {
 > **Catatan tentang Persistensi:**
 > Menggunakan `onLocaleChange` untuk mengarahkan ulang melalui `window.location.href` memastikan bahwa URL bahasa baru dikunjungi. Hal ini memungkinkan middleware Intlayer menyetel cookie bahasa dan mengingat preferensi pengguna untuk kunjungan mendatang.
 
-> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` — gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
+> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` - gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
 
 ### Langkah 8: Sitemap dan Robots.txt
 

package/docs/id/intlayer_with_astro_solid.md

@@ -46,7 +46,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -356,12 +356,12 @@ export function LocaleSwitcher() {
 ```
 
 > **Catatan tentang Reaktivitas Solid:**
-> Di Solid, `locale` adalah sinyal accessor reaktif — selalu panggil sebagai `locale()` untuk mengambil nilai saat ini.
+> Di Solid, `locale` adalah sinyal accessor reaktif - selalu panggil sebagai `locale()` untuk mengambil nilai saat ini.
 
 > **Catatan tentang Persistensi:**
 > Menggunakan `onLocaleChange` untuk mengarahkan ulang melalui `window.location.href` memastikan bahwa URL bahasa baru dikunjungi. Hal ini memungkinkan middleware Intlayer menyetel cookie bahasa dan mengingat preferensi pengguna untuk kunjungan mendatang.
 
-> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` — gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
+> `LocaleSwitcher` harus dirender di dalam `IntlayerProvider` - gunakan ini di komponen island Anda (seperti yang ditunjukkan pada Langkah 6).
 
 ### Langkah 8: Sitemap dan Robots.txt
 

package/docs/id/intlayer_with_astro_svelte.md

@@ -46,7 +46,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_astro_vanilla.md

@@ -46,7 +46,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_astro_vue.md

@@ -46,7 +46,7 @@ history:
 <iframe
   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 — intlayer-astro-template"
+  title="Demo - intlayer-astro-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_nextjs_14.md

@@ -60,7 +60,7 @@ history:
 <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"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_nextjs_15.md

@@ -97,7 +97,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://next-15-intlayer-template-xt83.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-15-template"
+  title="Demo - intlayer-next-15-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_nextjs_16.md

@@ -56,7 +56,7 @@ history:
 <iframe
   src="https://intlayer-next-16-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-16-template"
+  title="Demo - intlayer-next-16-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_nextjs_page_router.md

@@ -41,7 +41,7 @@ history:
 <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 — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -52,7 +52,7 @@ history:
 <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"
+  title="Demo - intlayer-next-14-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_nuxt.md

@@ -72,7 +72,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-nuxt-4-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-nuxt-4-template"
+  title="Demo - intlayer-nuxt-4-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_react_native+expo.md

@@ -50,7 +50,7 @@ history:
 <iframe
   src="https://intlayer-react-native.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-react-native-template"
+  title="Demo - intlayer-react-native-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_react_router_v7.md

@@ -126,7 +126,7 @@ bun x intlayer init
 <iframe
   src="https://intlayer-react-router-v7.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-react-router-v7-template"
+  title="Demo - intlayer-react-router-v7-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_react_router_v7_fs_routes.md

@@ -125,7 +125,7 @@ bun x intlayer init
 <iframe
   src="https://intlayer-react-router-v7.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-react-router-v7-template"
+  title="Demo - intlayer-react-router-v7-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_storybook.md

@@ -2,7 +2,7 @@
 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.
+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.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -33,7 +33,7 @@ history:
 
 ## Apa itu Intlayer?
 
-**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.
+**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.
 
 Dengan Intlayer Anda dapat:
 
@@ -83,9 +83,9 @@ bun add vite-intlayer --dev
 
 | Paket            | Peran                                                         |
 | ---------------- | ------------------------------------------------------------- |
-| `intlayer`       | Inti — konfigurasi, kompilasi konten, CLI                     |
-| `react-intlayer` | Pengikatan React — `IntlayerProvider`, hook `useIntlayer`     |
-| `vite-intlayer`  | Plugin Vite — memantau dan mengompilasi file deklarasi konten |
+| `intlayer`       | Inti - konfigurasi, kompilasi konten, CLI                     |
+| `react-intlayer` | Pengikatan React - `IntlayerProvider`, hook `useIntlayer`     |
+| `vite-intlayer`  | Plugin Vite - memantau dan mengompilasi file deklarasi konten |
 
 ---
 
@@ -291,7 +291,7 @@ export default config;
 
 ### Langkah 4: Tambahkan Dekorator `IntlayerProvider` dan Bilah Alat Lokal
 
-Sama seperti pengaturan Vite — tambahkan dekorator dan tipe lokal global di `.storybook/preview.tsx`:
+Sama seperti pengaturan Vite - tambahkan dekorator dan tipe lokal global di `.storybook/preview.tsx`:
 
 ```tsx fileName=".storybook/preview.tsx" codeFormat="typescript"
 import type { Preview, StoryContext } from "@storybook/react";
@@ -411,7 +411,7 @@ const meta: Meta<typeof CopyButton> = {
 export default meta;
 type Story = StoryObj<typeof CopyButton>;
 
-/** Story default — ubah lokal di bilah alat untuk melihat pratinjau terjemahan. */
+/** Story default - ubah lokal di bilah alat untuk melihat pratinjau terjemahan. */
 export const Default: Story = {
   args: {
     content: "npm install intlayer react-intlayer",

package/docs/id/intlayer_with_svelte_kit.md

@@ -47,7 +47,7 @@ history:
 <iframe
   src="https://intlayer-sveltekit-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-sveltekit-template"
+  title="Demo - intlayer-sveltekit-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_tanstack+solid.md

@@ -75,7 +75,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-tanstack-start-solid.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-tanstack-start-solid-template"
+  title="Demo - intlayer-tanstack-start-solid-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_tanstack.md

@@ -92,7 +92,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-tanstack-start-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-tanstack-start-template"
+  title="Demo - intlayer-tanstack-start-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vanilla.md

@@ -34,7 +34,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vanilla-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 — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vanilla-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-vanilla-template"
+  title="Demo - intlayer-vanilla-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vite+lit.md

@@ -45,7 +45,7 @@ history:
 <iframe
   src="https://intlayer-vite-lit-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-vite-lit-template"
+  title="Demo - intlayer-vite-lit-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -263,7 +263,7 @@ export default appContent;
 
 ### Langkah 6: 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.
+Gunakan `useIntlayer` di dalam `LitElement`. Ini mengembalikan proxy `ReactiveController` yang secara otomatis memicu perenderan ulang setiap kali bahasa aktif berubah - tidak diperlukan pengaturan tambahan.
 
 ```typescript fileName="src/my-element.ts" codeFormat="typescript"
 import { LitElement, html } from "lit";

package/docs/id/intlayer_with_vite+preact.md

@@ -55,7 +55,7 @@ history:
 <iframe
   src="https://intlayer-vite-preact-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-vite-preact-template"
+  title="Demo - intlayer-vite-preact-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vite+react.md

@@ -73,7 +73,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-vite-react-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-vite-react-template"
+  title="Demo - intlayer-vite-react-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vite+react_compiler.md

@@ -55,7 +55,7 @@ history:
 <iframe
   src="https://intlayer-vite-react-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-vite-react-template"
+  title="Demo - intlayer-vite-react-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vite+svelte.md

@@ -39,7 +39,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vite-svelte-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 — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -50,7 +50,7 @@ history:
 <iframe
   src="https://intlayer-vite-svelte-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-vite-svelte-template"
+  title="Demo - intlayer-vite-svelte-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/intlayer_with_vite+vanilla.md

@@ -35,7 +35,7 @@ history:
 <iframe
   src="https://ide.intlayer.org/aymericzip/intlayer-vite-vanilla-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 — Intlayer"
+  title="Demo CodeSandbox - Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -46,7 +46,7 @@ history:
 <iframe
   src="https://intlayer-vite-vanilla.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-vite-vanilla-template"
+  title="Demo - intlayer-vite-vanilla-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
@@ -255,7 +255,7 @@ export default appContent;
 
 ### Langkah 6: Gunakan Intlayer di JavaScript Anda
 
-`vanilla-intlayer` mencerminkan API permukaan `react-intlayer`: `useIntlayer(key, locale?)` mengembalikan konten yang diterjemahkan secara langsung. Rantai `.onChange()` pada hasilnya untuk berlangganan perubahan lokal — padanan eksplisit dari render ulang React.
+`vanilla-intlayer` mencerminkan API permukaan `react-intlayer`: `useIntlayer(key, locale?)` mengembalikan konten yang diterjemahkan secara langsung. Rantai `.onChange()` pada hasilnya untuk berlangganan perubahan lokal - padanan eksplisit dari render ulang React.
 
 ```typescript fileName="src/main.ts" codeFormat="typescript"
 import { installIntlayer, useIntlayer } from "vanilla-intlayer";
@@ -456,7 +456,7 @@ const unsubscribe = useDictionaryDynamic(
 });
 ```
 
-> Bundel masing-masing lokal hanya diambil ketika lokal tersebut menjadi aktif dan hasilnya disimpan di cache — pengalihan berikutnya ke lokal yang sama bersifat instan.
+> Bundel masing-masing lokal hanya diambil ketika lokal tersebut menjadi aktif dan hasilnya disimpan di cache - pengalihan berikutnya ke lokal yang sama bersifat instan.
 
 ### (Opsional) Langkah 13: Ekstrak konten komponen Anda
 

package/docs/id/intlayer_with_vite+vue.md

@@ -72,7 +72,7 @@ Dengan Intlayer, Anda dapat:
 <iframe
   src="https://intlayer-vite-vue-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-vite-vue-template"
+  title="Demo - intlayer-vite-vue-template"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />

package/docs/id/readme.md

@@ -66,6 +66,7 @@ Dengan **file konten per-locale**, **autocompletion TypeScript**, **kamus tree-s
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/mcp.png?raw=true" alt="Fitur" width="700">                                 | **Integrasi Server MCP**<br><br>Menyediakan server MCP (Model Context Protocol) untuk otomatisasi IDE, memungkinkan manajemen konten dan alur kerja i18n yang mulus langsung di dalam lingkungan pengembangan Anda. <br><br> - [Server MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/mcp_server.md)                                                                                                                                                               |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/vscode_extension.png?raw=true" alt="Fitur" width="700">                    | **Ekstensi VSCode**<br><br>Intlayer menyediakan ekstensi VSCode untuk membantu Anda mengelola konten dan terjemahan Anda, membangun kamus Anda, menerjemahkan konten Anda, dan lainnya. <br><br> - [Ekstensi VSCode](https://intlayer.org/doc/vs-code-extension)                                                                                                                                                                                                                       |
 | <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/interoperability.png?raw=true" alt="Fitur" width="700">                    | **Interoperabilitas**<br><br>Memungkinkan interoperabilitas dengan react-i18next, next-i18next, next-intl, react-intl, vue-i18n. <br><br> - [Intlayer dan react-intl](https://intlayer.org/blog/intlayer-with-react-intl) <br> - [Intlayer dan next-intl](https://intlayer.org/blog/intlayer-with-next-intl) <br> - [Intlayer dan next-i18next](https://intlayer.org/blog/intlayer-with-next-i18next) <br> - [Intlayer dan vue-i18n](https://intlayer.org/blog/intlayer-with-vue-i18n) |
+| <img src="https://github.com/aymericzip/intlayer/blob/main/docs/assets/benchmark.png?raw=true" alt="Fitur" width="700">                           | **Performa & Benchmark**<br><br>Menggunakan tree-shaking tingkat lanjut dan pemuatan dinamis untuk meningkatkan performa dan menjaga solusi seringan mungkin. <br><br> - [Performa & Benchmark](https://intlayer.org/doc/benchmark)                                                                                                                                                                                                                                                    |
 
 ---
 
@@ -260,6 +261,18 @@ Jelajahi dokumentasi lengkap kami untuk memulai dengan Intlayer dan pelajari car
 </ul>
 </details>
 
+## Sistem Manajemen Konten Multibahasa
+
+Lebih dari sekadar pustaka i18n, Intlayer adalah **sistem manajemen konten multibahasa** yang lengkap. CMS lengkap tersedia secara gratis di [app.intlayer.org](https://app.intlayer.org/?utm_source=chatgpt.com).
+
+Intlayer menghubungkan **pengembang**, **penulis naskah**, dan **agen AI** dalam satu alur kerja untuk membuat dan memelihara situs web multibahasa dengan mudah. Intlayer menggantikan tumpukan teknologi berikut dalam satu solusi tunggal:
+
+- Solusi i18n (misalnya `i18next`, `next-intl`, `vue-i18n`)
+- TMS (Translation Management Systems) (misalnya Crowdin, Phrase, Lokalise)
+- Headless CMS (misalnya Contentful, Strapi, Sanity)
+
+![CMS Preview](https://github.com/aymericzip/intlayer/blob/main/docs/assets/CMS.png?raw=true)
+
 ## 🌐 Readme dalam bahasa lain
 
 <p align="center">