Her Şeyden Önce: Sonuç
Hikayenin tamamını atlamak ve sadece sonucu görmek istiyorsanız, işte burada:
- flaming.codes sıfırdan yeniden yazıldı (bundan böyle v2 olarak anılacaktır) ve artık temel altyapısı olarak Qwik ve Qwik City kullanıyor, önceki versiyonda Next.js kullanılmıştı
- Üçüncü parti CMS ve Önbellekleme Katmanı ile ilgili tüm bağımlılıklar kaldırıldı ve tüm içerikler artık bu PWA'nın (Progressive Web App) Github deposunda kendim barındırılıyor
- Bunu yapma nedenim, flaming.codes'un v1'inin tüm yığınını sürdürmenin çok fazla iş olduğunu fark etmemdi - son damla CMS'yi (Sanity) güncellemem gerektiğinde ve zaten bazı şeyleri yeniden yazmam gerektiğinde oldu
- Google Translate yoluyla belgelerin özel ayrıştırılmasını ve çevirisini içeren v1 çeviri bileşeni, sırasıyla saf markdown içeriği ve OpenAI'nin GPT-4'ü ile değiştirildi
- Henüz TTS (Metinden Sese) özelliğini uygulamadım, ancak yakın gelecekte OpenAI'nin Whisper modelini kullanarak bunu yapacağım
- flaming.codes hala Vercel üzerinde barındırılıyor, ancak siteyi sunmak için Build Output API yerine şimdi Edge Functions kullanılıyor, çünkü şu anda Qwik City tarafından sunulan bir dağıtım adaptörü yok
- Tasarım da güncellendi ve şimdi Windy Radix Colors kullanarak hem açık hem de koyu modu destekliyor
CMS Gitti, CMS Yaşasın
flaming.codes'un v2 sürümünü yazmamın temel nedeni hizmet bağımlılıklarını azaltmaktı:
- CMS'yi (ve CDN'yi) kaldır ve tüm içerikleri (yazılar, kategoriler, varlıklar vs.) doğrudan depoda yönet ve barındır, bu da aynı zamanda açık kaynak yapılacak
- bu geçişin bir parçası olarak, artık gerekli olmayan CMS içeriğinin önbellekleme katmanını kaldır
- Google Translate ve Microsoft metinden sese çeviri yerine OpenAI'nin API'lerini kullan
Güçlü bir CMS olan Sanity ve onun dinamik sorgu oluşturucusundan uzaklaşmak, kendim bazı (hafif) içerik yönetimini uygulamak zorunda kalmamın bedeli olarak gelir. Projeyi güncellemek ve sürdürmekle ilgilenmiyorum. Amacım, bu çözümün bir yıl boyunca bir yazı yazmasam bile çalışıyor olmasıdır, çünkü tek gereken deponun açılması, bir makale yazılması ve ardından yeni bir dağıtım tetiklemek için ana değişikliklerin basılması olmalıdır.
GitHub'daki projenin kökünde bulunan /cms dizinini inceleyerek kendiniz kaynak kodlarını görebilirsiniz. Oldukça iyi çalışıyor, anlaşılır ve tamamen bağımsız, hiçbir ekstra hesap ve bir CMS için giriş gerektirmiyor. Çıkış deneyimi şimdi daha güçlü çünkü artık tüm içerik için Markdown kullanabiliyorum, bu da Sanity'nin özel düzenleyicisine göre çok daha kolay yazılabilir ve bakımı yapılabilir. Düzenleyici betiğini çalıştırırken canlı-yeniden yükleme seçeneği ekledim, böylece değişiklikleri gerçek zamanlı olarak görebiliyorum - istesem birden fazla dilde bile aynı anda.
CMS hakkında ayrı bir yazıda daha fazla detaya gireceğim.
Neden Qwik ve Qwik City'i Next.js Yerine Tercih Ettim
Qwik ve onun Tam Yığın Çerçevesi olan “Qwik City” başından beri bana çok ilgi çekici geldi: gerektiğinde herhangi bir JS'nin otomatik olarak yüklenmemesi ve herhangi bir hidrasyon olmadan yüklenmesi. flaming.codes bağlamında bu mimarinin kazanımları azalıyor, çünkü benim sitem esas olarak bir blog. Bir web uygulamasının ne kadar çok bileşeni ve etkileşimi varsa, Qwik kullanarak elde edilen iyileştirmeler o kadar büyük olur. Yine de, merak ediyordum ve ilk elden tecrübe edinmek istedim.
Qwik ile Next.js'e Kıyasla i18n
flaming.codes, birkaçı sağdan sola olan olmak üzere 14 dilde çevrilmiştir. İlk kez 2023 başlarında Qwik'e baktığımda (aslında v2 yeniden yazmasından yaklaşık 10 ay önce), gerçek bir i18n çözümü olmadığını düşündüm ve ilk testlerin ötesinde bir çaba göstermedim.
Aralık ayında tekrar baktığımda, flaming.codes'ta çevirileri etkinleştirmek için gereken çözüm qwik-speak idi, bu yüzden eski kod tabanını tozunu aldım ve yeniden yazmaya başladım.
Yeni bir çevirmen
Eski stack Google Translate API'sini kullanıyordu, bu iyi bir hizmet verdi ama tüm bileşen biraz karmaşıktı:
- orijinal dildeki içerik Sanity CMS'ten alınıyor, ayrıştırılıyor ve ara parçalara bölünüyordu
- Her bir parça hedef dillere çevriliyordu
- Çevrilen parçalar yeniden inşa ediliyor, böylelikle orijinal içerik, biçimlendirmesi dahil, Frontend'in kullanımına sunuluyordu
Yeterince iyi çalışıyordu, ama kodu okumak ve sürdürmek nispeten zordu.
flaming.codes artık tüm içeriği çevirmek için OpenAI kullanıyor. Tüm kurulum çok daha basit:
- yeni makale düz Markdown olarak yazılıyor
- makale OpenAI'ye gönderiliyor ve bütün olarak çevriliyor
- LLM'ler yeterince akıllı olduğu için sadece ilgili kısımları çeviriyorlar, ancak örneğin tüm ön maddeyi değil (bir yönerge, LLM'ye hangi alanların işleme tabi olmaması gerektiği konusunda kılavuzluk ediyor)
Vercel'de Dağıtım
Qwik City, statik bir site (SSG) olarak dışa aktarılabilirdi, ancak bu durumda dinamik uç noktaları kullanamayacağım anlamına gelir, bu nedenle flaming.codes "Vercel Edge" adaptörünü kullanarak Vercel aracılığıyla sürekli dağıtım ve barındırma için devam ediyor. Aynı zamanda "Build Output API" Vercel adaptörünün de kullanılabilir olmasını isterdim ama şu an için yeterli.
flaming.codes daha önce Build Output API'sini kullanıyordu, bu sunucu tarafı kodun Node.js API'lerini kullandığı anlamına geliyordu - Vercel Edge'de artık bu mümkün değil çünkü bu, Web ve Node.js API'lerinin biraz garip ve kafa karıştırıcı bir karışımı. Bu bazı bileşenleri uyumluluk için yeniden yazmamı gerektirdi.
Yapay Zeka ve Şeffaflık
v2'nin ilk çıkışı için hazır olmasa da, yapay zeka kullanılarak oluşturulan makalelerin hangi yönleri hakkında daha fazla bilgi içeren yeni makaleler için meta veri özelliklerini güncelleyeceğim.
Aynı hamlede, şeffaflığı daha da artırmak için sitenin analitiklerini de kamuoyuna açık hale getireceğim. flaming.codes Plausible.io kullanıyor, temel kullanım agregasyonu için gizliliğe saygılı bir analitik hizmeti.
Yeni Bir Tasarım
Tüm yeniden yazımın bir parçası olarak tasarımı biraz güncelledim. Çoğu sayfada benzer, ancak taze bir boya katmanı ile.
Yeni Renkler + Açık ve Koyu Mod
Windy Radix Colors sayesinde, açık ve koyu mod için desteği uygulamak kolay oldu çünkü kütüphane her iki mod için de tüm renk çeşitlerini sağlıyor.
Artık Radix Color paletini bir Tailwind eklentisi olarak kullanıyorum, bu renk çeşitlerinin dikkatli bir seçimini sunuyor ve açık/koyu mod için kolay destek sağlıyor. Aynı zamanda Qwik için bir kütüphane olarak mevcut olan Lucide Icons kullanmaya geçtim. Karşılaştırma için işte eski tasarımın bazı ekran görüntüleri:
Sonuç ve Gelecek Adımlar
v1 flaming.codes lansmandan bu yana bana çok iyi hizmet etti, ancak diğer hizmetlere olan bağımlılıkların basit hale getirilmesi gerektiğini hissettim.
Yeniden yazma işlemini bitirmem yaklaşık iki hafta sürdü. İçerik yönetimi bundan sonra çok daha basit olacak ve aşırı maliyetlerden kaçınmama yardımcı olacak.
flaming.codes'un v2 sürümü, başlangıçta v1'in özelliklerine tam olarak ulaşamadı, ancak beğeni/dislike butonu veya TTS (Metinden Sese) özelliği gibi eksik özellikleri gelecek haftalarda ekleyeceğim.
