@jhits/plugin-blog 0.0.5 → 0.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-blog",
-  "version": "0.0.5",
+  "version": "0.0.7",
   "description": "Professional blog management system for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"
@@ -18,14 +18,14 @@
     }
   },
   "dependencies": {
-    "@jhits/plugin-core": "^0.0.1",
-    "@jhits/plugin-content": "^0.0.1",
-    "@jhits/plugin-images": "^0.0.1",
     "bcrypt": "^6.0.0",
-    "framer-motion": "^12.23.26",
+    "framer-motion": "^12.27.5",
     "lucide-react": "^0.562.0",
     "mongodb": "^7.0.0",
-    "next-auth": "^4.24.13"
+    "next-auth": "^4.24.13",
+    "@jhits/plugin-content": "0.0.3",
+    "@jhits/plugin-core": "0.0.1",
+    "@jhits/plugin-images": "0.0.5"
   },
   "peerDependencies": {
     "next": ">=15.0.0",
@@ -35,20 +35,20 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4",
+    "@tailwindcss/postcss": "^4.1.18",
     "@types/bcrypt": "^6.0.0",
-    "@types/node": "^20.19.27",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "eslint": "^9",
-    "eslint-config-next": "16.1.1",
-    "next": "16.1.1",
-    "next-intl": "4.6.1",
+    "@types/node": "^25.0.9",
+    "@types/react": "^19.2.9",
+    "@types/react-dom": "^19.2.3",
+    "eslint": "^9.39.2",
+    "eslint-config-next": "16.1.4",
+    "next": "16.1.4",
+    "next-intl": "4.7.0",
     "next-themes": "0.4.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "tailwindcss": "^4",
-    "typescript": "^5"
+    "tailwindcss": "^4.1.18",
+    "typescript": "^5.9.3"
   },
   "files": [
     "src",

package/src/api/config-handler.ts

@@ -0,0 +1,76 @@
+/**
+ * Blog Config API Handler
+ * Handles saving/loading plugin configuration
+ */
+
+import { NextRequest, NextResponse } from 'next/server';
+import { getPluginConfig, savePluginConfig } from '../lib/config-storage';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface ConfigApiConfig {
+    getDb: () => Promise<{ db: any }>;
+    getUserId: (req: NextRequest) => Promise<string | null>;
+    siteId?: string;
+}
+
+/**
+ * GET /api/plugin-blog/config - Get plugin config
+ */
+export async function GET(req: NextRequest, config: ConfigApiConfig): Promise<NextResponse> {
+    try {
+        const siteId = config.siteId || 'default';
+        
+        const pluginConfig = await getPluginConfig(
+            config.getDb,
+            'plugin-blog',
+            siteId
+        );
+
+        if (!pluginConfig) {
+            return NextResponse.json({ config: null });
+        }
+
+        return NextResponse.json({ config: pluginConfig.config });
+    } catch (err: any) {
+        console.error('[BlogConfigAPI] GET error:', err);
+        return NextResponse.json(
+            { error: 'Failed to get config', detail: err.message },
+            { status: 500 }
+        );
+    }
+}
+
+/**
+ * POST /api/plugin-blog/config - Save plugin config
+ */
+export async function POST(req: NextRequest, config: ConfigApiConfig): Promise<NextResponse> {
+    try {
+        const userId = await config.getUserId(req);
+        if (!userId) {
+            return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
+        }
+
+        const body = await req.json();
+        const siteId = body.siteId || config.siteId || 'default';
+        const pluginConfig = body.config;
+
+        if (!pluginConfig) {
+            return NextResponse.json({ error: 'Config is required' }, { status: 400 });
+        }
+
+        await savePluginConfig(
+            config.getDb,
+            'plugin-blog',
+            siteId,
+            pluginConfig
+        );
+
+        return NextResponse.json({ message: 'Config saved successfully' });
+    } catch (err: any) {
+        console.error('[BlogConfigAPI] POST error:', err);
+        return NextResponse.json(
+            { error: 'Failed to save config', detail: err.message },
+            { status: 500 }
+        );
+    }
+}

package/src/api/handler.ts

@@ -124,7 +124,7 @@ export async function POST(req: NextRequest, config: BlogApiConfig): Promise<Nex
         if (isPublishing) {
             // Publishing requires all fields
             if (!summary?.trim()) errors.push('Summary is required for publishing');
-            if (!image?.src?.trim()) errors.push('Featured image is required for publishing');
+            if (!image?.id?.trim()) errors.push('Featured image is required for publishing');
             // Only require category if it's explicitly provided and empty
             // If categoryTags is undefined or category is undefined, that's also missing
             if (!categoryTags || !categoryTags.category || !categoryTags.category.trim()) {
@@ -168,7 +168,7 @@ export async function POST(req: NextRequest, config: BlogApiConfig): Promise<Nex
             summary: (summary || '').trim(),
             contentBlocks: contentBlocks || [],
             content: content || [],
-            image: image || { src: '', alt: '', brightness: 100, blur: 0 },
+            image: image || { id: '', alt: '' }, // Only store id and alt - plugin-images handles transforms
             categoryTags: {
                 category: categoryTags?.category?.trim() || '',
                 tags: categoryTags?.tags || [],
@@ -295,7 +295,7 @@ export async function PUT_BY_SLUG(
             // Collect all missing fields for better error messages
             const missingFields: string[] = [];
             if (!summary?.trim()) missingFields.push('summary');
-            if (!image?.src?.trim()) missingFields.push('featured image');
+            if (!image?.id?.trim()) missingFields.push('featured image');
             // Only require category if it's explicitly provided and empty
             // If categoryTags is undefined or category is undefined, that's also missing
             if (!categoryTags || !categoryTags.category || !categoryTags.category.trim()) {
@@ -308,7 +308,7 @@ export async function PUT_BY_SLUG(
                     isPublishing,
                     missingFields,
                     summary: summary?.trim() || 'missing',
-                    imageSrc: image?.src?.trim() || 'missing',
+                    imageId: image?.id?.trim() || 'missing',
                     category: categoryTags?.category?.trim() || 'missing',
                     hasContent,
                     contentBlocksLength: contentBlocks?.length || 0,

package/src/api/router.ts

@@ -11,6 +11,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 import { GET as BlogListHandler, POST as BlogCreateHandler } from './handler';
 import { GET as BlogGetHandler, PUT as BlogUpdateHandler, DELETE as BlogDeleteHandler, createBlogApiConfig } from './route';
+import { GET as ConfigGetHandler, POST as ConfigPostHandler } from './config-handler';
 
 export interface BlogApiRouterConfig {
     /** MongoDB client promise - should return { db: () => Database } */
@@ -19,6 +20,8 @@ export interface BlogApiRouterConfig {
     getUserId: (req: NextRequest) => Promise<string | null>;
     /** Collection name (default: 'blogs') */
     collectionName?: string;
+    /** Site ID for multi-site setups */
+    siteId?: string;
 }
 
 /**
@@ -81,6 +84,20 @@ export async function handleBlogApi(
                 return await checkTitleModule.GET(req, blogApiConfig);
             }
         }
+        // Route: /api/plugin-blog/config (get/save plugin 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 {
             const slug = route;

package/src/hooks/index.ts

@@ -5,4 +5,5 @@
 
 export { useBlogs, type UseBlogsOptions, type UseBlogsResult } from './useBlogs';
 export { useBlog, type UseBlogOptions, type UseBlogResult } from './useBlog';
+export { useCategories } from './useCategories';
 

package/src/hooks/useCategories.ts

@@ -0,0 +1,76 @@
+/**
+ * Hook to fetch categories from existing blog posts
+ * Extracts categories from Hero blocks in all posts
+ */
+
+'use client';
+
+import { useState, useEffect } from 'react';
+
+export function useCategories() {
+    const [categories, setCategories] = useState<string[]>([]);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        const fetchCategories = async () => {
+            try {
+                const categorySet = new Set<string>();
+                
+                // 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
+                }
+                
+                // 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);
+                }
+                
+                // 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
+                setCategories([]);
+            } finally {
+                setLoading(false);
+            }
+        };
+
+        fetchCategories();
+    }, []);
+
+    return { categories, loading };
+}

package/src/index.tsx

@@ -49,7 +49,6 @@ export interface PluginProps {
  */
 export default function BlogPlugin(props: PluginProps) {
     const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
-    console.log('[BlogPlugin] Component rendering, propsDarkMode:', propsDarkMode);
     
     // Get custom blocks from props or window global (client app injection point)
     const customBlocks = useMemo(() => {
@@ -79,7 +78,6 @@ export default function BlogPlugin(props: PluginProps) {
                 if (saved) {
                     const config = JSON.parse(saved);
                     if (config.darkMode !== undefined) {
-                        console.log('[BlogPlugin] Using darkMode from localStorage (dev settings):', config.darkMode);
                         return config.darkMode as boolean;
                     }
                 }
@@ -90,7 +88,6 @@ export default function BlogPlugin(props: PluginProps) {
         
         // Then try props
         if (propsDarkMode !== undefined) {
-            console.log('[BlogPlugin] Using darkMode from props:', propsDarkMode);
             return propsDarkMode;
         }
         
@@ -98,12 +95,10 @@ export default function BlogPlugin(props: PluginProps) {
         if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
             const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
             if (pluginProps?.darkMode !== undefined) {
-                console.log('[BlogPlugin] Using darkMode from window global (fallback):', pluginProps.darkMode);
                 return pluginProps.darkMode as boolean;
             }
         }
         
-        console.log('[BlogPlugin] darkMode not found, defaulting to true');
         return true; // Default to dark mode enabled
     }, [propsDarkMode]);
     
@@ -167,8 +162,6 @@ export default function BlogPlugin(props: PluginProps) {
         };
     }, []);
     
-    console.log('[BlogPlugin] Final darkMode value:', darkMode);
-    console.log('[BlogPlugin] Background colors:', backgroundColors);
     if (heroBlockDefinition !== undefined) {
         console.log('[BlogPlugin] Hero block definition:', heroBlockDefinition ? 'found' : 'not found (REQUIRED)');
     }
@@ -180,13 +173,12 @@ export default function BlogPlugin(props: PluginProps) {
         
         case 'editor':
             const postId = subPath[1]; // This is actually the slug, not the ID
-            console.log('[BlogPlugin] Rendering editor route with postId (slug):', postId, 'darkMode:', darkMode);
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
                     darkMode={darkMode} 
                     backgroundColors={backgroundColors}
-                    onSave={async (state) => {
+                    onSave={async (state, heroBlock) => {
                         // Save to API - update existing post
                         // Use the route postId (original slug) to identify which blog to update
                         // If route postId is missing, use state.slug or state.postId as fallback
@@ -195,22 +187,7 @@ export default function BlogPlugin(props: PluginProps) {
                             throw new Error('Cannot save: no post identifier available. Please reload the page.');
                         }
                         console.log('[BlogPlugin] Saving post with slug:', originalSlug);
-                        console.log('[BlogPlugin] Post state:', {
-                            title: state.title,
-                            status: state.status,
-                            blocksCount: state.blocks.length,
-                            blocks: state.blocks.map(b => ({ id: b.id, type: b.type, hasData: !!b.data })),
-                            hasFeaturedImage: !!state.metadata.featuredImage,
-                        });
-                        const apiData = editorStateToAPI(state);
-                        console.log('[BlogPlugin] API data being sent:', {
-                            title: apiData.title,
-                            status: apiData.publicationData?.status,
-                            contentBlocksCount: apiData.contentBlocks?.length || 0,
-                            contentBlocks: apiData.contentBlocks?.map((b: any) => ({ id: b.id, type: b.type, hasData: !!b.data })) || [],
-                            hasImage: !!apiData.image,
-                            fullApiData: JSON.stringify(apiData, null, 2),
-                        });
+                        const apiData = editorStateToAPI(state, undefined, heroBlock);
                         const response = await fetch(`/api/plugin-blog/${originalSlug}`, {
                             method: 'PUT',
                             headers: { 'Content-Type': 'application/json' },
@@ -233,7 +210,6 @@ export default function BlogPlugin(props: PluginProps) {
                             throw new Error(errorMessage + missingFieldsMsg);
                         }
                         const result = await response.json();
-                        console.log('[BlogPlugin] Save successful:', result);
                         // If the slug changed, update the URL
                         if (result.slug && result.slug !== originalSlug) {
                             window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
@@ -246,7 +222,6 @@ export default function BlogPlugin(props: PluginProps) {
             );
         
         case 'new':
-            console.log('[BlogPlugin] Rendering new route with darkMode:', darkMode);
             return (
                 <EditorProvider 
                     customBlocks={customBlocks} 
@@ -345,10 +320,16 @@ export { blockRegistry } from './registry';
 // Export layout block registration
 export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
 
+// Export config storage utilities
+export { getPluginConfig, savePluginConfig } from './lib/config-storage';
+
 // Export editor state management
 export { EditorProvider, useEditor } from './state/EditorContext';
 export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
 
+// Export hooks
+export { useCategories } from './hooks/useCategories';
+
 // Note: API handlers are server-only and exported from ./index.ts (server entry point)
 // They are NOT exported here to prevent client/server context mixing
 

package/src/init.tsx

@@ -59,14 +59,5 @@ export function initBlogPlugin(config: BlogPluginConfig): void {
         darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
         backgroundColors: config.backgroundColors || undefined,
     };
-
-    console.log('[BlogPlugin] Initialized with config:', {
-        customBlocks: config.customBlocks?.length || 0,
-        darkMode: config.darkMode !== undefined ? config.darkMode : true,
-        backgroundColors: config.backgroundColors ? {
-            light: config.backgroundColors.light,
-            dark: config.backgroundColors.dark || 'not set',
-        } : 'not set',
-    });
 }
 

package/src/lib/config-storage.ts

@@ -0,0 +1,65 @@
+/**
+ * Plugin Configuration Storage
+ * Stores plugin-specific configuration in MongoDB
+ * Used by both client apps and dashboard
+ */
+
+export interface PluginConfigDocument {
+    _id?: string;
+    pluginId: string;
+    siteId: string;
+    config: {
+        customBlocks?: unknown[];
+        darkMode?: boolean;
+        backgroundColors?: {
+            light: string;
+            dark?: string;
+        };
+        [key: string]: unknown;
+    };
+    updatedAt: Date;
+}
+
+const COLLECTION_NAME = 'pluginConfigs';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getPluginConfigCollection(getDb: () => Promise<{ db: any }>) {
+    const { db } = await getDb();
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    return (db as any).collection(COLLECTION_NAME);
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function getPluginConfig(
+    getDb: () => Promise<{ db: any }>,
+    pluginId: string,
+    siteId: string = 'default'
+): Promise<PluginConfigDocument | null> {
+    const collection = await getPluginConfigCollection(getDb);
+    return collection.findOne({ pluginId, siteId }) as Promise<PluginConfigDocument | null>;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export async function savePluginConfig(
+    getDb: () => Promise<{ db: any }>,
+    pluginId: string,
+    siteId: string,
+    config: PluginConfigDocument['config']
+): Promise<void> {
+    const collection = await getPluginConfigCollection(getDb);
+    
+    await collection.updateOne(
+        { pluginId, siteId },
+        {
+            $set: {
+                config,
+                updatedAt: new Date()
+            },
+            $setOnInsert: {
+                pluginId,
+                siteId
+            }
+        },
+        { upsert: true }
+    );
+}