docs: add Indonesian (Bahasa Indonesia) translation

.gitignore

@@ -17,3 +17,4 @@ pnpm-global
 TODOs.md
 *.timestamp-*.mjs
 .claude
+.local

docs/.vitepress/config.ts

@@ -23,7 +23,8 @@ const localeToOgLocaleMap: Record<string, string> = {
   es: 'es_ES',
   ko: 'ko_KR',
   fa: 'fa_IR',
-  ja: 'ja_JP'
+  ja: 'ja_JP',
+  id: 'id_ID'
 }
 
 export default defineConfig({
@@ -71,6 +72,8 @@ export default defineConfig({
               return '复制代码'
             case 'ja':
               return 'コードをコピー'
+            case 'id':
+              return 'Salin kode'
             default:
               return 'Copy code'
           }
@@ -130,7 +133,8 @@ export default defineConfig({
     es: { label: 'Español', lang: 'es', dir: 'ltr' },
     ko: { label: '한국어', lang: 'ko-KR', dir: 'ltr' },
     fa: { label: 'فارسی', lang: 'fa-IR', dir: 'rtl' },
-    ja: { label: '日本語', lang: 'ja', dir: 'ltr' }
+    ja: { label: '日本語', lang: 'ja', dir: 'ltr' },
+    id: { label: 'Bahasa Indonesia', lang: 'id-ID', dir: 'ltr' }
   },
 
   vite: {

docs/id/guide/asset-handling.md

@@ -0,0 +1,67 @@
+---
+description: Pelajari cara mereferensikan dan menangani aset statis seperti gambar, media, dan font di VitePress.
+---
+
+# Penanganan Aset
+
+## Mereferensikan Aset Statis
+
+Semua file Markdown dikompilasi menjadi komponen Vue dan diproses oleh [Vite](https://vitejs.dev/guide/assets.html). Anda dapat, **dan sebaiknya**, mereferensikan aset apa pun menggunakan URL relatif:
+
+```md
+![An image](./image.png)
+```
+
+Anda dapat mereferensikan aset statis di file markdown Anda, komponen `*.vue` di tema, style, dan file `.css` biasa menggunakan path publik absolut (berdasarkan project root) atau path relatif (berdasarkan file system Anda). Yang terakhir mirip dengan perilaku yang biasa Anda gunakan jika Anda pernah menggunakan Vite, Vue CLI, atau `file-loader` webpack.
+
+Tipe file gambar, media, dan font yang umum dideteksi dan disertakan sebagai aset secara otomatis.
+
+::: tip File yang ditautkan tidak diperlakukan sebagai aset
+PDF atau dokumen lain yang direferensikan oleh tautan dalam file markdown tidak secara otomatis diperlakukan sebagai aset. Untuk membuat file yang ditautkan dapat diakses, Anda harus menempatkannya secara manual di dalam direktori [`public`](#direktori-public) proyek Anda.
+:::
+
+Semua aset yang direferensikan, termasuk yang menggunakan path absolut, akan disalin ke direktori output dengan nama file yang di-hash pada build produksi. Aset yang tidak pernah direferensikan tidak akan disalin. Aset gambar yang lebih kecil dari 4kb akan di-inline base64, dan ini dapat dikonfigurasi melalui opsi konfigurasi [`vite`](../reference/site-config#vite).
+
+Semua referensi path **statis**, termasuk path absolut, harus didasarkan pada struktur direktori kerja Anda.
+
+## Direktori Public
+
+Terkadang Anda mungkin perlu menyediakan aset statis yang tidak direferensikan secara langsung di komponen Markdown atau tema Anda, atau Anda mungkin ingin menyajikan file tertentu dengan nama file asli. Contoh file tersebut termasuk `robots.txt`, favicon, dan ikon PWA.
+
+Anda dapat menempatkan file-file ini di direktori `public` di bawah [source directory](./routing#source-directory). Misalnya, jika project root Anda adalah `./docs` dan menggunakan lokasi source directory default, maka direktori public Anda akan menjadi `./docs/public`.
+
+Aset yang ditempatkan di `public` akan disalin ke root direktori output apa adanya.
+
+Perhatikan bahwa Anda harus mereferensikan file yang ditempatkan di `public` menggunakan path absolut root: misalnya, `public/icon.png` harus selalu direferensikan di kode sumber sebagai `/icon.png`.
+
+## Base URL
+
+Jika situs Anda dideploy ke URL non-root, Anda perlu mengatur opsi `base` di `.vitepress/config.js`. Misalnya, jika Anda berencana mendeploy situs Anda ke `https://foo.github.io/bar/`, maka `base` harus diatur ke `'/bar/'` (harus selalu dimulai dan diakhiri dengan garis miring).
+
+Semua path aset statis Anda secara otomatis diproses untuk menyesuaikan dengan nilai konfigurasi `base` yang berbeda. Misalnya, jika Anda memiliki referensi absolut ke aset di bawah `public` dalam markdown Anda:
+
+```md
+![An image](/image-inside-public.png)
+```
+
+Anda **tidak** perlu memperbaruinya saat Anda mengubah nilai konfigurasi `base` dalam kasus ini.
+
+Namun, jika Anda menulis komponen tema yang menautkan ke aset secara dinamis, misalnya gambar yang `src`-nya didasarkan pada nilai konfigurasi tema:
+
+```vue
+<img :src="theme.logoPath" />
+```
+
+Dalam kasus ini disarankan untuk membungkus path dengan [`withBase` helper](../reference/runtime-api#withbase) yang disediakan oleh VitePress:
+
+```vue
+<script setup>
+import { withBase, useData } from 'vitepress'
+
+const { theme } = useData()
+</script>
+
+<template>
+  <img :src="withBase(theme.logoPath)" />
+</template>
+```

docs/id/guide/cms.md

@@ -0,0 +1,57 @@
+---
+outline: deep
+description: Hubungkan VitePress ke headless CMS menggunakan rute dinamis dan data loader.
+---
+
+# Menghubungkan ke CMS
+
+## Alur Kerja Umum
+
+Menghubungkan VitePress ke CMS sebagian besar akan berkisar pada [Rute Dinamis](./routing#dynamic-routes). Pastikan Anda memahami cara kerjanya sebelum melanjutkan.
+
+Karena setiap CMS bekerja secara berbeda, di sini kami hanya dapat memberikan alur kerja umum yang perlu Anda adaptasi ke skenario spesifik Anda.
+
+1. Jika CMS Anda memerlukan otentikasi, buat file `.env` untuk menyimpan token API Anda dan muat seperti ini:
+
+    ```js
+    // posts/[id].paths.js
+    import { loadEnv } from 'vitepress'
+
+    const env = loadEnv('', process.cwd())
+    ```
+
+2. Ambil data yang diperlukan dari CMS dan format menjadi data paths yang tepat:
+
+    ```js
+    export default {
+      async paths() {
+        // gunakan library klien CMS masing-masing jika diperlukan
+        const data = await (await fetch('https://my-cms-api', {
+          headers: {
+            // token jika diperlukan
+          }
+        })).json()
+
+        return data.map(entry => {
+          return {
+            params: { id: entry.id, /* title, authors, date dll. */ },
+            content: entry.content
+          }
+        })
+      }
+    }
+    ```
+
+3. Render konten di halaman:
+
+    ```md
+    # {{ $params.title }}
+
+    - oleh {{ $params.author }} pada {{ $params.date }}
+
+    <!-- @content -->
+    ```
+
+## Panduan Integrasi
+
+Jika Anda telah menulis panduan tentang mengintegrasikan VitePress dengan CMS tertentu, silakan gunakan tautan "Edit this page" di bawah ini untuk mengirimkannya di sini!

docs/id/guide/custom-theme.md

@@ -0,0 +1,220 @@
+---
+description: Buat dan gunakan tema kustom di VitePress untuk mengontrol sepenuhnya tampilan situs Anda.
+---
+
+# Menggunakan Tema Kustom
+
+## Resolusi Tema
+
+Anda dapat mengaktifkan tema kustom dengan membuat file `.vitepress/theme/index.js` atau `.vitepress/theme/index.ts` ("theme entry file"):
+
+```
+.
+├─ docs                # project root
+│  ├─ .vitepress
+│  │  ├─ theme
+│  │  │  └─ index.js   # theme entry
+│  │  └─ config.js     # config file
+│  └─ index.md
+└─ package.json
+```
+
+VitePress akan selalu menggunakan tema kustom alih-alih tema default ketika mendeteksi keberadaan theme entry file. Namun, Anda dapat [memperluas tema default](./extending-default-theme) untuk melakukan kustomisasi lanjutan di atasnya.
+
+## Antarmuka Tema
+
+Tema kustom VitePress didefinisikan sebagai objek dengan antarmuka berikut:
+
+```ts
+interface Theme {
+  /**
+   * Komponen layout root untuk setiap halaman
+   * @required
+   */
+  Layout: Component
+  /**
+   * Tingkatkan instance aplikasi Vue
+   * @optional
+   */
+  enhanceApp?: (ctx: EnhanceAppContext) => Awaitable<void>
+  /**
+   * Perluas tema lain, memanggil `enhanceApp`-nya sebelum milik kita
+   * @optional
+   */
+  extends?: Theme
+}
+
+interface EnhanceAppContext {
+  app: App // instance aplikasi Vue
+  router: Router // instance router VitePress
+  siteData: Ref<SiteData> // metadata tingkat situs
+}
+```
+
+Theme entry file harus mengekspor tema sebagai default export-nya:
+
+```js [.vitepress/theme/index.js]
+
+// Anda dapat langsung mengimpor file Vue di theme entry
+// VitePress sudah dikonfigurasi dengan @vitejs/plugin-vue.
+import Layout from './Layout.vue'
+
+export default {
+  Layout,
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  }
+}
+```
+
+Default export adalah satu-satunya kontrak untuk tema kustom, dan hanya properti `Layout` yang diperlukan. Jadi secara teknis, tema VitePress dapat sesederhana satu komponen Vue.
+
+Di dalam komponen layout Anda, ia bekerja seperti aplikasi Vite + Vue 3 biasa. Perhatikan bahwa tema juga harus [SSR-compatible](./ssr-compat).
+
+## Membangun Layout
+
+Komponen layout paling dasar perlu berisi komponen [`<Content />`](../reference/runtime-api#content):
+
+```vue [.vitepress/theme/Layout.vue]
+<template>
+  <h1>Custom Layout!</h1>
+
+  <!-- di sinilah konten markdown akan dirender -->
+  <Content />
+</template>
+```
+
+Layout di atas hanya merender markdown setiap halaman sebagai HTML. Peningkatan pertama yang dapat kita tambahkan adalah menangani error 404:
+
+```vue{1-4,9-12}
+<script setup>
+import { useData } from 'vitepress'
+const { page } = useData()
+</script>
+
+<template>
+  <h1>Custom Layout!</h1>
+
+  <div v-if="page.isNotFound">
+    Halaman 404 kustom!
+  </div>
+  <Content v-else />
+</template>
+```
+
+Helper [`useData()`](../reference/runtime-api#usedata) memberi kita semua data runtime yang kita perlukan untuk merender layout yang berbeda secara kondisional. Salah satu data lain yang dapat kita akses adalah frontmatter halaman saat ini. Kita dapat memanfaatkan ini untuk memungkinkan pengguna akhir mengontrol layout di setiap halaman. Misalnya, pengguna dapat menunjukkan halaman harus menggunakan layout home page khusus dengan:
+
+```md
+---
+layout: home
+---
+```
+
+Dan kita dapat menyesuaikan tema kita untuk menangani ini:
+
+```vue{3,12-14}
+<script setup>
+import { useData } from 'vitepress'
+const { page, frontmatter } = useData()
+</script>
+
+<template>
+  <h1>Custom Layout!</h1>
+
+  <div v-if="page.isNotFound">
+    Halaman 404 kustom!
+  </div>
+  <div v-if="frontmatter.layout === 'home'">
+    Halaman home kustom!
+  </div>
+  <Content v-else />
+</template>
+```
+
+Anda tentu saja dapat membagi layout menjadi lebih banyak komponen:
+
+```vue{3-5,12-15}
+<script setup>
+import { useData } from 'vitepress'
+import NotFound from './NotFound.vue'
+import Home from './Home.vue'
+import Page from './Page.vue'
+
+const { page, frontmatter } = useData()
+</script>
+
+<template>
+  <h1>Custom Layout!</h1>
+
+  <NotFound v-if="page.isNotFound" />
+  <Home v-if="frontmatter.layout === 'home'" />
+  <Page v-else /> <!-- <Page /> merender <Content /> -->
+</template>
+```
+
+Lihat [Referensi Runtime API](../reference/runtime-api) untuk semua yang tersedia di komponen tema. Selain itu, Anda dapat memanfaatkan [Build-Time Data Loading](./data-loading) untuk menghasilkan layout berbasis data, misalnya, halaman yang mencantumkan semua posting blog di proyek saat ini.
+
+## Mendistribusikan Tema Kustom
+
+Cara termudah untuk mendistribusikan tema kustom adalah dengan menyediakannya sebagai [template repository di GitHub](https://docs.github.com/en/repositories/creating-and-managing-repositories/creating-a-template-repository).
+
+Jika Anda ingin mendistribusikan tema sebagai paket npm, ikuti langkah-langkah berikut:
+
+1. Ekspor objek tema sebagai default export di entry paket Anda.
+
+2. Jika berlaku, ekspor definisi tipe konfigurasi tema Anda sebagai `ThemeConfig`.
+
+3. Jika tema Anda memerlukan penyesuaian konfigurasi VitePress, ekspor konfigurasi tersebut di bawah sub-path paket (mis. `my-theme/config`) sehingga pengguna dapat memperluasnya.
+
+4. Dokumentasikan opsi konfigurasi tema (baik melalui file konfigurasi maupun frontmatter).
+
+5. Berikan instruksi yang jelas tentang cara menggunakan tema Anda (lihat di bawah).
+
+## Menggunakan Tema Kustom
+
+Untuk menggunakan tema eksternal, impor dan ekspor ulang dari theme entry kustom:
+
+```js [.vitepress/theme/index.js]
+import Theme from 'awesome-vitepress-theme'
+
+export default Theme
+```
+
+Jika tema perlu diperluas:
+
+```js [.vitepress/theme/index.js]
+import Theme from 'awesome-vitepress-theme'
+
+export default {
+  extends: Theme,
+  enhanceApp(ctx) {
+    // ...
+  }
+}
+```
+
+Jika tema memerlukan konfigurasi VitePress khusus, Anda juga perlu memperluasnya di konfigurasi Anda sendiri:
+
+```ts [.vitepress/config.ts]
+import baseConfig from 'awesome-vitepress-theme/config'
+
+export default {
+  // perluas konfigurasi dasar tema (jika diperlukan)
+  extends: baseConfig
+}
+```
+
+Terakhir, jika tema menyediakan tipe untuk konfigurasi temanya:
+
+```ts [.vitepress/config.ts]
+import baseConfig from 'awesome-vitepress-theme/config'
+import { defineConfigWithTheme } from 'vitepress'
+import type { ThemeConfig } from 'awesome-vitepress-theme'
+
+export default defineConfigWithTheme<ThemeConfig>({
+  extends: baseConfig,
+  themeConfig: {
+    // Type adalah `ThemeConfig`
+  }
+})
+```