Asciidoc Di Hugo
Akhirnya, kesampaian juga niat saya untuk menulis blog di AsciiDoc. Memang, jalan seorang petualang tidak mudah. Pertama, saya harus pindah dari zola ke hugo, dilanjutkan dengan belanja tema hugo. Eh, ternyata tema hugo itu banyak yang maksa penulis konten dan suka-suka nampilin halamannya. Status Asciidoctor sebagai plugin asing memperparah keadaan. Setelah berpusing ria mengkompromikan mereka, ternyata saya tidak punya banyak pilihan. Tema yang sederhana tapi enak dipandang inilah yang akhirnya menjadi pilihan.
Saya jadi tiba-tiba berpikir, bahwa sifat seseorang itu tercermin dari karyanya. Begitu juga dengan hal "sederhana" semacam tema Hugo. Kita ngobrol soal Hugo sendiri misalnya. Dia pengennya serba cepat dan semuanya terintegrasi, tapi tidak mau kehilangan fitur. Akibatnya, jalan paling lurus menulis dengan Hugo adalah menggunakan markdown dan shortcodes bawaan dari Hugo. Artinya, kita harus menulis markdown cara Hugo. Itu bagus! Yah, asalkan kita jangan lirik-lirik lagi. Sifat Hugo adalah dominan dan egois, mau menang sendiri.
Lain lagi dengan perancang tema Hugo. Banyak di antara mereka itu suka maksa, minta taruh konten harus di suatu tempat atau mengambil alih peran Hugo dengan caranya sendiri. Padahal, sebagai sebuah framework, Hugo sudah punya jalannya sendiri, sudah punya maksud dan tujuan sendiri dengan masing-masing item konfigurasi yang ada di config.toml
. Tema terbaik adalah tema yang mau bekerja sama dengan Hugo. Dan, yang seperti ini butuh perhatian yang lebih dari si perancang tema. Tidak bisa asal menjejalkan fitur-fitur semaunya saja. Sifat tema Hugo, ada yang ngawur dan ada yang mau bekerja sama dengan Hugo. Tentu saja, saya tidak suka yang ngawur. Semua itu dibuat ada tujuannya. Tema itu cuma numpang, terus kok bisa-bisanya berbuat seenaknya?
Lain lagi nasib Asciidoctor. Asciidoctor itu hidup dalam dunianya sendiri dan punya idealismenya sendiri. Dia sebenarnya tidak terlalu peduli dengan orang lain. Akan tetapi, ternyata banyak yang menyukai AsciiDoc, sampai-sampai ada permintaan untuk bisa menulis AsciiDoc di Hugo. Namanya static site generator terkenal, ya diladeni dong permintaan itu. Tapi, karena pada dasarnya mereka tidak saling kenal dan tidak peduli, jadinya ya ala kadarnya saja. Mengawinkan keduanya ditambah dengan tema yang kadang-kadang sok tau jadi pekerjaan yang menyusahkan. Itulah yang saya alami.
Saya bukan perancang visual yang baik. Paling banter cuma bisa memakai saja. Padahal tema itu bagusnya yang enak dibaca lama-lama, dan kalau ada bagian-bagian penting, jadi kelihatan mencolok. Nggak usah yang fancy. Tidak butuh! Yang penting clean, readable, responsive, and meaningful. Pilihan paling tidak menyakitkan jatuh pada Even. Ya sudah deh, sementara saya pakai ini dulu sampai lama. Saya rada kapok ganti tema. Jauh lebih susah dari ganti tema jaman Wordpress tahun 2010 ternyata.
Memaksa Hugo dan Asciidoctor bekerja sama
Sebenarnya, resminya, Hugo bilang dia mendukung Asciidoctor. Kenyataannya, sering HTML yang dihasilkan oleh Asciidoctor itu tidak dikenali oleh tema Hugo. Akibatnya, yang bisa kelihatan indah kalau memakai markdown + shortcodes, jadi hambar atau bahkan nyeleneh kalau dengan Asciidoctor. Capek saya ganti-ganti tema sama otak-atik konfigurasinya.
Padahal ya, ini kan pada dasarnya cuma untuk ngeblog kan ya? Nggak usah Asciidoctor nggak papa. Bahkan kalau perlu yang rada-rada teknis, si Hugo dah nyediain semua. Tapi, kayaknya sih ya kalo melihat ini, Hugo dalam waktu dekat nggak akan bisa nggambar diagram langsung dari manuskrip. Ya sudah, demi alasan flow, saya bertahan untuk memperjuangkan Asciidoc sampai bisa tampil normal di Hugo. Awalnya, bahkan saya harus ngotak-atik syntax highlighting, tapi akhirnya saya menyerah. Yang penting ada warnanya aja deh.
Hasil Usaha yang Melelahkan
Nah, mari kita lihat apa yang bisa kita lakukan dengan AsciiDoc.
Source code
Kalau di bawah ini kan source code, jadi ya standar aja.
function print_hello()
print("hello") (2)
end (1)
1 | Ini nomer satu, tau kan |
2 | Kalo ini nomer dua, |
function print_hello() {
print("hello");
}
Diagram
Kalau diagram, lain lagi. Awalnya saya nulis begini:
@startuml
alice -> bob
@enduml
terus tampilnya jadi begini:
Yang tadinya begini:
@startuml
title "Ini nggambar sendiri lho"
rectangle 1a
rectangle 1b
rectangle 1c
rectangle 2
rectangle 3a
rectangle 3b
rectangle 3c
1a --> 2
1b --> 2
1c -> 1b
1a <- 1c
2 --> 3a
2 --> 3b
2 --> 3c
3a -> 3c
3c --> 3b
3a -> 3b
1a ---> 3a
1b ---> 3c
@enduml
jadinya yang kemarin itu:
Kalau mindmap seperti ini:
@startmindmap
+ akar
++ kanan
++ kanan juga
-- kiri
-- kiri lagi
---_ kiri nggak pake balon
@endmindmap
hasilnya jadi begini:
Dah, capek, yang lain aja.
Tabel
Ini salah satu kehebatan AsciiDoc, tabelnya bisa dimacem-macemin, markdown sih lewat.
[cols="1,^2"]
|===
|Cell in column 1, header row |Cell in column 2, header row
|Cell in column 1, row 2
|Cell in column 2, row 2
|Cell in column 1, row 3
|Cell in column 2, row 3
|Cell in column 1, row 4
|Cell in column 2, row 4
|===
Tampilnya jadi begini nih:
Cell in column 1, header row | Cell in column 2, header row |
---|---|
Cell in column 1, row 2 |
Cell in column 2, row 2 |
Cell in column 1, row 3 |
Cell in column 2, row 3 |
Cell in column 1, row 4 |
Cell in column 2, row 4 |
Lain-lain
Kutipan akan tampil begini:
Adalah tindakan disengaja yang menyalahi keyakinannya sendiri ataupun merugikan kepentingannya sendiri, tanpa diketahui apakah dia memahami apa yang dilakukannya atau tidak
Kotak peringatan akan jadi begini:
WARNING artinya peringatan. Jangan lupa! |
NOTE artinya catatan. Diingat-ingat ya… |
Dah, saatnya tidur