cfd8d9c706
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
292 lines
13 KiB
HTML
292 lines
13 KiB
HTML
<!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>
|