Menambahkan Reader Bar sebagai indikator halaman dan bagaimana cara memodif-ikasinya
Reader Bar awalnya dibuat untuk jQuery yang dipergunakan untuk meng-visualisasikan 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
$ npm install eleventy-plugin-reader-bar
const ReaderBar = require('eleventy-plugin-reader-bar')
module.exports = function(eleventyConfig) {
eleventyConfig.addPlugin(ReaderBar)
}
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%.
{% 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.
Sayangnya saya tidak suka dengan tampilan plugin ini, yaitu dengan adanya gap antara tepian atas dan Reader Bar-nya. Setelah dicermati kodenya, 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.
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.
.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 menginstallnya.
"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.
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
dapatkan notifikasi saat artikel baru diterbitkan, langsung ke dalam inboxmu
Layanan ini didukung oleh Buttondown.