DAMAR PREPROCESSOR ENGINE v2

Registry Back to Editor

🎨

Template Creator Guide & Specification

Panduan teknis & spesifikasi directive untuk membuat blueprint slide template interaktif pada aplikasi DAMAR.

📍 Engine

DAMAR Preprocessor Engine v2

🎯 Directives

data-text data-asset data-setting data-variable

📦 Output

HTML5 Template Blueprint

⚙️ Fitur Utama

Auto-Crop Backdrop Blur no-render

💡

Prinsip Kerja Preprocessor: Preprocessor DAMAR mengompilasi HTML standar ber-attribute khusus secara otomatis menjadi komponen Vue interaktif. Anda tidak perlu menulis logika Vue manual; cukup gunakan data-attribute untuk membuat teks editable, slot gambar, atau logo daerah.

1. Directives Utama Template

A. `data-text` (Editable Text Field)

Tambahkan data-text="nama_field" pada elemen HTML teks (seperti <h1>, <p>, <div>) untuk menjadikannya editable langsung di canvas maupun inspector form.

Dukungan attribute: placeholder="..." dan data-char-limit="50".
Sintaks:

<!-- Judul Utama -->
<h1 data-text="title" data-char-limit="50" placeholder="Judul Utama..."></h1>

<!-- Sub-judul / Deskripsi -->
<p data-text="subtitle" data-char-limit="120" placeholder="Sub-judul..."></p>

B. `data-asset` (Slot Gambar & Background)

Tambahkan data-asset="slotName" untuk membuat wadah gambar. Preprocessor otomatis menangani rendering gambar, focal point crop, dan tombol upload.

Slot Utama: Memiliki tombol floating Upload & Crop.
Slot Sekunder / Blurred Backdrop: Gunakan hide-button="true" agar slot ini menggunakan gambar yang sama tanpa menampilkan tombol upload ganda.

✨

Triks Blurred Background: Sambungkan dua elemen ke data-asset="default", lalu beri hide-button="true" dan class blur pada elemen backdrop di lapisan paling belakang. Pengguna cukup mengunggah foto 1 kali, dan background blurred otomatis ter-render secara simultan!

<!-- Slot Gambar Utama -->
<div data-asset="default" label="Foto Utama" icon="ph-image" class="absolute inset-0 z-10"></div>

<!-- Full-bleed Blurred Background (terhubung ke asset yang sama) -->
<div data-asset="default" hide-button="true" class="absolute inset-0 z-0 opacity-40 filter blur-xl scale-110 pointer-events-none"></div>

C. `data-setting` (Regional Branding)

Menghubungkan atribut branding daerah yang sedang aktif secara otomatis (Logo, Nama Organisasi, Lokasi Daerah).

<!-- Logo Daerah -->
<img data-setting="logo" class="w-8 h-8 object-contain" />

<!-- Nama Organisasi & Lokasi -->
<div data-setting="organization" class="font-bold"></div>
<div data-setting="location" class="text-gray-500"></div>

D. `data-variable` (Global Workspace Variables)

Menampilkan nilai variabel global yang dikonfigurasi di setting workspace (seperti akun Instagram, hashtag, atau website).

<span data-variable="instagram" class="font-mono text-xs"></span>

2. Matriks Referensi Quick Directive

Directive	Tipe	Fungsi Utama	Contoh Tag
`data-text="key"`	Teks	Membuat teks editable & auto-formatted	`<h1 data-text="title">`
`data-asset="key"`	Media	Slot foto dengan fitur crop & aspect control	`<div data-asset="default">`
`hide-button="true"`	Properti	Sembunyikan tombol upload pada slot sekunder/blur	`data-asset="default" hide-button="true"`
`data-setting="key"`	Branding	Render logo, organisasi, atau lokasi daerah	`<img data-setting="logo">`
`data-variable="key"`	Global	Render variabel global workspace	`<span data-variable="social">`
`class="no-render"`	Utility	Elemen hanya tampil di editor, tersembunyi saat export PNG	`<button class="no-render">`
`class="noise"`	Utility	Efek mikro-grain transparan via ::after (layout-safe, tidak merusak background)	`<div class="noise">`

3. List Berulang & Kontrol Editor

A. Dynamic List Loops (`v-for`)

Gunakan directive Vue v-for pada array slide.list untuk membuat daftar item atau timeline berulang yang dapat ditambah/dikurangi pengguna.

<div v-for="(item, idx) in (slide.list || [])" :key="idx" class="flex gap-2">
    <span class="font-bold">{{ idx + 1 }}.</span>
    <div data-text="list[idx]" placeholder="Isi poin..." class="flex-1"></div>
</div>

B. Class Editor-Only (`no-render`)

Elemen dengan class no-render (seperti tombol "+ Tambah Item") akan terlihat di editor tetapi otomatis hilang saat gambar PNG di-export.

<button @click="(slide.list = slide.list || []).push('Item baru...')" class="no-render text-xs text-blue-500">
    + Tambah Poin
</button>

4. Recommended Starter Boilerplate

Gunakan struktur dasar di bawah ini sebagai titik awal saat membuat template slide baru:

<script type="text/template" id="my-template" data-name="Template Baru" data-category="General">
  <div class="h-full flex flex-col bg-white text-black w-full relative overflow-hidden noise">
      <!-- Full-bleed Blurred Background -->
      <div data-asset="default" hide-button="true" class="absolute inset-0 z-0 opacity-40 filter blur-xl scale-110 pointer-events-none"></div>

      <!-- Header Branding -->
      <div class="p-4 border-b border-gray-100 flex gap-2 items-center shrink-0 z-10 bg-gradient-to-t from-white/0 to-white/100 backdrop-blur-sm">
          <div class="w-8 h-8 flex items-center justify-center relative z-30">
              <img data-setting="logo" class="w-full h-full object-contain" />
          </div>
          <div class="flex flex-col justify-center">
              <div class="text-[9px] font-bold text-gray-900 leading-tight whitespace-pre-line" data-setting="organization"></div>
              <div class="text-[8px] text-gray-500 leading-tight" data-setting="location"></div>
          </div>
      </div>

      <!-- Main Image Slot (z-30: immune from grain noise) -->
      <div class="flex-1 relative bg-gray-100 z-30 overflow-hidden">
          <div data-asset="default" label="Gambar Utama" icon="ph-image-square" class="absolute inset-0"></div>
      </div>

      <!-- Text Content Area -->
      <div class="p-5 flex flex-col gap-1.5 shrink-0 bg-gradient-to-b from-white/0 to-white/100 backdrop-blur-sm z-30">
          <div class="text-[9px] font-mono font-bold text-blue-600 tracking-wider" data-text="date" data-char-limit="35" placeholder="Tanggal Kegiatan..."></div>
          <h1 class="text-base font-bold text-gray-900 leading-tight" data-text="title" data-char-limit="50" placeholder="Judul Utama Template Baru..."></h1>
          <p class="text-xs text-gray-600 leading-relaxed" data-text="subtitle" data-char-limit="120" placeholder="Sub-judul atau deskripsi singkat..."></p>
      </div>
  </div>
</script>

Template Creator Guide & Specification

1. Directives Utama Template

A. data-text (Editable Text Field)

B. data-asset (Slot Gambar & Background)

C. data-setting (Regional Branding)

D. data-variable (Global Workspace Variables)