qubyte codes

Kode Qubyte

Repositori ini berisi generator situs statis dan konten untuk https://qubyte.codes.

Pembangkitnya

Generator sebagian besar terdapat di index.js. Sebagian besar pekerjaan berat dilakukan oleh sistem pembuatan grafik khusus dan ditandai, yang mengambil file penurunan harga dan memprosesnya menjadi konten HTML. Namun itu tidak sempurna, dan diperlukan perbaikan pada monyet. Modul lib/render.js melakukan patching ini, dan menambahkan penyorotan sintaksis dan pemformatan rumus matematika.

serve.js adalah server pengembangan. Ketika file berubah, bagian dari grafik build dijalankan kembali untuk mendapatkan output yang diperbarui.

File sumber terdapat di direktori src dan konten. Setelah dibangun, direktori publik dibuat, dan beberapa file sumber ini disalin (file yang tidak memerlukan kompilasi, seperti pekerja layanan). File lain harus dibuat dan ditempatkan di direktori publik saat dibuat.

netlify.toml adalah konfigurasi untuk Netlify, yang menghosting blog saya (saya sangat merekomendasikannya). Pada saat penulisan, file ini hanya berisi konfigurasi untuk header. Ini dioptimalkan untuk keamanan dan untuk cache browser CSS. Awalnya saya menghosting blog ini di tetesan DigitalOcean menggunakan NGINX. Konfigurasi untuk itu masih menjadi bagian dari repo ini, nginx.conf.

CSS

Saya menggunakan postcss untuk mengkompilasi CSS. Pada prinsipnya, CSS dapat digunakan tanpa itu. Sebagian besar postcss digunakan untuk menggabungkan dan mengecilkan CSS. Output CSS di-hash, dan hash tersebut menjadi bagian dari nama file CSS. Ini untuk menghilangkan cache, karena CSS diberi waktu cache yang panjang atau tidak terbatas untuk menghindari pemblokiran pemuatan halaman setelah dimuat satu kali.

Dengan pengecualian penyorotan sintaksis, situs ini sebagian besar menghindari penggunaan kelas-kelas dalam HTML sebagai pengait untuk CSS, dan malah menyatakan bahwa markup semantik memberikan konteks yang cukup untuk dipatuhi oleh CSS.

Ikon

Blog ini adalah Aplikasi Web Progresif (PWA), dan memiliki ikon dengan berbagai ukuran. Salah satunya juga favicon.

Postingan (konten)

Direktori ini berisi sumber penurunan harga postingan yang diterbitkan. Setiap postingan memiliki pembukaan JSON yang berisi berbagai metadata:

nama	keterangan
tanggalwaktu	Stempel waktu publikasi postingan. Jika hal ini terjadi di masa mendatang maka postingan tidak akan dirender.
judul	Judul postingan.
keterangan	Deskripsi postingan. Ini ditambahkan ke kepala HTML sebagai deskripsi meta dan deskripsi meta twitter. Yang terakhir ini digunakan oleh twitter untuk mengisi kartu twitter.
draf	Jika benar, postingan tidak akan ditampilkan.
tag	Daftar tag. Ini ditampilkan di bagian atas setiap entri, dan juga digunakan saat berbagi ke twitter dan mastodon melalui tautan di bagian bawah setiap kiriman.
sebutan web	Daftar webmention dari blog lain.
skrip	Daftar objek dengan bidang href . Ini akan ditambahkan sebagai skrip tipe modul ke kepala postingan.

Templat

Saya menggunakan templat setang untuk merender konten ke dalam halaman. Beberapa di antaranya berisi halaman, dan lainnya merupakan komponen umum halaman. Mereka cukup kuno, tetapi melakukan pekerjaan dengan baik.

Pekerja layanan dan manifes

Pekerja layanan dan manifes adalah file yang memungkinkan blog ini berperilaku sebagai PWA. Untuk sebagian besar, ini menyediakan cache khusus. Hal ini juga memungkinkan blog ini untuk "diinstal" di android (walaupun saya tidak terlalu tertarik dengan fungsi ini).