@intlayer/docs 8.11.2 → 8.11.3

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 SvelteKit
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan SvelteKit situs web Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -59,16 +59,47 @@ 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>
+<Accordion header="Cakupan penuh SvelteKit">
 
-- **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.
+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 +147,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 +181,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 +200,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 +216,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 +239,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 +272,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 +337,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 +371,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 +390,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 +406,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 +429,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 +453,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 +480,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 +694,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 +729,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 +772,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 +793,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).
 
@@ -764,7 +831,9 @@ Disarankan untuk mengabaikan file-file yang dihasilkan oleh Intlayer.
 
 ---
 
-### (Opsional) Langkah 1 : Ekstrak konten komponen Anda
+</Step>
+
+<Step number={1} title="Ekstrak konten komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -864,3 +933,7 @@ bun run build # Or bun run dev
 
 - **Editor Visual**: Integrasikan [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_visual_editor.md) untuk mengedit terjemahan langsung dari UI.
 - **CMS**: Eksternalisasi manajemen konten Anda menggunakan [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/id/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Cara Menerjemahkan Aplikasi Tanstack Start Menggunakan Solid.js di Tahun 2026
-description: Pelajari cara menambahkan internasionalisasi (i18n) ke aplikasi Tanstack Start Anda menggunakan Intlayer dan Solid.js. Ikuti panduan komprehensif ini untuk membuat aplikasi multibahasa dengan perutean yang sadar akan lokal.
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Panduan lengkap menerjemahkan TanStack Start
+description: Solusi terbaik untuk ukuran bundle, SEO, performa & keterpeliharaan. Jadikan TanStack Start and Solid aplikasi Anda multibahasa di 2026, terjemahan LLM, Agent Skills & MCP.
 keywords:
   - Internasionalisasi
   - Dokumentasi
@@ -37,17 +37,47 @@ history:
 
 Panduan ini mendemonstrasikan cara mengintegrasikan **Intlayer** untuk internasionalisasi yang mulus dalam proyek Tanstack Start dengan Solid.js, perutean yang sadar akan lokal (locale-aware), dukungan TypeScript, dan praktik pengembangan modern.
 
-## Apa itu Intlayer?
+## Mengapa Intlayer dibandingkan alternatif?
 
-**Intlayer** adalah perpustakaan internasionalisasi (i18n) inovatif dan sumber terbuka yang dirancang untuk menyederhanakan dukungan multibahasa dalam aplikasi web modern.
+Dibandingkan dengan solusi utama seperti `react-i18next` atau `i18next`, Intlayer adalah solusi yang hadir dengan pengoptimalan terintegrasi seperti:
 
-Dengan Intlayer, Anda dapat:
+<AccordionGroup>
+<Accordion header="Cakupan TanStack Start penuh">
 
-- **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 (autocompletion) dan deteksi kesalahan.
-- **Memanfaatkan fitur-fitur canggih**, seperti deteksi dan pengalihan lokal secara dinamis.
-- **Mengaktifkan perutean yang sadar akan lokal** dengan sistem perutean berbasis file Milik Tanstack Start.
+Intlayer dioptimalkan untuk bekerja sempurna dengan TanStack Start dan Solid dengan menawarkan **perutean multibahasa**, **peta situs**, 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>
 
 ---
 
@@ -85,11 +115,15 @@ Dengan Intlayer, Anda dapat:
 
 Lihat [Templat Aplikasi](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) di GitHub.
 
-### Langkah 1: Pembuatan Proyek
+<Steps>
+
+<Step number={1} title="Pembuatan Proyek">
 
 Pertama, buat proyek TanStack Start baru mengikuti panduan [Memulai Proyek Baru](https://tanstack.com/start/latest/docs/framework/solid/quick-start) di situs web TanStack Start.
 
-### Langkah 2: Instal Paket Intlayer
+</Step>
+
+<Step number={2} title="Instal Paket Intlayer">
 
 Instal paket-paket yang diperlukan menggunakan pengelola paket pilihan Anda:
 
@@ -127,7 +161,9 @@ bun x intlayer init
 - **vite-intlayer**
   Menyertakan plugin Vite untuk mengintegrasikan Intlayer dengan [Vite bundler](https://vite.dev/guide/why.html#why-bundle-for-production), serta middleware untuk mendeteksi lokal pilihan pengguna, mengelola cookie, dan menangani pengalihan URL.
 
-### Langkah 3: Konfigurasi Proyek Anda
+</Step>
+
+<Step number={3} title="Konfigurasi Proyek Anda">
 
 Buat file konfigurasi untuk mengatur bahasa aplikasi Anda:
 
@@ -148,7 +184,9 @@ export default config;
 
 > Melalui file konfigurasi ini, Anda dapat mengonfigurasi 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 4: Integrasikan Intlayer dalam Konfigurasi Vite Anda
+</Step>
+
+<Step number={4} title="Integrasikan Intlayer dalam Konfigurasi Vite Anda">
 
 Tambahkan plugin intlayer dalam konfigurasi Anda:
 
@@ -176,7 +214,9 @@ export default defineConfig({
 
 > Plugin Vite `intlayer()` digunakan untuk mengintegrasikan Intlayer dengan Vite. Plugin ini memastikan pembuatan file deklarasi konten dan memantaunya dalam mode pengembangan. Plugin ini mendefinisikan variabel lingkungan Intlayer dalam aplikasi Vite. Selain itu, ia menyediakan alias untuk mengurangi beban performa.
 
-### Langkah 5: Buat Root Layout
+</Step>
+
+<Step number={5} title="Buat Root Layout">
 
 Konfigurasikan root layout Anda untuk mendukung internasionalisasi dengan menggunakan `useParams` untuk mendeteksi lokal saat ini dan mengatur atribut `lang` serta `dir` pada tag `html`.
 
@@ -217,7 +257,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Langkah 6: Buat Locale Layout (Opsional)
+</Step>
+
+<Step number={6} title="Buat Locale Layout">
 
 Buat layout yang menangani prefiks lokal dan melakukan validasi. Layout ini akan memastikan hanya lokal yang valid yang diproses.
 
@@ -252,7 +294,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Untuk mode `'prefix-all'`, Anda mungkin lebih suka mengganti slot tersebut menjadi `$locale`.
 > Untuk mode `'no-prefix'` atau `'search-params'`, Anda dapat menghapus slot tersebut sepenuhnya.
 
-### Langkah 7: Deklarasikan Konten Anda
+</Step>
+
+<Step number={7} title="Deklarasikan Konten Anda">
 
 Buat dan kelola deklarasi konten Anda untuk menyimpan terjemahan:
 
@@ -298,7 +342,9 @@ export default appContent;
 
 > Untuk detail lebih lanjut, lihat [dokumentasi deklarasi konten](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/dictionary/content_file.md).
 
-### Langkah 8: Gunakan Komponen dan Hook yang Sadar akan Lokal
+</Step>
+
+<Step number={8} title="Gunakan Komponen dan Hook yang Sadar akan Lokal">
 
 Buat komponen `LocalizedLink` untuk navigasi yang sadar akan lokal:
 
@@ -377,7 +423,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Langkah 9: Gunakan Intlayer di Halaman Anda
+</Step>
+
+<Step number={9} title="Gunakan Intlayer di Halaman Anda">
 
 Akses kamus konten Anda di seluruh aplikasi:
 
@@ -420,7 +468,9 @@ function RouteComponent() {
 >
 > Untuk mempelajari lebih lanjut tentang hook `useIntlayer`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useIntlayer.md).
 
-### Langkah 10: Buat Komponen Locale Switcher
+</Step>
+
+<Step number={10} title="Buat Komponen Locale Switcher">
 
 Buat komponen yang memungkinkan pengguna untuk mengubah bahasa:
 
@@ -464,7 +514,9 @@ export default LocaleSwitcher;
 >
 > Untuk mempelajari lebih lanjut tentang hook `useLocale`, lihat [dokumentasi](https://github.com/aymericzip/intlayer/blob/main/docs/docs/id/packages/solid-intlayer/useLocale.md).
 
-### Langkah 11: Pengelolaan Atribut HTML
+</Step>
+
+<Step number={11} title="Pengelolaan Atribut HTML">
 
 Seperti yang terlihat pada Langkah 5, Anda dapat mengelola atribut `lang` dan `dir` dari tag `html` dengan menggunakan `useParams` di root component Anda. Ini memastikan atribut yang benar disetel baik di server maupun klien.
 
@@ -483,7 +535,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Langkah 12: Tambahkan Middleware (Opsional)
+</Step>
+
+<Step number={12} title="Tambahkan Middleware">
 
 Anda juga dapat menggunakan `intlayerProxy` untuk menambahkan perutean sisi server ke aplikasi Anda. Plugin ini secara otomatis akan mendeteksi lokal saat ini berdasarkan URL dan mengatur cookie lokal yang sesuai. Jika tidak ada lokal yang ditentukan, plugin akan menentukan lokal yang paling tepat berdasarkan preferensi bahasa browser pengguna. Jika tidak ada lokal yang terdeteksi, ia akan mengalihkan ke lokal default.
 
@@ -514,7 +568,9 @@ export default defineConfig({
 
 ---
 
-### Langkah 13: Internasionalisasi Metadata Anda (Opsional)
+</Step>
+
+<Step number={13} title="Internasionalisasi Metadata Anda">
 
 Anda juga dapat menggunakan fungsi `getIntlayer` untuk mengakses kamus konten Anda dalam `head` loader untuk metadata yang sadar akan lokal:
 
@@ -561,7 +617,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Langkah 14: Ambil lokal di server action Anda (Opsional)
+</Step>
+
+<Step number={14} title="Ambil lokal di server action Anda">
 
 Anda mungkin ingin mengakses lokal saat ini dari dalam server action atau titik akhir API Anda.
 Anda dapat melakukan ini menggunakan helper `getLocale` dari `intlayer`.
@@ -598,7 +656,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Langkah 15: Mengelola halaman "not found" (Opsional)
+</Step>
+
+<Step number={15} title="Mengelola halaman &quot;not found&quot;">
 
 Saat pengguna mengunjungi halaman yang tidak ada, Anda dapat menampilkan halaman kustom "not found" dan prefiks lokal dapat memengaruhi cara halaman "not found" tersebut dipicu.
 
@@ -672,7 +732,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opsional) Langkah 16: Ekstrak konten dari komponen Anda
+</Step>
+
+<Step number={16} title="Ekstrak konten dari komponen Anda" isOptional={true}>
 
 Jika Anda memiliki basis kode yang sudah ada, mengubah ribuan file bisa memakan waktu lama.
 
@@ -785,7 +847,9 @@ bun run build # Atau bun run dev
 
 ---
 
-### Langkah 17: Konfigurasi TypeScript (Opsional)
+</Step>
+
+<Step number={17} title="Konfigurasi TypeScript">
 
 Intlayer menggunakan module augmentation untuk mendapatkan manfaat TypeScript dan membuat basis kode Anda lebih kuat.
 
@@ -816,6 +880,10 @@ Untuk melakukan ini, Anda dapat menambahkan instruksi berikut ke file `.gitignor
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Ekstensi VS Code
 
 Untuk meningkatkan pengalaman pengembangan Anda dengan Intlayer, Anda dapat menginstal **Ekstensi VS Code Intlayer** resmi.