- Primo v3.2, bir siteyi hem yerel dosyalar hem de sunucu veritabanı satırları olarak ifade ederek ajanların kodu düzenlemesine ve teknik olmayan editörlerin aynı siteyi tarayıcıdan düzenlemesine olanak tanır
- Geliştiriciler sayfa, içerik, ayarlar ve rotaları Svelte bileşenleri ve YAML dosyalarıyla yönetir;
primo push ile bunları sunucudaki ilişkisel veritabanıyla senkronize eder
- Tarayıcı düzenleyicisi, render edilmiş sayfa üzerinde metin düzenleme, blok sürükle-bırak ve özel sayfa tipleri ile alanlar sunarak form merkezli CMS ekranlarına olan bağımlılığı azaltır
- Başlıca hedef kitle, teknik olmayan editörlere özel siteler teslim etmesi gereken geliştiriciler, freelancer'lar ve ajanslardır; 12 starter ve 40'tan fazla blok sunar
- İçerik PocketBase tabanlı SQLite içinde tutulur, kod kullanıcı deposunda kalır ve MIT lisansı ile
primo pull statik dışa aktarması servis bağımlılığını azaltabilir
Dosya ve veritabanını birlikte kullanan CMS modeli
- Primo v3.2, 2019'dan beri geliştirilen açık kaynaklı bir CMS olarak tüm siteyi aynı anda dosyalar ve veritabanı satırları şeklinde temsil eder
- Yerel dosyalar ajanlar tarafından doğrudan düzenlenir; sunucu veritabanı ise insanların tarayıcı üzerinden görsel olarak düzenlediği hedef olarak kullanılır
- Temel akış, siteyi bir ajanla oluşturup ardından istemciye veya tanıdıklara tarayıcı düzenleme yetkisi devretme şeklindedir
- Örnekte
claude, bir fiyatlandırma sayfası tipi oluşturur, pages/pricing.yaml ve blocks/pricing-tiers/component.svelte dosyalarını yazar, ardından primo push ile 3 dosyayı dağıtır
- Dağıtımdan sonra kullanıcı tarayıcıda fiyat katmanı metinlerini ve fiyatları doğrudan düzenleyebilir
Ajanların çalıştığı yerel dosya yapısı
primo pull, tüm siteyi normal dosyalar olarak indirir
- Bileşenler, sayfalar, içerik, ayarlar ve rotalar buna dahildir
- Bloklar Svelte bileşenleridir; içerik ve ayarlar ise YAML'dir
- Yeni bir site scaffold edilebilir veya mevcut bir site indirilebilir
- Claude Code, Cursor ve Codex gibi CLI ajanları tüm depo üzerinde değişiklik yapar
- Akış, bir Next.js veya SvelteKit kod tabanını ele alır gibi tüm kod tabanını düzenleme şeklindedir
- Örnek komut
$ claude "redesign the pricing page" şeklindedir
primo push, değişen dosyaları sunucudaki ilişkisel veritabanı ile senkronize eder
- İstemci, aynı siteyi tarayıcıda render edilmiş sayfa üzerinde düzenler
- Blokların tanımladığı alanlar düzenlenebilir alanlar olarak görünür
Render edilmiş sayfa üzerinde düzenleme yapan CMS
- Düzenleyici render edilmiş sayfa üzerinde çalışır ve varsayılan düzenleme deneyimi için ayrı bir CMS sekmesi ya da form görünümü gerektirmez
- Blokların tanımladığı tüm alanlar tıklanabilir yüzeyler ve etiketlerle gösterilir
- Renderer'ın okuduğu modelin aynısını kullanır; ayrı bir dönüşüm katmanı yoktur
- Sayfa üzerinde düzenleme, render edilmiş sayfadaki metne tıklayıp doğrudan yazma yaklaşımıdır
- Alan chip'leri o anda düzenlenen öğeyi gösterir
- Sürükle-bırak bloklar ile sayfa ağacında bloklar yeniden sıralanabilir, eklenebilir, kaldırılabilir ve değişiklikler doğrudan kaynağa yazılır
- Özel sayfa tipleri, bir sayfa yapısının bir kez tanımlanmasının ardından istemcinin aynı modeli bozmadan ihtiyaç duyduğu kadar sayfa oluşturmasına olanak tanır
- Özel alanlar; metin, zengin metin, görsel, bağlantı, sayı, grup ve repeater desteği sunar
- Düzenleme arayüzü şemadan üretilir
- Gerçek zamanlı iş birliği, birden fazla kişinin aynı sayfayı aynı anda düzenlemesini sağlar; canlı varlık göstergesi ve çakışmasız düzenleme içerir
- Yapılandırılmış form görünümü, sayfada görünmeyen SEO, meta veri, repeater ve gizli ayarlar gibi alanlar için kullanılır
Özel site üreticilerine yönelik starter'lar ve bloklar
- Primo, teknik olmayan editörler için özel siteler üreten geliştiriciler, freelancer'lar ve ajansları hedefler
- Marketplace, istemci tipine göre starter'lar ve yaygın bölüm blokları sunar
- Restoran, koçluk, portföy ve yerel hizmetler için starter'lar örnek olarak verilir
- Sunulan ölçek 12 starter ve 40'tan fazla bloktur
- Her starter kendi içinde tamamlanmış bir sitedir
- Svelte bileşenleri ve tip alanları içerir
- Depoya scaffold edilir
- Framework lock-in veya gizli runtime yoktur
- Kullanıcılar starter'ları fork edip düzenleyerek dağıtabilir ya da kendi starter ve blok koleksiyonlarını kürate edebilir
WordPress, Headless CMS ve site builder'lardan farkı
- WordPress, istemcilerin düzenleyebildiği siteler sunar ancak içerik ile PHP temalarının birbirine dolandığı bir yapı olarak karşılaştırılır
- Headless CMS'ler kod yapısını temiz tutabilir ancak şema ayrı bir yönetim ekranında bulunur
- Site builder'lar sürükle-bırak sunar ama çıktı platformdan ödünç alınan bir yapı olarak konumlanır
- Primo'nun vurguladığı fark, tek bir kaynağın ekip ve ajanlar tarafından birlikte düzenlenebilmesidir
- Kodun bulunduğu yer Svelte dosyaları ve kullanıcının deposudur
- İstemcinin düzenleme yaptığı yer render edilmiş sayfadır
- Şema,
.svelte yanındaki fields.yaml içinde tutulur
- Ajanlar tüm siteyi dosya olarak düzenleyebilir
- Barındırma ve lisans self-host ile MIT olarak sunulur
Veri sahipliği ve operasyon durumu
- İçerik PocketBase aracılığıyla SQLite içinde saklanır, kod ise kullanıcının deposunda kalır
primo pull, her zaman kod ve içeriğin statik dışa aktarımını sağlar- Primo'nun MIT lisanslı olduğu ve proje ortadan kalksa bile çalışan kodun ve kurulmuş sitelerin çalışmaya devam edeceği belirtilir
- Operasyon durumu 7. yılında v3.2 olarak ifade edilir; prodüksiyon site örnekleri arasında ajansların istemci işleri, küçük e-ticaret mağazaları, dokümantasyon siteleri ve kendi pazarlama sayfaları yer alır
- Ajanlar, yeni bir ürün değil, 2019'dan beri sürdürülen aynı modelin yeni istemcileri olarak ele alınır
Payload, TinaCMS, Sanity Studio ve React desteği
- Payload, şemanın yönetim ekranında bulunduğu ve içeriğin API ile alındığı bir headless CMS olarak tanımlanır
- TinaCMS, Markdown dosyalarının önüne Git tabanlı bir düzenleyici koyan bir yaklaşım olarak karşılaştırılır
- Sanity Studio, barındırılan bir content lake üzerinde çalışan React tabanlı bir yönetim ekranıdır
- Primo'da düzenleyici ve renderer aynı Svelte dosyalarını ve veritabanı satırlarını okur; aralarında API dönüşüm katmanı yoktur
- React şu anda Primo bloklarında desteklenmiyor
- Primo, Svelte'in derleme zamanı yaklaşımı etrafında inşa edilmiştir ve bu yapı blokları düzenleyici ile renderer'ın doğrudan okuyabildiği dosyalara dönüştürür
- Primo bloklarının içinde React desteği yol haritasında yer almıyor
- Yol haritasında
primo integrate <framework> bulunuyor
- İlk olarak mevcut SvelteKit uygulamalarının üzerine Primo ekleme yaklaşımı geliyor
- Ardından Astro anılıyor; Next.js ise bir istek olarak kalıyor
- Bu yönde, prodüksiyon bileşenleri ilgili framework içinde kalırken Primo yalnızca içerik ve düzenleyiciyi üstleniyor
Blok yapısı ve CLI kimlik doğrulaması
- Bloklar yan yana duran iki dosyadan oluşur
- Bileşen render işlemini üstlenir
- Şema ise düzenleyiciye hangi alanların olduğunu bildirir
- Örnek
blocks/hero/fields.yaml, headline, subheadline ve cta alanlarını tanımlar
headline ve subheadline türü texttircta türü linktir
- CLI kimlik doğrulaması, ortam değişkenindeki
PRIMO_TOKEN değerini okur
- Token, site bazında yönetim ekranından oluşturulur
primo pull <host>, projeyi klonlarprimo push, yalnızca değişen dosyaları yükler
- Kimlik doğrulama, editörlerin kullandığıyla aynıdır; ayrı bir API yüzeyi öğrenmek gerekmez
- HTTPS üzerinden tüm Primo instance'larında çalışır; self-hosted instance'lar da buna dahildir
Başlangıç komutu
- Yeni bir workspace aşağıdaki komutla oluşturulur
npx primo-cli init my-workspace
- Oluşturmanın ardından
workspace ready ve server.yaml written durumu gösterilir
- Lisans ve fiyatlandırma ifadesi MIT, açık kaynak ve kalıcı olarak ücretsiz şeklinde sunulur
1 yorum
Hacker News yorumları
Blokları sürükleyip bıraktığınız CMS editörleri demoda harika görünür, ama şirket içinde benzer bir editör işletmiş biri olarak bunun bitmek bilmeyen bir güncelleme cehennemi olduğunu gördüm
“Metni sağa hizalayıp mavi yapabilir miyiz?” gibi istekler sürekli gelir ve sonunda her bloğa durmadan yeni özellikler eklenir
Gerçek içerik yazarları bunu etkili kullanmakta zorlanır ve sonuçlar da genelde pek tatmin edici olmaz
Daha fazla eğitimle iyileştirilebilir, ama özgürlük ile marka kimliğini koruma arasındaki ödün hep kalır
Bizim durumda headless CMS daha iyi bir yaklaşım gibi görünüyor. Sadece içeriği sağlamak ve tasarıma uygun şekilde kodla uygulamayı birkaç uzmanın yapması daha iyi; ama herkesin böyle bir imkânı yok, dolayısıyla bu tür CMS’lerin de kesinlikle bir yeri var
Birkaç ay önce bir müşterinin e-ticaret sitesini yenilerken Maglev ile düzenlenebilir section/block’lar yaptım ve düzenleme deneyiminin kendisi iyiydi
Ancak yayından sonra müşteri HTML/CSS’i çok temel düzeyde bilen bir pazarlama çalışanı işe aldı; bu kişiyi, doğrudan HTML/CSS yazmak yerine ihtiyaç duyulan bölümleri geliştiricinin yapması gerektiğine ikna etmekte zorlandık
Primo’daki gibi bir geliştirici editörü eklemek de mümkün olabilir, ama uzun deneyimime göre müşterinin sitenin HTML/CSS’ine doğrudan dokunmasını istemem
“Bozarsan bedelini ödersin” tarzı bir ilişki de istemem
Daha geniş bakınca her CMS’te aynı sorun var. Webflow sitesi bozulan bir şirkete de yardım etmiştim; tasarımcı yaptıktan sonra pazarlama görevlisinin UI’ı “iyileştirmeye” çalışırken her şeyi kırdığı tipik bir örnekti
Yapılabilecek bileşen sayısının bir sınırı var
İdeal olarak müşterinin kod yazmadan HTML’i kolayca değiştirebildiği bir CMS gerekir. Böylece hızlı yüklenir, arama optimizasyonu iyi olur ve geliştiricinin tekerleği yeniden icat etmesine gerek kalmaz
Bu yüzden Versoly(https://versoly.com/)’yi yaptım. Arka plan rengini değiştirmek veya yeni bir section eklemek için neden her seferinde geliştiriciyle iletişime geçmek gereksin diye düşündüm
Yine de hangi CMS kullanılırsa kullanılsın, içerik editörlerinin metni sağa hizalayıp mavi yapmak istemesi sorunu hâlâ yok mu diye düşünüyorum
Henüz neredeyse hiç resmi dokümantasyon yok, ama ilgilenirseniz ana sayfaya bakıp denemeye değer olup olmadığını değerlendirirseniz sevinirim
Genel geri bildirimleri veya doğrudan yaşadığınız deneyimlerden çıkan dersleri de duymak isterim
https://brick-cms.com/
GitHub:
https://github.com/primocms/primo
Önceki tartışmalar:
https://news.ycombinator.com/item?id=23820201
https://news.ycombinator.com/item?id=25301040
Asıl yazarın başka hesabı gibi görünen bir yerde metin eklenmiş Show HN:
https://news.ycombinator.com/item?id=36801101
SSG’nin statik site oluşturucu (Static Site Generator) anlamına geldiği anlaşılıyor; ama belirli bir alanın biraz dışına çıkınca okurun anlamasını kolaylaştıracak şekilde yazmaya çalışmak gerekmez mi diye düşünüyorum
Web geliştirme yapmama rağmen bu kısaltmayı çözmek için kısa bir an düşünmem gerekti
Yine de henüz bilmeyen kullanıcılar için açılımını yazmak daha yardımcı olabilir
Blog yazıları veya incelemeler gibi sürekli dinamik içerik yöneten böyle bir araç olsa iyi olurdu
İnsanlar WordPress’e çok bağlı, ama özelleştirme ve temalar neredeyse kâbus gibi
O dönemde kolayca blog oluşturmanın neredeyse tek yollarından biriydi
Sorun, standart kapsamın dışına çıktığınız anda birden WordPress’in iç yapısı hakkında derin bilgi gerekmesinde
Yaklaşık 3 yıl önce HN, açık kaynak CMS Primo’yu ön sayfaya taşımıştı (https://news.ycombinator.com/item?id=23820201); bunun sayesinde pandeminin ortasında rahat uzaktan işimi bırakıp tam zamanlı olarak buna odaklandım
Sonrasında birikimlerimi bitirdim, primo.af alan adını Taliban’a kaptırdım ve eşimi de geliştirici/tasarımcı olup yardım etmeye ikna ettim
Yine de bu süre içinde ortaya çıkan sonuçtan gurur duyuyorum; insanların web geliştirmeyi öğrenmesine, kişisel sitelerini yayına almasına ve müşteri sitelerini yönetmesine yardımcı olduğunu gördükçe bu yaklaşımın gücüne ve sadeliğine daha çok ikna oldum
Bugün açık beta olarak sunduğum Primo 2, sayfa üzerinde içerik düzenleme, sayfa oluşturma gibi özellikler sunuyor
Primo’yu, web sitesi yapmanın ve teknik olmayan kullanıcıların bunları yönetmekte zorlanmasının yarattığı bıkkınlık nedeniyle geliştirmeye başladım
Freelance projelerde kırılgan WordPress temaları, panelde gezinme ve eklenti kombinasyonlarıyla uğraştım; ajans geliştiricisi olarak da monolitik CMS’lerin ve metaframework/headless CMS’lerin landing page ya da tanıtım siteleri için fazla ağır olduğunu düşündüm
Kodlama eğitmeni olarak, öğrencilerin CLI, API, paket yöneticileri, bundler’lar, framework’ler ve metaframework’lerle karşılaşınca web’i kullanmaktan çekindiklerini gördüm
Bloglar, landing page’ler ve tanıtım siteleri gibi yaygın web sitelerini oluşturmak, yönetmek, geliştirmek ve barındırmak için sade ve erişilebilir bir yol yoktu
Primo temelde içeriği kolayca yönetmeyi sağlayan bir CMS, ancak sayfa oluşturma, kod düzenleme, statik site üretimi ve GitHub’a dağıtım/barındırmayı tek bir arayüzde birleştiriyor
Bloklar Svelte, yani HTML/CSS/JS ile yazıldığı için duyarlıdır ve stilleri kapsüllenmiştir
Statik site olduğu için serverless’ın maliyet, güvenlik, ölçeklenebilirlik ve hız avantajlarını da elde edebilirsiniz
Primo, SquareWixFlow tarzı WYSIWYG tasarım kontrollerini tercih edenlerden çok, sitesini HTML/CSS/JavaScript ile tamamen kontrol etmek ama kendisine ve teknik olmayan arkadaşlarına/müşterilerine/işbirlikçilerine son derece basit bir içerik düzenleme deneyimi sunmak isteyenler için bir araç
No-code araçlardan ve kapalı platformlardan bunalan, ancak kodun gücünü koruyarak daha basit bir şey isteyen kişileri hedefliyor
Daha ileri düzeyde Primo, web’i bireylerin elinde tutmaya yönelik bir girişim
Web yayıncılığını daha erişilebilir kılarak teknik okuryazarlığı artırmayı ve insanların kara kutulara ve duvarlarla çevrili bahçelere kolayca sürüklenmeden özgür ifade imkânını ellerinde tutabilmelerini umuyorum
Ancak içerik yönetim sistemi sorunluydu. Sıradan statik site üreticilerinde olduğu gibi bir klasöre Markdown dosyaları koyunca şablona göre yazı ya da blog gönderisi oluşturmasını bekliyordum
Bir ara Primo deposunu fork’layıp veritabanı girdilerini dosya/klasör yapısına dönüştüren özel bir yöntem uyguladım, ancak ters yöndeki işlem zor göründüğü için başka bir yola gittim ve bu rehberden ilham alarak kendi Markdown statik site üreticimi yaptım: https://joshcollinsworth.com/blog/build-static-sveltekit-mar...
Benim kullanım senaryom hedef kitle olmayabilir, ama proje veritabanına yazılmak yerine dinamik bir dosya/klasör yapısı olarak saklanıp sıradan bir SvelteKit projesi gibi düzenlenebilir ve sürüm kontrolüne alınabilir olsaydı harika bir ürün olurdu
Özünde bileşen kütüphanesi ve özel bir UI’a sahip Svelte tabanlı statik site üretim framework’ü haline gelmiş olurdu
Forum da iyi; merak ettiğim birkaç sorunun yanıtı zaten vardı
Uzun süredir WordPress kullanıyorum ve son zamanlarda Svelte’i kurcalıyorum; bu gerçekten aradığım şeye çok yakın
Bunu yapmak için harcanan emeğe büyük saygı duyuyorum
Güzel proje, ancak “self-hosting” için Supabase hesabı gerektirmesi biraz hayal kırıklığı yaratıyor
Supabase’e bağlanabilen belirli barındırma hizmetlerinde çalışıyor gibi görünüyor ve sayfa içeriğini GitHub’dan almaya yönlendiriyor
Bu yüzden gerçekten self-host edilebilen bir CMS’ten çok, belirli servis sağlayıcılarla birlikte çalışan bir CMS’e daha yakın görünüyor
Amaç, insanların kendi sunucularını mümkün olduğunca kolay ayağa kaldırmasını sağlamaktı; bu yüzden bu servislere bağlanacak şekilde ilerledik
Ancak arka ucu ayırıp gerçekten doğrudan barındırılabilir hale getirmek için çalışıyoruz
Gerçekten gereken tek harici servis GitHub; ileride GitLab gibi başka sağlayıcılar da eklenebilir gibi görünüyor
Güzel proje, ama dürüst olmak gerekirse artık hem geliştiriciler hem de kullanıcılar için daha az JavaScript ya da JavaScript’siz yaklaşımların daha iyi olduğu noktaya geldiğimi hissediyorum
Eski blogumu Zola (https://www.getzola.org) ile üretilen yeni bir bloga taşıyorum; React/Gatsby ile yeni yaptığım portföy sitesini de performans farkı çok büyük olduğu için tekrar Zola ile yapıyorum
Bazen JavaScript’i kapatıp web’de geziniyorum; o durumda bir site tamamen çalışmıyorsa ya da yüklenmiyorsa bu büyük bir eksi
Eski site jQuery kullandığı için belli ölçüde can sıkıcıydı; React gibi şeyleri denemekse kâbustu
İçeride Svelte derleyicisini kullanıyor
2010'da Stiqr adlı bir site oluşturucu yaptığımın üzerinden şimdiden 10 yıldan fazla geçmiş olmasına inanmak neredeyse zor
Site artık çalışmıyor, ama izlerini YouTube videosunda görmek mümkün
https://www.youtube.com/watch?v=B-ff53t8TuU&t=224s
O dönemde, 2010'da responsive tasarımın yükselişe geçmesiyle projeyi bırakmak zorunda kalmıştım; ama yakın gelecekte web sitesi üretme biçiminin hâlâ bu yönde olacağına inanıyorum
Sürükle-bırak/blok yaklaşımı ile Svelte'in birleşimi gerçekten harika, ama bana spektrumun yanlış ucundaki bir araç gibi görünüyor
Bu, blokları çevrimiçi düzenleyiciyle özelleştirdiğiniz görsel bir web sitesi oluşturucu
Benim istediğim ise, çevrimdışıyken kendi araçlarımla yaptığım Svelte web sitesi için müşterinin metin ekleyip değiştirebildiği veya küçük ayarlar yapabildiği çevrimiçi bir arayüz
Siteyi belirli bir arayüz standardına uygun yapınca Primo'nun okuyabildiği ve müşterinin görsel arayüzle düzenleyebildiği bir model iyi olurdu
Büyük değişiklikler yine bana gelir, ben de çevrimdışı çalışma akışımın hızını ve özgürlüğünü koruyabilirim
Headless CMS'e ihtiyacım olduğu söylenebilir, ama denediklerimin hepsi aşırı karmaşıktı ve yalnızca kurulum ile bakım bile başlı başına büyük bir baş ağrısı yaratıyordu
Belirli alanlar oluşturmadıkça, örneğin bir görseli daire ya da kare yapmak gibi görsel yönler düzenlenemez
Sorun yerel IDE kullanamamaksa, şu anda Svelte bileşenlerini vanilla JavaScript olarak bundle edip Primo bloklarına aktarmak ve veriyi alanlar üzerinden geçirmek mümkün
Ancak kararlı hâle gelene kadar production'da kullanmadan önce birkaç hafta beklemek iyi olur
Anlattığın yöntem aslında benim müşteri projelerini yürütme biçimimle aynı. Kodun tamamını yazıyorum, genellikle başka projelerdeki blokları yeniden kullanıyorum ve müşterinin ilk günden itibaren minimum eğitimle düzenleyebileceği bir site teslim ediyorum
“Blok özelleştirme”ye metin değişikliklerinin dahil olmadığını mı kastediyorsun, yoksa müşteriye devretmek için yapılabilecek eylemlerin yeterince kısıtlı olmadığını mı merak ediyorum
Normal sayfa markup'ının içine sürükle-bırak ile yönetilen bölümler ekleyebiliyorsunuz ve Svelte dahil çoğu framework'ü destekliyor gibi görünüyor
Kurulum FTP ile yapılabiliyor