feat: implement comprehensive blog system
Add dual-source blog system with Editor.js integration: - Blog storage supporting repo-based (JSON) and database sources - Admin panel with rich text editor using Editor.js - Public news page with infinite scroll - Individual blog post viewer page - Categories management in admin - Image upload functionality - 4 SEO blog posts about WordPress with PluginCompass promotion - 3 News blog posts about Plugin Compass - API endpoints for CRUD operations - Security and validation for admin operations Closes blog feature request
This commit is contained in:
southseact-3d
291
chat/public/news.html
Normal file
291
chat/public/news.html
Normal file
@@ -0,0 +1,291 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="description" content="Latest news, updates, and announcements from Plugin Compass - AI WordPress Plugin Builder">
|
||||
<title>News & Updates - Plugin Compass</title>
|
||||
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
|
||||
|
||||
<script>
|
||||
(function applyTailwindConfig(cfg, attempts = 0) {
|
||||
try {
|
||||
if (typeof window.tailwind !== 'undefined') {
|
||||
window.tailwind.config = cfg;
|
||||
return;
|
||||
}
|
||||
} catch (e) {}
|
||||
if (attempts >= 20) return;
|
||||
setTimeout(() => applyTailwindConfig(cfg, attempts + 1), 100);
|
||||
})({
|
||||
theme: {
|
||||
extend: {
|
||||
fontFamily: { sans: ['Inter', 'sans-serif'] },
|
||||
colors: {
|
||||
brand: {
|
||||
50: '#eef2ff', 100: '#e0e7ff', 200: '#c7d2fe', 300: '#a5b4fc',
|
||||
400: '#818cf8', 500: '#6366f1', 600: '#4f46e5', 700: '#4338ca',
|
||||
800: '#3730a3', 900: '#312e81'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.line-clamp-3 {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
}
|
||||
.loading-spinner {
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
@keyframes spin {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
.fade-in {
|
||||
animation: fadeIn 0.5s ease-in;
|
||||
}
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(20px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- PostHog Analytics -->
|
||||
<script src="/posthog.js"></script>
|
||||
</head>
|
||||
<body class="bg-gray-50 text-gray-900">
|
||||
<!-- Navigation -->
|
||||
<nav class="bg-white shadow-sm border-b border-gray-200 sticky top-0 z-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="flex justify-between h-16">
|
||||
<div class="flex items-center">
|
||||
<a href="/" class="flex items-center gap-2">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="h-8 w-8">
|
||||
<span class="font-bold text-xl text-gray-900">Plugin Compass</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<a href="/" class="text-gray-600 hover:text-gray-900 font-medium">Home</a>
|
||||
<a href="/news" class="text-brand-600 font-medium">News</a>
|
||||
<a href="/features" class="text-gray-600 hover:text-gray-900 font-medium">Features</a>
|
||||
<a href="/pricing" class="text-gray-600 hover:text-gray-900 font-medium">Pricing</a>
|
||||
<a href="/builder" class="bg-brand-600 text-white px-4 py-2 rounded-lg hover:bg-brand-700 transition">Get Started</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Header -->
|
||||
<header class="bg-gradient-to-br from-brand-600 to-brand-800 text-white py-16">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
|
||||
<h1 class="text-4xl md:text-5xl font-bold mb-4">News & Updates</h1>
|
||||
<p class="text-xl text-brand-100 max-w-2xl mx-auto">
|
||||
Stay up to date with the latest features, improvements, and announcements from Plugin Compass
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Blog Posts Grid -->
|
||||
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
||||
<div id="posts-container" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||
<!-- Posts will be loaded here -->
|
||||
</div>
|
||||
|
||||
<!-- Loading Indicator -->
|
||||
<div id="loading-indicator" class="text-center py-12">
|
||||
<i class="fas fa-spinner fa-spin text-3xl text-brand-600 loading-spinner"></i>
|
||||
<p class="mt-4 text-gray-600">Loading posts...</p>
|
||||
</div>
|
||||
|
||||
<!-- No More Posts -->
|
||||
<div id="no-more-posts" class="text-center py-12 hidden">
|
||||
<p class="text-gray-500">You've reached the end!</p>
|
||||
</div>
|
||||
|
||||
<!-- Empty State -->
|
||||
<div id="empty-state" class="text-center py-16 hidden">
|
||||
<i class="fas fa-newspaper text-6xl text-gray-300 mb-4"></i>
|
||||
<h3 class="text-xl font-semibold text-gray-700 mb-2">No posts yet</h3>
|
||||
<p class="text-gray-500">Check back soon for news and updates!</p>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Footer -->
|
||||
<footer class="bg-gray-900 text-gray-300 py-12 mt-12">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="grid grid-cols-1 md:grid-cols-4 gap-8">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-4">
|
||||
<img src="/assets/Plugin.png" alt="Plugin Compass" class="h-8 w-8">
|
||||
<span class="font-bold text-white text-lg">Plugin Compass</span>
|
||||
</div>
|
||||
<p class="text-sm">Build custom WordPress plugins with AI. Replace expensive subscriptions with tailored solutions.</p>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Product</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/features" class="hover:text-white">Features</a></li>
|
||||
<li><a href="/pricing" class="hover:text-white">Pricing</a></li>
|
||||
<li><a href="/builder" class="hover:text-white">Builder</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Resources</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/news" class="hover:text-white">News</a></li>
|
||||
<li><a href="/docs" class="hover:text-white">Documentation</a></li>
|
||||
<li><a href="/faq" class="hover:text-white">FAQ</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-semibold text-white mb-4">Legal</h4>
|
||||
<ul class="space-y-2 text-sm">
|
||||
<li><a href="/privacy" class="hover:text-white">Privacy Policy</a></li>
|
||||
<li><a href="/terms" class="hover:text-white">Terms of Service</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-t border-gray-800 mt-8 pt-8 text-center text-sm">
|
||||
<p>© 2026 Plugin Compass. All rights reserved.</p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
let posts = [];
|
||||
let offset = 0;
|
||||
let limit = 9;
|
||||
let loading = false;
|
||||
let hasMore = true;
|
||||
|
||||
// Initialize
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
loadPosts();
|
||||
setupInfiniteScroll();
|
||||
});
|
||||
|
||||
// Load posts
|
||||
async function loadPosts() {
|
||||
if (loading || !hasMore) return;
|
||||
|
||||
loading = true;
|
||||
document.getElementById('loading-indicator').classList.remove('hidden');
|
||||
|
||||
try {
|
||||
const response = await fetch(`/api/blogs?type=news&status=published&limit=${limit}&offset=${offset}`);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.posts && data.posts.length > 0) {
|
||||
posts = [...posts, ...data.posts];
|
||||
renderPosts(data.posts);
|
||||
offset += data.posts.length;
|
||||
|
||||
if (data.posts.length < limit) {
|
||||
hasMore = false;
|
||||
document.getElementById('no-more-posts').classList.remove('hidden');
|
||||
}
|
||||
} else {
|
||||
hasMore = false;
|
||||
if (posts.length === 0) {
|
||||
document.getElementById('empty-state').classList.remove('hidden');
|
||||
} else {
|
||||
document.getElementById('no-more-posts').classList.remove('hidden');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load posts:', error);
|
||||
} finally {
|
||||
loading = false;
|
||||
document.getElementById('loading-indicator').classList.add('hidden');
|
||||
}
|
||||
}
|
||||
|
||||
// Render posts
|
||||
function renderPosts(newPosts) {
|
||||
const container = document.getElementById('posts-container');
|
||||
|
||||
newPosts.forEach(post => {
|
||||
const card = createPostCard(post);
|
||||
container.appendChild(card);
|
||||
});
|
||||
}
|
||||
|
||||
// Create post card element
|
||||
function createPostCard(post) {
|
||||
const article = document.createElement('article');
|
||||
article.className = 'bg-white rounded-xl shadow-md overflow-hidden hover:shadow-lg transition-shadow fade-in';
|
||||
|
||||
const imageHtml = post.featured_image
|
||||
? `<div class="h-48 overflow-hidden"><img src="${escapeHtml(post.featured_image)}" alt="${escapeHtml(post.title)}" class="w-full h-full object-cover hover:scale-105 transition-transform duration-300"></div>`
|
||||
: `<div class="h-48 bg-gradient-to-br from-brand-100 to-brand-200 flex items-center justify-center"><i class="fas fa-newspaper text-4xl text-brand-400"></i></div>`;
|
||||
|
||||
article.innerHTML = `
|
||||
<a href="/blog/${escapeHtml(post.slug)}" class="block">
|
||||
${imageHtml}
|
||||
<div class="p-6">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<span class="px-3 py-1 bg-brand-100 text-brand-700 rounded-full text-xs font-medium">${escapeHtml(post.category || 'News')}</span>
|
||||
<span class="text-gray-400 text-sm">${formatDate(post.published_at)}</span>
|
||||
</div>
|
||||
<h2 class="text-xl font-bold text-gray-900 mb-2 line-clamp-2 hover:text-brand-600 transition-colors">${escapeHtml(post.title)}</h2>
|
||||
<p class="text-gray-600 line-clamp-3 mb-4">${escapeHtml(post.excerpt || '')}</p>
|
||||
<div class="flex items-center justify-between pt-4 border-t border-gray-100">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 rounded-full bg-brand-100 flex items-center justify-center">
|
||||
<i class="fas fa-user text-brand-600 text-sm"></i>
|
||||
</div>
|
||||
<span class="text-sm text-gray-600">${escapeHtml(post.author || 'Plugin Compass Team')}</span>
|
||||
</div>
|
||||
<span class="text-brand-600 font-medium text-sm">Read more →</span>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
`;
|
||||
|
||||
return article;
|
||||
}
|
||||
|
||||
// Setup infinite scroll
|
||||
function setupInfiniteScroll() {
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting && !loading && hasMore) {
|
||||
loadPosts();
|
||||
}
|
||||
});
|
||||
}, { rootMargin: '100px' });
|
||||
|
||||
observer.observe(document.getElementById('loading-indicator'));
|
||||
}
|
||||
|
||||
// Utility functions
|
||||
function escapeHtml(text) {
|
||||
if (!text) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = text;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatDate(dateString) {
|
||||
if (!dateString) return '';
|
||||
const date = new Date(dateString);
|
||||
return date.toLocaleDateString('en-US', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric'
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user