Merge branch 'main' into editor-setup

Author: mhaidarhanif

.github/PULL_REQUEST_TEMPLATE.md

@@ -9,3 +9,10 @@ https://github.com/reactjs/react.dev/blob/main/CONTRIBUTING.md
 If your PR references an existing issue, please add the issue number below
 
 -->
+
+Closes <!-- mention the issue that you're trying to close with this PR -->
+
+## Description
+
+Translate the <!-- mention the page title that you're translating --> page.
+Page URL: <!-- mention the URL to the page that you're translating -->

.github/workflows/analyze.yml

@@ -38,7 +38,7 @@ jobs:
       # Here's the first place where next-bundle-analysis' own script is used
       # This step pulls the raw bundle stats for the current bundle
       - name: Analyze bundle
-        run: npx -p nextjs-bundle-analysis report
+        run: npx -p nextjs-bundle-analysis@0.5.0 report
 
       - name: Upload bundle
         uses: actions/upload-artifact@v2

.github/workflows/analyze_comment.yml

@@ -47,26 +47,9 @@ jobs:
           pr_number=$(cat pr_number/pr_number)
           echo "pr-number=$pr_number" >> $GITHUB_OUTPUT
 
-      - name: Find Comment
-        uses: peter-evans/find-comment@v1
-        if: success()
-        id: fc
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body-includes: "<!-- __NEXTJS_BUNDLE -->"
-
-      - name: Create Comment
-        uses: peter-evans/create-or-update-comment@v1.4.4
-        if: success() && steps.fc.outputs.comment-id == 0
-        with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-
-      - name: Update Comment
-        uses: peter-evans/create-or-update-comment@v1.4.4
-        if: success() && steps.fc.outputs.comment-id != 0
+      - name: Comment
+        uses: marocchino/sticky-pull-request-comment@v2
         with:
-          issue-number: ${{ steps.get-comment-body.outputs.pr-number }}
-          body: ${{ steps.get-comment-body.outputs.body }}
-          comment-id: ${{ steps.fc.outputs.comment-id }}
-          edit-mode: replace
+          header: next-bundle-analysis
+          number: ${{ steps.get-comment-body.outputs.pr-number }}
+          message: ${{ steps.get-comment-body.outputs.body }}

TRANSLATION.md

@@ -1,113 +1,89 @@
-# Panduan Penerjemahan Bahasa Indonesia untuk reactjs.org
+# Panduan Penerjemahan Bahasa Indonesia untuk react.dev
 
-Berikut adalah panduan-panduan dasar dalam penerjemahan situs reactjs.org ke Bahasa Indonesia. Dokumen ini ditujukan bagi mereka yang baru mulai berkontribusi dan yang pernah berkontribusi sebelumnya. Apabila ada kekurangan, silakan berkontribusi dengan menyunting dokumen ini.
+Berikut adalah panduan-panduan dasar dalam penerjemahan situs react.dev ke Bahasa Indonesia. Dokumen ini ditujukan bagi mereka yang baru mulai berkontribusi dan yang pernah berkontribusi sebelumnya. Apabila ada kekurangan, silakan berkontribusi dengan menyunting dokumen ini.
 
-## Menyunting Konten Secara Lokal
+## Referensi
+
+Semua referensi mengenai penerjemahan terletak di [bagian Wiki](https://github.com/reactjs/id.react.dev/wiki) di repositori ini.
+
+- [Glosarium](https://github.com/reactjs/id.react.dev/wiki/Glosarium)
+- [Panduan Penulisan Universal](https://github.com/reactjs/id.react.dev/wiki/Panduan-Penulisan-Universal)
+- [Universal Style Guide (English)](https://github.com/reactjs/id.react.dev/wiki/Universal-Style-Guide)
+
+Apabila Anda ingin mendikusikan apapun mengenai proyek penerjemahan situs dokumentasi ini, termasuk umpan balik (*feedback*) mengenai Glosarium dan alur kerja (*workflow*), silakan ke [bagian Discussions](https://github.com/reactjs/id.react.dev/discussions).
+
+## Menyunting konten secara lokal
 
 Untuk menjalankan situs id.react.dev secara lokal, ikuti langkah-langkah berikut:
 
 1. Unduh dan instalasi [Git](https://git-scm.com/), [Node.js](https://nodejs.org/en/), dan [Yarn](https://yarnpkg.com/en/).
 2. Buatlah *fork* dari repositori id.react.dev di akun Anda, kemudian *clone* repositori tersebut.
 3. Jalankan `yarn` di terminal untuk menginstalasi dependensi yang dibutuhkan.
 4. Jalankan `yarn dev` untuk menjalankan *server* lokal.
-5. Buka alamat `localhost:8000` dalam peramban web Anda.
+5. Buka alamat `localhost:3000` dalam peramban web Anda.
 
 Konten dari situs id.react.dev terdapat dalam folder `content`, dan disimpan dalam format Markdown. Buka proyek id.react.dev dalam program penyunting teks Anda, dan mulailah menyunting. Konten dalam situs lokal akan diperbarui secara otomatis.
 
-## Klaim Halaman Supaya Tidak Ada Pekerjaan Ganda
+## Klaim halaman supaya tidak ada pekerjaan ganda
 
-Proses penerjemahan akan dicatat dalam *issue* https://github.com/reactjs/id.react.dev/issues/330. Pastikan Anda telah meng-klaim halaman yang Anda ingin menerjemahkan, supaya tidak terjadi pekerjaan ganda.
+Proses penerjemahan akan dilacak dalam *issue* https://github.com/reactjs/id.react.dev/issues/330. Pastikan Anda telah meng-klaim halaman yang ingin Anda terjemahkan supaya tidak terjadi pekerjaan ganda.
 
-## Panduan Penulisan Universal
+### Perubahan mekanisme klaim penerjemahan
 
-Berikut adalah panduan penulisan yang berlaku bagi seluruh situs terjemahan reactjs.org.
+Sebagaimana yang bisa Anda lihat di *issue* https://github.com/reactjs/id.react.dev/issues/330, pada awalnya kami menggunakan penugasan terjemahan berbasis komentar. Namun proses tersebut terlalu menyulitkan dan berpotensi menghambat proses penerjemahan akibat aksi saling menunggu konfirmasi dan potensi miskomunikasi.
 
-Silakan merujuk ke halaman [Glosarium](https://github.com/reactjs/id.react.dev/wiki/Glosarium) pada wiki id.react.dev. Halaman wiki tersebut berisi daftar glosarium beserta terjemahannya.
+Oleh karena itu, terinspirasi dari mekanisme pembagian tugas di proyek [WargaBantuWarga](https://github.com/kawalcovid19/wargabantuwarga.com/blob/main/CONTRIBUTING.md#issue-assignment--communication), kami mengubah mekanismenya menjadi penugasan berbasis *Draft Pull Request*.
 
-Referensi panduan penulisan Bahasa Indonesia lainnya yang dapat digunakan adalah:
+### Klaim penerjemahan melalui *Draft Pull Request*
 
-* [Pedoman Umum Ejaan Bahasa Indonesia (PUEBI)](https://puebi.readthedocs.io/en/latest/)
-* [Kamus Besar Bahasa Indonesia (KBBI)](https://kbbi.kemdikbud.go.id/)
-* [RSNI3 8527:2018 - Glosarium Istilah Teknologi Informasi](https://github.com/jk8s/sig-docs-id/raw/master/resources/RSNI-glossarium.pdf)
+*Draft Pull Request* merupakan *pull request* biasa, namun ia tidak dapat
+digabungkan ke *branch* utama sampai statusnya diubah menjadi "ready for
+review". *Draft Pull Request* menandakan bahwa *pull request* ini [masih sedang dalam pengerjaan](https://docs.github.com/en/github/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/changing-the-stage-of-a-pull-request).
+Hal ini diperlukan untuk memberikan sinyal kepada kontributor lainnya bahwa
+terjemahan untuk halaman yang dimaksud di dalam *issue* tersebut sudah dimulai dan masih dikerjakan. Membuat *Draft Pull Request* juga merupakan cara yang lebih baik sebagai media komunikasi antara para kontributor karena informasi tambahan bisa disediakan di sana sembari melihat *file-file* yang diubah.
 
-### *Heading ID*
+Dengan membuat *Draft Pull Request* untuk *issue* terkait, kita dapat asumsikan bersama bahwa **Anda telah ditugaskan untuk menerjemahkan halaman tersebut**, sehingga kontributor lain bisa memilih untuk menerjemahkan halaman yang lainnya. Apabila sebuah *Draft Pull Request* dari kontributor lain menggantung terlalu lama tanpa ada kemajuan yang jelas selama beberapa hari, Anda dapat **mengambil alih tugas penerjemahan** halaman tersebut dengan cara membuat *Draft Pull Request* Anda sendiri. Bisa dengan melanjutkan proses penerjemahannya dari *commit* terakhir oleh kontributor lainnya di *Draft Pull Request* yang menggantung tersebut, atau dengan memulainya dari awal lagi (dari *commit* di `main` *branch*).
 
-Setiap *heading* pada halaman reactjs.org memiliki ID seperti berikut:
+#### Pembuatan *Draft Pull Request*
 
-```md
-## Try React {/*try-react*/}
-```
+Langkah-langkah untuk membuat *Draft Pull Request*:
 
-**Jangan** menerjemahkan ID-nya! ID yang diterjemahkan akan merusak navigasi dalam situs.
+1. *Commit* dan *push* perubahan terbaru ke *forked repository* Anda. Mohon merujuk ke [@commitlint/config-conventional](https://github.com/conventional-changelog/commitlint/tree/master/@commitlint/config-conventional) untuk membuat pesan *commit* atau Anda dapat menggunakan [commitlint.io](https://commitlint.io/) untuk membantu Anda membuat pesan *commit*.
+2. Pergi ke bagian *Pull requests* pada *forked repository* Anda, dan klik *New pull request*.
 
-```md
-Lihat [bagian permulaan](/getting-started#try-react) untuk info lebih lanjut.
-```
+   ![Petunjuk-1](https://user-images.githubusercontent.com/46013258/126284390-c2bd1aa6-fdc2-4aa6-a945-031f02db038e.png)
 
-✅ LAKUKAN:
+3. Pilih *forked repository* Anda sebagai *head repository*, dan pilih *branch* tempat Anda membuat perubahan untuk bagian *compare*.
 
-```md
-## Mencoba React {/*try-react*/}
-```
+   ![Petunjuk-2](https://user-images.githubusercontent.com/46013258/126285036-27b49325-62a2-4a6c-b216-5bae261788da.png)
 
-❌ JANGAN LAKUKAN:
+4. Berikan judul dan deskripsi yang jelas mengenai *pull request* Anda.
+   Pastikan Anda mengikuti pengisian deskripsi seperti [keterangan di
+   bawah](#pemberian-deskripsi-pull-request).
 
-```md
-## Mencoba React {/*mencoba-react*/}
-```
+   ![Petunjuk-3](https://user-images.githubusercontent.com/46013258/126286179-04341e30-1224-49cb-9b9a-3c3aee99c308.png)
 
-Ini akan merusak tautan di atas.
+5. Pilih *Create draft pull request* (seperti pada gambar di atas) dan klik tombol berwarna hijau.
+6. Jangan lupa untuk menandai *Draft Pull Request* Anda sebagai *Ready for review* ketika Anda sudah melakukan semua perubahan yang diinginkan.
 
-### Teks dalam Blok Kode
+#### Pemberian deskripsi *pull request*
 
-Anda dapat menerjemahkan teks di dalam string & komentar kode, namun berhati-hatilah supaya tidak menerjemahkan bagian dari kode secara tidak sengaja!
+Agar *pull request* dapat berkaitan dengan *issue*, ada sebuah syarat teks yang
+harus dimasukkan ke dalam deskripsinya, yakni dengan format `Closes #nomor-issue`. Harap pastikan Anda menyebutkan nomor
+*issue* yang Anda kerjakan dengan benar. Ubah teks `<!-- mention the issue that you're trying to close with this PR -->` yang disediakan dari *template*
+menjadi nomor *issue*. Contoh, seperti pada https://github.com/reactjs/id.react.dev/pull/500:
 
-Contoh:
+```markdown
+Closes #372
 
-```js
-// Example
-const element = <h1>Hello, world</h1>;
-ReactDOM.render(element, document.getElementById('root'));
-```
+## Description
 
-✅ LAKUKAN:
-
-```js
-// Contoh
-const element = <h1>Halo, dunia</h1>;
-ReactDOM.render(element, document.getElementById('root'));
+Translate the **Quick Start** page.
+Page URL: https://id.react.dev/learn
 ```
 
-❌ JANGAN LAKUKAN:
+Apabila Anda melakukannya dengan benar, maka Anda akan melihat *issue* dan *draft pull request* tersebut saling terhubung sebagaimana yang tampak pada tangkapan layar berikut ini.
 
-```js
-// Contoh
-const element = <h1>Halo, dunia</h1>;
-// "root" merujuk kepada ID elemen.
-// JANGAN DITERJEMAHKAN
-ReactDOM.render(element, document.getElementById('induk'));
-```
+![A Draft Pull Request linked to an Issue](https://user-images.githubusercontent.com/6315466/235304349-125f538f-e9a6-428b-ab55-f01158f0b8d4.png)
 
-❌ SANGAT TIDAK BOLEH DILAKUKAN:
-
-```js
-// Contoh
-const elemen = <h1>Halo, dunia</h1>;
-ReactDOM.render(elemen, dokumen.dapatkanElemenBerdasarkanId('induk'));
-```
-
-### Tautan Eksternal
-
-Apabila tautan eksternal merujuk kepada artikel referensi seperti di [MDN](https://developer.mozilla.org/en-US/) atau [Wikipedia](https://id.wikipedia.org/wiki/Halaman_Utama), dan versi bahasa Indonesia dari artikel tersebut yang berkualitas cukup bagus tersedia, lebih baik merujuk kepada tautan versi bahasa Indonesia tersebut.
-
-Contoh:
-
-```md
-This helps prevent [XSS (cross-site-scripting)](https://en.wikipedia.org/wiki/Cross-site_scripting) attacks.
-```
-
-✅ OK:
-
-```md
-Ini membantu menghindari serangan [XSS (*cross-site-scripting*)](https://id.wikipedia.org/wiki/XSS).
-```
+![An Issue linked to a Draft Pull Request](https://user-images.githubusercontent.com/6315466/235304341-f8b2f8dd-c94e-4548-a7da-ce3be49dee17.png)

src/components/Layout/HomeContent.js

@@ -1463,7 +1463,10 @@ function VideoList({videos, emptyHeading}) {
 function SearchInput({value, onChange}) {
   const id = useId();
   return (
-    <form className="mb-3 py-1" data-hover="SearchInput">
+    <form
+      className="mb-3 py-1"
+      data-hover="SearchInput"
+      onSubmit={(e) => e.preventDefault()}>
       <label htmlFor={id} className="sr-only">
         Search
       </label>

src/content/community/conferences.md

@@ -10,11 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c
 
 ## Upcoming Conferences {/*upcoming-conferences*/}
 
-### React Miami 2023 {/*react-miami-2023*/}
-April 20 - 21, 2023. Miami, FL, USA
-
-[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
-
 ### Reactathon 2023 {/*reactathon-2023*/}
 May 2 - 3, 2023. San Francisco, CA, USA
 
@@ -92,6 +87,11 @@ December 8 & 12, 2023. In-person in Berlin, Germany + remote first interactivity
 
 ## Past Conferences {/*past-conferences*/}
 
+### React Miami 2023 {/*react-miami-2023*/}
+April 20 - 21, 2023. Miami, FL, USA
+
+[Website](https://www.reactmiami.com/) - [Twitter](https://twitter.com/ReactMiamiConf)
+
 ### React Day Berlin 2022 {/*react-day-berlin-2022*/}
 December 2, 2022. In-person in Berlin, Germany + remote (hybrid event)