O halde en başta da söylediğim gibi Firebase kullanabilirsin. Belki yanlış anlatmış olabilirim ama Firebase güvensiz deniyorum sadece güvenlik kuralları yazması biraz meşakkatli olabiliyor. Tabi bu durum diğer database servisleri için de geçerli olabilir. Back-end konusunda çok fazla alternatife yönelmedim açıkçası. Sadece kullandığım servisi önereyim istedim.
Firebase'e bir göz attım ısınamadım diyorsan daha popüler alternatifler olan MongoDB veya PostgreSQL i önerebilirim. Geliştireceğin uygulamanın ihtiyacına göre NoSQL mi yoksa SQL database mi seçersin sana kalmış.
Database ile uygulama arasındaki bağlantıyı hangi servisle yaparsın bilemiyorum ancak onun için de Prisma önerebilirim. Bu bağlamda aşağıdaki bağlantılar faydalı olacaktır.
Şu anki mevcut demoda browser genişliğim 800px in altındayken dediğiniz gibi Content divi içerisinde scroll oluyor. Sorunuzdan da bunu anlıyorum. İsteğiniz farklı birşey ise sorunu biraz daha detaylandırabilir misiniz?
Haklısın, ben sadece yapacağın uygulamayı yüzler/binler kullanmayacak, sadece kendini geliştirmek için yapacaksın varsaymıştım. Güvenlik konusuna daha sonra odaklanırsın gibi düşündüm. Dediğin gibi bir CMS servisi kullanmak da çok mantıklı. Next.js kullanacaksan önerdikleri CMS servisleri arasından Strapi ve Storyblok gözüme çarpanlar arasında.
İstediğini tam anlayamadım fakat media Query içindeki .Content e overflow-y: auto !important yerine height: auto verip dener misin?
Güvenlik endişem yok, yanlızca deneme yanılma yapıyorum diyorsan, benim gibi Firebase kullanabilirsin. Tabii security rule'lar yazarak yine bunu güvenli hale getirebilirsin orası sana kalmış. Geliştireceğin uygulamanın karmaşıklığına göre security rule yazması zorlaşabiliyor. Üstelik Firebase Auth ile uygulamana üyelik sistemi de entegre edebilirsin.
Ben React ile değil de Vue/Nuxt.js ile kullandım istersen aşağıdaki bağlantılardan geliştirdiğim siteye göz atabilirsin. Geliştireceğin uygulama SSR gerektirecekse senin de Next.js kullanmanı tavsiye ederim.
Live Preview
Github Repo (CURD işlemlerinin nasıl yapıldığına dair birkaç ipucu sağlayabilir.)
CKEditor5 ile getData() işlemi artık CKEDITOR.instances<instance_name>.getData() şeklinde değil de <instance_name>.getData() şeklinde olmalı. Bunun için ClassicEditor.create() işlemi sırasında başarıyla oluşturma durumunda bir instance ataması yapmalısın.
let myCustomEditor;
ClassicEditor
.create(document.querySelector('#blogyazi_icerik'))
.then( newEditor => {
myCustomEditor = newEditor;
})
.catch( error => {
console.error(error);
});
Yukarıdaki kod parçacığı şeklinde instance tanımlamasını yaptıktan sonra myData.push() işleminde yolladığın objede value değerini artık CKEDITOR.instances.blogyazi_icerik.getData() değil de myCustomEditor.getData() şeklinde yapmalısın.
Ayrıca yanlış anlamazsan, bu gibi karşılaşacağın diğer durumlarda öncelikle ilgili servisin dökümantasyonlarını incelemeni tavsiye ederim. Basit birkaç aramada çözümleyebileceğin sorunlar için herhangi bir forum veya soru-cevap platformunda yardım isteği açmak mantıklı değil. Örneğin şu linke uğramış olsaydın soruna daha hızlı cevap bulabilirdin.
<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="#000"> <!-- #000 yerine "currentColor"-->
<path d="M0 0h24v24H0V0z" fill="none"/>
<path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z"/>
</svg>
Diyelim ki SVG iconunun rengi siyah (#000). İlgili SVG dosyanın içerisindeki siyah olarak atanmış fill veya stroke attribute larını currentColor olarak değiştir. Daha sonra bu SVG leri kullandığın yerde CSS ile bir color ataması yap.
Şu örneği inceleyebilirsin.
Ben farklı bir icon kaynağı istiyorum diyorsan Remixicon'u önerebilirim. Fakat yine de hover ya da active class atama işlemlerinde yukarıdaki anlattığım yönteme ihtiyaç duyacaksın.
Aşağıda yeterli alan var fakat yukarıdaki alan daha fazla. Eğer yeterli alan olmadığı durumlarda diğer yöne açılmasını istiyorsan kontrollerde değişiklik yapman lazım.
Diyelim ki sen dropdown menüsünün normal şartlarda aşağı açılmasını istiyorsun. Aşağıdaki alan dropdown'un yüksekliğinden daha küçükse yukarıya doğru açılsın şeklinde kontrol ekleyebilirsin.
Mevcut linkdeki kodu güncelledim. Eski halini de yorum satırı içerisine aldım, tekrar inceleyebilirsin.
<div class="wrapper"> <!-- wrapper sınıfına overflow-y: auto verilmeli -->
<!-- other elements -->
<div class="child"></div>
<!-- other elements -->
</div>
Yukarıdaki kod bloğuna yakın bir sistemimiz olduğunu düşünelim. Her dropdown butonuna tıklama işleminde aşağıdaki kontrolü sağlayarak aşağı doğru mu yoksa yukarıya doğru mu açılacağını belirtebilirsin.
{
// click işlemi içerisi
let topDistance = child.offsetTop - wrapper.offsetTop; // child elementinin, wrapper elementi içerisindeki y koordinatı diyebiliriz.
let scrollAmount = wrapper.scrollTop; // wrapper daki scroll miktarı
let exactTopDistance = topDistance - scrollAmount; // scroll olması durumunda uzaklık değişmeli
let wrapperHeight = wrapper.offsetHeight;
let exactBottomDistance = wrapperHeight - child.offsetHeight - exactTopDistance; // child elementin altında kalan alan. (wrapper elementi bitimine uzaklığı diyebiliriz)
if(exactTopDistance >= exactBottomDistance) {
// yukarıda kalan alan daha büyük dolayısıyla yukarıya doğru açılmalı.
} else {
// aşağı doğru açılmalı.
}
}
Anlatım biraz karışık gelmiş olabilir. Çalışan bir demoya şuradan ulaşabilirsin.
Three.js incelemeni tavsiye ederim.