Cara Hugo meng-embed shortcode codepen

Blogging dengan topik coding tidak terlepas dari yang namanya source code. Biasanya kalau posting artikel di WordPress yang berisi potongan kode program, bisa copy paste langsung ke dalam body text.

Untuk web static berbasis Hugo tidak bisa demikian ferguso. Data konten yang disimpan dalam file Markdwond tidak mengizinkan copy-paste kode program langsung dalam body text file Markdown. 😓

“Markdown adalah bahasa markah ringan dengan sintaksis pemformatan teks polos”, begitu kata Wikipedia. Jadi, kalau mau meng-insert script ke dalam file yang berektensi .md itu, bukan Markdown namanya, tapi Markcode. 😆

Ada syarat dan ketentuan yang berlaku menulis artikel yang berisi posting IG, embed tweet, embed vidoe YouTube, bahkan meng-insert kode program ke dalam format Markdwond.

Hugo telah menyertakan syarat dan ketentuan yang berlaku untuk insert sintag program ke dalam body text Markdown di Document -> Manajemen konten -> Shortcode.

Hugo shortcode codepen

Sayangnya, untuk sharing dan running program dari Codepen ke dalam posting SSG Hugo, tidak disediakan khusus seperti shortcode untuk embed script dari GitHub gists.

Shortcode untuk embed Codepen harus di custom sendiri templatenya oleh developer themes Hugo. Berikut caranya:

Part 1: Copy code

Copy code embed Codepen untuk mengambil script berbagi hasil coding. 😎

Script embed code seperti ini:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="fauzanmy" data-slug-hash="qBavEmb" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="Simple collapse sidebar menu with body overlay without jQuery">
  <span>See the Pen <a href="https://codepen.io/fauzanmy/pen/qBavEmb">
  Simple collapse sidebar menu with body overlay without jQuery</a> by Fauzan My (<a href="https://codepen.io/fauzanmy">@fauzanmy</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Part 2: Create Hugo shortcode file

Buat file baru dengan codepen.html lalu isi dengan script embed Codepen tadi. Kemudian simpan script tadi ke dalam folder shortcode theme Hugo kalian.

// File location
    /layouts/shortcodes/codepen.html
    /themes/<yourtheme>/layouts/shortcodes/codepen.html

🔥 QUICK TIPS: Nama file untuk template shortcode Hugo bebas saja. Tapi ingat nama file menjadi parameter shortcode yang akan dirender oleh sistem hugo.

Part 3: Modified script to custom shortcodes

Pada kasus ini, format shortcode dibuat dengan tiga parameter (username - id url - title) inputan yang akan me-replace script embed Codepen.

// Insert hugo shortcode in markdown file
   {{ < codepen fauzanmy qBavEmb "Simple collapse sidebar menu"> }}

// To access a parameter by position number
   {{ .Get 0 1 2 }}

Kemudian insert shortcode parameters access dengan cara mereplace ke dalam script ambed posting Codepen seperti berikut petunjuk gambar berikut ini:

Hasil akhir file template codepen.html adalah sebagai berikut:

<p class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="{{ .Get 0 }}" data-slug-hash="{{ .Get 1 }}" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="{{ .Get 2 }}">
  	<span>See the Pen <a href="https://codepen.io/{{ .Get 0 }}/pen/{{ .Get 1 }}">
  	  {{ .Get 2 }}</a> by {{ .Get 0 }} (<a href="https://codepen.io/{{ .Get 0 }}">
  	  @{{ .Get 0 }}</a>) on <a href="https://codepen.io">CodePen</a>
  	</span>
  </p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Dan berikut ini hasil render embed code dari Codepen.

Bagaimana! Mudah bukan? Kalau ada yang masih kurang jelas, jangan ragu untuk bertanya melalui kolom komentar dibawah.