@jhits/plugin-blog 0.0.4 → 0.0.6

package/package.json

@@ -1,60 +1,57 @@
 {
-    "name": "@jhits/plugin-blog",
-    "version": "0.0.4",
-    "description": "Professional blog management system for the JHITS ecosystem",
-    "publishConfig": {
-        "access": "public"
+  "name": "@jhits/plugin-blog",
+  "version": "0.0.6",
+  "description": "Professional blog management system for the JHITS ecosystem",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./src/index.tsx",
+  "types": "./src/index.tsx",
+  "exports": {
+    ".": {
+      "types": "./src/index.tsx",
+      "default": "./src/index.tsx"
     },
-    "main": "./src/index.tsx",
-    "types": "./src/index.tsx",
-    "exports": {
-        ".": {
-            "types": "./src/index.tsx",
-            "default": "./src/index.tsx"
-        },
-        "./server": {
-            "types": "./src/index.server.ts",
-            "default": "./src/index.server.ts"
-        }
-    },
-    "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",
-        "lucide-react": "^0.562.0",
-        "mongodb": "^7.0.0",
-        "next-auth": "^4.24.13"
-    },
-    "peerDependencies": {
-        "next": ">=15.0.0",
-        "next-intl": ">=4.0.0",
-        "next-themes": ">=0.4.0",
-        "react": ">=18.0.0",
-        "react-dom": ">=18.0.0"
-    },
-    "devDependencies": {
-        "@tailwindcss/postcss": "^4",
-        "@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",
-        "next-themes": "0.4.6",
-        "react": "19.2.3",
-        "react-dom": "19.2.3",
-        "tailwindcss": "^4",
-        "typescript": "^5"
-    },
-    "files": [
-        "src/**/*.{ts,tsx,json}",
-        "!src/**/*.md",
-        "!src/**/README.md",
-        "!README.md",
-        "package.json"
-    ]
-}
+    "./server": {
+      "types": "./src/index.server.ts",
+      "default": "./src/index.server.ts"
+    }
+  },
+  "dependencies": {
+    "bcrypt": "^6.0.0",
+    "framer-motion": "^12.23.26",
+    "lucide-react": "^0.562.0",
+    "mongodb": "^7.0.0",
+    "next-auth": "^4.24.13",
+    "@jhits/plugin-core": "0.0.1",
+    "@jhits/plugin-content": "0.0.3",
+    "@jhits/plugin-images": "0.0.5"
+  },
+  "peerDependencies": {
+    "next": ">=15.0.0",
+    "next-intl": ">=4.0.0",
+    "next-themes": ">=0.4.0",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@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",
+    "next-themes": "0.4.6",
+    "react": "19.2.3",
+    "react-dom": "19.2.3",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  },
+  "files": [
+    "src",
+    "package.json"
+  ]
+}

package/src/api/handler.ts

@@ -8,7 +8,6 @@
  */
 
 import { NextRequest, NextResponse } from 'next/server';
-import { APIBlogDocument, apiToBlogPost, editorStateToAPI } from '../lib/mappers/apiMapper';
 import { slugify } from '../lib/utils/slugify';
 
 export interface BlogApiConfig {
@@ -68,7 +67,7 @@ export async function GET(req: NextRequest, config: BlogApiConfig): Promise<Next
                 .find(query)
                 .sort({ 'publicationData.date': -1 })
                 .skip(skip)
-                .limit(limit)
+                .limit(isAdminView ? 0 : limit)
                 .toArray(),
             blogs.countDocuments(query),
         ]);
@@ -125,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()) {
@@ -169,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 || [],
@@ -292,33 +291,33 @@ export async function PUT_BY_SLUG(
             const hasContent =
                 (contentBlocks && Array.isArray(contentBlocks) && contentBlocks.length > 0) ||
                 (content && Array.isArray(content) && content.length > 0);
-            
+
             // 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()) {
                 missingFields.push('category');
             }
             if (!hasContent) missingFields.push('content');
-            
+
             if (missingFields.length > 0) {
                 console.log('[BlogAPI] PUT_BY_SLUG validation failed:', {
                     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,
                     contentLength: content?.length || 0,
                 });
                 return NextResponse.json(
-                    { 
+                    {
                         message: `Missing required fields for publishing: ${missingFields.join(', ')}`,
-                        missingFields 
+                        missingFields
                     },
                     { status: 400 }
                 );
@@ -341,7 +340,7 @@ export async function PUT_BY_SLUG(
         } else if (publicationData?.status === 'draft') {
             finalStatus = 'concept';
         }
-        
+
         const updateData = {
             title: title.trim(),
             summary: (summary || '').trim(),

package/src/api/router.ts

@@ -37,21 +37,18 @@ export async function handleBlogApi(
         getUserId: config.getUserId,
         collectionName: config.collectionName || 'blogs',
     });
-    
+
     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] : '';
 
-    console.log(`[BlogApiRouter] method=${method}, path=${JSON.stringify(safePath)}, route=${route}, url=${req.url}`);
-    
     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') {
-                console.log('[BlogApiRouter] Routing to BlogListHandler');
                 return await BlogListHandler(req, blogApiConfig);
             }
             if (method === 'POST') {

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} 
@@ -349,6 +324,9 @@ export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
 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/mappers/apiMapper.ts

@@ -18,10 +18,12 @@ export interface APIBlogDocument {
     content?: any[]; // Legacy format
     summary?: string;
     image?: {
-        src?: string;
+        id?: string; // Semantic ID (preferred) - plugin-images handles everything else
+        src?: string; // Legacy support - will be converted to id when loading
         alt?: string;
-        brightness?: number;
-        blur?: number;
+        isCustom?: boolean;
+        // Transform fields (brightness, blur, scale, positionX, positionY) are NOT stored here
+        // They are handled by plugin-images API only
     };
     categoryTags?: {
         category?: string;
@@ -50,6 +52,7 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     const id = doc._id?.toString() || doc.id || '';
     
     // Use contentBlocks if available, otherwise fallback to content (legacy)
+    // Hero block is included in contentBlocks
     const blocks = doc.contentBlocks || [];
     
     // Convert publication data
@@ -69,12 +72,14 @@ export function apiToBlogPost(doc: APIBlogDocument): BlogPost {
     };
     
     // Convert metadata
+    // Only store semantic ID (id) and alt - plugin-images handles everything else
     const metadata: PostMetadata = {
         featuredImage: doc.image ? {
-            src: doc.image.src,
+            // Prefer id (semantic ID) over src (legacy)
+            id: doc.image.id || doc.image.src,
             alt: doc.image.alt,
-            brightness: doc.image.brightness,
-            blur: doc.image.blur,
+            isCustom: doc.image.isCustom,
+            // Don't load transform fields - plugin-images handles those
         } : undefined,
         categories: doc.categoryTags?.category ? [doc.categoryTags.category] : [],
         tags: doc.categoryTags?.tags || [],
@@ -121,11 +126,12 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
         slug: post.slug,
         contentBlocks: post.blocks, // Use new block format
         summary: post.metadata.excerpt,
+        // Only save semantic ID (id) and alt - plugin-images handles transform data
         image: post.metadata.featuredImage ? {
-            src: post.metadata.featuredImage.src,
+            id: post.metadata.featuredImage.id,
             alt: post.metadata.featuredImage.alt,
-            brightness: post.metadata.featuredImage.brightness,
-            blur: post.metadata.featuredImage.blur,
+            isCustom: post.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {
             category: post.metadata.categories?.[0] || '',
@@ -150,6 +156,9 @@ export function blogPostToAPI(post: BlogPost, authorId?: string): Partial<APIBlo
 
 /**
  * Convert EditorState to API format for saving
+ * @param state - Editor state
+ * @param authorId - Optional author ID
+ * @param heroBlock - Optional hero block (stored separately from content blocks)
  */
 export function editorStateToAPI(state: {
     title: string;
@@ -159,7 +168,7 @@ export function editorStateToAPI(state: {
     metadata: PostMetadata;
     status: PostStatus;
     postId?: string | null;
-}, authorId?: string): Partial<APIBlogDocument> {
+}, authorId?: string, heroBlock?: Block | null): Partial<APIBlogDocument> {
     // Map status: draft -> concept, published -> published, everything else stays as-is
     const apiStatus = state.status === 'draft' ? 'concept' : state.status;
     
@@ -174,10 +183,10 @@ export function editorStateToAPI(state: {
     if (state.metadata.categories && state.metadata.categories.length > 0 && state.metadata.categories[0]?.trim()) {
         category = state.metadata.categories[0].trim();
     } else {
-        // Check hero block for category
-        const heroBlock = state.blocks.find(block => block.type === 'hero');
-        if (heroBlock && heroBlock.data && typeof heroBlock.data === 'object') {
-            const heroCategory = (heroBlock.data as any).category;
+        // Check hero block for category - use the passed heroBlock parameter first, then check state.blocks
+        const heroBlockToCheck = heroBlock || state.blocks.find(block => block.type === 'hero');
+        if (heroBlockToCheck && heroBlockToCheck.data && typeof heroBlockToCheck.data === 'object') {
+            const heroCategory = (heroBlockToCheck.data as any).category;
             if (heroCategory && typeof heroCategory === 'string' && heroCategory.trim()) {
                 category = heroCategory.trim();
             }
@@ -186,20 +195,42 @@ export function editorStateToAPI(state: {
     
     console.log('[editorStateToAPI] Category resolution:', {
         fromMetadata: state.metadata.categories?.[0],
-        fromHeroBlock: state.blocks.find(b => b.type === 'hero')?.data ? (state.blocks.find(b => b.type === 'hero')!.data as any).category : undefined,
-        finalCategory: category
+        fromHeroBlock: (heroBlock || state.blocks.find(b => b.type === 'hero'))?.data ? ((heroBlock || state.blocks.find(b => b.type === 'hero'))!.data as any).category : undefined,
+        finalCategory: category,
+        hasHeroBlock: !!heroBlock,
+        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
+    });
+    
+    // Include hero block in contentBlocks if it exists
+    // Filter out any existing hero blocks from state.blocks first, then add the current hero block
+    const contentBlocksWithoutHero = state.blocks.filter(block => block.type !== 'hero');
+    const allBlocks = heroBlock 
+        ? [heroBlock, ...contentBlocksWithoutHero] 
+        : contentBlocksWithoutHero;
+    
+    console.log('[editorStateToAPI] Hero block details:', {
+        hasHeroBlock: !!heroBlock,
+        heroBlockType: heroBlock?.type,
+        heroBlockId: heroBlock?.id,
+        heroBlockImage: heroBlock?.data ? (heroBlock.data as any)?.image : undefined,
+        heroBlockImageSrc: heroBlock?.data ? (heroBlock.data as any)?.image?.src : undefined,
+        contentBlocksCount: allBlocks.length,
+        contentBlocksTypes: allBlocks.map(b => b.type),
+        heroBlockInContentBlocks: allBlocks.find(b => b.type === 'hero')?.data ? (allBlocks.find(b => b.type === 'hero')!.data as any)?.image : undefined,
     });
     
     return {
         title: state.title,
         slug: state.slug,
-        contentBlocks: state.blocks,
+        contentBlocks: allBlocks,
         summary: state.metadata.excerpt,
-        image: state.metadata.featuredImage ? {
-            src: state.metadata.featuredImage.src,
-            alt: state.metadata.featuredImage.alt,
-            brightness: state.metadata.featuredImage.brightness,
-            blur: state.metadata.featuredImage.blur,
+        // Only save semantic ID (id) and alt - plugin-images handles transform data
+        // Only create image object if id exists and is not empty
+        image: state.metadata.featuredImage?.id?.trim() ? {
+            id: state.metadata.featuredImage.id.trim(),
+            alt: state.metadata.featuredImage.alt || '',
+            isCustom: state.metadata.featuredImage.isCustom,
+            // Don't save transform fields - plugin-images API handles those
         } : undefined,
         categoryTags: {
             category: category,

package/src/registry/BlockRegistry.ts

@@ -35,10 +35,7 @@ class BlockRegistryImpl implements IBlockRegistry {
             );
         }
 
-        if (this._types.has(definition.type)) {
-            console.warn(`Block type "${definition.type}" is already registered. Overwriting...`);
-        }
-        
+        // Silently overwrite if already registered (expected in React 18 Strict Mode)
         this._types.set(definition.type, definition);
     }