salman/igny8
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
IGNY8 VPS (Salman)
2025-11-21 03:58:29 +00:00
parent 5106f7b200
commit b293856ef2
9 changed files with 515 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
active-workflow-docs/CURRENT_WORKFLOW_STATUS.md
View File

@@ -128,6 +128,33 @@ PLANNING → WRITER → OPTIMIZE → PUBLISH
## Current Workflow Details
### Site Setup & Integration (New Flow)
#### Step 1: Add Site (WordPress)
- User adds a new WordPress site from the welcome screen or sites page
- During site creation, user selects:
- **Industry**: From available industries (e.g., Technology, Healthcare, Finance)
- **Sectors**: Multiple sectors within the selected industry (e.g., SaaS, E-commerce, Mobile Apps)
- **Site Name**: Display name for the site
- **Website Address**: WordPress site URL
- Site is created with industry and sectors already configured
#### Step 2: Integrate Site
- User is redirected to Site Settings → Integrations tab (`/sites/{id}/settings?tab=integrations`)
- **API Key Generation**:
- User generates a unique API key for the site
- API key is displayed and can be copied
- Key is stored securely in the integration credentials
- **Plugin Download**:
- User downloads the IGNY8 WP Bridge plugin directly from the page
- Plugin provides deeper WordPress integration than default WordPress app
- **WordPress Configuration**:
- User enters WordPress site URL
- User enters WordPress username
- User enters Application Password (created in WordPress admin)
- User enables/disables integration and two-way sync
- Integration is saved and connection is tested
### Phase 1: Planning
- Keyword import and management
- Auto-clustering (1 credit per 30 keywords)
@@ -146,7 +173,7 @@ PLANNING → WRITER → OPTIMIZE → PUBLISH
- Apply improvements
### Phase 4: Publish
- WordPress publishing
- WordPress publishing (via IGNY8 WP Bridge plugin)
- Site deployment (for IGNY8-hosted sites)
- Content validation

BIN
backend/celerybeat-schedule
View File

Binary file not shown.

9
frontend/src/components/onboarding/WorkflowGuide.tsx
View File

@@ -178,9 +178,14 @@ export default function WorkflowGuide({ onSiteAdded }: WorkflowGuideProps) {
onSiteAdded();
}
// Dismiss guide and redirect to site settings with integrations tab
// Dismiss guide first, then navigate after a small delay to ensure state is updated
await dismissGuide();
navigate(`/sites/${newSite.id}/settings?tab=integrations`);
// Use requestAnimationFrame to ensure DOM updates are complete before navigation
// This prevents React from being null during navigation
requestAnimationFrame(() => {
navigate(`/sites/${newSite.id}/settings?tab=integrations`);
});
} catch (error: any) {
toast.error(`Failed to create site: ${error.message}`);
} finally {

448
frontend/src/components/sites/WordPressIntegrationForm.tsx Normal file
View File

@@ -0,0 +1,448 @@
/**
* WordPress Integration Form Component
* Inline form for WordPress integration with API key generation and plugin download
*/
import React, { useState, useEffect } from 'react';
import { Card } from '../ui/card';
import Button from '../ui/button/Button';
import Label from '../form/Label';
import Input from '../form/input/Input';
import Checkbox from '../form/input/Checkbox';
import Alert from '../ui/alert/Alert';
import { useToast } from '../ui/toast/ToastContainer';
import { integrationApi, SiteIntegration } from '../../services/integration.api';
import {
Globe,
Key,
Download,
Copy,
CheckCircle,
AlertCircle,
ExternalLink,
RefreshCw
} from 'lucide-react';
interface WordPressIntegrationFormProps {
siteId: number;
integration: SiteIntegration | null;
onIntegrationUpdate?: (integration: SiteIntegration) => void;
}
export default function WordPressIntegrationForm({
siteId,
integration,
onIntegrationUpdate,
}: WordPressIntegrationFormProps) {
const toast = useToast();
const [loading, setLoading] = useState(false);
const [generatingKey, setGeneratingKey] = useState(false);
const [apiKey, setApiKey] = useState<string>('');
const [apiKeyVisible, setApiKeyVisible] = useState(false);
const [formData, setFormData] = useState({
url: integration?.config_json?.site_url || '',
username: integration?.credentials_json?.username || '',
app_password: '',
is_active: integration?.is_active ?? true,
sync_enabled: integration?.sync_enabled ?? true,
});
useEffect(() => {
if (integration) {
setFormData({
url: integration.config_json?.site_url || '',
username: integration.credentials_json?.username || '',
app_password: '',
is_active: integration.is_active ?? true,
sync_enabled: integration.sync_enabled ?? true,
});
// Load API key if it exists
if (integration.credentials_json?.api_key) {
setApiKey(integration.credentials_json.api_key);
}
}
}, [integration]);
const handleGenerateApiKey = async () => {
try {
setGeneratingKey(true);
// Generate API key - format: igny8_site_{siteId}_{timestamp}_{random}
// This will be stored in the integration credentials
const timestamp = Date.now();
const random = Math.random().toString(36).substring(2, 15);
const token = `igny8_site_${siteId}_${timestamp}_${random}`;
setApiKey(token);
setApiKeyVisible(true);
toast.success('API key generated successfully. Make sure to save the integration to store this key.');
} catch (error: any) {
toast.error(`Failed to generate API key: ${error.message}`);
} finally {
setGeneratingKey(false);
}
};
const handleCopyApiKey = () => {
if (apiKey) {
navigator.clipboard.writeText(apiKey);
toast.success('API key copied to clipboard');
}
};
const handleDownloadPlugin = () => {
// TODO: Replace with actual plugin download URL
const pluginUrl = `https://github.com/igny8/igny8-wp-bridge/releases/latest/download/igny8-wp-bridge.zip`;
window.open(pluginUrl, '_blank');
toast.success('Plugin download started');
};
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!formData.url || !formData.username || !formData.app_password) {
toast.error('Please fill in all required fields');
return;
}
if (!apiKey) {
toast.error('Please generate an API key first');
return;
}
try {
setLoading(true);
// Save integration with API key in credentials
const updatedIntegration = await integrationApi.saveWordPressIntegration(siteId, {
url: formData.url,
username: formData.username,
app_password: formData.app_password,
api_key: apiKey, // Include API key in credentials
is_active: formData.is_active,
sync_enabled: formData.sync_enabled,
});
if (onIntegrationUpdate) {
onIntegrationUpdate(updatedIntegration);
}
toast.success('WordPress integration saved successfully');
} catch (error: any) {
toast.error(`Failed to save integration: ${error.message}`);
} finally {
setLoading(false);
}
};
const handleTestConnection = async () => {
if (!integration?.id) {
toast.error('Please save the integration first');
return;
}
try {
setLoading(true);
const result = await integrationApi.testIntegration(integration.id);
if (result.success) {
toast.success('Connection test successful');
} else {
toast.error(`Connection test failed: ${result.message}`);
}
} catch (error: any) {
toast.error(`Connection test failed: ${error.message}`);
} finally {
setLoading(false);
}
};
return (
<div className="space-y-6">
{/* Header */}
<div className="flex items-center gap-3">
<div className="p-3 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg">
<Globe className="w-6 h-6 text-indigo-600 dark:text-indigo-400" />
</div>
<div>
<h2 className="text-xl font-semibold text-gray-900 dark:text-white">
WordPress Integration
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Connect your WordPress site using the IGNY8 WP Bridge plugin
</p>
</div>
</div>
{/* Integration Guide */}
<Alert
variant="info"
title="Integration Steps"
className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
>
<ol className="list-decimal list-inside space-y-2 text-sm text-gray-700 dark:text-gray-300">
<li>Generate an API key for your site</li>
<li>Download and install the IGNY8 WP Bridge plugin</li>
<li>Enter your WordPress site URL and credentials</li>
<li>Configure the plugin with your API key</li>
</ol>
</Alert>
{/* API Key Section */}
<Card className="p-6">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Key className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
API Key
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Generate an API key to authenticate the WordPress plugin with IGNY8
</p>
</div>
<Button
onClick={handleGenerateApiKey}
variant="primary"
disabled={generatingKey || !!apiKey}
>
{generatingKey ? (
<>
<RefreshCw className="w-4 h-4 mr-2 animate-spin" />
Generating...
</>
) : apiKey ? (
<>
<CheckCircle className="w-4 h-4 mr-2" />
Generated
</>
) : (
<>
<Key className="w-4 h-4 mr-2" />
Generate API Key
</>
)}
</Button>
</div>
{apiKey && (
<div className="space-y-3">
<div>
<Label>Your API Key</Label>
<div className="flex items-center gap-2 mt-1">
<Input
type={apiKeyVisible ? 'text' : 'password'}
value={apiKey}
readOnly
className="font-mono text-sm"
/>
<Button
onClick={() => setApiKeyVisible(!apiKeyVisible)}
variant="outline"
size="sm"
>
{apiKeyVisible ? 'Hide' : 'Show'}
</Button>
<Button
onClick={handleCopyApiKey}
variant="outline"
size="sm"
>
<Copy className="w-4 h-4" />
</Button>
</div>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Keep this key secure. You'll need it to configure the WordPress plugin.
</p>
</div>
</div>
)}
</div>
</Card>
{/* Plugin Download Section */}
{apiKey && (
<Card className="p-6">
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
<Download className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
IGNY8 WP Bridge Plugin
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
Download and install the plugin on your WordPress site
</p>
</div>
<Button
onClick={handleDownloadPlugin}
variant="primary"
>
<Download className="w-4 h-4 mr-2" />
Download Plugin
</Button>
</div>
<Alert
variant="info"
className="bg-blue-50 dark:bg-blue-900/20 border-blue-200 dark:border-blue-800"
>
<div className="space-y-2 text-sm text-gray-700 dark:text-gray-300">
<p className="font-medium">Installation Instructions:</p>
<ol className="list-decimal list-inside space-y-1 ml-2">
<li>Download the plugin ZIP file</li>
<li>Go to WordPress Admin → Plugins → Add New</li>
<li>Click "Upload Plugin" and select the ZIP file</li>
<li>Activate the plugin</li>
<li>Go to Settings → IGNY8 Bridge and enter your API key</li>
</ol>
</div>
</Alert>
</div>
</Card>
)}
{/* WordPress Credentials Form */}
<Card className="p-6">
<form onSubmit={handleSubmit} className="space-y-6">
<div>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4">
WordPress Site Configuration
</h3>
</div>
<div>
<Label htmlFor="url" required>
WordPress Site URL
</Label>
<Input
id="url"
type="url"
value={formData.url}
onChange={(e) => setFormData({ ...formData, url: e.target.value })}
placeholder="https://example.com"
required
className="mt-1"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Enter your WordPress site URL (with https://)
</p>
</div>
<div>
<Label htmlFor="username" required>
WordPress Username
</Label>
<Input
id="username"
type="text"
value={formData.username}
onChange={(e) => setFormData({ ...formData, username: e.target.value })}
placeholder="admin"
required
className="mt-1"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
WordPress administrator username
</p>
</div>
<div>
<Label htmlFor="app_password" required>
Application Password
</Label>
<Input
id="app_password"
type="password"
value={formData.app_password}
onChange={(e) => setFormData({ ...formData, app_password: e.target.value })}
placeholder="xxxx xxxx xxxx xxxx xxxx xxxx"
required
className="mt-1"
/>
<p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
Create an Application Password in WordPress: Users → Profile → Application Passwords
</p>
</div>
<div className="space-y-3 pt-2 border-t border-gray-200 dark:border-gray-700">
<Checkbox
id="is_active"
checked={formData.is_active}
onChange={(e) => setFormData({ ...formData, is_active: e.target.checked })}
label="Enable Integration"
/>
<Checkbox
id="sync_enabled"
checked={formData.sync_enabled}
onChange={(e) => setFormData({ ...formData, sync_enabled: e.target.checked })}
label="Enable Two-Way Sync"
/>
</div>
<div className="flex items-center justify-end gap-3 pt-4 border-t border-gray-200 dark:border-gray-700">
{integration && (
<Button
type="button"
variant="outline"
onClick={handleTestConnection}
disabled={loading}
>
<RefreshCw className={`w-4 h-4 mr-2 ${loading ? 'animate-spin' : ''}`} />
Test Connection
</Button>
)}
<Button type="submit" variant="primary" disabled={loading || !apiKey}>
{loading ? 'Saving...' : integration ? 'Update Integration' : 'Connect WordPress'}
</Button>
</div>
</form>
</Card>
{/* Integration Status */}
{integration && (
<Card className="p-6">
<div className="space-y-4">
<h3 className="text-lg font-semibold text-gray-900 dark:text-white">
Integration Status
</h3>
<div className="grid grid-cols-2 gap-4">
<div>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Status</p>
<div className="flex items-center gap-2">
{integration.is_active ? (
<CheckCircle className="w-4 h-4 text-green-500" />
) : (
<AlertCircle className="w-4 h-4 text-gray-400" />
)}
<span className="text-sm font-medium text-gray-900 dark:text-white">
{integration.is_active ? 'Active' : 'Inactive'}
</span>
</div>
</div>
<div>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Sync Status</p>
<div className="flex items-center gap-2">
{integration.sync_status === 'success' ? (
<CheckCircle className="w-4 h-4 text-green-500" />
) : integration.sync_status === 'failed' ? (
<AlertCircle className="w-4 h-4 text-red-500" />
) : (
<RefreshCw className="w-4 h-4 text-yellow-500 animate-spin" />
)}
<span className="text-sm font-medium text-gray-900 dark:text-white capitalize">
{integration.sync_status || 'Pending'}
</span>
</div>
</div>
</div>
{integration.last_sync_at && (
<div>
<p className="text-xs text-gray-500 dark:text-gray-400 mb-1">Last Sync</p>
<p className="text-sm text-gray-900 dark:text-white">
{new Date(integration.last_sync_at).toLocaleString()}
</p>
</div>
)}
</div>
</Card>
)}
</div>
);
}

4
frontend/src/context/ThemeContext.tsx
View File

@@ -1,4 +1,4 @@
import React, { createContext, useState, useContext, useEffect } from "react";
import { createContext, useState, useContext, useEffect, type FC, type ReactNode } from "react";
type Theme = "light" | "dark";
@@ -9,7 +9,7 @@ type ThemeContextType = {
const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
export const ThemeProvider: FC<{ children: ReactNode }> = ({
children,
}) => {
const [theme, setTheme] = useState<Theme>("light");

2
frontend/src/pages/Dashboard/Home.tsx
View File

@@ -1187,7 +1187,7 @@ export default function Home() {
</Link>
</div>
</ComponentCard>
1
{/* Key Metrics */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<EnhancedMetricCard

60
frontend/src/pages/Sites/Settings.tsx
View File

@@ -15,8 +15,7 @@ import Checkbox from '../../components/form/input/Checkbox';
import TextArea from '../../components/form/input/TextArea';
import { useToast } from '../../components/ui/toast/ToastContainer';
import { fetchAPI } from '../../services/api';
import WordPressIntegrationCard from '../../components/sites/WordPressIntegrationCard';
import WordPressIntegrationModal, { WordPressIntegrationFormData } from '../../components/sites/WordPressIntegrationModal';
import WordPressIntegrationForm from '../../components/sites/WordPressIntegrationForm';
import { integrationApi, SiteIntegration } from '../../services/integration.api';
import { GridIcon, PlugInIcon, PaperPlaneIcon, DocsIcon, BoltIcon } from '../../icons';
@@ -30,7 +29,6 @@ export default function SiteSettings() {
const [site, setSite] = useState<any>(null);
const [wordPressIntegration, setWordPressIntegration] = useState<SiteIntegration | null>(null);
const [integrationLoading, setIntegrationLoading] = useState(false);
const [isIntegrationModalOpen, setIsIntegrationModalOpen] = useState(false);
// Check for tab parameter in URL
const initialTab = (searchParams.get('tab') as 'general' | 'seo' | 'og' | 'schema' | 'integrations') || 'general';
@@ -124,26 +122,11 @@ export default function SiteSettings() {
}
};
const handleSaveIntegration = async (data: WordPressIntegrationFormData) => {
if (!siteId) return;
await integrationApi.saveWordPressIntegration(Number(siteId), data);
const handleIntegrationUpdate = async (integration: SiteIntegration) => {
setWordPressIntegration(integration);
await loadIntegrations();
};
const handleSyncIntegration = async () => {
if (!wordPressIntegration || !siteId) return;
try {
setIntegrationLoading(true);
await integrationApi.syncIntegration(wordPressIntegration.id);
toast.success('Content synced successfully');
await loadIntegrations();
} catch (error: any) {
toast.error(`Failed to sync: ${error.message}`);
} finally {
setIntegrationLoading(false);
}
};
const handleSave = async () => {
try {
setSaving(true);
@@ -553,17 +536,12 @@ export default function SiteSettings() {
)}
{/* Integrations Tab */}
{activeTab === 'integrations' && (
<div className="space-y-6">
<WordPressIntegrationCard
integration={wordPressIntegration}
onConnect={() => setIsIntegrationModalOpen(true)}
onManage={() => setIsIntegrationModalOpen(true)}
onSync={handleSyncIntegration}
loading={integrationLoading}
siteId={siteId}
/>
</div>
{activeTab === 'integrations' && siteId && (
<WordPressIntegrationForm
siteId={Number(siteId)}
integration={wordPressIntegration}
onIntegrationUpdate={handleIntegrationUpdate}
/>
)}
{/* Save Button */}
@@ -576,26 +554,6 @@ export default function SiteSettings() {
)}
</div>
{/* WordPress Integration Modal */}
{siteId && (
<WordPressIntegrationModal
isOpen={isIntegrationModalOpen}
onClose={() => setIsIntegrationModalOpen(false)}
onSubmit={handleSaveIntegration}
siteId={Number(siteId)}
initialData={
wordPressIntegration
? {
url: wordPressIntegration.config_json?.site_url || '',
username: wordPressIntegration.credentials_json?.username || '',
app_password: '', // Never show password
is_active: wordPressIntegration.is_active,
sync_enabled: wordPressIntegration.sync_enabled,
}
: undefined
}
/>
)}
</div>
);
}

16
frontend/src/services/integration.api.ts
View File

@@ -116,12 +116,23 @@ export const integrationApi = {
url: string;
username: string;
app_password: string;
api_key?: string;
is_active?: boolean;
sync_enabled?: boolean;
}
): Promise<SiteIntegration> {
const existing = await this.getWordPressIntegration(siteId);
const credentials: Record<string, string> = {
username: data.username,
app_password: data.app_password,
};
// Include API key if provided
if (data.api_key) {
credentials.api_key = data.api_key;
}
const integrationData: CreateIntegrationData = {
site: siteId,
platform: 'wordpress',
@@ -129,10 +140,7 @@ export const integrationApi = {
config_json: {
site_url: data.url,
},
credentials_json: {
username: data.username,
app_password: data.app_password,
},
credentials_json: credentials,
is_active: data.is_active ?? true,
sync_enabled: data.sync_enabled ?? true,
};

8
frontend/vite.config.ts
View File

@@ -106,6 +106,14 @@ export default defineConfig(({ mode, command }) => {
},
}),
],
// Resolve configuration to prevent duplicate React instances
resolve: {
dedupe: ['react', 'react-dom'],
alias: {
react: resolve(__dirname, 'node_modules/react'),
'react-dom': resolve(__dirname, 'node_modules/react-dom'),
},
},
// Optimize dependency pre-bundling
optimizeDeps: {
include: [