add deepinfra

chat/public/admin-blogs.html

@@ -33,6 +33,89 @@
     .ce-toolbar__content {
       max-width: 100% !important;
     }
+    
+    /* EditorJS Toolbar & Popup Fixes */
+    .ce-toolbar__plus,
+    .ce-toolbar__actions {
+      background: var(--bg-1, #fff) !important;
+      border-radius: 6px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+    .ce-inline-toolbar {
+      background: var(--bg-1, #fff) !important;
+      border: 1px solid var(--border, #e5e7eb) !important;
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+    }
+    .ce-inline-tool,
+    .ce-inline-toolbar__dropdown,
+    .ce-toolbar__plus {
+      background: transparent !important;
+    }
+    .ce-inline-tool:hover,
+    .ce-inline-toolbar__dropdown:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .ce-inline-tool--active {
+      background: var(--accent, #006B3D) !important;
+      color: #fff !important;
+    }
+    .ce-popover {
+      background: var(--bg-1, #fff) !important;
+      border: 1px solid var(--border, #e5e7eb) !important;
+      border-radius: 8px;
+      box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
+    }
+    .ce-popover__item {
+      background: transparent !important;
+    }
+    .ce-popover__item:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .ce-popover__item--active,
+    .ce-popover__item--focused {
+      background: rgba(0, 107, 61, 0.1) !important;
+    }
+    .ce-conversion-toolbar {
+      background: var(--bg-1, #fff) !important;
+      border: 1px solid var(--border, #e5e7eb) !important;
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+    }
+    .ce-conversion-tool {
+      background: transparent !important;
+    }
+    .ce-conversion-tool:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .ce-settings {
+      background: var(--bg-1, #fff) !important;
+      border: 1px solid var(--border, #e5e7eb) !important;
+      border-radius: 6px;
+      box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
+    }
+    .ce-settings__button {
+      background: transparent !important;
+    }
+    .ce-settings__button:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .cdx-settings-button {
+      background: transparent !important;
+    }
+    .cdx-settings-button:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .ce-toolbox__button {
+      background: transparent !important;
+    }
+    .ce-toolbox__button:hover {
+      background: rgba(0,0,0,0.05) !important;
+    }
+    .ce-toolbox__button--active {
+      background: var(--accent, #006B3D) !important;
+      color: #fff !important;
+    }
     .blog-list {
       display: grid;
       gap: 12px;

chat/public/admin-plan.html

@@ -83,6 +83,7 @@
                 <option value="google">Google</option>
                 <option value="groq">Groq</option>
                 <option value="nvidia">NVIDIA</option>
+                <option value="deepinfra">DeepInfra</option>
                 <option value="opencode">OpenCode</option>
               </select>
             </label>

chat/public/admin.html

@@ -268,6 +268,7 @@
               <option value="nvidia">NVIDIA</option>
               <option value="chutes">Chutes</option>
               <option value="cerebras">Cerebras</option>
+              <option value="deepinfra">DeepInfra</option>
               <option value="ollama">Ollama</option>
               <option value="opencode">OpenCode</option>
               <option value="cohere">Cohere</option>

chat/public/admin.js

@@ -1,6 +1,6 @@
 (() => {
-  const DEFAULT_PROVIDERS = ['openrouter', 'mistral', 'google', 'groq', 'nvidia', 'chutes', 'cerebras', 'ollama', 'opencode', 'cohere'];
-  const PLANNING_PROVIDERS = ['openrouter', 'mistral', 'google', 'groq', 'nvidia', 'chutes', 'cerebras', 'ollama', 'cohere'];
+  const DEFAULT_PROVIDERS = ['openrouter', 'mistral', 'google', 'groq', 'nvidia', 'chutes', 'cerebras', 'deepinfra', 'ollama', 'opencode', 'cohere'];
+  const PLANNING_PROVIDERS = ['openrouter', 'mistral', 'google', 'groq', 'nvidia', 'chutes', 'cerebras', 'deepinfra', 'ollama', 'cohere'];
   const pageType = document?.body?.dataset?.page || 'build';
   console.log('Admin JS loaded, pageType:', pageType);
   const state = {

chat/public/news.html

@@ -39,6 +39,12 @@
     </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;
@@ -59,6 +65,23 @@
             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 -->
@@ -87,17 +110,58 @@
     </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">
+    <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>
@@ -164,6 +228,8 @@
 
     <script>
         let posts = [];
+        let filteredPosts = [];
+        let currentCategory = 'all';
         let offset = 0;
         let limit = 9;
         let loading = false;
@@ -173,8 +239,100 @@
         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;
@@ -188,13 +346,14 @@
                 
                 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');
                     }
+
+                    filterAndRenderPosts();
                 } else {
                     hasMore = false;
                     if (posts.length === 0) {
@@ -212,10 +371,10 @@
         }
 
         // Render posts
-        function renderPosts(newPosts) {
+        function renderPosts(postsToRender) {
             const container = document.getElementById('posts-container');
             
-            newPosts.forEach(post => {
+            postsToRender.forEach(post => {
                 const card = createPostCard(post);
                 container.appendChild(card);
             });
@@ -224,10 +383,11 @@
         // 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';
+            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-300"></div>`
+                ? `<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 = `
@@ -236,18 +396,22 @@
                     <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>
+                            <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-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>
+                        <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-sm"></i>
+                                    <i class="fas fa-user text-brand-600 text-xs"></i>
                                 </div>
-                                <span class="text-sm text-gray-600">${escapeHtml(post.author || 'Plugin Compass Team')}</span>
+                                <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>
-                            <span class="text-brand-600 font-medium text-sm">Read more →</span>
                         </div>
                     </div>
                 </a>
@@ -256,6 +420,19 @@
             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) => {
@@ -282,7 +459,7 @@
             const date = new Date(dateString);
             return date.toLocaleDateString('en-US', { 
                 year: 'numeric', 
-                month: 'long', 
+                month: 'short', 
                 day: 'numeric' 
             });
         }