@jhits/plugin-blog 0.0.19 → 0.0.20

package/src/api/router.ts

@@ -3,9 +3,6 @@
 /**
  * Plugin Blog API Router
  * Centralized API handler for all blog plugin routes
- * 
- * This router handles requests to /api/plugin-blog/*
- * and routes them to the appropriate handler
  */
 
 import { NextRequest, NextResponse } from 'next/server';
@@ -26,15 +23,12 @@ export interface BlogApiRouterConfig {
 
 /**
  * Handle blog API requests
- * Routes requests to appropriate handlers based on path
- * Similar to plugin-dep, accepts config directly instead of requiring initialization
  */
 export async function handleBlogApi(
     req: NextRequest,
     path: string[],
     config: BlogApiRouterConfig
 ): Promise<NextResponse> {
-    // Create the blog API config from the router config
     const blogApiConfig = createBlogApiConfig({
         getDb: config.getDb,
         getUserId: config.getUserId,
@@ -42,87 +36,43 @@ export async function handleBlogApi(
     });
 
     const method = req.method;
-    // Handle empty path array - means we're at /api/plugin-blog
-    // Ensure path is always an array
     const safePath = Array.isArray(path) ? path : [];
     const route = safePath.length > 0 ? safePath[0] : '';
 
     try {
-        // Route: /api/plugin-blog (list/create) - empty path or 'list'
-        // This handles both /api/plugin-blog and /api/plugin-blog?limit=3
         if (!route || route === 'list') {
+            if (method === 'GET') return await BlogListHandler(req, blogApiConfig);
+            if (method === 'POST') return await BlogCreateHandler(req, blogApiConfig);
+        } else if (route === 'new') {
+            if (method === 'POST') return await BlogCreateHandler(req, blogApiConfig);
+        } else if (route === 'categories') {
             if (method === 'GET') {
-                return await BlogListHandler(req, blogApiConfig);
-            }
-            if (method === 'POST') {
-                return await BlogCreateHandler(req, blogApiConfig);
-            }
-            // Method not allowed for root route
-            return NextResponse.json(
-                { error: `Method ${method} not allowed for route: /` },
-                { status: 405 }
-            );
-        }
-        // Route: /api/plugin-blog/new (create new)
-        else if (route === 'new') {
-            if (method === 'POST') {
-                return await BlogCreateHandler(req, blogApiConfig);
-            }
-        }
-        // Route: /api/plugin-blog/categories (get categories)
-        else if (route === 'categories') {
-            if (method === 'GET') {
-                // Import categories handler
                 const categoriesModule = await import('./categories');
                 return await categoriesModule.GET(req, blogApiConfig);
             }
-        }
-        // Route: /api/plugin-blog/check-title (check title duplicate)
-        else if (route === 'check-title') {
+        } else if (route === 'check-title') {
             if (method === 'GET') {
                 const checkTitleModule = await import('./check-title');
                 return await checkTitleModule.GET(req, blogApiConfig);
             }
-        }
-        // Route: /api/plugin-blog/config (get/save plugin config)
-        else if (route === 'config') {
+        } else if (route === 'config') {
             const configApiConfig = {
                 getDb: config.getDb,
                 getUserId: config.getUserId,
                 siteId: config.siteId || 'default',
             };
-            if (method === 'GET') {
-                return await ConfigGetHandler(req, configApiConfig);
-            }
-            if (method === 'POST') {
-                return await ConfigPostHandler(req, configApiConfig);
-            }
-        }
-        // Route: /api/plugin-blog/[slug] (get/update/delete by slug)
-        else {
+            if (method === 'GET') return await ConfigGetHandler(req, configApiConfig);
+            if (method === 'POST') return await ConfigPostHandler(req, configApiConfig);
+        } else {
             const slug = route;
-            if (method === 'GET') {
-                return await BlogGetHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
-            }
-            if (method === 'PUT') {
-                return await BlogUpdateHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
-            }
-            if (method === 'DELETE') {
-                return await BlogDeleteHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
-            }
+            if (method === 'GET') return await BlogGetHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
+            if (method === 'PUT') return await BlogUpdateHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
+            if (method === 'DELETE') return await BlogDeleteHandler(req, { params: Promise.resolve({ slug }) }, blogApiConfig);
         }
 
-        // Method not allowed
-        return NextResponse.json(
-            { error: `Method ${method} not allowed for route: ${route || '/'}` },
-            { status: 405 }
-        );
+        return NextResponse.json({ error: `Method ${method} not allowed for route: ${route || '/'}` }, { status: 405 });
     } catch (error: any) {
         console.error('[BlogApiRouter] Error:', error);
-        return NextResponse.json(
-            { error: error.message || 'Internal server error' },
-            { status: 500 }
-        );
+        return NextResponse.json({ error: error.message || 'Internal server error' }, { status: 500 });
     }
 }
-

package/src/api/service.ts

@@ -0,0 +1,241 @@
+/**
+ * Blog API Service
+ * Shared server-side logic for MongoDB operations and language fallbacks
+ */
+
+import { BlogApiConfig } from './handler';
+import { slugify } from '../lib/utils/slugify';
+
+export class BlogService {
+    constructor(private config: BlogApiConfig) {}
+
+    /**
+     * Common aggregation pipeline for including author data
+     */
+    private getAuthorLookupPipeline() {
+        return [
+            {
+                $lookup: {
+                    from: 'users',
+                    let: { authorId: '$authorId' },
+                    pipeline: [
+                        { $match: { $expr: { $or: [{ $eq: ['$_id', '$$authorId'] }, { $eq: [{ $toString: '$_id' }, '$$authorId'] }] } } },
+                        { $project: { password: 0 } }
+                    ],
+                    as: 'author'
+                }
+            },
+            { $addFields: { author: { $arrayElemAt: ['$author', 0] } } }
+        ];
+    }
+
+    /**
+     * List blogs with filters and language fallbacks
+     */
+    async listBlogs(options: { 
+        limit: number; 
+        skip: number; 
+        status?: string; 
+        isAdmin: boolean; 
+        userId?: string | null; 
+        requestedLanguage: string;
+    }) {
+        const dbConn = await this.config.getDb();
+        const db = dbConn.db();
+        const collection = db.collection(this.config.collectionName || 'blogs');
+
+        let query: any = {};
+        if (options.isAdmin && options.userId) {
+            if (options.status) query = { 'publicationData.status': options.status, authorId: options.userId };
+            else query = { authorId: options.userId };
+        } else {
+            query = {
+                [`languages.${options.requestedLanguage}.status`]: 'published',
+                'publicationData.date': { $lte: new Date() },
+            };
+        }
+
+        const pipeline: any[] = [
+            { $match: query },
+            { $sort: { 'publicationData.date': -1 } },
+            { $skip: options.skip },
+            { $limit: options.isAdmin ? 1000 : options.limit },
+            ...this.getAuthorLookupPipeline()
+        ];
+
+        const [data, totalCount] = await Promise.all([
+            collection.aggregate(pipeline).toArray(),
+            collection.countDocuments(query),
+        ]);
+
+        const formatted = data.map((doc: any) => this.formatWithLanguage(doc, options.requestedLanguage, options.isAdmin)).filter(Boolean);
+        return { blogs: formatted, total: totalCount };
+    }
+
+    /**
+     * Get single blog by slug
+     */
+    async getBlogBySlug(slug: string, requestedLanguage: string, isAdmin: boolean = false) {
+        const dbConn = await this.config.getDb();
+        const db = dbConn.db();
+        const collection = db.collection(this.config.collectionName || 'blogs');
+
+        const pipeline = [{ $match: { slug } }, ...this.getAuthorLookupPipeline()];
+        const results = await collection.aggregate(pipeline).toArray();
+        const blog = results[0];
+
+        if (!blog) return null;
+        return this.formatWithLanguage(blog, requestedLanguage, isAdmin);
+    }
+
+    /**
+     * Create or update the language-specific document structure
+     */
+    prepareUpdateData(body: any, existingBlog: any | null, language: string) {
+        const { title, summary, contentBlocks, image, categoryTags, publicationData, seo } = body;
+        const now = new Date();
+        const finalStatus = publicationData?.status || 'concept';
+        
+        // Generate a localized slug for this specific language edition
+        // If it's not published, we add a draft suffix
+        const isPublishing = finalStatus === 'published';
+        let localizedSlug = slugify(title);
+        
+        // Only append draft suffix if NOT publishing
+        if (!isPublishing) {
+            localizedSlug = `${localizedSlug}-draft-${Date.now().toString().slice(-4)}`;
+        }
+
+
+
+        const langData = {
+            blocks: contentBlocks || [],
+            metadata: {
+                title: title.trim(),
+                slug: localizedSlug, // Store the slug inside the language object
+                excerpt: (summary || '').trim(),
+                featuredImage: image,
+                categories: categoryTags?.category ? [categoryTags.category] : [],
+                tags: categoryTags?.tags || [],
+                seo: seo || {},
+            },
+            updatedAt: now.toISOString(),
+            status: finalStatus,
+        };
+
+        const updatedLanguages = {
+            ...(existingBlog?.languages || {}),
+            [language]: langData,
+        };
+
+        // Determine global status based on ALL languages
+        // If at least ONE language is published, the global status is 'published'
+        // This ensures a new draft edition doesn't hide existing published editions
+        const anyPublished = Object.values(updatedLanguages).some((l: any) => l.status === 'published');
+        const globalStatus = anyPublished ? 'published' : 'draft';
+
+        // Update root slug if this is the primary language
+        const isPrimaryLanguage = !existingBlog || language === (existingBlog.metadata?.lang || 'nl');
+        const rootSlug = isPrimaryLanguage ? localizedSlug : (existingBlog?.slug || localizedSlug);
+
+        return {
+            // Keep the primary title/summary but allow them to be updated
+            title: title.trim(),
+            slug: rootSlug, // Include root slug in update
+            summary: (summary || '').trim(),
+            contentBlocks: contentBlocks || [],
+            image: image || {},
+            categoryTags: {
+                category: categoryTags?.category?.trim() || '',
+                tags: categoryTags?.tags || [],
+            },
+            publicationData: {
+                ...(existingBlog?.publicationData || {}),
+                ...publicationData,
+                status: globalStatus,
+                date: publicationData?.date ? new Date(publicationData.date) : (existingBlog?.publicationData?.date || now),
+            },
+            languages: updatedLanguages,
+            updatedAt: now,
+        };
+    }
+
+    /**
+     * Format a document for a specific language
+     */
+    private formatWithLanguage(doc: any, requestedLanguage: string, isAdmin: boolean) {
+        const languages = doc.languages || {};
+        let bestLanguage = requestedLanguage;
+        let isMissingTranslation = !languages[requestedLanguage];
+
+        if (isMissingTranslation && !isAdmin) {
+            const fallbacks = [doc.metadata?.lang || 'nl', 'nl', 'en'];
+            for (const lang of fallbacks) {
+                if (languages[lang]) { bestLanguage = lang; isMissingTranslation = false; break; }
+            }
+            if (isMissingTranslation) return null; // Public view requires translation or fallback
+        }
+
+        const content = languages[bestLanguage] || {};
+        const meta = content.metadata || {};
+
+        const status = isMissingTranslation ? 'draft' : (content.status || 'draft');
+        
+        // --- ROBUST SLUG RESOLUTION ---
+        let resolvedSlug = doc.slug;
+        if (!isMissingTranslation) {
+            if (meta.slug) {
+                resolvedSlug = meta.slug;
+            } else if (meta.title) {
+                resolvedSlug = slugify(meta.title);
+                if (status !== 'published') resolvedSlug += `-draft-${Date.now().toString().slice(-4)}`;
+            }
+        }
+
+        return {
+            id: doc.id || doc._id?.toString(),
+            // Prefer localized slug if available, fallback to root slug or generated one
+            slug: resolvedSlug,
+            // If missing translation, provide root content as template but keep status 'not-translated'
+            title: isMissingTranslation ? (doc.title || '') : (meta.title || doc.title || ''),
+            summary: isMissingTranslation ? (doc.summary || '') : (meta.excerpt || doc.summary || ''),
+            contentBlocks: isMissingTranslation ? (doc.contentBlocks || []) : (content.blocks || doc.contentBlocks || []),
+            image: isMissingTranslation ? doc.image : (meta.featuredImage || doc.image),
+            categoryTags: isMissingTranslation ? { category: '', tags: [] } : {
+                category: meta.categories?.[0] || '',
+                tags: meta.tags || []
+            },
+            lang: bestLanguage,
+            isMissingTranslation,
+            requestedLanguage,
+            availableLanguages: Object.keys(languages),
+            updatedAt: doc.updatedAt || doc.publicationData?.date || new Date().toISOString(),
+            // Include a lightweight summary of all languages for admin view (tooltips)
+            languages: isAdmin ? (() => {
+                const summary: any = {};
+                // Use Object.keys(languages) to ensure we iterate over all existing translations
+                Object.keys(languages).forEach(lang => {
+                    const lData = languages[lang] || {};
+                    // Normalize status: handle 'concept' -> 'draft'
+                    let langStatus = lData.status || 'draft';
+                    if (langStatus === 'concept') langStatus = 'draft';
+                    
+                    summary[lang] = {
+                        status: langStatus,
+                        metadata: {
+                            title: lData.metadata?.title || doc.title || 'Untitled'
+                        }
+                    };
+                });
+                return summary;
+            })() : undefined,
+            status: status,
+            publication: {
+                status: status,
+                // FORCE undefined date for new editions so they don't look published or inherit old dates
+                date: isMissingTranslation ? undefined : (doc.publicationData?.date || doc.updatedAt)
+            },
+            author: doc.author ? { name: doc.author.name, image: doc.author.image, displayRole: doc.author.displayRole } : undefined
+        };
+    }
+}

package/src/hooks/useAutoSave.ts

@@ -0,0 +1,64 @@
+'use client';
+
+import { useState, useEffect, useRef } from 'react';
+
+/**
+ * Hook for automatic saving of editor state
+ */
+export function useAutoSave(
+    postId: string | undefined, 
+    state: any, 
+    onSave: (state: any) => Promise<void>,
+    delay = 10000
+) {
+    const [autoSaveEnabled, setAutoSaveEnabled] = useState(true);
+    const [saveStatus, setSaveStatus] = useState<'idle' | 'saving' | 'saved' | 'error'>('idle');
+    const [countdown, setCountdown] = useState<number | null>(null);
+    const timerRef = useRef<NodeJS.Timeout | null>(null);
+    const countdownIntervalRef = useRef<NodeJS.Timeout | null>(null);
+
+    useEffect(() => {
+        if (!autoSaveEnabled || !state.isDirty || !postId) {
+            setCountdown(null);
+            if (timerRef.current) clearTimeout(timerRef.current);
+            if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+            return;
+        }
+
+        // Reset timer on state change
+        if (timerRef.current) clearTimeout(timerRef.current);
+        if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+
+        const startTime = Date.now();
+        setCountdown(Math.ceil(delay / 1000));
+
+        countdownIntervalRef.current = setInterval(() => {
+            const remaining = Math.max(0, delay - (Date.now() - startTime));
+            setCountdown(Math.ceil(remaining / 1000));
+        }, 1000);
+
+        timerRef.current = setTimeout(async () => {
+            setSaveStatus('saving');
+            try {
+                await onSave(state);
+                setSaveStatus('saved');
+                setTimeout(() => setSaveStatus('idle'), 2000);
+            } catch (error) {
+                setSaveStatus('error');
+                setTimeout(() => setSaveStatus('idle'), 3000);
+            }
+        }, delay);
+
+        return () => {
+            if (timerRef.current) clearTimeout(timerRef.current);
+            if (countdownIntervalRef.current) clearInterval(countdownIntervalRef.current);
+        };
+    }, [state, autoSaveEnabled, postId, delay, onSave]);
+
+    return {
+        autoSaveEnabled,
+        setAutoSaveEnabled,
+        saveStatus,
+        countdown
+    };
+}

package/src/hooks/useCategories.ts

@@ -7,62 +7,34 @@
 
 import { useState, useEffect } from 'react';
 
-export function useCategories() {
+export function useCategories(language?: string) {
     const [categories, setCategories] = useState<string[]>([]);
     const [loading, setLoading] = useState(true);
 
     useEffect(() => {
         const fetchCategories = async () => {
+
             try {
-                const categorySet = new Set<string>();
+                // We rely on the specialized categories endpoint which is strictly filtered by the Orchestrator
+                const url = language 
+                    ? `/api/plugin-blog/categories?language=${language}`
+                    : '/api/plugin-blog/categories';
                 
-                // 1. Fetch from categories endpoint (legacy categoryTags.category)
-                try {
-                    const categoriesResponse = await fetch('/api/plugin-blog/categories');
-                    if (categoriesResponse.ok) {
-                        const categoriesData = await categoriesResponse.json();
-                        if (Array.isArray(categoriesData.categories)) {
-                            categoriesData.categories.forEach((cat: string) => {
-                                if (cat && cat.trim()) {
-                                    categorySet.add(cat.trim());
-                                }
-                            });
-                        }
-                    }
-                } catch (e) {
-                    // Categories endpoint not available, continue
-                }
+
+                const response = await fetch(url);
                 
-                // 2. Fetch all blog posts and extract categories from Hero blocks
-                try {
-                    const response = await fetch('/api/plugin-blog?admin=true&limit=1000');
-                    if (response.ok) {
-                        const data = await response.json();
-                        const posts = Array.isArray(data.blogs) ? data.blogs : (Array.isArray(data) ? data : []);
-                        
-                        posts.forEach((post: any) => {
-                            if (post.blocks && Array.isArray(post.blocks)) {
-                                // Find Hero block
-                                const heroBlock = post.blocks.find((block: any) => block.type === 'hero');
-                                if (heroBlock && heroBlock.data && heroBlock.data.category) {
-                                    const category = heroBlock.data.category.trim();
-                                    if (category) {
-                                        categorySet.add(category);
-                                    }
-                                }
-                            }
-                        });
-                    }
-                } catch (e) {
-                    console.error('Failed to fetch posts for categories:', e);
+                if (response.ok) {
+                    const data = await response.json();
+                    const list = Array.isArray(data.categories) ? data.categories : [];
+                    
+
+                    setCategories(list);
+                } else {
+                    console.error(`[useCategories] API_ERROR: ${response.status}`);
+                    setCategories([]);
                 }
-                
-                // Convert to sorted array
-                const sortedCategories = Array.from(categorySet).sort();
-                setCategories(sortedCategories);
             } catch (error) {
-                console.error('Failed to fetch categories:', error);
-                // Fallback to empty array
+                console.error('[useCategories] CRITICAL_SYNC_FAILURE:', error);
                 setCategories([]);
             } finally {
                 setLoading(false);
@@ -70,7 +42,7 @@ export function useCategories() {
         };
 
         fetchCategories();
-    }, []);
+    }, [language]);
 
     return { categories, loading };
 }