Organism Sistemi: Bileşenden Sayfaya

AstroForge'un dispatcher pattern'ı nasıl çalışır ve yeni bir organism nasıl oluşturulur.

Organism dispatcher pattern diyagramı

AstroForge'un merkezinde organism sistemi yer alır. Organism, belirli bir sayfa bölümünü temsil eden ve birden fazla tasarım variant'ını destekleyen bir bileşendir.

Dispatcher Pattern

Her organism, iki tür dosyadan oluşur: index.astro (dispatcher) ve Variant.astro dosyaları.

Dispatcher, import.meta.glob('./*.astro') ile aynı klasördeki tüm .astro dosyalarını otomatik keşfeder. pages.config.ts'ten gelen variant prop'una göre doğru variant bileşenini seçer ve render eder.

Bu pattern'ın gücü şurada yatar: yeni bir variant eklemek için sadece yeni bir .astro dosyası oluşturmak yeterlidir. Registry'ye veya dispatcher'a dokunmak gerekmez.

Yeni Organism Oluşturmak

Scaffold aracı ile tek komutta yeni bir organism iskeletini oluşturabilirsiniz:

npm run scaffold organism Timeline

Bu komut şu dosyaları oluşturur: src/components/organisms/Timeline/index.astro, src/components/organisms/Timeline/Default.astro, src/styles/organisms/Timeline/Default.css ve app.css'e @import satırı ekler.

Schema Pipeline ile Entegrasyon

Yeni organism oluşturulduktan sonra organism-schemas.ts'e kayıt eklenmesi gerekir. Bu kayıt, CMS'in organism için hangi alanları göstereceğini tanımlar. Kayıt olmayan organism için CMS'te hiçbir alan görünmez.

Build sırasında schema-integration.ts, organism-schemas.ts'i okur ve her sayfa için page-*.schema.json dosyaları üretir. CMS bu dosyaları okuyarak form arayüzünü oluşturur.

Hangi Organism'lar Mevcut?

AstroForge, layout organism'ları (Topbar, Navbar, Footer, Bottombar) ve içerik organism'larını (Hero, Slider, Features, Pricing, Stats, Testimonials, Blog, Contact, Gallery, Video, FAQ, Newsletter, CTA ve 15+ daha) kapsar. Her biri birden fazla variant ile gelir.