@jhits/plugin-blog 0.0.8 → 0.0.9

package/src/hooks/useBlogs.js

@@ -0,0 +1,82 @@
+/**
+ * useBlogs Hook
+ * React hook for fetching blog posts in client applications
+ */
+import { useState, useEffect } from 'react';
+import { apiToBlogPost } from '../lib/mappers/apiMapper';
+/**
+ * React hook to fetch blog posts
+ *
+ * @example
+ * ```tsx
+ * const { blogs, loading, error } = useBlogs({ limit: 5 });
+ * ```
+ */
+export function useBlogs(options = {}) {
+    const { limit = 10, skip = 0, status, admin = false, apiBaseUrl = '/api/plugin-blog', } = options;
+    const [blogs, setBlogs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [total, setTotal] = useState(0);
+    const fetchBlogs = async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            const params = new URLSearchParams();
+            if (limit)
+                params.set('limit', limit.toString());
+            if (skip)
+                params.set('skip', skip.toString());
+            if (status)
+                params.set('status', status);
+            if (admin)
+                params.set('admin', 'true');
+            const url = `${apiBaseUrl}?${params.toString()}`;
+            const response = await fetch(url);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch blogs: ${response.status}`);
+            }
+            const data = await response.json();
+            // Handle error response
+            if (data.error) {
+                throw new Error(data.error || 'Failed to fetch blogs');
+            }
+            // Convert API format to PostListItem format
+            const blogsArray = Array.isArray(data.blogs) ? data.blogs : [];
+            const convertedBlogs = blogsArray.map((apiDoc) => {
+                const blogPost = apiToBlogPost(apiDoc);
+                return {
+                    id: blogPost.id,
+                    title: blogPost.title,
+                    slug: blogPost.slug,
+                    excerpt: blogPost.metadata.excerpt || '',
+                    status: blogPost.publication.status,
+                    authorId: blogPost.publication.authorId || '',
+                    updatedAt: blogPost.updatedAt,
+                    featuredImage: blogPost.metadata.featuredImage,
+                };
+            });
+            setBlogs(convertedBlogs);
+            setTotal(data.total || convertedBlogs.length);
+        }
+        catch (err) {
+            console.error('[useBlogs] Error fetching blogs:', err);
+            setError(err.message || 'Failed to fetch blogs');
+            setBlogs([]);
+            setTotal(0);
+        }
+        finally {
+            setLoading(false);
+        }
+    };
+    useEffect(() => {
+        fetchBlogs();
+    }, [limit, skip, status, admin, apiBaseUrl]);
+    return {
+        blogs,
+        loading,
+        error,
+        total,
+        refetch: fetchBlogs,
+    };
+}

package/src/hooks/useCategories.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Hook to fetch categories from existing blog posts
+ * Extracts categories from Hero blocks in all posts
+ */
+export declare function useCategories(): {
+    categories: string[];
+    loading: boolean;
+};
+//# sourceMappingURL=useCategories.d.ts.map

package/src/hooks/useCategories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useCategories.d.ts","sourceRoot":"","sources":["useCategories.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,wBAAgB,aAAa;;;EAkE5B"}

package/src/hooks/useCategories.js

@@ -0,0 +1,70 @@
+/**
+ * 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([]);
+    const [loading, setLoading] = useState(true);
+    useEffect(() => {
+        const fetchCategories = async () => {
+            try {
+                const categorySet = new Set();
+                // 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) => {
+                                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) => {
+                            if (post.blocks && Array.isArray(post.blocks)) {
+                                // Find Hero block
+                                const heroBlock = post.blocks.find((block) => 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.d.ts

@@ -0,0 +1,55 @@
+/**
+ * Plugin Blog - Main Entry Point
+ * Block-Based Blog Management System
+ * Multi-Tenant Architecture: Accepts custom blocks from client applications
+ */
+import { ClientBlockDefinition } from './types/block';
+/**
+ * Plugin Props Interface
+ * Matches the PluginProps from @jhits/jhits-dashboard
+ */
+export interface PluginProps {
+    subPath: string[];
+    siteId: string;
+    locale: string;
+    /** Custom blocks from client application (optional, can also come from window.__JHITS_PLUGIN_PROPS__) */
+    customBlocks?: ClientBlockDefinition[];
+    /** Enable dark mode for content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) */
+        light: string;
+        /** Background color for dark mode (optional) */
+        dark?: string;
+    };
+}
+/**
+ * Main Router Component
+ * Handles routing within the blog plugin
+ *
+ * Client Handshake:
+ * - Client apps can pass customBlocks via props
+ * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-blog'].customBlocks
+ * - The EditorProvider will automatically register these blocks
+ */
+export default function BlogPlugin(props: PluginProps): import("react/jsx-runtime").JSX.Element;
+export { BlogPlugin as Index };
+export type { Block, BlockTypeDefinition, ClientBlockDefinition, RichTextFormattingConfig, BlockEditProps, BlockPreviewProps, IBlockComponent, } from './types';
+export type { SEOMetadata, PublicationData, PostStatus, PostMetadata, BlogPost, PostListItem, PostFilterOptions, } from './types/post';
+export { initBlogPlugin } from './init';
+export type { BlogPluginConfig } from './init';
+export { RichTextEditor, RichTextPreview } from './lib/rich-text';
+export type { RichTextEditorProps, RichTextPreviewProps } from './lib/rich-text';
+export { useBlogs, useBlog } from './hooks';
+export type { UseBlogsOptions, UseBlogsResult, UseBlogOptions, UseBlogResult } from './hooks';
+export { fetchBlogs, fetchBlog } from './utils/client';
+export type { FetchBlogsOptions, FetchBlogsResult, FetchBlogOptions } from './utils/client';
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';
+export { blockRegistry } from './registry';
+export { registerLayoutBlocks } from './lib/layouts/registerLayoutBlocks';
+export { getPluginConfig, savePluginConfig } from './lib/config-storage';
+export { EditorProvider, useEditor } from './state/EditorContext';
+export type { EditorProviderProps, EditorState, EditorContextValue } from './state';
+export { useCategories } from './hooks/useCategories';
+//# sourceMappingURL=index.d.ts.map

package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,OAAO,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAStD;;;GAGG;AACH,MAAM,WAAW,WAAW;IACxB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;IACf,yGAAyG;IACzG,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,qEAAqE;IACrE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,iDAAiD;QACjD,KAAK,EAAE,MAAM,CAAC;QACd,gDAAgD;QAChD,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,KAAK,EAAE,WAAW,2CA4NpD;AAID,OAAO,EAAE,UAAU,IAAI,KAAK,EAAE,CAAC;AAG/B,YAAY,EACR,KAAK,EACL,mBAAmB,EACnB,qBAAqB,EACrB,wBAAwB,EACxB,cAAc,EACd,iBAAiB,EACjB,eAAe,GAClB,MAAM,SAAS,CAAC;AAGjB,YAAY,EACR,WAAW,EACX,eAAe,EACf,UAAU,EACV,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,iBAAiB,GACpB,MAAM,cAAc,CAAC;AAGtB,OAAO,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAG/C,OAAO,EAAE,cAAc,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAGjF,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,cAAc,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAG9F,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACvD,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAG5F,OAAO,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,4BAA4B,CAAC;AAG3E,OAAO,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAG3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,oCAAoC,CAAC;AAG1E,OAAO,EAAE,eAAe,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAGzE,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAClE,YAAY,EAAE,mBAAmB,EAAE,WAAW,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAGpF,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC"}

package/src/index.js

@@ -0,0 +1,228 @@
+/**
+ * Plugin Blog - Main Entry Point
+ * Block-Based Blog Management System
+ * Multi-Tenant Architecture: Accepts custom blocks from client applications
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useEffect } from 'react';
+import { EditorProvider } from './state/EditorContext';
+import { PostManagerView } from './views/PostManager';
+import { CanvasEditorView } from './views/CanvasEditor';
+import { editorStateToAPI } from './lib/mappers/apiMapper';
+import { SlugSEOManagerView } from './views/SlugSEO';
+import { PreviewBridgeView } from './views/Preview';
+import { SettingsView } from './views/Settings';
+import { useHeroBlockValidation, findHeroBlock } from './lib/utils/configValidation';
+/**
+ * Main Router Component
+ * Handles routing within the blog plugin
+ *
+ * Client Handshake:
+ * - Client apps can pass customBlocks via props
+ * - Or via window.__JHITS_PLUGIN_PROPS__['plugin-blog'].customBlocks
+ * - The EditorProvider will automatically register these blocks
+ */
+export default function BlogPlugin(props) {
+    const { subPath, siteId, locale, customBlocks: propsCustomBlocks, darkMode: propsDarkMode, backgroundColors: propsBackgroundColors } = props;
+    // Get custom blocks from props or window global (client app injection point)
+    const customBlocks = useMemo(() => {
+        // First, try props
+        if (propsCustomBlocks && propsCustomBlocks.length > 0) {
+            return propsCustomBlocks;
+        }
+        // Fallback to window global (for client app injection)
+        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if (pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.customBlocks) {
+                return pluginProps.customBlocks;
+            }
+        }
+        return [];
+    }, [propsCustomBlocks]);
+    // Get dark mode setting from props, localStorage (dev settings), or window global
+    // Priority: localStorage (dev) > props > window global > default
+    const darkMode = useMemo(() => {
+        // First, check localStorage for dev settings (highest priority for dev)
+        if (typeof window !== 'undefined') {
+            try {
+                const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+                if (saved) {
+                    const config = JSON.parse(saved);
+                    if (config.darkMode !== undefined) {
+                        return config.darkMode;
+                    }
+                }
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+        }
+        // Then try props
+        if (propsDarkMode !== undefined) {
+            return propsDarkMode;
+        }
+        // Fallback to window global if prop not provided
+        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if ((pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.darkMode) !== undefined) {
+                return pluginProps.darkMode;
+            }
+        }
+        return true; // Default to dark mode enabled
+    }, [propsDarkMode]);
+    // Get background colors from props, localStorage (dev settings), or window global
+    // Priority: localStorage (dev) > props > window global
+    const backgroundColors = useMemo(() => {
+        // First, check localStorage for dev settings (highest priority for dev)
+        if (typeof window !== 'undefined') {
+            try {
+                const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+                if (saved) {
+                    const config = JSON.parse(saved);
+                    if (config.backgroundColors) {
+                        return config.backgroundColors;
+                    }
+                }
+            }
+            catch (e) {
+                // Ignore localStorage errors
+            }
+        }
+        // Then try props
+        if (propsBackgroundColors) {
+            return propsBackgroundColors;
+        }
+        // Fallback to window global
+        if (typeof window !== 'undefined' && window.__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = window.__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            if (pluginProps === null || pluginProps === void 0 ? void 0 : pluginProps.backgroundColors) {
+                return pluginProps.backgroundColors;
+            }
+        }
+        return undefined;
+    }, [propsBackgroundColors]);
+    const route = subPath[0] || 'posts';
+    // Validate hero block configuration (only checks when needed)
+    useHeroBlockValidation(route, customBlocks, propsCustomBlocks);
+    // Get hero block definition for logging/debugging (only for routes that need it)
+    const heroBlockDefinition = useMemo(() => {
+        const needsHeroBlock = route === 'editor' || route === 'new' || route === 'preview';
+        return needsHeroBlock ? findHeroBlock(customBlocks) : undefined;
+    }, [customBlocks, route]);
+    // Listen for config updates from settings screen
+    useEffect(() => {
+        if (typeof window === 'undefined')
+            return;
+        const handleConfigUpdate = () => {
+            // Reload page to apply changes (simplest way to ensure all components pick up new values)
+            window.location.reload();
+        };
+        window.addEventListener('blog-plugin-config-updated', handleConfigUpdate);
+        return () => {
+            window.removeEventListener('blog-plugin-config-updated', handleConfigUpdate);
+        };
+    }, []);
+    if (heroBlockDefinition !== undefined) {
+        console.log('[BlogPlugin] Hero block definition:', heroBlockDefinition ? 'found' : 'not found (REQUIRED)');
+    }
+    // Route to appropriate view
+    switch (route) {
+        case 'posts':
+            return _jsx(PostManagerView, { siteId: siteId, locale: locale });
+        case 'editor':
+            const postId = subPath[1]; // This is actually the slug, not the ID
+            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, 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
+                    const originalSlug = postId || state.slug || state.postId;
+                    if (!originalSlug) {
+                        throw new Error('Cannot save: no post identifier available. Please reload the page.');
+                    }
+                    console.log('[BlogPlugin] Saving post with slug:', originalSlug);
+                    const apiData = editorStateToAPI(state, undefined, heroBlock);
+                    const response = await fetch(`/api/plugin-blog/${originalSlug}`, {
+                        method: 'PUT',
+                        headers: { 'Content-Type': 'application/json' },
+                        credentials: 'include', // Include cookies for authentication
+                        body: JSON.stringify(apiData),
+                    });
+                    if (!response.ok) {
+                        const error = await response.json();
+                        console.error('[BlogPlugin] Save failed:', {
+                            status: response.status,
+                            statusText: response.statusText,
+                            error,
+                            missingFields: error.missingFields,
+                        });
+                        // Provide more detailed error message if available
+                        const errorMessage = error.message || error.error || 'Failed to save post';
+                        const missingFieldsMsg = error.missingFields && error.missingFields.length > 0
+                            ? ` Missing: ${error.missingFields.join(', ')}`
+                            : '';
+                        throw new Error(errorMessage + missingFieldsMsg);
+                    }
+                    const result = await response.json();
+                    // If the slug changed, update the URL
+                    if (result.slug && result.slug !== originalSlug) {
+                        window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
+                    }
+                    return result;
+                }, children: _jsx(CanvasEditorView, { postId: postId, siteId: siteId, locale: locale, darkMode: darkMode, backgroundColors: backgroundColors }) }));
+        case 'new':
+            return (_jsx(EditorProvider, { customBlocks: customBlocks, darkMode: darkMode, backgroundColors: backgroundColors, onSave: async (state) => {
+                    // Save to API - create new post
+                    const apiData = editorStateToAPI(state);
+                    const response = await fetch('/api/plugin-blog/new', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        credentials: 'include', // Include cookies for authentication
+                        body: JSON.stringify(apiData),
+                    });
+                    if (!response.ok) {
+                        const error = await response.json();
+                        throw new Error(error.message || 'Failed to create post');
+                    }
+                    const result = await response.json();
+                    // Update the URL to the new post's slug
+                    if (result.slug) {
+                        window.history.replaceState(null, '', `/dashboard/blog/editor/${result.slug}`);
+                    }
+                    return result;
+                }, children: _jsx(CanvasEditorView, { siteId: siteId, locale: locale, darkMode: darkMode, backgroundColors: backgroundColors }) }));
+        case 'seo':
+            const seoPostId = subPath[1];
+            return _jsx(SlugSEOManagerView, { postId: seoPostId, siteId: siteId, locale: locale });
+        case 'preview':
+            const previewPostId = subPath[1];
+            return _jsx(PreviewBridgeView, { postId: previewPostId, siteId: siteId, locale: locale });
+        case 'settings':
+        case 'install':
+            return _jsx(SettingsView, { siteId: siteId, locale: locale });
+        default:
+            return _jsx(PostManagerView, { siteId: siteId, locale: locale });
+    }
+}
+// Export for use as default
+export { BlogPlugin as Index };
+// Export initialization utility for easy setup
+export { initBlogPlugin } from './init';
+// Export rich text components for client applications
+export { RichTextEditor, RichTextPreview } from './lib/rich-text';
+// Export hooks for client applications
+export { useBlogs, useBlog } from './hooks';
+// Export client utilities
+export { fetchBlogs, fetchBlog } from './utils/client';
+// Export block rendering components
+export { BlockRenderer, BlocksRenderer } from './lib/blocks/BlockRenderer';
+// Export block registry
+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 hooks
+export { useCategories } from './hooks/useCategories';

package/src/init.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Blog Plugin Initialization Utility
+ *
+ * Simple function to initialize the blog plugin with client configuration.
+ * Call this once in your app (e.g., in a script tag or root layout) to configure
+ * the blog plugin without needing a React component.
+ *
+ * @example
+ * ```typescript
+ * import { initBlogPlugin } from '@jhits/plugin-blog/init';
+ * import { blogConfig } from '@/plugins/blog-config';
+ *
+ * // Call once when your app loads
+ * initBlogPlugin(blogConfig);
+ * ```
+ */
+import type { ClientBlockDefinition } from './types/block';
+export interface BlogPluginConfig {
+    /** Custom blocks available in the editor */
+    customBlocks?: ClientBlockDefinition[];
+    /** Dark mode setting for the editor content area and wrappers (default: true) */
+    darkMode?: boolean;
+    /** Background colors for the editor */
+    backgroundColors?: {
+        /** Background color for light mode (REQUIRED) - CSS color value (hex, rgb, or named color) */
+        light: string;
+        /** Background color for dark mode (optional) - CSS color value (hex, rgb, or named color) */
+        dark?: string;
+    };
+}
+/**
+ * Initialize the blog plugin with client configuration
+ *
+ * This function sets up the window global that the plugin reads from automatically.
+ * Call this once when your app loads, before the plugin is rendered.
+ *
+ * @param config - Blog plugin configuration (customBlocks, darkMode, etc.)
+ */
+export declare function initBlogPlugin(config: BlogPluginConfig): void;
+//# sourceMappingURL=init.d.ts.map

package/src/init.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"init.d.ts","sourceRoot":"","sources":["init.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAKH,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAE3D,MAAM,WAAW,gBAAgB;IAC7B,4CAA4C;IAC5C,YAAY,CAAC,EAAE,qBAAqB,EAAE,CAAC;IACvC,iFAAiF;IACjF,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,uCAAuC;IACvC,gBAAgB,CAAC,EAAE;QACf,8FAA8F;QAC9F,KAAK,EAAE,MAAM,CAAC;QACd,6FAA6F;QAC7F,IAAI,CAAC,EAAE,MAAM,CAAC;KACjB,CAAC;CACL;AAED;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAAC,MAAM,EAAE,gBAAgB,GAAG,IAAI,CAiB7D"}

package/src/init.js

@@ -0,0 +1,41 @@
+/**
+ * Blog Plugin Initialization Utility
+ *
+ * Simple function to initialize the blog plugin with client configuration.
+ * Call this once in your app (e.g., in a script tag or root layout) to configure
+ * the blog plugin without needing a React component.
+ *
+ * @example
+ * ```typescript
+ * import { initBlogPlugin } from '@jhits/plugin-blog/init';
+ * import { blogConfig } from '@/plugins/blog-config';
+ *
+ * // Call once when your app loads
+ * initBlogPlugin(blogConfig);
+ * ```
+ */
+'use client';
+/**
+ * Initialize the blog plugin with client configuration
+ *
+ * This function sets up the window global that the plugin reads from automatically.
+ * Call this once when your app loads, before the plugin is rendered.
+ *
+ * @param config - Blog plugin configuration (customBlocks, darkMode, etc.)
+ */
+export function initBlogPlugin(config) {
+    if (typeof window === 'undefined') {
+        // Server-side: no-op
+        return;
+    }
+    // Initialize the global plugin props object if it doesn't exist
+    if (!window.__JHITS_PLUGIN_PROPS__) {
+        window.__JHITS_PLUGIN_PROPS__ = {};
+    }
+    // Set blog plugin configuration
+    window.__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
+        customBlocks: config.customBlocks || [],
+        darkMode: config.darkMode !== undefined ? config.darkMode : true, // Default to true
+        backgroundColors: config.backgroundColors || undefined,
+    };
+}

package/src/lib/blocks/BlockRenderer.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Block Renderer
+ * Library component for rendering blocks (decoupled from editor)
+ * This is the "headless" rendering layer
+ *
+ * Multi-Tenant: Uses Preview components from client-provided blocks
+ */
+import React from 'react';
+import { Block, BlockPreviewProps } from '../../types/block';
+/**
+ * Block Renderer Props
+ */
+export interface BlockRendererProps {
+    /** Block to render */
+    block: Block;
+    /** Custom renderers for specific block types (optional override) */
+    customRenderers?: Map<string, React.ComponentType<BlockPreviewProps>>;
+    /** Additional context for rendering */
+    context?: {
+        siteId?: string;
+        locale?: string;
+        [key: string]: unknown;
+    };
+}
+/**
+ * Block Renderer Component
+ * Renders a single block using its Preview component from the registry
+ *
+ * This is the headless rendering layer - it uses the Preview component
+ * provided by the client application, allowing each client to have
+ * their own design system in the frontend while the editor uses
+ * the dashboard's design system.
+ */
+export declare function BlockRenderer({ block, customRenderers, context }: BlockRendererProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Blocks Renderer
+ * Renders an array of blocks
+ */
+export interface BlocksRendererProps {
+    /** Array of blocks to render */
+    blocks: Block[];
+    /** Custom renderers for specific block types */
+    customRenderers?: Map<string, React.ComponentType<{
+        block: Block;
+    }>>;
+    /** Additional props to pass to renderers */
+    renderProps?: Record<string, unknown>;
+    /** Wrapper component for the blocks */
+    wrapper?: React.ComponentType<{
+        children: React.ReactNode;
+    }>;
+}
+export declare function BlocksRenderer({ blocks, customRenderers, renderProps, wrapper: Wrapper, }: BlocksRendererProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=BlockRenderer.d.ts.map

package/src/lib/blocks/BlockRenderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlockRenderer.d.ts","sourceRoot":"","sources":["BlockRenderer.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAIH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,KAAK,EAAE,iBAAiB,EAAE,MAAM,mBAAmB,CAAC;AAI7D;;GAEG;AACH,MAAM,WAAW,kBAAkB;IAC/B,sBAAsB;IACtB,KAAK,EAAE,KAAK,CAAC;IAEb,oEAAoE;IACpE,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,CAAC;IAEtE,uCAAuC;IACvC,OAAO,CAAC,EAAE;QACN,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;KAC1B,CAAC;CACL;AAED;;;;;;;;GAQG;AACH,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,eAAe,EACf,OAAY,EACf,EAAE,kBAAkB,2CAqDpB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAChC,gCAAgC;IAChC,MAAM,EAAE,KAAK,EAAE,CAAC;IAEhB,gDAAgD;IAChD,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,KAAK,EAAE,KAAK,CAAA;KAAE,CAAC,CAAC,CAAC;IAErE,4CAA4C;IAC5C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAEtC,uCAAuC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;QAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,CAAC,CAAC;CAChE;AAED,wBAAgB,cAAc,CAAC,EAC3B,MAAM,EACN,eAAe,EACf,WAAW,EACX,OAAO,EAAE,OAAO,GACnB,EAAE,mBAAmB,2CAerB"}

package/src/lib/blocks/BlockRenderer.js

@@ -0,0 +1,54 @@
+/**
+ * Block Renderer
+ * Library component for rendering blocks (decoupled from editor)
+ * This is the "headless" rendering layer
+ *
+ * Multi-Tenant: Uses Preview components from client-provided blocks
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { blockRegistry } from '../../registry/BlockRegistry';
+/**
+ * Block Renderer Component
+ * Renders a single block using its Preview component from the registry
+ *
+ * This is the headless rendering layer - it uses the Preview component
+ * provided by the client application, allowing each client to have
+ * their own design system in the frontend while the editor uses
+ * the dashboard's design system.
+ */
+export function BlockRenderer({ block, customRenderers, context = {} }) {
+    // Check for custom renderer override first
+    if (customRenderers === null || customRenderers === void 0 ? void 0 : customRenderers.has(block.type)) {
+        const CustomRenderer = customRenderers.get(block.type);
+        return _jsx(CustomRenderer, { block: block, context: context });
+    }
+    // Get block definition from registry
+    const definition = blockRegistry.get(block.type);
+    if (!definition) {
+        console.warn(`Block type "${block.type}" not found in registry. Available types:`, blockRegistry.getAll().map(b => b.type).join(', '));
+        return (_jsxs("div", { className: "p-4 border border-red-300 bg-red-50 rounded", children: [_jsxs("p", { className: "text-red-600", children: ["Unknown block type: ", block.type] }), _jsx("p", { className: "text-xs text-red-500 mt-1", children: "Make sure this block type is registered via customBlocks prop" })] }));
+    }
+    // Use the Preview component from the block definition
+    // This is provided by the client application
+    const PreviewComponent = definition.components.Preview;
+    // Check if this is a container block with children
+    const isContainer = definition.isContainer === true;
+    const childBlocks = isContainer && block.children && Array.isArray(block.children) && block.children.length > 0
+        ? (typeof block.children[0] === 'object'
+            ? block.children
+            : [])
+        : [];
+    // If container block, pass child blocks and render function
+    if (isContainer) {
+        return (_jsx(PreviewComponent, { block: block, context: context, childBlocks: childBlocks, renderChild: (childBlock) => (_jsx(BlockRenderer, { block: childBlock, customRenderers: customRenderers, context: context })) }));
+    }
+    return _jsx(PreviewComponent, { block: block, context: context });
+}
+export function BlocksRenderer({ blocks, customRenderers, renderProps, wrapper: Wrapper, }) {
+    const content = blocks.map((block, index) => (_jsx(BlockRenderer, { block: block, customRenderers: customRenderers, context: renderProps }, block.id || index)));
+    if (Wrapper) {
+        return _jsx(Wrapper, { children: content });
+    }
+    return _jsx(_Fragment, { children: content });
+}