feat: improve margin of image and add rounded to image in detail blog…

…s page (#63)

components/post/post-content.jsx

@@ -35,7 +35,7 @@ export default function PostContent({ post }) {
 
   return (
     <div
-      className="mt-10 prose prose-ajwa prose-xl max-w-none prose-h2:text-3xl prose-h3:text-2xl prose-a:font-normal prose-pre:text-[0.9em] prose-pre:leading-normal prose-code:font-source-code-pro prose-pre:bg-[#1a1b26] prose-pre:relative prose-pre:pt-12 prose-code:break-words prose-blockquote:font-normal prose-blockquote:not-italic"
+      className="mt-10 prose prose-ajwa prose-xl max-w-none prose-h2:text-3xl prose-h3:text-2xl prose-a:font-normal prose-pre:text-[0.9em] prose-pre:leading-normal prose-code:font-source-code-pro prose-pre:bg-[#1a1b26] prose-pre:relative prose-pre:pt-12 prose-code:break-words prose-blockquote:font-normal prose-blockquote:not-italic prose-img:mt-6 prose-img:mb-9 prose-img:rounded-lg"
       id="content"
       dangerouslySetInnerHTML={{ __html: post.contentHTML }}
     />

data/posts/css-combinator-cara-kerja-dan-penggunaannya.md

@@ -54,7 +54,7 @@ Berikut contoh implementasinya:
 ```
 
 Hasil:
-![hasil implementasi Descendant Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-1.png)<!--rehype:width=1042&height=626&loading=lazy&mt-6&decoding=async-->
+![hasil implementasi Descendant Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-1.png)<!--rehype:width=1042&height=626&loading=lazy&decoding=async-->
 
 Atau kamu juga bisa melihat [hasilnya secara online di CodePen](https://codepen.io/rezafikkri/pen/bGxxdrN).
 
@@ -95,7 +95,7 @@ Berikut contoh implementasinya:
 ```
 
 Hasil:
-![hasil imlementasi Child Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-2.png)<!--rehype:width=992&height=626&loading=lazy&class=mt-6&decoding=async-->
+![hasil imlementasi Child Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-2.png)<!--rehype:width=992&height=626&loading=lazy&decoding=async-->
 
 Atau kamu juga bisa melihat  [hasilnya secara online di CodePen](https://codepen.io/rezafikkri/pen/BaOOKQg).
 
@@ -136,7 +136,7 @@ Berikut contoh implementasinya:
 ```
 
 Hasil:
-![hasil implementasi Adjacent Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-3.png)<!--rehype:width=997&height=626&loading=lazy&class=mt-6&decoding=async-->
+![hasil implementasi Adjacent Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-3.png)<!--rehype:width=997&height=626&loading=lazy&decoding=async-->
 
 Atau kamu juga bisa melihat  [hasilnya secara online di CodePen](https://codepen.io/rezafikkri/pen/YzOJgNM).
 
@@ -177,7 +177,7 @@ Berikut contoh implementasinya:
 ```
 
 Hasil:
-![hasil implementasi General Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-4.png)<!--rehype:width=972&height=626&loading=lazy&class=mt-6&decoding=async-->
+![hasil implementasi General Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-4.png)<!--rehype:width=972&height=626&loading=lazy&decoding=async-->
 
 Atau kamu juga bisa melihat  [hasilnya secara online di CodePen](https://codepen.io/rezafikkri/pen/eYLbJMQ).
 

data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md

@@ -67,7 +67,7 @@ Sekarang, saya akan menjelaskan setiap baris kode diatas, supaya kamu lebih mema
     <pre class="language-yaml"><code>on:
   pull_request:
     branches: [main]</code></pre>
-    Mungkin kamu bertanya kenapa ketika pull request dibuka ke branch main yang akan memicu workflow CI dijalankan, hal ini karena (terkait dengan konsep yang saya jelaskan pada seri ke-1), ketika telah dibuka pull request ke branch main maka berarti perubahan tersebut telah siap untuk dideploy, tetapi sebelum dideploy tentunya perlu untuk melakukan beberapa pengujian (seperti unit testing, dsb), sehingga diharapkan bisa mengurangi resiko kesalahan (error) ter-deploy oleh Vercel ke production:
+    Mungkin kamu bertanya kenapa ketika pull request dibuka ke branch main yang akan memicu workflow CI dijalankan, hal ini karena (terkait dengan konsep yang saya jelaskan pada seri ke-1), ketika telah dibuka pull request ke branch main maka berarti perubahan tersebut telah siap untuk dideploy, tetapi sebelum dideploy tentunya perlu untuk melakukan beberapa pengujian (seperti unit testing, dsb), sehingga diharapkan bisa mengurangi resiko kesalahan (error) ter-deploy oleh Vercel ke production.
   </li>
   <li>
     Mendefinisikan <em>job</em> dengan id <code>test-and-lint</code>:

data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md

@@ -18,43 +18,43 @@ Setelah membuat GitHub Actions workflow pada seri ke-2, pada seri ke-3 ini kita
 
 Untuk deploy dengan vercel ikuti langkah-langkah berikut:
 <!-- excerpt -->1. Buat akun Vercel dengan buka halaman [Sign Up Vercel](https://vercel.com/signup), lalu pada bagian **Plan type**, karena ini tujuannya untuk belajar maka pilih **Hobby**, lalu<!-- excerpt --> pada kolom input **Your name**, isi dengan nama kamu dan klik button **Continue**:
-![sign up vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/sign-up-vercel.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![sign up vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/sign-up-vercel.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 2. Kamu akan diarahkan ke suatu halaman untuk menghubungkan akun Vercel kamu dengan Git provider, karena dalam tutorial ini menggunakan GitHub, maka klik button **Continue With GitHub**:
-![connect vercel github](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/connect-vercel-github.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![connect vercel github](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/connect-vercel-github.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 3. Akan terbuka pop up window *Authorize Vercel*, yang intinya Vercel ingin meminta persetujuan dari kamu untuk mengakses beberapa hal di akun GitHub kamu. Klik button **Authorize Vercel** untuk menyetujui:
-![authorize vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/authorize-vercel.png)<!--rehype:width=818&height=680&loading=lazy&class=mt-6&decoding=async-->
+![authorize vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/authorize-vercel.png)<!--rehype:width=818&height=680&loading=lazy&decoding=async-->
 4. Kamu akan diminta mengisi nomor telepon. Pilih negara Indonesia, lalu isi dengan nomor aktif kamu (ini hanya untuk verifikasi) dan klik button **Continue**:
-![insert phone number vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/insert-phone-number-vercel.png)<!--rehype:width=826&height=682&loading=lazy&class=mt-6&decoding=async-->
+![insert phone number vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/insert-phone-number-vercel.png)<!--rehype:width=826&height=682&loading=lazy&decoding=async-->
 5. Kamu perlu memasukkan 4 kode yang telah dikirim ke nomor telepon kamu dan selamat akun Vercel kamu sudah berhasil dibuat:
-![verify vercel sign up](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/verify-vercel-sign-up.png)<!--rehype:width=820&height=685&loading=lazy&class=mt-6&decoding=async-->
+![verify vercel sign up](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/verify-vercel-sign-up.png)<!--rehype:width=820&height=685&loading=lazy&decoding=async-->
 6. Tunggu sebentar sampai kamu diarahkan ke halaman untuk membuat projek baru (seperti dibawah ini), jika agak lama, tidak apa-apa, tetap tunggu. Karena sebelumnya sudah memiliki projek yang ingin dideploy, maka kamu hanya perlu untuk melakukan *Import Git Repository* saja. Untuk melakukan import, kamu perlu install Vercel GitHub App di akun GitHub-mu, caranya dengan klik button **Install** pada bagian **Import Git Repository**:
-![install github app vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/install-vercel.png)<!--rehype:width=1366&height=1151&loading=lazy&class=mt-6&decoding=async--> Di GitHub ada tools yang bernama GitHub Apps, GitHub Apps adalah tools yang memperluas fungsionalitas GitHub. GitHub Apps dapat melakukan sesuatu di GitHub seperti membuka *issues*, komen di dalam pull request dan mengelola *projects*. GitHub Apps juga bisa melakukan sesuatu di luar GitHub berdasarkan *event* yang terjadi di GitHub. Vercel yang kamu install di akun GitHub-mu adalah salah satu dari GitHub Apps. Lebih detail mengenai GitHub Apps bisa baca [disini](https://docs.github.com/en/apps/using-github-apps/about-using-github-apps).
+![install github app vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/install-vercel.png)<!--rehype:width=1366&height=1151&loading=lazy&decoding=async--> Di GitHub ada tools yang bernama GitHub Apps, GitHub Apps adalah tools yang memperluas fungsionalitas GitHub. GitHub Apps dapat melakukan sesuatu di GitHub seperti membuka *issues*, komen di dalam pull request dan mengelola *projects*. GitHub Apps juga bisa melakukan sesuatu di luar GitHub berdasarkan *event* yang terjadi di GitHub. Vercel yang kamu install di akun GitHub-mu adalah salah satu dari GitHub Apps. Lebih detail mengenai GitHub Apps bisa baca [disini](https://docs.github.com/en/apps/using-github-apps/about-using-github-apps).
 7. Kamu akan dimintai semacam persetujuan oleh Vercel untuk beberapa izin terkait menginstall Vercel GitHub App di akun GitHub-mu, kamu bisa membaca apa saja izin tersebut, selanjutnya jangan lupa untuk memilih **Only select repositories**, untuk install Vercel hanya di repositori yang dipilih saja, kemudian pilih repositori website counter-js dan klik button **Install** (scroll ke bawah jika kamu belum melihat button tersebut):
-![permission install github app vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/permission-install-vercel.png)<!--rehype:width=818&height=682&loading=lazy&class=mt-6&decoding=async-->
+![permission install github app vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/permission-install-vercel.png)<!--rehype:width=818&height=682&loading=lazy&decoding=async-->
 8. Klik button **Import** pada repositori website counter-js di bagian **Import Git Repository**:
-![importing project counter js](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/importing-project-counter-js.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![importing project counter js](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/importing-project-counter-js.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 9. Sebelum deploy, kamu akan diminta untuk melakukan konfigurasi projek, seperti *Project Name*, *Framework Preset*, *Root Directory*, *Build and Output Settings* dan *Environment Variables*. Tetapi untuk di tutorial ini, kamu tidak perlu merubah apapun karena Vercel sudah membuat konfigurasi default, kamu bisa langsung klik button **Deploy** untuk deploy website counter-js dan tunggu sampai proses deploy selesai:
-![configure project vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/configure-project-vercel.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![configure project vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/configure-project-vercel.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 10. Selamat kamu telah berhasil deploy website counter-js dengan Vercel. Selanjutnya kamu bisa klik button **Continue to Dashboard** untuk melihat detail dari website counter-js yang telah dideploy:
-![success deploy](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/success-deploy.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![success deploy](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/success-deploy.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 11. Kamu akan dialihkan ke halaman dashboard dari website counter-js yang telah berhasil dideploy. Untuk mengunjungi website yang telah dideploy kamu bisa klik button **Visit**:
-![dashboard vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/dashboard-vercel.png)<!--rehype:width=1366&height=759&loading=lazy&class=mt-6&decoding=async-->
+![dashboard vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/dashboard-vercel.png)<!--rehype:width=1366&height=759&loading=lazy&decoding=async-->
 
 Setelah berhasil deploy website counter-js ke Vercel, seperti penjelasan saya sebelumnya, bahwa ketika ada perubahan yang diterapkan ke branch main, maka Vercel secara otomatis akan melakukan proses deployment. Untuk memastikan apakah betul berjalan seperti itu, buat branch baru, lalu lakukan perubahan apapun di repositori local (agar mudah melihat perbedaan antara deployment sebelumnya dan yang baru, buat perubahan pada tampilan website di file `main.js`) dan lakukan commit kemudian push.
 
 > **Info:** Disini saya kembali menggunakan akun GitHub utama saya (rezafikkri).
 
 Selanjutnya buka sebuah pull request ke branch main, tunggu semua pengecekan lolos dan lakukan *Merge pull request* dengan klik button **Merge pull request**:
-![merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 Karena melakukan *merge*, maka kamu akan diminta untuk mengisi commit message dan commit description, kamu bisa merubahnya atau biarkan default dan klik button **Confirm merge**:
-![confirm merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/confirm-merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![confirm merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/confirm-merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 Jika pada button tidak terdapat kata *Merge pull request*, maka klik dropdown menu pada button dan pilih **Create a merge commit**:
-![button merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/button-merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![button merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/button-merge-pull-request.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 
 Setelah *Merge pull request* berhasil, untuk melihat apakah deployment otomatis dijalankan, opsi pertama, kamu bisa melihat langsung pada website counter-js yang telah dideploy, apakah terdapat perubahan (jika kamu melakukan perubahan pada tampilan website).
 
 Opsi kedua, kamu bisa membuka tab **Deployments** pada halaman dashboard website counter-js, disana kamu bisa melihat deployment terbaru adalah deployment dari *Merge pull request* yang sebelumnya kamu lakukan, ini menandakan bahwa betul Vercel secara otomatis melakukan deployment ketika ada perubahan yang diterapkan pada branch main:
-![automatic deployment](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/automatic-deployment.png)<!--rehype:width=1351&height=656&loading=lazy&class=mt-6&decoding=async-->
+![automatic deployment](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/automatic-deployment.png)<!--rehype:width=1351&height=656&loading=lazy&decoding=async-->
 
 Oke, terima kasih buat kamu yang sudah membaca, semoga bermanfaat. Jika ada yang ingin ditanyakan atau ada saran silahkan kirim email ke [email protected]. Jangan lupa follow Linkedin saya di [in/reza-sariful-fikri](https://www.linkedin.com/in/reza-sariful-fikri) untuk mendapatkan tulisan terbaru. Serta jangan lupa baca artikel dan tutorial saya lainnya pada halaman Blog dengan mengklik menu Blog pada navbar atau footer.