Master Blueprint

WGS V3.0 DOCS

Spesifikasi Teknis, Panduan Arsitektur, dan Standarisasi Frontend Cloudflare Workers untuk Website Google Sheets.

1

Protokol Variabel Global & Dinamis

Variabel WGS dieksekusi langsung oleh Edge Network Cloudflare Worker. Dilarang melakukan manipulasi DOM manual untuk hal-hal yang sudah disediakan variabelnya.

SEO & Head Schema

${sitename} ${sitedescription} ${meta-title} ${urlhome}

Slot Iklan (Ads)

${showadstop} ${showadssidebar} ${showfloatingads}

Tema, Layout & Warna (Root CSS)

#2a2a2a #1c293b; #f2fefe #fff;

Variabel ini wajib diletakkan di dalam :root { ... } pada deklarasi CSS global.

2

Standar Permalink & Routing

Tipe Halaman Format Permalink (WAJIB)
Blog Post (View) /${link}
Kategori Blog /${category1}/
Produk (View) /view/${link}
Kategori Produk /category/${category1}/1/
Pencarian / Katalog /search?label=XXXX&page=0&result=12
3

Aturan Shortcode (Incremental Protocol)

SANGAT PENTING

DILARANG KERAS menumpuk/mengulang angka shortcode yang sama dalam satu halaman. Sistem render WGS otomatis me-looping data. WAJIB increment (naikkan angka) per section!

  • HERO / Berita Utama: Gunakan [short-list-new-post-1] s/d [short-list-new-post-4].
  • GRID Feed Blog Umum: Gunakan [short-list-blog-post-1] s/d [short-list-blog-post-30] berurutan.
  • PRODUK TOKO: Gunakan [short-list-product-1] s/d [short-list-product-30].
  • WIDGET SIDEBAR: WAJIB gunakan [short-list-blog-post-8] karena format desainnya sudah terikat sistem (compact list).
4

Zero Dummy Cards Policy

Tugas Frontend HANYALAH membuat wadah (wrapper) luar. Worker yang akan merender kartu HTML secara otomatis di dalamnya. DILARANG menjabarkan struktur HTML seperti <article>, gambar statis, atau teks "Lorem Ipsum" di dalam layout utama.

CARA SALAH (DILARANG) 
<div class="grid grid-cols-3">
  <div class="card">
    <img src="...">
    <h3>Judul Statis</h3>
  </div>
</div>
CARA BENAR (WAJIB) 
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
  [short-list-blog-post-1]
</div>

Aturan Super Kritis (Dilarang Melanggar)

1. Isolasi Scope JS (Anti-Bentrok)

DILARANG KERAS mendeklarasikan fungsi JS secara global telanjang (function init()). Wajib bungkus dalam IIFE (() => { ... })(); agar web tidak blank saat komponen di-looping.

<script>
(() => {
    const btn = document.querySelector('#btn');
    if(btn) btn.addEventListener('click', () => { /* logic */ });
})();
</script>

2. Larangan Dark Mode Utility

DILARANG menggunakan class Tailwind dark:bg-gray-800, dll. WGS berbasis variabel Root CSS murni untuk pergantian warna. Penggunaan class dark: akan merusak estetika dan membuat warna belang saat OS user masuk mode gelap.

3. Wajib Aspect Ratio (Anti-CLS)

Gambar di dalam card wajib memakai class pembantu aspect-video atau aspect-[4/3] dikombinasikan dengan object-cover w-full h-full untuk mencegah konten melompat (Cumulative Layout Shift) saat gambar di-load.