Builder Preview (iframe & postMessage)

Visual Builder, canlı vitrini DOM içinde değil ayrı bir iframe route üzerinden gösterir. Böylece önizleme bundle’ı gerçek storefront’a yakın CSS/font davranışı kullanır; editör chrome’u iframe dışında kalır.

---

Route’lar

Route	Dosya	Amaç
/:lang/builder-preview	app/routes/$lang.builder-preview.tsx	Vitrin blokları (anasayfa + sayfa birleşik önizleme)
/:lang/builder-preview-auth	app/routes/$lang.builder-preview-auth.tsx	Login/register auth tasarım önizlemesi

Kayıt: app/routes.ts (lang layout altında)

Güvenlik başlıkları (builder-preview.tsx):

export function headers() {
  return {
    "X-Frame-Options": "SAMEORIGIN",
    "Cache-Control": "no-store",
  };
}

Ana uygulama root’ta X-Frame-Options: DENY olabilir; önizleme route’u iframe embed için SAMEORIGIN döner.

---

Parent → iframe mesajları

Kaynak: source: "coursio-builder". Origin kontrolü: window.location.origin.

type	Açıklama
BUILDER_PREVIEW_UPDATE	payload: blocks, academyName, courses, theme, pages[]
BUILDER_PREVIEW_NAVIGATE	path: mantıksal storefront yolu (/, /p/hakkimizda) — sol panelden sayfa değişince
BUILDER_PREVIEW_HIGHLIGHT	blockId: seçili blok vurgusu
BUILDER_AUTH_PREVIEW_UPDATE	Auth sekmesi: page, login, register, theme, logoUrl, primaryColor

---

iframe → parent mesajları

Kaynak: source: "coursio-builder-preview".

type	Açıklama
BUILDER_PREVIEW_READY	iframe yüklendi; parent tam payload gönderir
BUILDER_AUTH_PREVIEW_READY	Auth önizleme hazır
BUILDER_BLOCK_SELECT	Önizmede bloğa tıklandı → parent inspector’ı açar
BUILDER_PREVIEW_PATH_CHANGE	Navbar/footer link tıklandı → path (/, /p/slug)

Parent, BUILDER_PREVIEW_PATH_CHANGE alınca bilinen slug’lar için navigate(/instructor/academy/builder?pageId=…) yapar; /courses, /login gibi sistem path’lerinde yalnızca iframe mantıksal URL güncellenir.

---

İframe içi link navigasyonu (Faz 6)

NavbarBlock ve FooterBlock isPreviewMode iken native navigation’ı engeller; onPreviewNavigate(url) ile mantıksal path parent’a iletilir.

Dosyalar:

• app/components/academy/blocks/NavbarBlock.tsx — onPreviewNavigate prop
• app/components/academy/blocks/FooterBlock.tsx — aynı prop
• $lang.builder-preview.tsx — stripPathPrefix(), activePath state, handlePreviewNavigate

Önizleme scope’unda data-active-path attribute ile aktif mantıksal path izlenebilir.

---

Builder tarafı referans

Dosya: app/routes/instructor.academy.builder.tsx

• previewIframeRef + postPreviewUpdate() / postPreviewAuthUpdate()
• currentActivePath: sayfa düzenleniyorsa /p/ + slug, aksi halde /
• handlePreviewPathChange — iframe → builder sayfa senkronu
• intent=create-page — yeni academy_pages kaydı (Sayfalar sekmesi modal)

---

İlgili dokümanlar

• Academy Visual Builder
• Academy Page Manager — context-aware kayıt (pageId query)
• Academy Auth Pages