From f967e9d13cef03bba3d1322613705aa8fd03a7df Mon Sep 17 00:00:00 2001 From: rezafikkri Date: Sun, 22 Dec 2024 15:36:51 +0700 Subject: [PATCH] feat: improve margin of image and add rounded to image in detail blogs page --- components/post/post-content.jsx | 2 +- ...combinator-cara-kerja-dan-penggunaannya.md | 8 ++--- ...e-dengan-cicd-2-github-actions-workflow.md | 2 +- ...site-dengan-cicd-3-deploy-dengan-vercel.md | 30 +++++++++---------- ...oy-website-dengan-cicd-4-branch-ruleset.md | 8 ++--- styles/globals.css | 2 +- 6 files changed, 26 insertions(+), 26 deletions(-) diff --git a/components/post/post-content.jsx b/components/post/post-content.jsx index 9ffa638..c806c62 100644 --- a/components/post/post-content.jsx +++ b/components/post/post-content.jsx @@ -35,7 +35,7 @@ export default function PostContent({ post }) { return (
diff --git a/data/posts/css-combinator-cara-kerja-dan-penggunaannya.md b/data/posts/css-combinator-cara-kerja-dan-penggunaannya.md index 724ef92..25dc8f3 100644 --- a/data/posts/css-combinator-cara-kerja-dan-penggunaannya.md +++ b/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) +![hasil implementasi Descendant Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-1.png) 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) +![hasil imlementasi Child Combinator](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/css-combinator-2.png) 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) +![hasil implementasi Adjacent Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-3.png) 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) +![hasil implementasi General Sibling Combinator](https://res.cloudinary.com/rezafikkri/image/upload/css-combinator-4.png) Atau kamu juga bisa melihat [hasilnya secara online di CodePen](https://codepen.io/rezafikkri/pen/eYLbJMQ). diff --git a/data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md b/data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md index 7ff344d..bf5ff00 100644 --- a/data/posts/deploy-website-dengan-cicd-2-github-actions-workflow.md +++ b/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 
on:
   pull_request:
     branches: [main]
- 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.
  • Mendefinisikan job dengan id test-and-lint: diff --git a/data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md b/data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md index a892c20..ff363fa 100644 --- a/data/posts/deploy-website-dengan-cicd-3-deploy-dengan-vercel.md +++ b/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: 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 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) +![sign up vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/sign-up-vercel.png) 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) +![connect vercel github](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/connect-vercel-github.png) 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) +![authorize vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/authorize-vercel.png) 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) +![insert phone number vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/insert-phone-number-vercel.png) 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) +![verify vercel sign up](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/verify-vercel-sign-up.png) 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) 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) 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) +![permission install github app vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/permission-install-vercel.png) 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) +![importing project counter js](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/importing-project-counter-js.png) 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) +![configure project vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/configure-project-vercel.png) 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) +![success deploy](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/success-deploy.png) 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) +![dashboard vercel](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/dashboard-vercel.png) 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) +![merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/merge-pull-request.png) 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) +![confirm merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/confirm-merge-pull-request.png) 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) +![button merge pull request](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/button-merge-pull-request.png) 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) +![automatic deployment](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/automatic-deployment.png) Oke, terima kasih buat kamu yang sudah membaca, semoga bermanfaat. Jika ada yang ingin ditanyakan atau ada saran silahkan kirim email ke fikkri.reza@gmail.com. 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. diff --git a/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md b/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md index 33e3f2d..cccdacf 100644 --- a/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md +++ b/data/posts/deploy-website-dengan-cicd-4-branch-ruleset.md @@ -18,7 +18,7 @@ Ruleset adalah daftar aturan yang berlaku pada repositori, yang dapat membantu k Untuk membuat ruleset, ikuti langkah berikut: 1. Buka remote repositori website counter-js di GitHub kamu, lalu klik **Settings** » pada sidebar menu sebelah kiri klik **Rules**, kemudian klik **Rulesets**, pada halaman Rulesets yang terbuka, klik **New ruleset** dan klik **New branch ruleset**: -![create branch ruleset github](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/create-branch-ruleset-github.png) +![create branch ruleset github](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/create-branch-ruleset-github.png) 2. Pada bagian **Ruleset Name**, isi dengan nama ruleset 3. Pada bagian **Enforcement Status**, pilih **Active**, yang berarti bahwa ruleset ini akan langsung diterapkan ketika dibuat (ketika klik button **Create**). Kamu juga bisa membiarkannya default, yaitu **Disabled**, yang berarti bahwa ruleset ini belum akan diterapkan dan ketika nanti kamu ingin menerapkan ruleset ini, kamu bisa mengubah **Enforcement Status**-nya. 4. Pada bagian **Bypass list**, kamu bisa memberikan izin kepada *rules*, *teams* atau *apps* tertentu untuk *bypass* (mengabaikan atau melewati) ruleset ini. Tetapi karena dalam tutorial ini, ingin diterapkan bahwa tidak ada yang boleh mengabaikan ruleset ini, maka cukup dibiarkan kosong saja. @@ -26,13 +26,13 @@ Untuk membuat ruleset, ikuti langkah berikut: 6. Pada bagian **Rules**, kamu memilih *rule* apa saja yang ingin diterapkan. Secara default sudah ada dua *rule* yang otomatis dipilih oleh GitHub, yaitu rule pertama adalah **Restrict deletions**, yang berarti hanya user dengan izin *bypass* yang boleh menghapus branch yang didefinisikan pada bagian **Target branches**, yaitu dalam tutorial ini adalah branch main dan karena sebelumnya pada bagian **Bypass list** hanya dibiarkan kosong, maka artinya tidak ada seorang pun yang bisa menghapus branch main, ini bagus, karena jika branch main tidak sengaja terhapus, maka akan berakibat fatal. Yang kedua adalah **Block force pushes**, ini berarti bahwa tidak ada user yang diizinkan untuk melakukan *force push*. 7. Pilih rule **Require pull request before merging**, supaya jika ingin melakukan perubahan harus melalui pull request. 8. Pilih rule **Require status checks to pass**, lalu klik **Add checks**, pada kolom pencarian tulis id dari *job* yang terdapat pada workflow yang sebelumnya dibuat, sebagai contoh, id dari *job* yang saya buat sebelumnya adalah "test-and-lint" maka masukkan "test-and-lint" atau cukup "test" saja, lalu pada bagian **Suggestions** pilih **Add test-and-lint** dan klik kembali button **Add checks**: -![require status checks pass](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/require-status-checks-pass.png) +![require status checks pass](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/require-status-checks-pass.png) 9. Berikut adalah tampilan akhir dari *settings ruleset*: -![settings ruleset](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/settings-ruleset.png) +![settings ruleset](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/settings-ruleset.png) 10. Klik button **Create** untuk membuat ruleset. Setelah selesai membuat Branch Ruleset, saatnya melakukan test apakah ruleset tersebut berjalan sebagaimana mestinya. Kamu bisa mencoba membuat perubahan langsung pada branch main di local repositori, lalu coba lakukan push, maka kamu akan mendapatkan error seperti di bawah ini: -![error directly change main branch](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/error-directly-change-main-branch.png) +![error directly change main branch](https://res.cloudinary.com/rezafikkri/image/upload/q_auto/error-directly-change-main-branch.png) Yang menandakan bahwa ruleset telah berjalan sebagaimana mestinya. Kamu bisa membatalkan perubahan sebelumnya dengan menjalankan command: ```bash git reset --hard HEAD~1 diff --git a/styles/globals.css b/styles/globals.css index 4a0c0a2..1900222 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -53,7 +53,7 @@ .prose blockquote > p { @apply py-1.5; - @apply pe-1.5; + @apply pe-2; } .hljs-toolbar {