feat: implement real-time SEO character counters and improve default avatar handling and translation logic.

This commit is contained in:
Ümit Tunç
2026-08-07 23:25:40 +03:00
parent 32b3f5187d
commit a51af8208d
7 changed files with 91 additions and 5 deletions
@@ -1815,11 +1815,30 @@
}
});
function updateCharCounter(inputId, counterId, maxLen) {
const input = document.getElementById(inputId);
const counter = document.getElementById(counterId);
if (!input || !counter) return;
const len = input.value.length;
counter.textContent = `${len} / ${maxLen}`;
if (len > maxLen) {
counter.className = 'text-[11px] font-extrabold text-red-600';
} else if (len >= maxLen * 0.85) {
counter.className = 'text-[11px] font-extrabold text-amber-600';
} else {
counter.className = 'text-[11px] font-extrabold text-slate-400';
}
}
function openBlogModal() {
document.getElementById('modal_blog_id').value = '';
document.getElementById('modal_blog_title').value = '';
document.getElementById('modal_intern_category').value = 'experience';
document.getElementById('modal_blog_excerpt').value = '';
document.getElementById('modal_meta_title').value = '';
document.getElementById('modal_meta_description').value = '';
updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60);
updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160);
if (blogQuill) blogQuill.setContents([]);
document.getElementById('blog-modal-title').querySelector('span').textContent = 'Yeni Blog Yazısı Ekle';
@@ -1837,6 +1856,10 @@
document.getElementById('modal_blog_title').value = blogItem.title;
document.getElementById('modal_intern_category').value = blogItem.intern_category || 'experience';
document.getElementById('modal_blog_excerpt').value = blogItem.excerpt || '';
document.getElementById('modal_meta_title').value = blogItem.meta_title || '';
document.getElementById('modal_meta_description').value = blogItem.meta_description || '';
updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60);
updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160);
if (blogQuill && blogItem.content) {
blogQuill.setContents([]);
blogQuill.clipboard.dangerouslyPasteHTML(blogItem.content);
@@ -1957,6 +1980,27 @@
<textarea name="excerpt" id="modal_blog_excerpt" rows="2" class="w-full px-4 py-3 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-700" placeholder="Yazınızın liste sayfalarında görünecek kısa özeti..."></textarea>
</div>
<!-- SEO Meta Title & Meta Description Fields with Character Counter -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 p-4 bg-slate-50/80 rounded-2xl border border-slate-100">
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wider">SEO Meta Başlık</label>
<span id="modal_meta_title_counter" class="text-[11px] font-extrabold text-slate-400">0 / 60</span>
</div>
<input type="text" name="meta_title" id="modal_meta_title" maxlength="60" oninput="updateCharCounter('modal_meta_title', 'modal_meta_title_counter', 60)" class="w-full px-3.5 py-2.5 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-800 bg-white" placeholder="Max. 60 karakter" />
<p class="text-[10px] text-slate-400 mt-1 font-semibold">Boş bırakılırsa blog başlığı kullanılır.</p>
</div>
<div>
<div class="flex justify-between items-center mb-1.5">
<label class="block text-xs font-extrabold text-slate-700 uppercase tracking-wider">SEO Meta Açıklama</label>
<span id="modal_meta_description_counter" class="text-[11px] font-extrabold text-slate-400">0 / 160</span>
</div>
<textarea name="meta_description" id="modal_meta_description" rows="2" maxlength="160" oninput="updateCharCounter('modal_meta_description', 'modal_meta_description_counter', 160)" class="w-full px-3.5 py-2 rounded-xl border border-slate-200 focus:border-blue-500 focus:ring-2 focus:ring-blue-100 text-xs font-medium text-slate-700 bg-white" placeholder="Max. 160 karakter"></textarea>
<p class="text-[10px] text-slate-400 mt-1 font-semibold">Boş bırakılırsa kısa özet kullanılır.</p>
</div>
</div>
<div>
<label class="block text-xs font-extrabold text-slate-600 uppercase tracking-wider mb-2">Blog İçeriği *</label>
<div id="blog-quill-editor-container" class="rounded-xl border border-slate-200 overflow-hidden">