@jhits/plugin-blog 0.0.9 → 0.0.11

package/src/views/Settings/SettingsView.tsx

@@ -1,298 +0,0 @@
-/**
- * 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.d.ts

@@ -1,6 +0,0 @@
-/**
- * Settings View Exports
- */
-export { SettingsView } from './SettingsView';
-export type { SettingsViewProps } from './SettingsView';
-//# sourceMappingURL=index.d.ts.map

package/src/views/Settings/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}

package/src/views/Settings/index.js

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

package/src/views/Settings/index.ts

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

package/src/views/SlugSEO/SlugSEOManagerView.d.ts

@@ -1,12 +0,0 @@
-/**
- * Slug & SEO Manager View
- * URL and SEO metadata management
- * Follows dashboard earth-tone design system
- */
-export interface SlugSEOManagerViewProps {
-    postId?: string;
-    siteId: string;
-    locale: string;
-}
-export declare function SlugSEOManagerView({ postId, siteId, locale }: SlugSEOManagerViewProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=SlugSEOManagerView.d.ts.map

package/src/views/SlugSEO/SlugSEOManagerView.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SlugSEOManagerView.d.ts","sourceRoot":"","sources":["SlugSEOManagerView.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAOH,MAAM,WAAW,uBAAuB;IACpC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,kBAAkB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,uBAAuB,2CA2ErF"}

package/src/views/SlugSEO/SlugSEOManagerView.js

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

package/src/views/SlugSEO/SlugSEOManagerView.tsx

@@ -1,94 +0,0 @@
-/**
- * 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.d.ts

@@ -1,6 +0,0 @@
-/**
- * Slug & SEO Manager View Exports
- */
-export { SlugSEOManagerView } from './SlugSEOManagerView';
-export type { SlugSEOManagerViewProps } from './SlugSEOManagerView';
-//# sourceMappingURL=index.d.ts.map

package/src/views/SlugSEO/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,YAAY,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC"}

package/src/views/SlugSEO/index.js

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

package/src/views/SlugSEO/index.ts

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