Web Platformu Güncellemesi: Blok Tabanlı Sayfa Oluşturucu, Widget'lar ve Tema Ayarları

Kendi web platformumuzu, müşterilerimiz için geliştirdiğimiz yönetim panellerinin bir vitrini olarak görüyoruz. Bu güncellemede sayfa içerik yapısını baştan ele aldık: artık her sayfa, yönetim panelinden sıralanabilen, gizlenebilen ve varyantı değiştirilebilen bloklardan oluşuyor. Bu yazı, güncellemenin kapsamını ve arkasındaki teknik kararları anlatıyor.

Neler değişti?

• Blok tabanlı sayfalar: Hero, zengin metin, özellik ızgarası, istatistik, SSS, zaman çizelgesi, iki sütun, galeri, referans logoları, iletişim formu ve gömülü içerik blokları.
• Blok ayarları: Varyant, arka plan (cam, ızgara, aurora, gradyan), hizalama, boşluk ve animasyon tercihleri her blokta ayrı ayrı yönetiliyor.
• Widget'lar: "Projenizi anlatın" çağrısı veya teknoloji şeridi gibi tekrar eden bloklar bir kez tanımlanıp istenen sayfaya referansla ekleniyor.
• Sayfa şablonları: Landing, hizmet, kampanya ve hakkımızda şablonlarıyla yeni sayfalar hazır blok dizilimiyle başlıyor.
• Tema ayarları: Tema varyantı, vurgu rengi ve animasyon yoğunluğu panelden değiştirilebiliyor; hareket azaltma tercihi olan ziyaretçilere saygı duyuluyor.

Veri modeli: eski alanlar korunuyor

Mevcut sayfa bölümlerini bozmadan geçiş yapmak için eski başlık ve gövde alanlarını korudum; yeni içerik alanı boş olduğunda arayüz bu alanlara geri düşüyor. Blok türü veritabanında kısıtlı bir liste olarak tanımlandı; böylece panelden tanımsız bir blok türü kaydedilemiyor.

alter table public.page_sections
  add column block_type text not null default 'rich_text',
  add column settings   jsonb not null default '{}'::jsonb,
  add column is_visible boolean not null default true;

alter table public.page_sections
  add constraint page_sections_block_type_check check (block_type in (
    'hero', 'rich_text', 'feature_grid', 'stats', 'cta', 'gallery', 'faq', 'logo_wall',
    'testimonial', 'contact_form', 'embed_html', 'spacer', 'two_column', 'timeline', 'widget_ref'));

Görünürlük ve yayın kuralları veritabanında

Anonim ziyaretçi yalnızca yayınlanmış sayfaların yayınlanmış ve görünür bloklarını okuyabiliyor. Bu kural arayüzde değil, PostgreSQL Row Level Security politikasında tanımlı; dolayısıyla doğrudan API'ye istek atan biri de taslak veya gizli blokları göremiyor. Aynı yaklaşımı tüm içerik tablolarında uyguluyoruz.

Bir "gizle" düğmesi yalnızca arayüzde çalışıyorsa, gizlenmiş değildir. Gizlilik kuralı verinin yaşadığı yerde tanımlanmalıdır.

Demo modu: bağlantı olmadan da çalışan site

Platformun bir özelliği de veritabanı bağlantısı olmadan çalışabilmesi. Tüm başlangıç içeriği tek bir kaynak dosyadan üretiliyor; aynı üretim adımı hem veritabanı tohum (seed) dosyasını hem de statik demo verisini oluşturuyor. Böylece geliştirme, test ve tanıtım ortamları aynı içeriği görüyor ve içerikte yapılan değişiklik iki yerde birden elle düzenlenmek zorunda kalmıyor.

Erişilebilirlik ve performans

Bloklar klavye ile gezilebilir, SSS akordeonları ARIA özniteliklerini taşıyor ve animasyonlar işletim sistemi düzeyindeki hareket azaltma tercihini dikkate alıyor. Yoğun görsel efektler (üç boyutlu hero sahneleri gibi) yalnızca cihaz ve tarayıcı desteklediğinde yükleniyor.

Insights tarafında neler var?

Bu güncellemeyle birlikte Insights bölümünde kategori, etiket ve ilgili içerik bağlantıları yayına girdi. Dış kaynaklardan gelen haberler editoryal onay kuyruğundan geçmeden yayınlanamıyor; yapay zekâ desteğiyle hazırlanan taslaklar ise bir editör tarafından doğrulanmadan yayına alınamıyor. Bu kurallar da veritabanı seviyesinde uygulanıyor.

Sırada ne var?

Önümüzdeki dönemde blok düzeyinde A/B varyantları, çok dilli içerik için çeviri iş akışı ve medya kütüphanesi iyileştirmeleri planlanıyor. Yol haritası tarihleri kesinleştikçe burada duyuracağız; henüz tamamlanmamış bir özelliği tamamlanmış gibi anlatmamak ilkemizdir.

Blok ayarları nasıl çalışıyor?

Her bloğun iki veri alanı var: içerik ve ayarlar. İçerik, dil bazlı metinleri ve öğe listelerini (örneğin SSS soruları) tutar; ayarlar ise görünümü belirler. Ayarlar şeması bilinçli olarak dar tutuldu: varyant, arka plan, hizalama, boşluk ve animasyon. Serbest CSS veya rastgele alanlar kabul edilmiyor; böylece panelden yapılan her değişiklik tasarım sisteminin sınırları içinde kalıyor ve sitenin bütünlüğü bozulmuyor.

{
  "variant": "accordion",
  "background": "glass",
  "align": "left",
  "padding": "md",
  "animation": "fade"
}

İçerik alternatifleri: silmeden denemek

Bir bloğun içeriğini değiştirirken eski sürümü kaybetmek istemezsiniz. Bu sürümde bloklar isimli içerik alternatifleri taşıyabiliyor: aynı bloğun iki başlık veya iki açıklama sürümü saklanır, panelden hangisinin yayında olacağı seçilir. Bu, ileride planlanan A/B denemelerinin de altyapısıdır.

Yönetim panelinde yerinde düzenleme

Editörler blokları ayrı bir form ekranında değil, sayfanın kendisi üzerinde düzenliyor: metne tıklayıp yazmak, öğe eklemek, sırayı sürükleyerek değiştirmek. Herkese açık görünümde bu düzenleme katmanı hiç yüklenmiyor; yani ziyaretçinin tarayıcısına editör kodu gitmiyor. Bu ayrım hem performans hem güvenlik açısından önemli.

Denetim ve sürüm geçmişi

Her blok değişikliği, kimin ne zaman neyi değiştirdiği bilgisiyle denetim kaydına yazılıyor; içerik revizyonları saklanıyor ve gerektiğinde önceki sürüme dönülebiliyor. Yayın yetkisi ile düzenleme yetkisi ayrı: bir editör taslak hazırlayabilir ama yayına alma yetkisi olmayabilir. Bu rol ayrımı, kurumsal müşterilerimizin panellerinde de standart olarak bulunur.

Teknik yığın

• Arayüz: React, TypeScript, Vite, Tailwind CSS; animasyonlar için Motion ve GSAP.
• Veri: PostgreSQL üzerinde Supabase; yetkiler Row Level Security politikalarıyla.
• Doğrulama: Zod şemaları hem form girdilerini hem de içerik yapısını denetliyor.
• Dağıtım: Docker ve Nginx; herkese açık sayfalar derleme anında ön render ediliyor.

Test yaklaşımı

Blok şeması, normalizasyon fonksiyonları ve herkese açık renderer birim testleriyle; veritabanı politikaları ise gerçek bir PostgreSQL üzerinde çalışan SQL testleriyle doğrulanıyor. "Gizli blok anonim kullanıcıya görünmez" gibi kurallar yalnızca arayüzde değil, politika testinde de kontrol ediliyor. Bir kuralın iki yerde test edilmesi fazlalık değil, güvenlik açısından bilinçli bir tercih.

Benzer bir yönetim paneli ve içerik altyapısını kendi kurumunuz için istiyorsanız, web ve mobil uygulamalar hizmetimiz üzerinden bize ulaşabilirsiniz.