Membangun tema tampilan baru di ekosistem cmsMu memiliki filosofi yang berbeda dengan CMS monolitik konvensional. Di cmsMu, pemisahan tanggung jawab antara Core Engine, Data Layer, dan Theme Presentation diatur secara ketat dalam SOP Core CMSMu untuk menjamin kecepatan komputasi ekstrem di Cloudflare Edge dan stabilitas jangka panjang.

1. Arsitektur & Standarisasi Pembuatan Theme

Setiap tema ditempatkan di dalam foldernya masing-masing pada direktori apps/cms-api/src/themes/<nama-theme>/. Setiap tema wajib mengimplementasikan interface ThemeDefinition dengan berkas-berkas standar berikut:

  • index.ts: Mendaftarkan identitas tema dan fungsi-fungsi render antarmuka.
  • layout.ts: Kerangka dasar HTML5, penanganan tag meta SEO, Google Fonts, dan penyuntikan token desain.
  • home.ts: Fungsi renderHome(ctx) untuk tata letak halaman utama jika administrator tidak menggunakan visual page builder Puck.
  • single.ts: Fungsi renderSingle(ctx) untuk menyajikan artikel utuh, metadata penulis, waktu baca, gambar utama, dan taksonomi.
  • category.ts: Fungsi renderCategory(ctx) untuk menampilkan arsip daftar artikel berdasarkan kategori beserta navigasi paginasi.
  • search.ts: Fungsi renderSearch(ctx) untuk menyajikan hasil pencarian artikel secara real-time.
  • utils.ts: Fungsi pembantu pemformat tanggal, pembersih tag HTML artikel, kalkulator estimasi waktu baca, dan penangan fallback gambar.

Kepatuhan Zero-Hardcode (SOP 13)

Tema dilarang keras menanamkan data statis seperti menu navigasi, nama kategori, atau daftar topik sorotan dalam bentuk array hardcode. Seluruh data wajib ditarik secara dinamis dari konteks ctx.menus, ctx.categories, atau ctx.site yang bersumber langsung dari database Cloudflare D1.

Arsitektur Semantic Design Tokens (WCAG AA)

Dilarang menuliskan kode warna heksadesimal statis (seperti #ffffff atau #111827) di dalam komponen tema. Seluruh gaya wajib merujuk pada CSS Variables standar:

--bg-canvas: #f8fafc (Light) / #090d16 (Dark)
--bg-surface: #ffffff (Light) / #111827 (Dark)
--text-primary: #0f172a (Light) / #f8fafc (Dark)
--text-secondary: #475569 (Light) / #94a3b8 (Dark)
--border-subtle: #e2e8f0 (Light) / #1e293b (Dark)
--accent-primary: Warna identitas brand portal

2. Standarisasi Struktur Konten & Model Data

Struktur konten artikel diatur dalam tabel posts menggunakan Drizzle ORM (packages/db/src/schema.ts):

  • id (Integer, Primary Key): Pengenal unik artikel otomatis.
  • title (Text): Judul utama artikel berita atau publikasi.
  • slug (Text, Unique): Pengenal unik URL yang hanya memuat huruf kecil, angka, dan tanda strip (kebab-case).
  • body (Text): Isi lengkap artikel dalam format HTML yang telah dibersihkan. Tema wajib membaca isi naskah dari kolom post.body.
  • excerpt (Text): Ringkasan singkat naskah (maksimal 160 karakter) yang digunakan untuk meta deskripsi mesin pencari Google dan kartu cuplikan.
  • featured_image (Text): URL gambar sampul utama berkualitas tinggi (mendukung URL absolut CDN maupun storage R2).
  • category (Text): Nama kategori induk artikel (misalnya: Dokumentasi, Panduan, Arsitektur, Pengembangan).
  • tags (Text): Kumpulan kata kunci topik yang dipisahkan koma.
  • status (Text): Status alur kerja penerbitan (draft, curated, atau publish).
  • views (Integer): Penghitung jumlah tayang yang diperbarui secara atomik.
  • created_at & updated_at (Text): Penanda waktu standar ISO 8601.

3. Standarisasi Struktur Permalink Bersih cmsMu

cmsMu menganut filosofi Clean & Flat Permalinks untuk memaksimalkan performa perayapan Googlebot (SEO) dan kemudahan navigasi pengguna. Router Core cmsMu menangani hierarki tautan sebagai berikut:

  • Beranda Utama: / (dilayani oleh Astro SSR atau visual page builder Puck).
  • Artikel Tunggal (Single Post): /:slug (contoh: /mengenal-cmsmu-dan-cmsmu-go-headless-cms-cloud-native).
  • Arsip Kategori: /:category-slug (contoh: /arsitektur, /panduan, /pengembangan). Tema wajib mengarahkan badge dan breadcrumb kategori langsung ke /${categorySlug} tanpa awalan direktori semu.
  • Arsip Tagar: /tag/:slug (contoh: /tag/cloud-native, /tag/headless-cms).
  • Pencarian Artikel: /search?q=<kata_kunci>.
  • Halaman Statis: /:slug (contoh: /tentang-kami, /kontak yang terdaftar di tabel pages).
  • Rute Warisan (301 Redirect): Jalur lawas seperti /p/:slug dan /posts/:slug secara otomatis di-redirect permanen oleh Core menuju /:slug.

Kesimpulan

Dengan mematuhi standarisasi pembuatan tema, konsistensi struktur data konten, serta disiplin permalink bersih /:slug, portal berita yang dibangun di atas cmsMu akan selalu stabil, tahan terhadap pembaruan berkala (OTA-friendly), dan memberikan pengalaman penjelajahan konten yang cepat dan elegan bagi pembaca.