@jhits/plugin-blog 0.0.16 → 0.0.18

package/src/api/handler.ts

@@ -23,6 +23,7 @@ export interface BlogApiConfig {
  * GET /api/blogs - List all blog posts
  * GET /api/blogs?admin=true - List all posts for admin (includes drafts)
  * GET /api/blogs?status=published - Filter by status
+ * GET /api/blogs?language=en - Filter by language (falls back to nl if not found)
  */
 export async function GET(req: NextRequest, config: BlogApiConfig): Promise<NextResponse> {
     try {
@@ -31,6 +32,7 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
         const skip = Number(url.searchParams.get('skip') ?? 0);
         const statusFilter = url.searchParams.get('status');
         const isAdminView = url.searchParams.get('admin') === 'true';
+        const requestedLanguage = url.searchParams.get('language') || 'nl';
 
         const userId = await config.getUserId(req);
         const dbConnection = await config.getDb();
@@ -51,11 +53,13 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
                 query = { authorId: userId };
             }
         } else {
-            // Public view: only published posts
+            // Public view: only published posts in the SPECIFIC language
+            // This ensures we only fetch blogs that actually have content for this language
             query = {
-                'publicationData.status': 'published',
+                [`languages.${requestedLanguage}.status`]: 'published',
                 'publicationData.date': { $lte: new Date() },
             };
+            
             if (statusFilter && statusFilter !== 'published') {
                 // Non-admin can't filter by non-published status
                 return NextResponse.json({ error: 'Invalid status filter' }, { status: 400 });
@@ -72,14 +76,112 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
             blogs.countDocuments(query),
         ]);
 
-        const formatted = data.map((doc: any) => ({
-            ...doc,
-            _id: doc._id.toString(),
-        }));
+        // Supported languages for fallback (in order of preference)
+        const fallbackLanguages = [requestedLanguage, 'nl', 'en'];
+
+        const formatted = data.map((doc: any) => {
+            const languages = doc.languages || {};
+            
+            // Only use exact language match public views - no fallback for
+            // This ensures visitors see content in their language only
+            const hasExactLanguage = !!languages[requestedLanguage];
+            
+            // Skip this post if no exact language match (for public non-admin views)
+            if (!isAdminView && !hasExactLanguage) {
+                return null;
+            }
+            
+            const postPrimaryLang = doc.metadata?.lang || 'nl';
+            
+            // Find the best available language for this post
+            let bestLanguage = requestedLanguage;
+            let isMissingTranslation = false;
+
+            if (!languages[requestedLanguage]) {
+                // For admin view, if specific language is requested, show it as missing instead of falling back
+                // This ensures the UI is "synced" with the selected language
+                if (isAdminView) {
+                    isMissingTranslation = true;
+                } else {
+                    // Public view still uses fallback or filtering
+                    const fallbackLanguages = [postPrimaryLang, 'nl', 'en'];
+                    for (const lang of fallbackLanguages) {
+                        if (languages[lang]) {
+                            bestLanguage = lang;
+                            break;
+                        }
+                    }
+                }
+            }
+            
+            const langContent = languages[bestLanguage] || {};
+            const meta = langContent.metadata || {};
+            
+            // Ensure all languages in doc have a status and updatedAt for the dashboard
+            const enrichedLanguages = { ...languages };
+            Object.keys(enrichedLanguages).forEach(lang => {
+                if (!enrichedLanguages[lang].status) {
+                    enrichedLanguages[lang].status = doc.publicationData?.status === 'concept' ? 'draft' : (doc.publicationData?.status || 'draft');
+                }
+                if (!enrichedLanguages[lang].updatedAt) {
+                    enrichedLanguages[lang].updatedAt = doc.updatedAt;
+                }
+            });
+
+            // Language display names for placeholders
+            const langNames: Record<string, string> = {
+                nl: 'Dutch',
+                en: 'English',
+                sv: 'Swedish',
+                de: 'German',
+                fr: 'French',
+                es: 'Spanish'
+            };
+            
+            const displayTitle = isMissingTranslation 
+                ? `(No ${langNames[requestedLanguage] || requestedLanguage.toUpperCase()} translation)` 
+                : (meta.title || doc.title || '');
+
+            const displayStatus = isMissingTranslation 
+                ? 'not-translated' 
+                : (langContent.status || doc.publicationData?.status || 'concept');
+            
+            return {
+                ...doc,
+                _id: doc._id.toString(),
+                title: displayTitle,
+                summary: isMissingTranslation ? '' : (meta.excerpt || doc.summary || ''),
+                contentBlocks: isMissingTranslation ? [] : (langContent.blocks || doc.contentBlocks || doc.blocks || []),
+                image: isMissingTranslation ? null : (meta.featuredImage || doc.image),
+                categoryTags: isMissingTranslation ? { category: '', tags: [] } : (meta.categories ? {
+                    category: meta.categories[0] || '',
+                    tags: meta.tags || doc.categoryTags?.tags || []
+                } : (doc.categoryTags || { category: '', tags: [] })),
+                publicationData: {
+                    ...doc.publicationData,
+                    status: displayStatus,
+                },
+                seo: isMissingTranslation ? {} : (meta.seo || doc.seo || {}),
+                lang: bestLanguage,
+                isMissingTranslation,
+                requestedLanguage,
+                availableLanguages: Object.keys(languages),
+                languages: enrichedLanguages,
+                updatedAt: isMissingTranslation ? doc.updatedAt : (langContent.updatedAt || doc.updatedAt),
+                status: displayStatus,
+            };
+        }).filter(Boolean); // Remove null entries
+
+        // Sort by updatedAt descending so the UI order makes sense
+        formatted.sort((a: any, b: any) => {
+            const dateA = new Date(a.updatedAt).getTime();
+            const dateB = new Date(b.updatedAt).getTime();
+            return dateB - dateA;
+        });
 
         return NextResponse.json({
             blogs: formatted,
-            total: totalCount,
+            total: formatted.length,
         });
     } catch (err: any) {
         console.error('[BlogAPI] GET error:', err);
@@ -95,6 +197,9 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
  */
 export async function POST(req: NextRequest, config: BlogApiConfig): Promise<NextResponse> {
     try {
+        const url = new URL(req.url);
+        const language = url.searchParams.get('language') || 'nl';
+        
         const userId = await config.getUserId(req);
         if (!userId) {
             return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
@@ -181,6 +286,24 @@ export async function POST(req: NextRequest, config: BlogApiConfig): Promise<Nex
             seo: seo || { title: '', description: '' },
             slug,
             authorId: userId,
+            languages: {
+                [language]: {
+                    blocks: contentBlocks || [],
+                    metadata: {
+                        title: title.trim(),
+                        excerpt: (summary || '').trim(),
+                        featuredImage: image,
+                        categories: categoryTags?.category ? [categoryTags.category] : [],
+                        tags: categoryTags?.tags || [],
+                        seo: seo || {},
+                    },
+                    updatedAt: new Date().toISOString(),
+                    status: finalStatus,
+                },
+            },
+            metadata: {
+                lang: language,
+            },
             createdAt: new Date(),
             updatedAt: new Date(),
         };
@@ -210,6 +333,9 @@ export async function GET_BY_SLUG(
     config: BlogApiConfig
 ): Promise<NextResponse> {
     try {
+        const url = new URL(req.url);
+        const requestedLanguage = url.searchParams.get('language') || 'nl';
+        
         const userId = await config.getUserId(req);
         const dbConnection = await config.getDb();
         const db = dbConnection.db();
@@ -222,16 +348,110 @@ export async function GET_BY_SLUG(
         }
 
         // Security check
-        const isPublished = blog.publicationData?.status === 'published';
         const isAuthor = userId && blog.authorId === userId;
+        const isAdminView = url.searchParams.get('admin') === 'true';
+        
+        // For public view, we must have a published version in the requested language
+        if (!isAdminView && !isAuthor) {
+            const langData = blog.languages?.[requestedLanguage];
+            if (!langData || langData.status !== 'published') {
+                return NextResponse.json({ error: 'Blog post not available in this language' }, { status: 404 });
+            }
+            
+            // Also check publication date
+            if (blog.publicationData?.date && new Date(blog.publicationData.date) > new Date()) {
+                return NextResponse.json({ error: 'Blog post not yet published' }, { status: 404 });
+            }
+        }
 
-        if (!isPublished && !isAuthor) {
-            return NextResponse.json({ error: 'Access denied' }, { status: 403 });
+        const languages = blog.languages || {};
+        const postPrimaryLang = blog.metadata?.lang || 'nl';
+        
+        // Find the best available language for this post
+        let bestLanguage = requestedLanguage;
+        let isMissingTranslation = false;
+
+        if (!languages[requestedLanguage]) {
+            if (isAdminView) {
+                isMissingTranslation = true;
+            } else {
+                // Try fallback languages in order
+                const fallbackLanguages = [requestedLanguage, 'nl', 'en'];
+                for (const lang of fallbackLanguages) {
+                    if (languages[lang]) {
+                        bestLanguage = lang;
+                        break;
+                    }
+                }
+                // If still no match, use primary language from metadata
+                if (!languages[bestLanguage] && languages[postPrimaryLang]) {
+                    bestLanguage = postPrimaryLang;
+                }
+            }
         }
+        
+        const langContent = languages[bestLanguage] || {};
+        const meta = langContent.metadata || {};
+        
+        // Language display names for placeholders
+        const langNames: Record<string, string> = {
+            nl: 'Dutch',
+            en: 'English',
+            sv: 'Swedish',
+            de: 'German',
+            fr: 'French',
+            es: 'Spanish'
+        };
+
+        let title = isMissingTranslation 
+            ? `(No ${langNames[requestedLanguage] || requestedLanguage.toUpperCase()} translation)` 
+            : (meta.title || blog.title || '');
+        let summary = isMissingTranslation ? '' : (meta.excerpt || blog.summary || '');
+        let contentBlocks = isMissingTranslation ? [] : (langContent.blocks || blog.contentBlocks || blog.blocks || []);
+        let image = isMissingTranslation ? null : (meta.featuredImage || blog.image);
+        let categoryTags = isMissingTranslation ? { category: '', tags: [] } : (meta.categories ? {
+            category: meta.categories[0] || '',
+            tags: meta.tags || blog.categoryTags?.tags || []
+        } : (blog.categoryTags || { category: '', tags: [] }));
+        let seo = isMissingTranslation ? {} : (meta.seo || blog.seo || {});
+        let metadata = { ...blog.metadata, ...meta, lang: bestLanguage };
+
+        // Ensure all languages in doc have a status and updatedAt for the dashboard
+        const enrichedLanguages = { ...languages };
+        Object.keys(enrichedLanguages).forEach(lang => {
+            if (!enrichedLanguages[lang].status) {
+                enrichedLanguages[lang].status = blog.publicationData?.status === 'concept' ? 'draft' : (blog.publicationData?.status || 'draft');
+            }
+            if (!enrichedLanguages[lang].updatedAt) {
+                enrichedLanguages[lang].updatedAt = blog.updatedAt;
+            }
+        });
+
+        const displayStatus = isMissingTranslation 
+            ? 'not-translated' 
+            : (langContent.status || blog.publicationData?.status || 'concept');
 
         return NextResponse.json({
             ...blog,
             _id: blog._id.toString(),
+            title,
+            summary,
+            contentBlocks,
+            image,
+            categoryTags,
+            publicationData: {
+                ...blog.publicationData,
+                status: displayStatus,
+            },
+            seo,
+            metadata,
+            languages: enrichedLanguages,
+            availableLanguages: Object.keys(languages),
+            lang: bestLanguage,
+            isMissingTranslation,
+            requestedLanguage,
+            updatedAt: isMissingTranslation ? blog.updatedAt : (langContent.updatedAt || blog.updatedAt),
+            status: displayStatus,
         });
     } catch (err: any) {
         console.error('[BlogAPI] GET_BY_SLUG error:', err);
@@ -251,6 +471,9 @@ export async function PUT_BY_SLUG(
     config: BlogApiConfig
 ): Promise<NextResponse> {
     try {
+        const url = new URL(req.url);
+        const language = url.searchParams.get('language') || 'nl';
+        
         const userId = await config.getUserId(req);
         if (!userId) {
             return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
@@ -324,15 +547,10 @@ export async function PUT_BY_SLUG(
             }
         }
 
-        // Slug logic
-        let finalSlug = slug;
-        if (isPublishing) {
-            finalSlug = slugify(title);
-        } else if (publicationData?.status === 'concept' && !slug.includes('-draft-')) {
-            finalSlug = `${slugify(title)}-draft-${Date.now().toString().slice(-4)}`;
-        }
+        // Slug logic - DON'T change slug for existing posts, keep original
+        // The slug should remain constant across all language versions
+        const finalSlug = slug;
 
-        // Update data
         // Determine the final status: if publishing, set to 'published', otherwise preserve or convert draft to concept
         let finalStatus = publicationData?.status;
         if (isPublishing) {
@@ -341,24 +559,61 @@ export async function PUT_BY_SLUG(
             finalStatus = 'concept';
         }
 
-        const updateData = {
-            title: title.trim(),
-            summary: (summary || '').trim(),
-            contentBlocks: contentBlocks || [],
-            content: content || [],
-            image: image || {},
-            categoryTags: {
-                category: categoryTags?.category?.trim() || '',
-                tags: categoryTags?.tags || [],
+        // Preserve existing languages or initialize
+        const existingLanguages = existingBlog.languages || {};
+        const primaryLanguage = existingBlog.metadata?.lang || 'nl';
+        
+        // Update the specific language content
+        // Only the language being saved gets a new updatedAt timestamp
+        const now = new Date();
+        const updatedLanguages = {
+            ...existingLanguages,
+            [language]: {
+                blocks: contentBlocks || [],
+                metadata: {
+                    title: title.trim(),
+                    excerpt: (summary || '').trim(),
+                    featuredImage: image,
+                    categories: categoryTags?.category ? [categoryTags.category] : [],
+                    tags: categoryTags?.tags || [],
+                    seo: seo || {},
+                },
+                updatedAt: now.toISOString(),
+                status: finalStatus,
             },
+        };
+
+        // For root-level fields, only update if this is the primary language
+        // Otherwise preserve existing root values to maintain backward compatibility
+        const isPrimaryLanguage = language === primaryLanguage || !existingLanguages[primaryLanguage];
+        
+        const updateData: any = {
+            // Only update root-level title/summary if saving in primary language
+            // This maintains backward compatibility
+            ...(isPrimaryLanguage ? {
+                title: title.trim(),
+                summary: (summary || '').trim(),
+                contentBlocks: contentBlocks || [],
+                content: content || [],
+                image: image || {},
+                categoryTags: {
+                    category: categoryTags?.category?.trim() || '',
+                    tags: categoryTags?.tags || [],
+                },
+                seo: seo || {},
+            } : {}),
             publicationData: {
+                ...existingBlog.publicationData,
                 ...publicationData,
                 status: finalStatus,
-                date: publicationData?.date ? new Date(publicationData.date) : new Date(),
+                date: publicationData?.date ? new Date(publicationData.date) : existingBlog.publicationData?.date || new Date(),
             },
-            seo: seo || {},
-            slug: finalSlug,
             authorId: userId,
+            languages: updatedLanguages,
+            metadata: {
+                ...existingBlog.metadata,
+                lang: primaryLanguage,
+            },
             updatedAt: new Date(),
         };
 
@@ -366,7 +621,7 @@ export async function PUT_BY_SLUG(
 
         return NextResponse.json({
             message: 'Blog updated successfully',
-            slug: finalSlug,
+            slug: slug, // Return original slug, not finalSlug
         });
     } catch (err: any) {
         console.error('[BlogAPI] PUT_BY_SLUG error:', err);

package/src/hooks/useBlogs.ts

@@ -14,6 +14,8 @@ export interface UseBlogsOptions {
     skip?: number;
     /** Filter by status (published, draft, concept) */
     status?: string;
+    /** Filter by language */
+    language?: string;
     /** Whether to fetch all posts for admin (includes drafts) */
     admin?: boolean;
     /** API base URL (default: '/api/blogs') */
@@ -46,6 +48,7 @@ export function useBlogs(options: UseBlogsOptions = {}): UseBlogsResult {
         limit = 10,
         skip = 0,
         status,
+        language,
         admin = false,
         apiBaseUrl = '/api/plugin-blog',
     } = options;
@@ -56,6 +59,13 @@ export function useBlogs(options: UseBlogsOptions = {}): UseBlogsResult {
     const [total, setTotal] = useState(0);
 
     const fetchBlogs = async () => {
+        // If language is expected but not provided, wait for it to be ready
+        // (Prevents fetching all languages if the hook is called with a language but it's not yet loaded)
+        if (!language && !admin) {
+            // In public view, we always want a specific language
+            return;
+        }
+
         try {
             setLoading(true);
             setError(null);
@@ -64,6 +74,7 @@ export function useBlogs(options: UseBlogsOptions = {}): UseBlogsResult {
             if (limit) params.set('limit', limit.toString());
             if (skip) params.set('skip', skip.toString());
             if (status) params.set('status', status);
+            if (language) params.set('language', language);
             if (admin) params.set('admin', 'true');
 
             const url = `${apiBaseUrl}?${params.toString()}`;
@@ -110,7 +121,7 @@ export function useBlogs(options: UseBlogsOptions = {}): UseBlogsResult {
 
     useEffect(() => {
         fetchBlogs();
-    }, [limit, skip, status, admin, apiBaseUrl]);
+    }, [limit, skip, status, language, admin, apiBaseUrl]);
 
     return {
         blogs,

package/src/index.tsx

@@ -186,9 +186,10 @@ export default function BlogPlugin(props: PluginProps) {
                         if (!originalSlug) {
                             throw new Error('Cannot save: no post identifier available. Please reload the page.');
                         }
-                        console.log('[BlogPlugin] Saving post with slug:', originalSlug);
+                        const language = state.currentLanguage || locale;
+                        console.log('[BlogPlugin] Saving post with slug:', originalSlug, 'language:', language);
                         const apiData = editorStateToAPI(state, undefined, heroBlock);
-                        const response = await fetch(`/api/plugin-blog/${originalSlug}`, {
+                        const response = await fetch(`/api/plugin-blog/${originalSlug}?language=${language}`, {
                             method: 'PUT',
                             headers: { 'Content-Type': 'application/json' },
                             credentials: 'include', // Include cookies for authentication
@@ -229,8 +230,9 @@ export default function BlogPlugin(props: PluginProps) {
                     backgroundColors={backgroundColors}
                     onSave={async (state) => {
                         // Save to API - create new post
+                        const language = state.currentLanguage || locale;
                         const apiData = editorStateToAPI(state);
-                        const response = await fetch('/api/plugin-blog/new', {
+                        const response = await fetch(`/api/plugin-blog/new?language=${language}`, {
                             method: 'POST',
                             headers: { 'Content-Type': 'application/json' },
                             credentials: 'include', // Include cookies for authentication
@@ -293,6 +295,8 @@ export type {
     BlogPost,
     PostListItem,
     PostFilterOptions,
+    BlogPostLanguageContent,
+    BlogPostLanguages,
 } from './types/post';
 
 // Export initialization utility for easy setup

package/src/lib/i18n.ts

@@ -0,0 +1,78 @@
+/**
+ * i18n Utility
+ * Simple translation loader for the blog plugin
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+function getLocalesDir(): string {
+    const possiblePaths = [
+        path.join(process.cwd(), 'node_modules', '@jhits', 'plugin-blog', 'data', 'locales'),
+        path.join(__dirname, '..', 'data', 'locales'),
+        path.join(__dirname, '..', '..', 'data', 'locales'),
+    ];
+
+    for (const localesPath of possiblePaths) {
+        if (fs.existsSync(localesPath)) {
+            return localesPath;
+        }
+    }
+
+    return possiblePaths[0];
+}
+
+const localesDir = getLocalesDir();
+const cache: Record<string, any> = {};
+
+function loadLocale(locale: string): any {
+    if (cache[locale]) {
+        return cache[locale];
+    }
+
+    try {
+        const localePath = path.join(localesDir, locale, 'common.json');
+        
+        if (fs.existsSync(localePath)) {
+            const content = fs.readFileSync(localePath, 'utf-8');
+            cache[locale] = JSON.parse(content);
+            return cache[locale];
+        }
+    } catch (error) {
+        console.error(`[i18n] Failed to load locale ${locale}:`, error);
+    }
+
+    return null;
+}
+
+export function getTranslations(locale: string): any {
+    const translations = loadLocale(locale);
+    
+    if (translations) {
+        return translations;
+    }
+    
+    const fallback = loadLocale('en');
+    return fallback || {};
+}
+
+export function getEditorTranslations(language: string): {
+    language: string;
+    selectLanguage: string;
+    addLanguage: string;
+    switchLanguage: string;
+    availableLanguages: string;
+    primaryLanguage: string;
+} {
+    const translations = getTranslations(language);
+    const enTranslations = getTranslations('en');
+    
+    return translations.editor || enTranslations.editor || {
+        language: 'Language',
+        selectLanguage: 'Select Language',
+        addLanguage: 'Add Language',
+        switchLanguage: 'Switch Language',
+        availableLanguages: 'Available Languages',
+        primaryLanguage: 'Primary Language',
+    };
+}

package/src/lib/mappers/apiMapper.ts

@@ -43,6 +43,25 @@ export interface APIBlogDocument {
     authorId?: string;
     createdAt?: string | Date;
     updatedAt?: string | Date;
+    // Multilingual fields
+    languages?: {
+        [key: string]: {
+            blocks: Block[];
+            metadata: {
+                title?: string;
+                excerpt?: string;
+                featuredImage?: any;
+                categories?: string[];
+                tags?: string[];
+                seo?: any;
+            };
+        };
+    };
+    availableLanguages?: string[];
+    lang?: string;
+    metadata?: {
+        lang?: string;
+    };
 }
 
 /**
@@ -108,6 +127,7 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
         seo,
         publication,
         metadata,
+        languages: doc.languages,
         createdAt: doc.createdAt 
             ? (typeof doc.createdAt === 'string' ? doc.createdAt : doc.createdAt.toISOString())
             : new Date().toISOString(),

package/src/state/reducer.ts

@@ -652,12 +652,12 @@ export function editorReducer(
             const post = action.payload;
             return {
                 ...state,
-                blocks: post.blocks,
-                title: post.title,
-                slug: post.slug,
-                seo: post.seo,
-                metadata: post.metadata,
-                status: post.publication.status,
+                blocks: post.blocks || [],
+                title: post.title || '',
+                slug: post.slug || '',
+                seo: post.seo || {},
+                metadata: post.metadata || {},
+                status: post.publication?.status || 'draft',
                 postId: post.id,
                 isDirty: false,
                 selectedBlockId: null,
@@ -681,6 +681,12 @@ export function editorReducer(
                 isDirty: true,
             };
 
+        case 'SET_CURRENT_LANGUAGE':
+            return {
+                ...state,
+                currentLanguage: action.payload,
+            };
+
         case 'UNDO':
         case 'REDO':
         case 'SAVE_HISTORY':

package/src/state/types.ts

@@ -43,6 +43,9 @@ export interface EditorState {
     
     /** Post ID (if editing existing post) */
     postId: string | null;
+    
+    /** Currently selected language for editing */
+    currentLanguage: string | null;
 }
 
 /**
@@ -68,6 +71,7 @@ export type EditorAction =
     | { type: 'RESET_EDITOR' }
     | { type: 'MARK_CLEAN' }
     | { type: 'MARK_DIRTY' }
+    | { type: 'SET_CURRENT_LANGUAGE'; payload: string }
     | { type: 'UNDO' }
     | { type: 'REDO' }
     | { type: 'SAVE_HISTORY' };
@@ -156,5 +160,6 @@ export const initialEditorState: EditorState = {
     selectedBlockId: null,
     draggedBlockId: null,
     postId: null,
+    currentLanguage: null,
 };