469 lines
22 KiB
HTML
469 lines
22 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-2 {
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
.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); }
|
|
}
|
|
.featured-card {
|
|
background: linear-gradient(135deg, #1e3a2f 0%, #0d1f17 100%);
|
|
}
|
|
.card-hover {
|
|
transition: all 0.3s ease;
|
|
}
|
|
.card-hover:hover {
|
|
transform: translateY(-4px);
|
|
}
|
|
.category-tab {
|
|
transition: all 0.2s ease;
|
|
}
|
|
.category-tab.active {
|
|
background: linear-gradient(135deg, #6366f1, #8b5cf6);
|
|
color: white;
|
|
border-color: transparent;
|
|
}
|
|
</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 via-brand-700 to-brand-900 text-white py-20 relative overflow-hidden">
|
|
<div class="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg width=\"60\" height=\"60\" viewBox=\"0 0 60 60\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cg fill=\"none\" fill-rule=\"evenodd\"%3E%3Cg fill=\"%23ffffff\" fill-opacity=\"0.05\"%3E%3Cpath d=\"M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z\"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] opacity-30"></div>
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
|
|
<div class="inline-flex items-center gap-2 px-4 py-2 bg-white/10 backdrop-blur-sm rounded-full text-sm font-medium mb-6">
|
|
<i class="fas fa-rss text-brand-200"></i>
|
|
<span>Latest Updates</span>
|
|
</div>
|
|
<h1 class="text-4xl md:text-6xl font-bold mb-6 leading-tight">News & Updates</h1>
|
|
<p class="text-xl text-brand-100 max-w-2xl mx-auto leading-relaxed">
|
|
Stay up to date with the latest features, improvements, and announcements from Plugin Compass
|
|
</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Category Tabs -->
|
|
<div class="bg-white border-b border-gray-200 sticky top-16 z-40">
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div class="flex items-center gap-2 py-4 overflow-x-auto" id="category-tabs">
|
|
<button class="category-tab active px-4 py-2 rounded-full text-sm font-medium border border-gray-200 whitespace-nowrap" data-category="all">
|
|
All Posts
|
|
</button>
|
|
<button class="category-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 hover:border-gray-300 whitespace-nowrap" data-category="announcements">
|
|
Announcements
|
|
</button>
|
|
<button class="category-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 hover:border-gray-300 whitespace-nowrap" data-category="updates">
|
|
Updates
|
|
</button>
|
|
<button class="category-tab px-4 py-2 rounded-full text-sm font-medium border border-gray-200 text-gray-600 hover:border-gray-300 whitespace-nowrap" data-category="tutorials">
|
|
Tutorials
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Featured Post Section -->
|
|
<div id="featured-section" class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-12 hidden">
|
|
<div class="mb-6">
|
|
<span class="inline-flex items-center gap-2 text-sm font-semibold text-brand-600">
|
|
<i class="fas fa-star"></i> Featured
|
|
</span>
|
|
</div>
|
|
<div id="featured-post" class="featured-card rounded-2xl overflow-hidden shadow-2xl">
|
|
<!-- Featured post will be inserted here -->
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Blog Posts Grid -->
|
|
<main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
|
|
<div id="posts-header" class="flex items-center justify-between mb-8 hidden">
|
|
<h2 class="text-2xl font-bold text-gray-900">Recent Posts</h2>
|
|
<span id="posts-count" class="text-sm text-gray-500"></span>
|
|
</div>
|
|
<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 filteredPosts = [];
|
|
let currentCategory = 'all';
|
|
let offset = 0;
|
|
let limit = 9;
|
|
let loading = false;
|
|
let hasMore = true;
|
|
|
|
// Initialize
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
loadPosts();
|
|
setupInfiniteScroll();
|
|
setupCategoryTabs();
|
|
});
|
|
|
|
// Setup category tabs
|
|
function setupCategoryTabs() {
|
|
const tabs = document.querySelectorAll('.category-tab');
|
|
tabs.forEach(tab => {
|
|
tab.addEventListener('click', () => {
|
|
tabs.forEach(t => t.classList.remove('active'));
|
|
tab.classList.add('active');
|
|
currentCategory = tab.dataset.category;
|
|
filterAndRenderPosts();
|
|
});
|
|
});
|
|
}
|
|
|
|
// Filter and render posts
|
|
function filterAndRenderPosts() {
|
|
const container = document.getElementById('posts-container');
|
|
container.innerHTML = '';
|
|
|
|
if (currentCategory === 'all') {
|
|
filteredPosts = [...posts];
|
|
} else {
|
|
filteredPosts = posts.filter(p =>
|
|
(p.category || '').toLowerCase() === currentCategory.toLowerCase()
|
|
);
|
|
}
|
|
|
|
// Update posts count
|
|
document.getElementById('posts-header').classList.remove('hidden');
|
|
document.getElementById('posts-count').textContent = `${filteredPosts.length} article${filteredPosts.length !== 1 ? 's' : ''}`;
|
|
|
|
// Show/hide featured section
|
|
const featuredSection = document.getElementById('featured-section');
|
|
if (currentCategory === 'all' && filteredPosts.length > 0) {
|
|
renderFeaturedPost(filteredPosts[0]);
|
|
featuredSection.classList.remove('hidden');
|
|
renderPosts(filteredPosts.slice(1));
|
|
} else {
|
|
featuredSection.classList.add('hidden');
|
|
renderPosts(filteredPosts);
|
|
}
|
|
|
|
// Hide no-more-posts if we have results
|
|
if (filteredPosts.length > 0) {
|
|
document.getElementById('no-more-posts').classList.add('hidden');
|
|
document.getElementById('empty-state').classList.add('hidden');
|
|
}
|
|
}
|
|
|
|
// Render featured post
|
|
function renderFeaturedPost(post) {
|
|
const container = document.getElementById('featured-post');
|
|
const readTime = calculateReadTime(post.content);
|
|
|
|
container.innerHTML = `
|
|
<a href="/blog/${escapeHtml(post.slug)}" class="block md:flex">
|
|
<div class="md:w-1/2 h-64 md:h-auto relative overflow-hidden">
|
|
${post.featured_image
|
|
? `<img src="${escapeHtml(post.featured_image)}" alt="${escapeHtml(post.title)}" class="w-full h-full object-cover">`
|
|
: `<div class="w-full h-full min-h-[300px] bg-gradient-to-br from-brand-400/20 to-brand-600/20 flex items-center justify-center">
|
|
<i class="fas fa-newspaper text-6xl text-white/30"></i>
|
|
</div>`
|
|
}
|
|
<div class="absolute top-4 left-4">
|
|
<span class="px-3 py-1 bg-brand-600 text-white rounded-full text-xs font-semibold uppercase tracking-wide">Featured</span>
|
|
</div>
|
|
</div>
|
|
<div class="md:w-1/2 p-8 md:p-12 flex flex-col justify-center">
|
|
<div class="flex items-center gap-3 mb-4">
|
|
<span class="px-3 py-1 bg-white/10 text-white rounded-full text-xs font-medium">${escapeHtml(post.category || 'News')}</span>
|
|
<span class="text-brand-200 text-sm flex items-center gap-1">
|
|
<i class="far fa-clock"></i> ${readTime} min read
|
|
</span>
|
|
</div>
|
|
<h2 class="text-2xl md:text-3xl font-bold text-white mb-4 leading-tight">${escapeHtml(post.title)}</h2>
|
|
<p class="text-brand-100 mb-6 line-clamp-3">${escapeHtml(post.excerpt || '')}</p>
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-white/10 flex items-center justify-center">
|
|
<i class="fas fa-user text-white text-sm"></i>
|
|
</div>
|
|
<div>
|
|
<p class="text-white font-medium text-sm">${escapeHtml(post.author || 'Plugin Compass Team')}</p>
|
|
<p class="text-brand-300 text-xs">${formatDate(post.published_at)}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
}
|
|
|
|
// 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];
|
|
offset += data.posts.length;
|
|
|
|
if (data.posts.length < limit) {
|
|
hasMore = false;
|
|
document.getElementById('no-more-posts').classList.remove('hidden');
|
|
}
|
|
|
|
filterAndRenderPosts();
|
|
} 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(postsToRender) {
|
|
const container = document.getElementById('posts-container');
|
|
|
|
postsToRender.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 card-hover fade-in border border-gray-100';
|
|
|
|
const readTime = calculateReadTime(post.content);
|
|
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-500"></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-xs flex items-center gap-1">
|
|
<i class="far fa-clock"></i> ${readTime} min
|
|
</span>
|
|
</div>
|
|
<h2 class="text-lg 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 text-sm 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-xs"></i>
|
|
</div>
|
|
<span class="text-xs text-gray-600">${escapeHtml(post.author || 'Plugin Compass Team')}</span>
|
|
</div>
|
|
<div class="flex items-center gap-2 text-xs text-gray-400">
|
|
<span>${formatDate(post.published_at)}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
`;
|
|
|
|
return article;
|
|
}
|
|
|
|
// Calculate reading time
|
|
function calculateReadTime(content) {
|
|
if (!content) return 3;
|
|
let text = '';
|
|
if (typeof content === 'string') {
|
|
text = content;
|
|
} else if (content.blocks && Array.isArray(content.blocks)) {
|
|
text = content.blocks.map(b => b.data?.text || '').join(' ');
|
|
}
|
|
const words = text.split(/\s+/).filter(w => w.length > 0).length;
|
|
return Math.max(1, Math.ceil(words / 200));
|
|
}
|
|
|
|
// 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: 'short',
|
|
day: 'numeric'
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|