Cara Mudah Menyemat Asciinema Ke Dalam Hugo
Table of Contents
Sebagai author blog khususnya yang berhubungan dengan perkomputeran, terkadang kita membutuhkan suatu media yang dapat menunjang isi konten. Ada banyak cara untuk menunjang isi konten diantaranya dengan screenshot dan video recording. namun jika kita dihadapkan dengan comandline interactive , rasanya tidak pas jika kita menggunakan screenshot atau video recording sebagai sarana dokumentasinya.
Saatnya kita berkenalan dengan Asciinema, dengan alat ini mari lupakan aplikasi recording dan video yang tampak mengerikan akibat blur, fitur utama yang ditawarkan asciinema diantaranya.
- simple recording, jalankan dengan perintah
asciinema rec
dan menyelesaikannya denganCtrl-D
. - copy & paste, setiap kali kamu ingin mencoba perintah dari hasil recording, cukup dengan drag the cursor on text dan copy it. yah.. semuanya hanyalah text bukan sekumpulan pixel.
- penyematan, yah tentunya fitur ini yang diharapkan, dan akan menjadi bahasan kita hari ini.
Get Started
Awalnya saya mengikuti panduan dari tonylyke, namun ada kendala ketika mengikuti panduannya. asciinema yang saya embed selalu tidak ter-generate atau tidak tampak, saya coba debug, namun tidak ada indikator error apapun. Dan pada akhirnya saya menyerah. saya mencari alternatif lain, dan akhirnya menemukannya.
gohugo-asciinema, suatu modul hugo yang menawarkan fungsi penyematan Asciinema secara simple dan mudah
Penginstalan
modul hugo ditenagai oleh Go Modules. dan kita perlu go compiler untuk menjalankannya. Di Voidlinux kamu bisa menjalankan perintah untuk menginstalnya.
sudo xbps-install -S go
oke, saatnya instalasi
- jalankan perintah berikut, untuk menjadikan repo blog kita sebagai tempat module.
hugo mod init gitlab.com/novores/blog-repo
- selanjutnya, kita memenuhi dependency dari gohugo-asciinema dengan perintah.
hugo mod get -u -v cj.rs/gohugo-asciinema
- lalu edit konfigurasi mu,
config.yaml
/config.toml
dengan menambahkan referensi modul.- yaml
module: replacements: "cj.rs/gohugo-asciinema->gohugo-asciinema" imports: - path: cj.rs/gohugo-asciinema
- toml
[module] [[module.imports]] path = "cj.rs/gohugo-asciinema"
- yaml
Penggunaan
gunakan shorcode berikut ke dalam page yang ingin kamu sematkan asciinema.
contoh:
{{< asciicast src="free.cast" poster="npt:0:04" autoPlay=true loop=true rows="10" cols="80" >}}
NOTE
pastikan file ditempatkan dalam folder yang sama denganindex.md
, ini contoh pohon file sistem sayacontent/blog/linuxupskillchallenge-day1/ ├── cover.png ├── df.cast ├── free.cast ├── index.id.md ├── ls.cast ├── ssh.cast ├── uname.cast └── uptime.cast
Selain parameter diatas kita juga dapat menggunakan parameter yang lain lihat asciinema-player options
dan hasilnya akan seperti ini.
Terimakasih telah membaca 👋
Referensi
- https://asciinema.org/
- https://github.com/asciinema/asciinema-player#api
- https://github.com/cljoly/gohugo-asciinema