@jhits/plugin-blog 0.0.1

package/src/views/README.md

@@ -0,0 +1,82 @@
+# Blog Plugin Views
+
+## Directory Structure
+
+```
+src/views/
+├── PostManager/
+│   ├── PostManagerView.tsx    # Professional table layout for post management
+│   └── index.ts
+├── CanvasEditor/
+│   ├── CanvasEditorView.tsx   # Drag-and-drop block editor workspace
+│   └── index.ts
+├── SlugSEO/
+│   ├── SlugSEOManagerView.tsx # URL slug and SEO metadata management
+│   └── index.ts
+└── Preview/
+    ├── PreviewBridgeView.tsx  # Live preview of blog posts
+    └── index.ts
+```
+
+## Design System Compliance
+
+All views follow the dashboard's earth-tone design system:
+
+- **Colors**: Neutral palette (neutral-100 to neutral-900), primary (violet-700)
+- **Typography**: 
+  - Headings: `font-black uppercase tracking-tighter`
+  - Labels: `text-[10px] font-black uppercase tracking-widest`
+  - Body: `font-sans`
+- **Layout**: 
+  - Containers: `rounded-[2.5rem]`
+  - Padding: `p-8`
+  - Backgrounds: `bg-white dark:bg-neutral-900`
+- **Buttons**: `rounded-full`, uppercase, tracking-widest
+- **Borders**: `border-neutral-300 dark:border-neutral-700`
+
+## PostManagerView
+
+Professional table layout with:
+- Search and filter functionality
+- Status badges (published, draft, scheduled, archived)
+- Empty state with "Create Your First Post" CTA
+- Action buttons (Edit, Preview, Delete)
+- Mock data for development
+
+## CanvasEditorView
+
+Block editor workspace with:
+- Toolbar with Back, Preview, and Save buttons
+- Title input field
+- Block canvas area
+- Empty state for adding first block
+- Integrated with EditorProvider for state management
+
+## SlugSEOManagerView
+
+SEO management interface with:
+- URL slug editor with collision detection placeholder
+- Google-style search result preview
+- Meta description editor with character counter
+
+## PreviewBridgeView
+
+Live preview interface with:
+- Header with Refresh and Open in New Tab buttons
+- Preview container (ready for iframe or side-by-side panel)
+- Placeholder for preview rendering
+
+## Usage
+
+Views are imported and used in the main `BlogPlugin` router:
+
+```typescript
+import { PostManagerView } from './views/PostManager';
+import { CanvasEditorView } from './views/CanvasEditor';
+// ... etc
+
+// In router switch statement:
+case 'posts':
+    return <PostManagerView siteId={siteId} locale={locale} />;
+```
+

package/src/views/Settings/SettingsView.tsx

@@ -0,0 +1,298 @@
+/**
+ * Settings View - Development/Installation Screen
+ * Allows manual configuration of plugin settings (darkMode, backgroundColors)
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Save, RotateCcw, Palette, Moon, Sun } from 'lucide-react';
+
+export interface SettingsViewProps {
+    siteId: string;
+    locale: string;
+}
+
+export function SettingsView({ siteId, locale }: SettingsViewProps) {
+    // Get current config from window global
+    const getCurrentConfig = () => {
+        if (typeof window !== 'undefined' && (window as any).__JHITS_PLUGIN_PROPS__) {
+            const pluginProps = (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'];
+            return {
+                darkMode: pluginProps?.darkMode ?? true,
+                backgroundColors: pluginProps?.backgroundColors ?? {
+                    light: '#ffffff',
+                    dark: '#171717',
+                },
+            };
+        }
+        return {
+            darkMode: true,
+            backgroundColors: {
+                light: '#ffffff',
+                dark: '#171717',
+            },
+        };
+    };
+
+    const [darkMode, setDarkMode] = useState<boolean>(getCurrentConfig().darkMode);
+    const [lightBg, setLightBg] = useState<string>(getCurrentConfig().backgroundColors.light);
+    const [darkBg, setDarkBg] = useState<string>(getCurrentConfig().backgroundColors.dark || '#171717');
+    const [hasChanges, setHasChanges] = useState<boolean>(false);
+    const [saved, setSaved] = useState<boolean>(false);
+
+    // Check for changes
+    useEffect(() => {
+        const current = getCurrentConfig();
+        const hasChanges = 
+            darkMode !== current.darkMode ||
+            lightBg !== current.backgroundColors.light ||
+            darkBg !== (current.backgroundColors.dark || '#171717');
+        setHasChanges(hasChanges);
+        setSaved(false);
+    }, [darkMode, lightBg, darkBg]);
+
+    // Save configuration
+    const handleSave = () => {
+        if (typeof window === 'undefined') return;
+
+        // Initialize window global if needed
+        if (!(window as any).__JHITS_PLUGIN_PROPS__) {
+            (window as any).__JHITS_PLUGIN_PROPS__ = {};
+        }
+
+        // Update configuration
+        (window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'] = {
+            ...((window as any).__JHITS_PLUGIN_PROPS__['plugin-blog'] || {}),
+            darkMode,
+            backgroundColors: {
+                light: lightBg,
+                dark: darkBg,
+            },
+        };
+
+        // Also save to localStorage for persistence
+        try {
+            localStorage.setItem('__JHITS_PLUGIN_BLOG_CONFIG__', JSON.stringify({
+                darkMode,
+                backgroundColors: {
+                    light: lightBg,
+                    dark: darkBg,
+                },
+            }));
+        } catch (e) {
+            console.warn('[SettingsView] Failed to save to localStorage:', e);
+        }
+
+        setSaved(true);
+        setTimeout(() => setSaved(false), 2000);
+
+        // Trigger a custom event to notify other components
+        window.dispatchEvent(new CustomEvent('blog-plugin-config-updated', {
+            detail: { darkMode, backgroundColors: { light: lightBg, dark: darkBg } }
+        }));
+
+        console.log('[SettingsView] Configuration saved:', {
+            darkMode,
+            backgroundColors: { light: lightBg, dark: darkBg },
+        });
+    };
+
+    // Reset to defaults
+    const handleReset = () => {
+        setDarkMode(true);
+        setLightBg('#ffffff');
+        setDarkBg('#171717');
+    };
+
+    // Load from localStorage on mount
+    useEffect(() => {
+        try {
+            const saved = localStorage.getItem('__JHITS_PLUGIN_BLOG_CONFIG__');
+            if (saved) {
+                const config = JSON.parse(saved);
+                setDarkMode(config.darkMode ?? true);
+                setLightBg(config.backgroundColors?.light ?? '#ffffff');
+                setDarkBg(config.backgroundColors?.dark ?? '#171717');
+            }
+        } catch (e) {
+            console.warn('[SettingsView] Failed to load from localStorage:', e);
+        }
+    }, []);
+
+    return (
+        <div className="min-h-screen bg-neutral-50 dark:bg-neutral-900 p-8">
+            <div className="max-w-4xl mx-auto">
+                {/* Header */}
+                <div className="mb-8">
+                    <h1 className="text-4xl font-black uppercase tracking-tighter text-neutral-950 dark:text-white mb-2">
+                        Blog Plugin Settings
+                    </h1>
+                    <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                        Configure editor appearance and behavior. Changes are applied immediately.
+                    </p>
+                </div>
+
+                {/* Settings Card */}
+                <div className="bg-white dark:bg-neutral-800 rounded-[2.5rem] border border-neutral-200 dark:border-neutral-700 shadow-lg p-8">
+                    {/* Dark Mode Toggle */}
+                    <div className="mb-8 pb-8 border-b border-neutral-200 dark:border-neutral-700">
+                        <div className="flex items-center justify-between mb-4">
+                            <div className="flex items-center gap-3">
+                                {darkMode ? (
+                                    <Moon className="size-5 text-neutral-600 dark:text-neutral-400" />
+                                ) : (
+                                    <Sun className="size-5 text-neutral-600 dark:text-neutral-400" />
+                                )}
+                                <div>
+                                    <label className="text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                        Dark Mode
+                                    </label>
+                                    <p className="text-xs text-neutral-500 dark:text-neutral-500 mt-1">
+                                        Enable dark mode for editor content area and wrappers
+                                    </p>
+                                </div>
+                            </div>
+                            <button
+                                onClick={() => setDarkMode(!darkMode)}
+                                className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+                                    darkMode
+                                        ? 'bg-primary'
+                                        : 'bg-neutral-300 dark:bg-neutral-600'
+                                }`}
+                            >
+                                <span
+                                    className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                                        darkMode ? 'translate-x-6' : 'translate-x-1'
+                                    }`}
+                                />
+                            </button>
+                        </div>
+                    </div>
+
+                    {/* Background Colors */}
+                    <div className="mb-8">
+                        <div className="flex items-center gap-3 mb-6">
+                            <Palette className="size-5 text-neutral-600 dark:text-neutral-400" />
+                            <div>
+                                <label className="text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                    Background Colors
+                                </label>
+                                <p className="text-xs text-neutral-500 dark:text-neutral-500 mt-1">
+                                    Set custom background colors for the editor canvas
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className="space-y-4">
+                            {/* Light Mode Background */}
+                            <div>
+                                <label className="block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-2">
+                                    Light Mode Background <span className="text-red-500">*</span>
+                                </label>
+                                <div className="flex items-center gap-3">
+                                    <input
+                                        type="text"
+                                        value={lightBg}
+                                        onChange={(e) => setLightBg(e.target.value)}
+                                        placeholder="#ffffff"
+                                        className="flex-1 bg-dashboard-card border border-dashboard-border p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all text-dashboard-text"
+                                    />
+                                    <div
+                                        className="w-16 h-16 rounded-xl border-2 border-neutral-200 dark:border-neutral-700"
+                                        style={{ backgroundColor: lightBg }}
+                                    />
+                                </div>
+                                <p className="text-xs text-neutral-400 dark:text-neutral-600 mt-1">
+                                    CSS color value (hex, rgb, or named color)
+                                </p>
+                            </div>
+
+                            {/* Dark Mode Background */}
+                            <div>
+                                <label className="block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-2">
+                                    Dark Mode Background <span className="text-neutral-400">(Optional)</span>
+                                </label>
+                                <div className="flex items-center gap-3">
+                                    <input
+                                        type="text"
+                                        value={darkBg}
+                                        onChange={(e) => setDarkBg(e.target.value)}
+                                        placeholder="#171717"
+                                        disabled={!darkMode}
+                                        className={`flex-1 bg-white dark:bg-neutral-900/50 border border-neutral-300 dark:border-neutral-700 p-4 rounded-2xl text-sm font-bold outline-none focus:border-primary transition-all dark:text-neutral-100 ${
+                                            !darkMode ? 'opacity-50 cursor-not-allowed' : ''
+                                        }`}
+                                    />
+                                    <div
+                                        className={`w-16 h-16 rounded-xl border-2 border-neutral-200 dark:border-neutral-700 ${
+                                            !darkMode ? 'opacity-50' : ''
+                                        }`}
+                                        style={{ backgroundColor: darkBg }}
+                                    />
+                                </div>
+                                <p className="text-xs text-neutral-400 dark:text-neutral-600 mt-1">
+                                    Only used when dark mode is enabled
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Preview */}
+                    <div className="mb-8 p-6 bg-neutral-50 dark:bg-neutral-900/50 rounded-2xl border border-neutral-200 dark:border-neutral-700">
+                        <label className="block text-[10px] font-black uppercase tracking-widest text-neutral-500 dark:text-neutral-500 mb-3">
+                            Preview
+                        </label>
+                        <div
+                            className="h-32 rounded-xl border-2 border-dashed border-neutral-300 dark:border-neutral-700 flex items-center justify-center"
+                            style={{
+                                backgroundColor: darkMode ? darkBg : lightBg,
+                            }}
+                        >
+                            <span className="text-xs font-bold uppercase tracking-widest text-neutral-600 dark:text-neutral-400">
+                                Editor Canvas Preview
+                            </span>
+                        </div>
+                    </div>
+
+                    {/* Actions */}
+                    <div className="flex items-center justify-between pt-6 border-t border-neutral-200 dark:border-neutral-700">
+                        <button
+                            onClick={handleReset}
+                            className="px-6 py-3 rounded-full border border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900/50 text-sm font-black uppercase tracking-widest text-neutral-600 dark:text-neutral-400 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors flex items-center gap-2"
+                        >
+                            <RotateCcw className="size-4" />
+                            Reset
+                        </button>
+                        <button
+                            onClick={handleSave}
+                            disabled={!hasChanges}
+                            className={`px-6 py-3 rounded-full text-sm font-black uppercase tracking-widest transition-all flex items-center gap-2 ${
+                                hasChanges
+                                    ? 'bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/20'
+                                    : 'bg-neutral-200 dark:bg-neutral-700 text-neutral-400 dark:text-neutral-600 cursor-not-allowed'
+                            }`}
+                        >
+                            <Save className="size-4" />
+                            {saved ? 'Saved!' : 'Save Changes'}
+                        </button>
+                    </div>
+                </div>
+
+                {/* Info Card */}
+                <div className="mt-6 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-2xl p-6">
+                    <h3 className="text-sm font-black uppercase tracking-widest text-blue-900 dark:text-blue-300 mb-2">
+                        How It Works
+                    </h3>
+                    <ul className="text-xs text-blue-800 dark:text-blue-400 space-y-1 list-disc list-inside">
+                        <li>Changes are saved to <code className="bg-blue-100 dark:bg-blue-900/50 px-1 rounded">window.__JHITS_PLUGIN_PROPS__</code> and localStorage</li>
+                        <li>Configuration persists across page refreshes</li>
+                        <li>To apply changes in the editor, navigate to a post editor page</li>
+                        <li>For production, configure these settings in your client app's blog config file</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}
+

package/src/views/Settings/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Settings View Exports
+ */
+
+export { SettingsView } from './SettingsView';
+export type { SettingsViewProps } from './SettingsView';
+

package/src/views/SlugSEO/SlugSEOManagerView.tsx

@@ -0,0 +1,94 @@
+/**
+ * Slug & SEO Manager View
+ * URL and SEO metadata management
+ * Follows dashboard earth-tone design system
+ */
+
+'use client';
+
+import React from 'react';
+import { Search, Link2, FileText } from 'lucide-react';
+
+export interface SlugSEOManagerViewProps {
+    postId?: string;
+    siteId: string;
+    locale: string;
+}
+
+export function SlugSEOManagerView({ postId, siteId, locale }: SlugSEOManagerViewProps) {
+    return (
+        <div className="h-full w-full bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            <div className="max-w-4xl mx-auto">
+                <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                    Slug & SEO Manager
+                </h1>
+                <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-8">
+                    {postId ? `Managing SEO for post: ${postId}` : 'Manage URL slugs and SEO metadata'}
+                </p>
+
+                <div className="space-y-6">
+                    {/* Slug Editor */}
+                    <div className="p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700">
+                        <label className="block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3">
+                            URL Slug
+                        </label>
+                        <div className="flex items-center gap-3">
+                            <Link2 className="text-neutral-400 size-5" />
+                            <input
+                                type="text"
+                                placeholder="post-url-slug"
+                                className="flex-1 px-4 py-3 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none"
+                            />
+                        </div>
+                        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-2">
+                            Collision detection will appear here
+                        </p>
+                    </div>
+
+                    {/* SEO Preview */}
+                    <div className="p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700">
+                        <label className="block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3">
+                            Search Result Preview
+                        </label>
+                        <div className="bg-white dark:bg-neutral-900 rounded-2xl p-4 border border-neutral-300 dark:border-neutral-700">
+                            <div className="flex items-center gap-2 mb-2">
+                                <Search size={16} className="text-neutral-400" />
+                                <span className="text-xs text-neutral-500">Google Search Result</span>
+                            </div>
+                            <div className="space-y-1">
+                                <h3 className="text-lg text-blue-600 dark:text-blue-400 hover:underline cursor-pointer">
+                                    Post Title Will Appear Here
+                                </h3>
+                                <p className="text-sm text-green-700 dark:text-green-400">
+                                    https://example.com/blog/post-url-slug
+                                </p>
+                                <p className="text-sm text-neutral-600 dark:text-neutral-400">
+                                    Meta description will appear here. This is what users see in search results.
+                                </p>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Meta Description */}
+                    <div className="p-6 bg-neutral-100 dark:bg-neutral-800/50 rounded-[2.5rem] border border-neutral-300 dark:border-neutral-700">
+                        <label className="block text-sm font-black text-neutral-950 dark:text-white uppercase tracking-tight mb-3">
+                            Meta Description
+                        </label>
+                        <div className="flex items-start gap-3">
+                            <FileText className="text-neutral-400 size-5 mt-1" />
+                            <textarea
+                                placeholder="Enter meta description for search engines..."
+                                rows={4}
+                                className="flex-1 px-4 py-3 bg-white dark:bg-neutral-900 border border-neutral-300 dark:border-neutral-700 rounded-2xl text-sm focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none resize-none"
+                            />
+                        </div>
+                        <p className="text-xs text-neutral-500 dark:text-neutral-400 mt-2">
+                            0 / 160 characters
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+

package/src/views/SlugSEO/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Slug & SEO Manager View Exports
+ */
+
+export { SlugSEOManagerView } from './SlugSEOManagerView';
+export type { SlugSEOManagerViewProps } from './SlugSEOManagerView';
+