No articles found.

'; return; } filteredArticles.forEach(article => { const link = document.createElement('a'); link.href = '#'; link.className = `block p-3 rounded-lg hover:bg-gray-100 ${article.id === currentArticleId ? 'bg-blue-50 font-semibold text-blue-700' : ''}`; link.dataset.id = article.id; link.innerHTML = ` ${article.title} ${article.category} `; link.onclick = (e) => { e.preventDefault(); displayArticle(article.id); }; articleList.appendChild(link); }); } function displayArticle(id) { const article = knowledgeBase.find(a => a.id === id); if (!article) { showWelcomeMessage(); return; } currentArticleId = id; // Simple markdown to HTML conversion let contentHtml = article.content .replace(/^# (.*$)/gim, '

$1

') .replace(/^## (.*$)/gim, '

$1

') .replace(/\n- (.*$)/gim, '

\n
• $1
\n

') .replace(/\n(\d+)\. (.*$)/gim, '

\n
1. $2
\n

') .replace(/<\/ul>\s*

/g, '') // Merge consecutive lists .replace(/<\/ol>\s*
/g, ''); articleViewContent.innerHTML = `

${article.category}

${article.title}

${contentHtml}
`; viewActions.classList.remove('hidden'); switchMode('view'); renderArticleList(searchInput.value); } function showWelcomeMessage() { currentArticleId = null; articleViewContent.innerHTML = `

Welcome to your Knowledge Base

Select an article from the left to read, or create a new one.

`; viewActions.classList.add('hidden'); lucide.createIcons(); renderArticleList(); } // --- MODE SWITCHING --- function switchMode(mode) { currentMode = mode; if (mode === 'edit') { viewPanel.classList.add('hidden'); editorPanel.classList.remove('hidden'); } else { // view editorPanel.classList.add('hidden'); viewPanel.classList.remove('hidden'); } } // --- EVENT LISTENERS --- searchInput.addEventListener('input', () => renderArticleList(searchInput.value)); addNewBtn.addEventListener('click', () => { editorTitle.textContent = 'Create New Article'; articleIdInput.value = ''; articleTitleInput.value = ''; articleCategoryInput.value = ''; articleContentInput.value = ''; switchMode('edit'); }); cancelBtn.addEventListener('click', () => { if (currentArticleId) { displayArticle(currentArticleId); } else { showWelcomeMessage(); } switchMode('view'); }); saveBtn.addEventListener('click', () => { const id = articleIdInput.value ? parseInt(articleIdInput.value) : null; const title = articleTitleInput.value.trim(); const category = articleCategoryInput.value.trim(); const content = articleContentInput.value.trim(); if (!title || !content) { // IV. C. No alert(), use a more subtle error indication articleTitleInput.classList.toggle('border-red-500', !title); articleContentInput.classList.toggle('border-red-500', !content); return; } // Remove error states articleTitleInput.classList.remove('border-red-500'); articleContentInput.classList.remove('border-red-500'); if (id) { // Update existing const index = knowledgeBase.findIndex(a => a.id === id); knowledgeBase[index] = { id, title, category, content }; } else { // Create new const newId = knowledgeBase.length > 0 ? Math.max(...knowledgeBase.map(a => a.id)) + 1 : 1; knowledgeBase.push({ id: newId, title, category, content }); currentArticleId = newId; } displayArticle(currentArticleId); }); editBtn.addEventListener('click', () => { const article = knowledgeBase.find(a => a.id === currentArticleId); if (!article) return; editorTitle.textContent = 'Edit Article'; articleIdInput.value = article.id; articleTitleInput.value = article.title; articleCategoryInput.value = article.category; articleContentInput.value = article.content; switchMode('edit'); }); deleteBtn.addEventListener('click', () => { // No window.confirm(), directly delete if (currentArticleId) { knowledgeBase = knowledgeBase.filter(a => a.id !== currentArticleId); showWelcomeMessage(); } }); // --- PDF DOWNLOAD LOGIC --- downloadPdfBtn.addEventListener('click', () => { const { jsPDF } = window.jspdf; const content = document.getElementById('article-view-content'); const article = knowledgeBase.find(a => a.id === currentArticleId); html2canvas(content, { scale: 2, backgroundColor: '#ffffff' }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'portrait', unit: 'pt', format: 'a4' }); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const canvasWidth = canvas.width; const canvasHeight = canvas.height; const ratio = canvasWidth / canvasHeight; const widthInPdf = pdfWidth - 80; // Margin const heightInPdf = widthInPdf / ratio; pdf.addImage(imgData, 'PNG', 40, 40, widthInPdf, heightInPdf); pdf.save(`${article.title.replace(/\s/g, '-')}.pdf`); }); }); // --- INITIALIZATION --- showWelcomeMessage(); lucide.createIcons(); });