bu site, yıllardır içimde duran bir soruya cevap: kişisel bir yayın alanı nasıl bu kadar sakin olabilir? bu yazı, cag.la’nın nasıl yapıldığının kısa bir colophon’u: hangi teknolojiler, hangi tasarım kararları, hangi küçük ayrıntılar.
temel: wordpress, ama blok teması
site wordpress üzerinde çalışıyor. ama klasik bir tema değil, tamamen blok teması (full site editing). şablonlar, şablon parçaları ve desenler birer html dosyası; theme.json renkleri, yazı tiplerini ve boşluk ölçeğini tanımlıyor. sayfa oluşturucu eklenti yok, jquery yok, harici bir cdn yok.
tasarım: sakin bir sidebar, tablo gibi liste
iki siteden esinlendim: onur.dev’in sakin sidebar’ı ve yıl yıl gruplanmış yazı tablosu, bir de thesis’in görsel kartları ve rozetleri. kimliğimi kaybetmemek için eski “cagla://db” terminal estetiğini küçük detaylarda sakladım: tarihler, rozetler, kısayol tuşları ve 404 sayfası monospace.
- yazı tipleri: geist ve geist mono. ikisi de değişken font, türkçe karakterleri (ğ, ş, ı, İ) destekliyor ve siteden self-host ediliyor.
- renk: açık ve koyu tema. koyu tema eski sitenin #080808 hissini taşıyor. vurgu rengi, kırmızı bir ton; kontrast oranlarını wcag aa’ya göre ayarladım.
- hareket: sadece opacity ve transform;
prefers-reduced-motionile tamamen kapanıyor.
klavye kısayolları
| tuş | ne yapar |
|---|---|
| 1 – 6 | ana menü sayfaları |
| / veya ⌘K | arama |
| t | tema değiştir |
| [ | sidebar daralt / genişlet |
| ? | kısayol listesi |
tek tuş kısayolları, bir yazı alanında yazarken çalışmaz; ekran okuyucu kullananlar için de kapatılabiliyor.
film günlüğü için özel alanlar
bir yazıyı film yazısı olarak işaretlediğimde, editörde küçük bir künye formu açılıyor: film adı, yönetmen, yıl, süre, ülke, puan, izlediğim gün. bu bilgiler yazının üstünde bir künye kutusu olarak çıkıyor; arama motorlarına da Review yapısal verisi olarak veriliyor. film günlüğü tablosu ve istatistikleri aynı veriden besleniyor.
seo, hız ve erişilebilirlik
- meta açıklaması, open graph / twitter kartları ve json-ld (website, person, blogposting, review, breadcrumb) tema içinden geliyor. bir seo eklentisi kurarsam tema kendiliğinden devre dışı kalıyor.
- yazı başlıklarına okunur kimlikler ekleniyor; her bölüm doğrudan bağlanabilir.
- tüm sayfalarda “içeriğe geç” bağlantısı, görünür odak halkası ve anlamlı landmark’lar var.
- görseller tembel yükleniyor, yazı tiplerinin ikisi preload ediliyor, tema betiği tek dosya ve bağımlılıksız.
eksik olan, eksik kalsın
bu site hiçbir zaman “bitti” olmayacak. sağ alttaki küçük changelog bağlantısı bunun kanıtı: her şey sürüm sürüm gidiyor. yapılacaklar listesi hep uzun; ama acele yok.
bu yaklaşımın felsefesi için dijital bahçe, akış değil yazısına da bakabilirsiniz.
bir not bırak