[🛠] Menambahkan Kalender dan Statistik Aktivitas ke Sidebar Blog GitHub Pages

✨ Ringkasan GPT-5.5 　

Catatan tentang menambahkan kalender postingan dan statistik aktivitas kategori ke sidebar tepat setelah blog dibuka kembali, lalu membuat tampilan bulan berdasarkan tulisan saat ini dan navigasi arsip bulanan.

Setelah merapikan tulisan restart blog, masalah berikutnya langsung terlihat.

Tulisan mulai dibuat lagi. Namun rasa bahwa blog hidup kembali masih kurang. Daftar kategori saja tidak cukup memperlihatkan kapan blog bergerak, hari mana yang punya catatan, atau alur terbaru seperti apa yang sedang ada.

Untuk menulis Daily Review lagi, rasa terhadap tanggal itu penting.

Blog ini pada akhirnya berpusat pada “pada hari apa aku meninggalkan apa.” Namun blog GitHub Pages tidak punya navigasi tanggal yang muncul alami seperti Naver Blog. Karena ini blog statis, aku justru harus membuatnya sendiri.

Jadi fitur yang kupasang malam ini bukan sekadar dekorasi.

Ini adalah pekerjaan mengubah sidebar dari hiasan pendamping daftar tulisan menjadi alat navigasi yang menunjukkan tanggal dan alur aktivitas.

Yang pertama kupasang adalah kalender kecil dan langsung

Commit pertama adalah f6971fc.

f6971fc  feat: add sidebar activity widgets

Saat itu file baru yang dibuat ada dua.

_includes/sidebar-calendar.html
_includes/sidebar-nav-stats.html

Aku menambahkan include kalender ke sidebar.html.

{% include sidebar-calendar.html %}

Kalender pertama dibuat hanya dengan Liquid, tanpa JavaScript.

Dari site.posts, tulisan tersembunyi dikeluarkan, lalu hari pertama dan tanggal terakhir bulan berjalan dihitung. Perhitungan tahun kabisat untuk Februari pun diproses di dalam Liquid.

{% assign calendar_posts = site.posts | where_exp: "post", "post.hidden != true" %}
{% assign calendar_year = site.time | date: "%Y" %}
{% assign calendar_month = site.time | date: "%m" %}

Di dalam bulan itu, tanggal yang memiliki tulisan menjadi link, sedangkan tanggal yang tidak memiliki tulisan tetap berupa angka. Dasar awalnya adalah site.time. Jadi pada titik ini, kalender adalah widget sidebar yang menunjukkan “status postingan bulan ini.”

Sebatas ini saja efeknya langsung terasa.

Blog mulai terasa bergerak kembali. Berbeda dari hanya melihat daftar judul, kalender menunjukkan kepadatan catatan. Di hari mana tulisan menumpuk, hari mana kosong, dan hari ini ada di mana bisa terlihat sekilas.

Aku juga menambahkan informasi aktivitas ke kategori

Kalau hanya kalender yang dipasang, alur tanggal memang terlihat, tetapi alur per kategori masih tumpul.

Jadi sidebar-nav-stats.html juga kubuat bersama.

Include ini melihat URL item sidebar sebagai path kategori, lalu memfilter ulang tulisan yang termasuk kategori itu.

{% assign stat_posts = site.posts | where_exp: "post", "post.hidden != true" %}
{% assign stat_categories = include.url | remove_first: "/" | split: "/" %}

Misalnya, untuk /daily-review, ia menampilkan jumlah tulisan kategori daily-review; untuk /diary/ai, ia hanya menyisakan tulisan yang memuat diary dan ai sekaligus.

Output-nya sederhana.

Jumlah tulisan · Tanggal tulisan terbaru

Alasan bagian ini kusukai adalah sidebar keluar dari sekadar daftar isi.

Terlihat berapa banyak tulisan Hari ini, kapan tulisan Kecerdasan Buatan terakhir naik, dan apakah GitHub Pages Blog benar-benar sedang berjalan. Blog hidup atau mati sering lebih jelas dari tanggal terbaru daripada jumlah tulisan.

Kepadatan mobile langsung kusesuaikan

Begitu kalender dipasang, kepadatan mobile langsung menjadi masalah.

Di desktop, sidebar punya ruang, tetapi di mobile ia turun ke bawah isi atau bercampur dengan menu. Kalau kotak kalender besar atau label jumlah tulisan panjang, satu widget memakan terlalu banyak layar.

Jadi di 17d074d dan b401d8b, label aktivitas sidebar dan kepadatan kalender langsung kukecilkan.

17d074d  fix: tighten sidebar activity labels
b401d8b  [Fix] | Sidebar calendar: Improve mobile density

Di SCSS, kotak tanggal dikunci dengan aspect-ratio: 1, lalu ukuran font kecil dan radius 4px dipakai. Informasi aktivitas kategori dibuat kecil agar terlihat dalam satu baris.

Yang penting di sini adalah tidak menjadikan kalender sebagai “tokoh utama”.

Kalender adalah alat yang membantu navigasi blog. Ia tidak boleh lebih besar daripada isi tulisan. Terutama pada blog catatan, sidebar boleh memberi informasi, tetapi tidak boleh mengganggu membaca.

Aku mengubahnya menjadi bulan berdasarkan tulisan saat ini

Masalah yang lebih penting segera terlihat.

Kalau kalender berbasis site.time, saat membaca tulisan tahun 2025 pun kalender yang muncul adalah Mei 2026. Kalau begitu, kalender tidak menjelaskan konteks tulisan saat ini.

Jadi di ccb58d5, tanggal dasarnya kuubah.

ccb58d5  [Fix] | Sidebar: Refine calendar behavior

Intinya ada di bagian ini.

{% assign calendar_source_date = site.time %}
{% if page.date %}
  {% assign calendar_source_date = page.date %}
{% endif %}

Jika halaman memiliki date, kalender menampilkan bulan dari tanggal itu. Pada halaman tanpa tanggal, ia tetap memakai site.time.

Perubahan ini mengubah sifat kalender.

Kalender pertama adalah “status blog bulan ini.” Sekarang ia menunjukkan “waktu tempat tulisan yang sedang dibaca berada.” Kalau membaca Daily Review lama, alur catatan pada bulan itu bisa dilihat, dan tulisan lain di bulan yang sama juga bisa ditemukan.

Ini jauh lebih cocok untuk blog catatan yang berpusat pada tanggal.

Beberapa tulisan di hari yang sama kuurai menjadi daftar

Dalam commit yang sama, daftar tulisan per tanggal juga ditambahkan.

Kalau satu hari hanya punya satu tulisan, tanggal bisa langsung diarahkan ke tulisan itu. Namun kalau satu hari punya beberapa tulisan, masalah muncul. Pada hari pertama restart saja, Daily Review dan arsip percakapan AI ada di tanggal yang sama.

Jadi untuk tanggal yang memiliki beberapa tulisan, link tanggal tidak langsung menuju satu tulisan. Ia berpindah ke daftar tulisan tanggal itu.

<section id="sidebar-calendar-2026-05-25-posts" class="sidebar-calendar__post-list">
  <h4 class="sidebar-calendar__post-list-title">Tulisan 25 Mei</h4>
  <ul>
    ...
  </ul>
</section>

Aturan pada titik ini sederhana.

1 tulisan: menuju tulisan tersebut
2 tulisan atau lebih: menuju daftar tulisan untuk tanggal itu

Ini bukan aturan yang sempurna, lebih seperti cara menyelesaikan masalah beberapa tulisan di tanggal yang sama saat itu juga. Namun yang penting, masalahnya tidak disembunyikan.

Sistem harus mengakui bahwa satu tanggal bisa memiliki beberapa tulisan. Kalau dalam satu hari blog bisa memuat Daily Review, percakapan AI, dan catatan pengembangan, penanganan ini memang diperlukan.

JavaScript enhancement juga kupasang

Dengan kalender Liquid saja, navigasi berpusat bulan saat ini memang bisa, tetapi berpindah antarbulan terasa tidak nyaman.

Jadi di b06b6d6, aku menambahkan JavaScript.

b06b6d6  [Feat] | Sidebar calendar: Add archive navigation

File barunya ini.

assets/js/custom/sidebar-calendar.js

Lalu aku mendaftarkannya di after_footer_scripts dalam _config.yml.

after_footer_scripts:
  - /assets/js/custom/dark-theme.js
  - /assets/js/custom/sidebar-calendar.js

Di sisi Liquid, data tulisan diturunkan sebagai JSON.

<script type="application/json" data-calendar-posts>
[
  {
    "title": "...",
    "url": "...",
    "date": "2026-05-25"
  }
]
</script>

JavaScript membaca data ini lalu membuat postsByDate, postCountByMonth, postCountByYear, dan latestPostMonthByYear. Setelah itu ia merender tombol bulan sebelumnya/berikutnya, month input, tombol jumlah tulisan per tahun/bulan, dan daftar tulisan dinamis per tanggal.

Struktur ini terasa bagus karena fallback tidak dibuang.

Jika JavaScript tersedia, perpindahan bulan dan navigasi archive menjadi nyaman. Tanpa JavaScript pun, Liquid sudah merender bulan berdasarkan tulisan saat ini dan daftar fallback untuk tanggal yang punya beberapa tulisan.

Keseimbangan ini penting dalam blog statis.

Yang berubah hari ini

Alur dari malam sampai dini hari ini seperti ini.

f6971fc  Menambahkan kalender sidebar dan statistik aktivitas kategori
17d074d  Mengetatkan kepadatan label aktivitas sidebar
b401d8b  Menyesuaikan kepadatan kalender mobile
ccb58d5  Menangani bulan berdasarkan tulisan saat ini dan tanggal dengan beberapa tulisan
b06b6d6  Menambahkan JavaScript enhancement untuk navigasi archive bulanan

File intinya seperti ini.

_includes/sidebar.html
_includes/sidebar-calendar.html
_includes/sidebar-nav-stats.html
assets/js/custom/sidebar-calendar.js
_sass/custom/customOverride.scss
_config.yml

Dalam satu kalimat:

Aku menambahkan lapisan navigasi ke sidebar blog yang menunjukkan alur tanggal dan aktivitas kategori.

Hasil

Sekarang sidebar blog bukan lagi sekadar daftar kategori.

Ia menunjukkan bulan tempat tulisan saat ini berada, menandai tanggal yang memiliki tulisan, dan mengurai beberapa tulisan di hari yang sama menjadi daftar. Item kategori diberi jumlah tulisan dan tanggal tulisan terbaru. Jika JavaScript aktif, archive blog bisa dijelajahi dengan berpindah antar tahun dan bulan.

Dari sudut pandang portofolio, poin pekerjaan ini adalah meningkatkan kemampuan navigasi tanpa server.

Tidak ada DB terpisah, tidak ada API. Dengan site.posts dari Jekyll, Liquid, SCSS, dan JavaScript kecil, aku menutup titik lemah blog statis. Catatan punya tanggal. Ketika tanggal itu ditampilkan di UI, blog tidak terlihat seperti tumpukan tulisan, tetapi seperti sistem yang bergerak mengikuti waktu.

Kalender yang kupasang hari ini adalah awal dari itu.