Belakangan ini saya agak telat nulis write-up, tapi kemarin sudah “terlunaskan”. Alasan telatnya adalah satu minggu yang lalu saya mencoba memindahkan VHD lab pentest ke volume baru tapi akhirnya corrupt sedikit me-revamp blog ini.

Sebagai catatan sendiri dan mungkin berguna untuk yang mampir, di postingan ini saya hanya akan membahas sedikit bagian yang mencolok yang saya ubah. Desain kasarnya bisa dilihat digambar berikut.

image-20211015074555598
The power of Ms. Paint

R1: Float the ToC

Tulisan yang saya posting umumnya adalah ‘semacam’ walkthrough, tentunya floating ToC (Table of Content) adalah salah satu hal yang diperlukan oleh pembaca (kalau ada yang baca) untuk loncat-loncat antar section. Sayangnya ToC bawaan tema dasar blog ini, yaitu PaperMod, belum floating.

Solusi yang terpikirkan tanpa penggantian tema atau pengunaan plugin yang keduanya jelas berat di JavaScript, dan juga tanpa mengacak-ngacak tema dasar adalah dengan membagi dua area konten setelah header menjadi area ToC dan area konten teks yang rasio-nya adalah 3:7. Kedua area ini dibungkus oleh satu kontainer flex.

image-20211015105411374

Supaya area konten tetap dengan lebar 100%, hal selanjutnya adalah mengeluarkan si area ToC ini dari kontainer dengan meminuskan properti margin-left-nya sebesar lebarnya sendiri (-1*0.3*100%).

image-20211015111941266

Sisanya hanya tinggal styling dan penyesuaian posisi dari ToC tersebut.

Desain ToC ini nyolong terinspirasi dari blognya 0xdf yang pakai bootstrap toc.

R2: Show Latest Posts

Selanjutnya adalah “Latests Posts” berikut.

image-20211015132036300

Penambahan bagian “Latests Posts” ini sebenarnya hanya sekadar copy paste template halaman arsip yang dibuat ke template parsial lalu dipanggil di layouts/list.html.

...
{{- if (and .Site.Params.profileMode.enabled .IsHome) }}

{{- partial "c_profilemode.html" . }}
{{- partial "c_latest_posts.html" . }}
...

Dan berikut potongan kode yang relevant dari template c_latest_posts.html:

  {{ range first 5 (.Site.RegularPages) }} /* index 0 = newest */
  {{ .Title }}
  ...
  {{ .Date.Format "Jan 02" }}
  ...
  {{- printf "%d min" .ReadingTime }}
  ...
  {{- end }}

Desain untuk “Latests Posts” ini nyolong terinspirasi dari tema Hermit, faultable.dev, dan taniarascia.com.

R3: Show Tags in a Post Entry

Tujuan menampilkan tag pada post entry ini simplenya adalah untuk memberi gambaran tentang topik apa yang di bahas di suatu postingan tersebut.

image-20211015144040968

Untuk menampilkan tag di setiap post entry, saya perlu mengubah total struktur HTML untuk post entry. Kode yang digunakan untuk menampilkan tag beserta tautannya merupakan modifikasi dari kode yang ada pada dokumentasi Hugo ini: Taxonomy Templates | Hugo (gohugo.io).

{{ $taxo := "tags" }}
{{ with .Param $taxo }}
	{{ $tag_limit := 7 }}
	{{ if ne (len .) 0 }}
		{{- range $k, $v := . -}}
		{{ if lt (add $k 1) $tag_limit }}
			{{- if and (gt $k 0) -}}· {{- end -}} 
			{{- with $.Site.GetPage (printf "/%s/%s" $taxo $v) -}}
			<a href="{{ .Permalink }}">{{- $v -}}</a>
			{{- end -}}
			{{- end -}}
		{{- end -}}
	{{- end -}}
{{ end }}

To be cont’d

Selain 3 hal diatas, ada beberapa elemen/fitur bawaan yang diotak-atik seperti pagination dibuang, search indexing, navbar, atau bahkan cuma sekadar iseng mainin animasi CSS pseudo selector yang nyolong terinspirasi dari yui540 dan sai-chan. Tapi karena masih berantakan juga strukturnya, contohnya halaman CTF, jadi mungkin dilanjut di lain waktu.