Cara Mudah Menyemat Asciinema Ke Dalam Hugo

• 17/09/2022
• 2 menit membaca

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 dengan Ctrl-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"
    

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 dengan index.md, ini contoh pohon file sistem saya

content/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

Related Posts

• Menambahkan Cactus Comments ke dalam Hugo