The Great Apes — Blog Pribadi

Blog pribadi — "The Great Apes" — tayang di https://www.amazthegreatape.com/. Situs statis multi-halaman tanpa framework dan tanpa langkah build, di mana setiap kemampuan dinamis ditambahkan oleh serverless function atau listener Firebase, bukan oleh bundler.

Sorotan

• Tanpa framework, tanpa bundler, dan itu memang rancangannya — halaman HTML biasa plus JavaScript vanilla dengan pola modul IIFE. Header dan footer disuntikkan saat runtime oleh loadComponent() yang mengambil potongan HTML, sehingga navigasi cukup diedit sekali di layout/header.html, bukan di tiap halaman.
• Sistem cache-busting tiga lapis yang benar-benar menjangkau tab yang masih terbuka — URL aset berversi (css/style.css?v=…) memaksa pengambilan ulang, header Cache-Control per folder menjaga HTML tetap divalidasi sementara CSS/JS berversi boleh di-cache tujuh hari, dan konstanta ASSET_VERSION yang dibandingkan dengan version.json ber-no-store memicu tepat satu kali reload. Lapis ketiga ada karena dua lapis pertama tidak bisa menolong tab yang dibiarkan terbuka berhari-hari atau halaman yang dipulihkan dari bfcache; halaman admin sengaja dilewati, sebab reload di tengah penulisan artikel akan membuang draf.
• Tag Open Graph dinamis tanpa merender ulang seluruh situs di server — api/artikel.js membaca _artikel.html dan merender meta OG per artikel, dengan /artikel.html dialihkan ke sana lewat vercel.json. File artikel.html di root adalah keluaran yang masuk gitignore, bukan berkas sumber.
• Pembaca PDF yang dialirkan dari Google Drive — api/drive-pdf.js berjalan di Edge runtime dan mem-proxy range request untuk pembaca "Pojok Baca" berbasis pdf.js, meneruskan Content-Range; Response di Edge tidak pernah meneruskan Content-Length, itulah sebabnya penanganan range ditulis eksplisit.
• Kunci AI tidak pernah sampai ke browser — chatbot berbicara ke api/chat.js, proxy DeepSeek di sisi server. Konfigurasi Firebase di JS klien memang konfigurasi publik; keamanannya bersandar pada rules basis data, bukan pada menyembunyikannya.

Fitur Utama

1. Artikel — tulisan dengan komentar dan reaksi yang ditopang Firebase Realtime Database, plus endpoint pencarian dan indeks konten.
2. Galeri — kumpulan foto yang digerakkan data/galeri.json dan Firebase, dengan tampilan lightbox.
3. Pojok Baca — pembaca PDF di dalam browser yang mengalirkan buku lewat proxy Drive, sehingga tidak ada berkas besar yang ikut masuk repo.
4. Chatbot — asisten bertenaga DeepSeek yang bisa dipanggil dari situs, di-proxy di sisi server.
5. Testimoni, portofolio, dan kontak — konten semi-statis di data/*.json yang dipadukan dengan data langsung Firebase dan endpoint kirim-pesan.
6. Panel admin — login Firebase Auth yang menggerbangi pengelolaan artikel, galeri, dan testimoni langsung dari browser.

Tech Stack

• HTML + CSS + JavaScript vanilla (ES6, modul IIFE, tanpa framework)
• Firebase Realtime Database, Auth, dan Storage (SDK compat v8.10.1, dimuat dari CDN)
• Vercel Serverless Functions (api/*.js, handler(req, res) native, bukan Express)
• Vercel Edge runtime (proxy streaming api/drive-pdf.js)
• DeepSeek API (chatbot, hanya di sisi server)
• pdf.js (pembaca Pojok Baca)
• Vercel (hosting, deploy otomatis saat push ke main)

Status & Kematangan

Aktif dan dipakai terus-menerus. Tidak ada suite test otomatis — verifikasi berupa checklist manual di browser yang terdokumentasi plus satu skrip Puppeteer ad hoc yang dijalankan manual, bukan lewat CI. Pengembangan lokal terbagi antara Live Server untuk halaman statis dan vercel dev untuk endpoint di api/. Jumlah baris di bawah didominasi aset statis dan isi tulisan yang ikut dilacak git, bukan logika aplikasi, dan sengaja dilaporkan apa adanya.

Metrik Terukur