575 lines
24 KiB
JavaScript
575 lines
24 KiB
JavaScript
// Admin Dashboard JavaScript
|
|
// Use relative URL to go through frontend proxy
|
|
const API_BASE = window.location.origin;
|
|
|
|
// Load all data on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadSystemStats();
|
|
loadOllamaStatus();
|
|
loadGPUStatus();
|
|
loadPerformanceTest();
|
|
loadModels();
|
|
loadConfig();
|
|
loadClusteringStats();
|
|
});
|
|
|
|
// Refresh all data
|
|
function refreshAll() {
|
|
loadSystemStats();
|
|
loadOllamaStatus();
|
|
loadGPUStatus();
|
|
loadPerformanceTest();
|
|
loadModels();
|
|
loadConfig();
|
|
loadClusteringStats();
|
|
}
|
|
|
|
// Load system statistics
|
|
async function loadSystemStats() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/stats`);
|
|
const data = await response.json();
|
|
|
|
const html = `
|
|
<div class="stat-row">
|
|
<span class="stat-label">Total Articles</span>
|
|
<span class="stat-value">${data.articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Crawled Articles</span>
|
|
<span class="stat-value">${data.crawled_articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">AI Summarized</span>
|
|
<span class="stat-value">${data.summarized_articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Clustered Articles</span>
|
|
<span class="stat-value">${data.clustered_articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Neutral Summaries</span>
|
|
<span class="stat-value">${data.neutral_summaries || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Active Subscribers</span>
|
|
<span class="stat-value">${data.subscribers || 0}</span>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('systemStats').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('systemStats').innerHTML = `<div class="error">Error loading stats: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load Ollama status
|
|
async function loadOllamaStatus() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/ollama/ping`);
|
|
const data = await response.json();
|
|
|
|
const isActive = data.status === 'success';
|
|
const statusClass = isActive ? 'status-active' : 'status-inactive';
|
|
|
|
const html = `
|
|
<div class="stat-row">
|
|
<span class="stat-label">Status</span>
|
|
<span class="stat-value">
|
|
<span class="status-indicator ${statusClass}"></span>
|
|
${isActive ? 'Active' : 'Inactive'}
|
|
</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Base URL</span>
|
|
<span class="stat-value">${data.ollama_config?.base_url || 'N/A'}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Current Model</span>
|
|
<span class="stat-value">${data.ollama_config?.model || 'N/A'}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Enabled</span>
|
|
<span class="stat-value">${data.ollama_config?.enabled ? 'Yes' : 'No'}</span>
|
|
</div>
|
|
${isActive ? `
|
|
<div class="stat-row">
|
|
<span class="stat-label">Response</span>
|
|
<span class="stat-value" style="font-size: 12px;">${data.response?.substring(0, 50)}...</span>
|
|
</div>
|
|
` : ''}
|
|
`;
|
|
|
|
document.getElementById('ollamaStatus').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('ollamaStatus').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load GPU status
|
|
async function loadGPUStatus() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/ollama/gpu-status`);
|
|
const data = await response.json();
|
|
|
|
const gpuActive = data.gpu_in_use;
|
|
const statusClass = gpuActive ? 'status-active' : 'status-warning';
|
|
|
|
const html = `
|
|
<div class="stat-row">
|
|
<span class="stat-label">GPU Available</span>
|
|
<span class="stat-value">
|
|
<span class="status-indicator ${data.gpu_available ? 'status-active' : 'status-inactive'}"></span>
|
|
${data.gpu_available ? 'Yes' : 'No'}
|
|
</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">GPU In Use</span>
|
|
<span class="stat-value">
|
|
<span class="status-indicator ${statusClass}"></span>
|
|
${gpuActive ? 'Yes' : 'No (CPU Mode)'}
|
|
</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Models Loaded</span>
|
|
<span class="stat-value">${data.models_loaded || 0}</span>
|
|
</div>
|
|
${data.gpu_details ? `
|
|
<div class="stat-row">
|
|
<span class="stat-label">GPU Model</span>
|
|
<span class="stat-value">${data.gpu_details.model}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">GPU Layers</span>
|
|
<span class="stat-value">${data.gpu_details.gpu_layers}</span>
|
|
</div>
|
|
` : ''}
|
|
${!gpuActive ? `
|
|
<div style="margin-top: 10px; padding: 10px; background: #fef3c7; border-radius: 5px; font-size: 12px;">
|
|
💡 Enable GPU for 5-10x faster processing
|
|
</div>
|
|
` : ''}
|
|
`;
|
|
|
|
document.getElementById('gpuStatus').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('gpuStatus').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load performance test
|
|
async function loadPerformanceTest() {
|
|
document.getElementById('performanceTest').innerHTML = '<div class="loading">Click "Run Test" to check performance</div>';
|
|
}
|
|
|
|
// Run performance test
|
|
async function runPerformanceTest() {
|
|
document.getElementById('performanceTest').innerHTML = '<div class="loading">Running test...</div>';
|
|
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/ollama/test`);
|
|
const data = await response.json();
|
|
|
|
let badgeClass = 'badge-fair';
|
|
if (data.duration_seconds < 5) badgeClass = 'badge-excellent';
|
|
else if (data.duration_seconds < 15) badgeClass = 'badge-good';
|
|
else if (data.duration_seconds > 30) badgeClass = 'badge-slow';
|
|
|
|
const html = `
|
|
<div class="stat-row">
|
|
<span class="stat-label">Duration</span>
|
|
<span class="stat-value">${data.duration_seconds}s</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Performance</span>
|
|
<span class="stat-value">
|
|
<span class="performance-badge ${badgeClass}">${data.performance}</span>
|
|
</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Model</span>
|
|
<span class="stat-value">${data.model}</span>
|
|
</div>
|
|
<div style="margin-top: 10px; padding: 10px; background: #f3f4f6; border-radius: 5px; font-size: 12px;">
|
|
${data.recommendation}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('performanceTest').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('performanceTest').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load available models
|
|
async function loadModels() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/ollama/models`);
|
|
const data = await response.json();
|
|
|
|
if (data.models && data.models.length > 0) {
|
|
const modelsList = data.models.map(model => {
|
|
const isCurrent = model === data.current_model;
|
|
return `<li class="${isCurrent ? 'current-model' : ''}">${model} ${isCurrent ? '(current)' : ''}</li>`;
|
|
}).join('');
|
|
|
|
const html = `
|
|
<ul class="model-list">
|
|
${modelsList}
|
|
</ul>
|
|
<div style="margin-top: 10px; font-size: 12px; color: #666;">
|
|
Current: ${data.current_model}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('modelsList').innerHTML = html;
|
|
} else {
|
|
document.getElementById('modelsList').innerHTML = '<div>No models found</div>';
|
|
}
|
|
} catch (error) {
|
|
document.getElementById('modelsList').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load configuration
|
|
async function loadConfig() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/ollama/config`);
|
|
const data = await response.json();
|
|
|
|
const html = `
|
|
<div class="stat-row">
|
|
<span class="stat-label">Base URL</span>
|
|
<span class="stat-value" style="font-size: 12px;">${data.ollama_config?.base_url || 'N/A'}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Model</span>
|
|
<span class="stat-value">${data.ollama_config?.model || 'N/A'}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Enabled</span>
|
|
<span class="stat-value">${data.ollama_config?.enabled ? 'Yes' : 'No'}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Has API Key</span>
|
|
<span class="stat-value">${data.ollama_config?.has_api_key ? 'Yes' : 'No'}</span>
|
|
</div>
|
|
<div style="margin-top: 10px; padding: 10px; background: #f3f4f6; border-radius: 5px; font-size: 11px;">
|
|
<strong>Config file:</strong> ${data.env_file_path || 'N/A'}<br>
|
|
<strong>Exists:</strong> ${data.env_file_exists ? 'Yes' : 'No'}
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('configInfo').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('configInfo').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
// Load clustering statistics
|
|
async function loadClusteringStats() {
|
|
try {
|
|
const response = await fetch(`${API_BASE}/api/stats`);
|
|
const data = await response.json();
|
|
|
|
const clusteringRate = data.clustered_articles > 0
|
|
? ((data.neutral_summaries / data.clustered_articles) * 100).toFixed(1)
|
|
: 0;
|
|
|
|
const html = `
|
|
<div class="dashboard-grid">
|
|
<div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Total Articles</span>
|
|
<span class="stat-value">${data.articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Clustered Articles</span>
|
|
<span class="stat-value">${data.clustered_articles || 0}</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Neutral Summaries</span>
|
|
<span class="stat-value">${data.neutral_summaries || 0}</span>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Clustering Rate</span>
|
|
<span class="stat-value">${clusteringRate}%</span>
|
|
</div>
|
|
<div class="stat-row">
|
|
<span class="stat-label">Multi-Source Stories</span>
|
|
<span class="stat-value">${data.neutral_summaries || 0}</span>
|
|
</div>
|
|
<div style="margin-top: 10px; padding: 10px; background: #dbeafe; border-radius: 5px; font-size: 12px;">
|
|
<strong>AI Clustering:</strong> Automatically detects duplicate stories from different sources and generates neutral summaries.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
document.getElementById('clusteringStats').innerHTML = html;
|
|
} catch (error) {
|
|
document.getElementById('clusteringStats').innerHTML = `<div class="error">Error: ${error.message}</div>`;
|
|
}
|
|
}
|
|
|
|
|
|
// Subscriber Management
|
|
async function viewSubscribers() {
|
|
const listDiv = document.getElementById('subscriberList');
|
|
const messageDiv = document.getElementById('subscriberMessage');
|
|
|
|
listDiv.innerHTML = '<p class="loading">Loading subscribers...</p>';
|
|
messageDiv.innerHTML = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/subscribers');
|
|
const data = await response.json();
|
|
|
|
if (data.subscribers && data.subscribers.length > 0) {
|
|
let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
|
|
html += '<table style="width: 100%; border-collapse: collapse;">';
|
|
html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Email</th><th style="padding: 10px; text-align: left;">Categories</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
|
|
html += '<tbody>';
|
|
|
|
data.subscribers.forEach(sub => {
|
|
const categories = sub.categories ? sub.categories.join(', ') : 'All';
|
|
html += `<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 10px;">${sub.email}</td>
|
|
<td style="padding: 10px;">${categories}</td>
|
|
<td style="padding: 10px;"><span style="color: ${sub.status === 'active' ? 'green' : 'red'};">${sub.status}</span></td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} subscribers</p>`;
|
|
listDiv.innerHTML = html;
|
|
} else {
|
|
listDiv.innerHTML = '<p style="color: #666;">No subscribers found.</p>';
|
|
}
|
|
} catch (error) {
|
|
listDiv.innerHTML = '<p style="color: red;">Failed to load subscribers</p>';
|
|
}
|
|
}
|
|
|
|
async function deleteAllSubscribers() {
|
|
const messageDiv = document.getElementById('subscriberMessage');
|
|
|
|
if (!confirm('⚠️ Are you sure you want to delete ALL subscribers? This cannot be undone!')) {
|
|
return;
|
|
}
|
|
|
|
if (!confirm('⚠️ FINAL WARNING: This will permanently delete all subscriber data. Continue?')) {
|
|
return;
|
|
}
|
|
|
|
messageDiv.innerHTML = '<p class="loading">Deleting all subscribers...</p>';
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/subscribers/delete-all', {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
messageDiv.innerHTML = `<p style="color: green;">✓ ${data.message}</p>`;
|
|
document.getElementById('subscriberList').innerHTML = '';
|
|
// Refresh stats
|
|
loadStats();
|
|
} else {
|
|
messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Failed to delete subscribers'}</p>`;
|
|
}
|
|
} catch (error) {
|
|
messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
|
|
}
|
|
}
|
|
|
|
|
|
// RSS Feed Management
|
|
async function exportRSSFeeds() {
|
|
const messageDiv = document.getElementById('rssFeedMessage');
|
|
messageDiv.innerHTML = '<p class="loading">Exporting RSS feeds...</p>';
|
|
|
|
try {
|
|
const response = await fetch('/api/rss-feeds/export');
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
// Create download
|
|
const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement('a');
|
|
a.href = url;
|
|
a.download = `rss-feeds-${new Date().toISOString().split('T')[0]}.json`;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
|
|
messageDiv.innerHTML = `<p style="color: green;">✓ Exported ${data.total} RSS feeds</p>`;
|
|
} else {
|
|
messageDiv.innerHTML = `<p style="color: red;">✗ ${data.error || 'Export failed'}</p>`;
|
|
}
|
|
} catch (error) {
|
|
messageDiv.innerHTML = '<p style="color: red;">✗ Network error</p>';
|
|
}
|
|
}
|
|
|
|
async function importRSSFeeds(event) {
|
|
const messageDiv = document.getElementById('rssFeedMessage');
|
|
const file = event.target.files[0];
|
|
|
|
if (!file) return;
|
|
|
|
messageDiv.innerHTML = '<p class="loading">Importing RSS feeds...</p>';
|
|
|
|
try {
|
|
const text = await file.text();
|
|
const data = JSON.parse(text);
|
|
|
|
const response = await fetch('/api/rss-feeds/import', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(data)
|
|
});
|
|
|
|
const result = await response.json();
|
|
|
|
if (response.ok) {
|
|
let html = `<p style="color: green;">✓ ${result.message}</p>`;
|
|
if (result.errors && result.errors.length > 0) {
|
|
html += '<details style="margin-top: 10px;"><summary>Show details</summary><ul>';
|
|
result.errors.forEach(err => {
|
|
html += `<li style="color: orange;">${err}</li>`;
|
|
});
|
|
html += '</ul></details>';
|
|
}
|
|
messageDiv.innerHTML = html;
|
|
|
|
// Refresh feed list if visible
|
|
if (document.getElementById('rssFeedList').innerHTML) {
|
|
viewRSSFeeds();
|
|
}
|
|
} else {
|
|
messageDiv.innerHTML = `<p style="color: red;">✗ ${result.error || 'Import failed'}</p>`;
|
|
}
|
|
} catch (error) {
|
|
messageDiv.innerHTML = `<p style="color: red;">✗ Error: ${error.message}</p>`;
|
|
}
|
|
|
|
// Reset file input
|
|
event.target.value = '';
|
|
}
|
|
|
|
async function viewRSSFeeds() {
|
|
const listDiv = document.getElementById('rssFeedList');
|
|
const messageDiv = document.getElementById('rssFeedMessage');
|
|
|
|
listDiv.innerHTML = '<p class="loading">Loading RSS feeds...</p>';
|
|
messageDiv.innerHTML = '';
|
|
|
|
try {
|
|
const response = await fetch('/api/rss-feeds');
|
|
const data = await response.json();
|
|
|
|
if (data.feeds && data.feeds.length > 0) {
|
|
let html = '<div style="max-height: 400px; overflow-y: auto; margin-top: 15px;">';
|
|
html += '<table style="width: 100%; border-collapse: collapse;">';
|
|
html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 10px; text-align: left;">Name</th><th style="padding: 10px; text-align: left;">Category</th><th style="padding: 10px; text-align: left;">URL</th><th style="padding: 10px; text-align: left;">Status</th></tr></thead>';
|
|
html += '<tbody>';
|
|
|
|
data.feeds.forEach(feed => {
|
|
const statusColor = feed.active ? 'green' : 'gray';
|
|
const statusText = feed.active ? 'Active' : 'Inactive';
|
|
html += `<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 10px;">${feed.name}</td>
|
|
<td style="padding: 10px;">${feed.category}</td>
|
|
<td style="padding: 10px; font-size: 12px; max-width: 300px; overflow: hidden; text-overflow: ellipsis;">${feed.url}</td>
|
|
<td style="padding: 10px;"><span style="color: ${statusColor};">${statusText}</span></td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
html += `<p style="margin-top: 10px; color: #666;">Total: ${data.total} feeds</p>`;
|
|
listDiv.innerHTML = html;
|
|
} else {
|
|
listDiv.innerHTML = '<p style="color: #666;">No RSS feeds found.</p>';
|
|
}
|
|
} catch (error) {
|
|
listDiv.innerHTML = '<p style="color: red;">Failed to load RSS feeds</p>';
|
|
}
|
|
}
|
|
|
|
|
|
// Recent Summarization Activity
|
|
let autoRefreshInterval = null;
|
|
|
|
async function loadRecentArticles() {
|
|
const container = document.getElementById('recentArticles');
|
|
|
|
try {
|
|
const response = await fetch('/api/admin/recent-articles');
|
|
const data = await response.json();
|
|
|
|
if (data.articles && data.articles.length > 0) {
|
|
let html = '<div style="max-height: 500px; overflow-y: auto;">';
|
|
html += '<table style="width: 100%; border-collapse: collapse; font-size: 14px;">';
|
|
html += '<thead><tr style="background: #f5f5f5; position: sticky; top: 0;"><th style="padding: 8px; text-align: left;">Time</th><th style="padding: 8px; text-align: left;">Title</th><th style="padding: 8px; text-align: left;">Source</th><th style="padding: 8px; text-align: left;">Category</th><th style="padding: 8px; text-align: right;">Words</th></tr></thead>';
|
|
html += '<tbody>';
|
|
|
|
data.articles.forEach(article => {
|
|
const time = article.summarized_at ? new Date(article.summarized_at).toLocaleTimeString() : 'N/A';
|
|
const title = article.title_en || article.title;
|
|
const categoryColors = {
|
|
'general': '#667eea',
|
|
'local': '#f59e0b',
|
|
'sports': '#10b981',
|
|
'science': '#8b5cf6'
|
|
};
|
|
const categoryColor = categoryColors[article.category] || '#6b7280';
|
|
|
|
html += `<tr style="border-bottom: 1px solid #eee;">
|
|
<td style="padding: 8px; white-space: nowrap; color: #666;">${time}</td>
|
|
<td style="padding: 8px; max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" title="${title}">${title}</td>
|
|
<td style="padding: 8px;">${article.source}</td>
|
|
<td style="padding: 8px;"><span style="background: ${categoryColor}; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">${article.category || 'N/A'}</span></td>
|
|
<td style="padding: 8px; text-align: right;">${article.summary_word_count || 'N/A'}</td>
|
|
</tr>`;
|
|
});
|
|
|
|
html += '</tbody></table></div>';
|
|
html += `<p style="margin-top: 10px; color: #666; font-size: 12px;">Last updated: ${new Date().toLocaleTimeString()}</p>`;
|
|
container.innerHTML = html;
|
|
} else {
|
|
container.innerHTML = '<p style="color: #666;">No summarized articles found.</p>';
|
|
}
|
|
} catch (error) {
|
|
container.innerHTML = '<p style="color: red;">Failed to load recent articles</p>';
|
|
}
|
|
}
|
|
|
|
function toggleAutoRefresh() {
|
|
const checkbox = document.getElementById('autoRefresh');
|
|
|
|
if (checkbox.checked) {
|
|
// Start auto-refresh every 10 seconds
|
|
loadRecentArticles();
|
|
autoRefreshInterval = setInterval(loadRecentArticles, 10000);
|
|
} else {
|
|
// Stop auto-refresh
|
|
if (autoRefreshInterval) {
|
|
clearInterval(autoRefreshInterval);
|
|
autoRefreshInterval = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Load recent articles on page load
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadRecentArticles();
|
|
});
|