Skip to content

Teknis Unggah Artikel Atau Konten

Jump to bottom
Rengga Prakoso Nugroho edited this page Jun 23, 2023 · 2 revisions

Gambaran Umum

Situs web GDSC menggunakan react markdown sebagai media rendering konten artikel. Hal ini memungkinkan untuk mengunggah artikel atau konten dalam bentuk markdown ketimbang dalam format yang lain. Hal ini juga cukup memudahkan karena setiap elemen pada markdown dapat dilakukan testing secara menyeluruh dan terintergrasi dengan build system.

Prasyarat Umum

  1. Memiliki akun Github
  2. Telah membaca setidaknya Basic Markdown Syntax
  3. Memahami secara dasar Github Git Flow, baca artikel Contributing to Project sebaai referensi dasar

Usefull Tools

Terdapat beberapa tools yang dapat kalian gunakan dalam proses editing markdown secara mudah dan intuitif, diantaranya

  1. https://stackedit.io/
  2. https://dillinger.io/
  3. https://onlinemarkdowneditor.dev/
  4. https://vscode.dev/

Spesifikasi Teknis Markdown

Terdapat beberapa aturan umum yang dtetapkan oleh tim engineering dalam memproses markdown. Berikut ialah beberapa panduan dasar sebelum anda melakukan unggahan markdown pada repository ini. Pada konten markdown, terdapat dua komponen utama yang akan dikonsumsi oleh sistem, yaitu frontmatter dan content. Berikut adalah contoh dari struktur dasar markdown:

---
frontmatter: terletak diantara tiga garis strip pada awal dokumen
---

content terletak dibawah frontmatter

Spesifikasi Frontmatter

frontmatter ialah metadata atau properti identitas dari markdown yang diunggah, mulai dari judul, tanggal, deskripsi singkat, tag dan thumbnail. Setiap element frontmatter akan menjadi acuan sistem dalam menampilkan artikel pada situs web GDSC. Berikut adalah struktur dari frontmatter yang digunakan pada situs web gdsc

---
title: Maksimal 50 karakter
date: "YYYY-MM-DD"
excerpt: deskripsi / summary dari artikel. tidak lebih dari 100 karakter.
tags: [ kategori 1, kategori 2, maksimal 3 kategori]
thumbnail: "URL thumbnail konten, wajib dalam format JPG"
---

Spesfikasi Content

sedangkan pada komponen content, terdapat beberapa aturan umum yang ditetapkan untuk melakukan formatting content pada markdown diantaranya:

  1. Tidak diperbolehkan adanya inline-html / tag-html / inline-css 
<!-- CONTOH SALAH -->
<!-- Potongan content dibawah menggunakan tag html. -->
Saya sangat suka dengan topik <b> Web Development </b>

<!-- CONTOH BENAR-->
<!-- Potongan content dibawah menggunakan tag bold sesuai dengan GFM -->
Saya sangat suka dengan topik **Web Development**
  1. Melakukan cetak tebal menggunakan double-asterisk. Contohnya seperti **cetak tebal**
  2. Mekakukan cetak miring menggunakan single-asterisk. Contohnya seperti *cetak-miring*
  3. Diperkenankan untuk menggunakan emoji / emotikon. Daftar emotikon yang didukung oleh sistem dapat dilihat di getemoji.com
  4. Image attachment diharapkan menggunakan CDN google drive atau absolute URL storage publik. Hotlinking pada resources situs web asing tidak diperkenankan. (tutorial CDN Google Drive menyusul)
  5. Heading selalu dimulai dari H2, hal ini dikarenakan H1 telah diambil alih oleh judul artikel pada frontmatter.

Contoh Markdown

---
title: Cara kami mengembangkan situs web GDSC UM
date: "2023-06-20"
excerpt: Cerita singkat tim engineering dalam membangun infrastruktur sederhana menggunakan Google Sheets dan NextJS
tags: [ infrastruktur, nextjs, webdev]
thumbnail: "https://drive.google.com/uc?id=10eaAzCnE6tQY3cC_4zuWslHuVoZCtoXs"
---

## Gambaran Umum

![Cover Gambar](https://drive.google.com/uc?id=10eaAzCnE6tQY3cC_4zuWslHuVoZCtoXs)

Dalam proses pengembangan situs web GDSC, **banyak** sekali pertimbangan dalam pemilihan *database* untuk menyimpan hasil kuis, terdapat pilihan database diantara:

1. [MySQL](mysql.com)
2. [PostreSQL](posgres:co)
3. [Google Spreadsheet](https://docs.google.com)

Tim engineering pun sempat merasa *kaget* ketika mendengar kata Google Spreadsheet sebagai pengganti database.

> Kadang ga habis pikir bisa make Google Sheets sebagai structured data storage

## Engineering Principles

Dan konten berlanjut seterusnya......

Tata Cara Unggah Artikel

Proses unggah artikel akan dijelaskan dan diperagakan melalui web browser interface. Seharusnya tidak terlalu sulit untuk diikuti dan dipahami.

  1. Login ke akun Github milik pribadi
  2. Kunjungi repository Situs web GDSC
  3. Lakukan fork pada respitory dengan klik tombol fork image
  4. Klik kolom owner, pilih username atau akun pribadi kalian, dan klik Create Fork image
  5. Kalian akan diarahkan ke remote copy atau hasil fork dari repository utama. Masuklah pada folder posts image
  6. Klik Add File pada pojok kanan atas, pilih upload files jika kaian telah memiliki file markdown yang telah kalian buat.
  7. Drag-n-Drop file kalian pada kotak yang disediakan atau kalian bisa memasukkan secara manual dengan klik choose your files
  8. Masukkan commit changes dengan format feat(article): judul singkat dan deskripsi dengan format:
judul: judul artikel
author: nama pembuat artikel
  1. Pada pilihan commit pilih Commit directly to the main branch. Lalu klik Commit Changes. image
  2. Setelah file terlah terunggah, buatlah sebuah pull request dengan cara klik Contribute, dan klik Open Pull Request image
  3. Kalian akan diarahkan pada laman Open Pull Request. Biarkan judul Pull Request tetap seperti apa adanya. Ubahlah deskripi sesuai dengan commit description yang sama pada saat proses unggah. image
  4. Jika telah sesuai, klik Create Pull Request. Setelah pull request terbuat, mohon untuk memberikan kabar kepada tim technial untuk melakukan review dan pengecekan hingga proses merge
  5. Tunggu hingga proses review dan proses merging diselesaikan. Jika terdapat permintaan pengubahan, lakukan perubahan sesuai dengan instruksi tim technical.
  6. Selesai.
Clone this wiki locally