April 23, 2021

11ty: Reader Bar

Menambahkan Reader Bar sebagai indikator halaman dan bagaimana cara memodifikasinya

Reader Bar awalnya dibuat untuk jQuery yang dipergunakan untuk mengvisualisasikan panjang dan posisi scroll halaman melalui garis memanjang horisontal (biasanya ada di pinggir bagian atas halaman) dan sebuah tombol fungsi untuk kembali ke awal halaman.

Di Eleventy sendiri sudah ada sebuah plugin untuk membantu menampilkan Reader Bar dengan mudah yaitu dengan memasang Eleventy Reader Bar Plugin.

Cara pemasangannya sangat mudah, yaitu :

  1. Install package melalui NPM
$ npm install eleventy-plugin-reader-bar
  1. Mengatur configuration di eleventy.js
const ReaderBar = require('eleventy-plugin-reader-bar')

module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(ReaderBar)
}
  1. Kemudian di dalam template/layout sisipkan blok HTML div.reader-bar-start, saya menyisipkan kode ini langsung dibawah baris HTML <body> dan menutupnya dibagian bawah sebelum </body>. Tujuannya adalah agar blok reader-bar-start bisa mengwrapping keseluruhan layoutnya.

Jika keseluruhan layout tidak masuk ke dalam blok div tersebut, maka tampilan Reader Bar tidak akan akurat. Bisa saja terjadi baru scroll sedikit namun indicator sudah menunjukkan 100%.

  1. Terakhir sisipkan kode Nunjucks {% ReaderBar %} dibawah tags {% content | safe %}.
{{ content | safe }}
{% ReaderBar "2px", "", "#e63946" %}

Kode diatas akan menampilkan Reader Bar dengan tebal 2px dan warna merah seperti di artikel ini. Dokumentasi lebih lengkap bisa dibaca disini

Modifikasi

Sayangnya saya tidak suka dengan tampilan plugin ini, yaitu dengan adanya gap antara tepian atas dan Reader Bar-nya. Setelah dicermati kode sumbernya, ternyata pembuat plugin menerapkan aturan di CSS jarak Reader Bar dan pinggiran atas adalah 2px secara otomatis. Sehingga dari sini muncul gap tersebut.

Saya tidak ingin ada gap jadi harus memodifikasi nilai di CSSnya. Saya tidak menerapkan CSS baru untuk menimpa aturan defaultnya, namun memilih untuk merubahnya langsung dari kode sumber. Sedikit lebih rumit tapi hasilnya memuaskan.

  1. Clone kode sumber lewat Git ke lokal, saya menyimpannya di folder _tmp di root jurnal ini.
$ git clone https://github.com/thigoap/eleventy-plugin-reader-bar.git  _tmp
$ cd _tmp

Kemudian edit CSS yang dimaksud. Dalam hal ini adalah baris berikut :

<!-- reader bar -->
<div id="readerBarContainer" style="height:${height};width:100%;background-color:${bgColor};position:fixed;top:2px;left:0;z-index:100;transition:0.2s;">
<div id="readerBar" style="height:${height};width:0;background-color:${fillColor};position:fixed;top:2px;left:0;z-index:200;transition:0.2s;"></div>
</div>

Nilai top:2px saya rubah menjadi 0px agar tidak muncul gap, merubah warna background untuk tombol back to top serta menyesuaikan agar ukurannya sedikit lebih besar.

  1. Setelah selesai edit saatnya mempacking ulang dengan NPM untuk mendapatkan berkas .tgz.
$ npm pack

Proses ini akan menghasilkan sebuah file dengan akhiran tgz. Nama file dan versinya bisa disesuaikan dengan mengubahnya di package.json sebelum melakukan pack.

Saya memindahkan file tgz tersebut ke direktori _tmp di dalam direktori jurnal dan memanggil/menginstallnya.

  1. Edit file package.json dan masukkan secara manual dependecies-nya.
"dependencies": {
"reader-bar": "file:./_tmp/eleventy-plugin-reader-bar-0.2.0.tgz"
}

file package.json yang dimaksud ini adalah yang berada di direktori jurnal, bukan di direktori letak module tadi diunduh.

  1. Install dengan menjalankan perintah npm install.

Folder _tmp ini harus diikutkan saat push ke repository (Github/Gitlab) karena saat dibuild dengan Netlify akan mencari eleventy-plugin-reader-bar di path lokal tersebut.

Berlangganan artikel

Suka dengan artikel seperti ini?, yuk berlangganan melalui RSS atau ketik emailmu di bawah ini untuk mendapatkan update artikel terbaru langsung ke inboxmu.

Kamu bisa berhenti berlangganan dengan mudah kapan saja.

Powered by Buttondown.