41 KiB
PHASES 5-7 & 9: SITES RENDERER, INTEGRATION & UI
Consolidated Implementation Plan
Goal: Build Sites renderer, multi-destination publishing, comprehensive UI system, and Site Builder enhancements.
Timeline: 8.5-11 weeks
Priority: MEDIUM
Dependencies: Phase 0, Phase 1, Phase 3
TABLE OF CONTENTS
- Executive Summary
- Phase 5: Sites Renderer & Bulk Generation
- Phase 6: Site Integration & Multi-Destination Publishing
- Phase 7: UI Components & Prompt Management
- Cross-Phase Integration
- Testing & Validation
- Implementation Checklist
- Success Criteria
EXECUTIVE SUMMARY
This document consolidates Phases 5, 6, 7, and 9 into a unified implementation plan:
- Phase 5: Sites Renderer for hosting public sites + Bulk page generation from Site Builder
- Phase 6: Multi-destination publishing (WordPress, Sites, Shopify) + Site integrations + Enhanced task queuing
- Phase 7: Complete UI component library + Prompt management UI + Advanced site management + CMS styling
Key Exclusions (Already Implemented):
- ✅ Module Settings UI (implemented in Phase 0)
- ✅ Module Guard component (implemented in Phase 0)
- ✅ Conditional route loading (implemented in Phase 0)
- ✅ Sidebar module filtering (implemented in Phase 0)
- ✅ GenerateSiteStructureFunction (implemented in Phase 3)
- ✅ Single page generation (implemented in Phase 3)
- ✅ File management service (implemented in Phase 3)
PHASE 5: SITES RENDERER & BULK GENERATION
Timeline: 2.5-3.5 weeks
Dependencies: Phase 3
5.1 Overview
Objectives:
- Create Sites renderer container for hosting public sites
- Build publisher service and deployment infrastructure
- Support multiple layout options (7 layout types)
- Enable bulk page content generation from Site Builder
- Deploy sites to public URLs
- Render sites from site definitions
Key Principles:
- Component Reuse: Use shared component library from Phase 3
- Multiple Layouts: Support 7 layout types
- Public Access: Sites accessible via public URLs
- User-Friendly: "My Websites" or "Published Sites" in UI
- Bulk Operations: Generate all pages at once before publishing
5.2 Sites Renderer Container
User-Friendly Name: "My Websites" or "Published Sites"
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Create Sites Container | docker-compose.app.yml |
None | Add new container for sites renderer |
| Sites Renderer Frontend | sites/src/ |
NEW | React app for rendering sites |
| Site Definition Loader | sites/src/loaders/loadSiteDefinition.ts |
NEW | Load site definitions from API |
| Layout Renderer | sites/src/utils/layoutRenderer.ts |
NEW | Render different layouts |
| Template System | sites/src/utils/templateEngine.ts |
NEW | Template rendering system |
| File Access Integration | sites/src/utils/fileAccess.ts |
Phase 3 | Integrate Phase 3's SiteBuilderFileService |
| Component Import | sites/src/components/ |
Phase 3 | Import shared components from frontend/src/components/shared/ |
Docker Compose Configuration:
# docker-compose.app.yml
igny8_sites:
build: ./sites
ports:
- "8024:5176"
volumes:
- /data/app/igny8/sites:/app
- /data/app/sites-data:/sites
environment:
- VITE_API_URL=http://igny8_backend:8010
File Access Integration:
- Sites Renderer must access site assets from
/data/app/sites-data/clients/{site_id}/v{version}/assets/ - Use Phase 3's
SiteBuilderFileServicefor file access patterns - Ensure Sites Renderer can load images, documents, and media files
5.3 Publisher Service
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| PublisherService | business/publishing/services/publisher_service.py |
Phase 1 | Main publishing service |
| SitesRendererAdapter | business/publishing/services/adapters/sites_renderer_adapter.py |
Phase 3 | Adapter for Sites renderer |
| DeploymentService | business/publishing/services/deployment_service.py |
Phase 3 | Deploy sites to renderer |
PublisherService Structure:
# business/publishing/services/publisher_service.py
class PublisherService:
def publish_to_sites(self, site_blueprint):
"""Publish site to Sites renderer"""
adapter = SitesRendererAdapter()
return adapter.deploy(site_blueprint)
def get_deployment_status(self, site_blueprint):
"""Get deployment status for a site"""
return DeploymentService().get_status(site_blueprint)
SitesRendererAdapter:
- Write site definition to filesystem (
/data/app/sites-data/) - Update deployment records
- Handle versioning
- Support rollback
DeploymentService:
- Manage deployment lifecycle
- Track deployment versions
- Handle deployment errors
- Support rollback capability
5.4 Publishing Models
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| PublishingRecord Model | business/publishing/models.py |
Phase 1 | Track content publishing |
| DeploymentRecord Model | business/publishing/models.py |
Phase 3 | Track site deployments |
PublishingRecord Model:
class PublishingRecord(SiteSectorBaseModel):
content = models.ForeignKey(Content, on_delete=models.CASCADE, null=True)
site_blueprint = models.ForeignKey(SiteBlueprint, on_delete=models.CASCADE, null=True)
destination = models.CharField(max_length=50) # 'wordpress', 'sites', 'shopify'
destination_id = models.CharField(max_length=255) # External ID
status = models.CharField(max_length=20) # 'pending', 'published', 'failed'
published_at = models.DateTimeField(null=True, blank=True)
metadata = models.JSONField(default=dict)
DeploymentRecord Model:
class DeploymentRecord(SiteSectorBaseModel):
site_blueprint = models.ForeignKey(SiteBlueprint, on_delete=models.CASCADE)
version = models.IntegerField()
deployed_version = models.IntegerField()
status = models.CharField(max_length=20) # 'deploying', 'deployed', 'failed'
deployed_at = models.DateTimeField(null=True, blank=True)
deployment_url = models.URLField(blank=True, null=True)
metadata = models.JSONField(default=dict)
5.5 Publisher API
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Publisher ViewSet | modules/publisher/views.py |
PublisherService | API for publishing operations |
Publisher API Endpoints:
POST /api/v1/publisher/publish/- Publish content or siteGET /api/v1/publisher/status/{id}/- Get publishing statusPOST /api/v1/publisher/deploy/{blueprint_id}/- Deploy site to rendererGET /api/v1/publisher/deployments/- List deployments
5.6 Multiple Layout Options
Layout Types (7 total):
- Default (Standard)
- Minimal (Clean, simple)
- Magazine (Editorial, content-focused)
- Ecommerce (Product-focused)
- Portfolio (Showcase)
- Blog (Content-first)
- Corporate (Business)
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Layout Configuration | business/site_building/models.py |
Phase 3 | Store layout selection in SiteBlueprint |
| Layout Renderer | sites/src/utils/layoutRenderer.ts |
Phase 5 | Render different layouts |
| Layout Components | sites/src/components/layouts/ |
Phase 3 | Import from shared library |
Layout Storage:
- Store
layout_typeinSiteBlueprint.config_jsonor as separate field - Sites Renderer reads layout type and renders appropriate layout component
- Layout components from Phase 3 shared library
5.7 Bulk Page Generation (From Phase 9)
Purpose: Enable bulk generation of all pages from a Site Builder blueprint before publishing.
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Bulk Generate Service | business/site_building/services/page_generation_service.py |
Phase 3 | Add bulk_generate_pages() method |
| Task Creation Service | business/site_building/services/page_generation_service.py |
Phase 3 | Add create_tasks_for_pages() method |
| Bulk Generate API | modules/site_builder/views.py |
PageGenerationService | Add generate_all_pages action |
| Bulk Generate UI | site-builder/src/pages/dashboard/SiteDashboard.tsx |
API client | Add "Generate All Pages" button |
| Page Selection UI | site-builder/src/pages/preview/PreviewCanvas.tsx |
State store | Add checkbox selection for pages |
| Progress Tracking | site-builder/src/components/common/ProgressModal.tsx |
Existing | Track bulk generation progress |
Bulk Generation Service:
# business/site_building/services/page_generation_service.py
class PageGenerationService:
def bulk_generate_pages(
self,
site_blueprint: SiteBlueprint,
page_ids: Optional[List[int]] = None,
force_regenerate: bool = False
) -> dict:
"""
Generate content for multiple pages in a blueprint.
Similar to how ideas are queued to writer:
1. Get pages (filtered by page_ids if provided)
2. Create/update Writer Tasks for each page
3. Queue content generation for all tasks
4. Return task IDs for progress tracking
"""
pages = site_blueprint.pages.all()
if page_ids:
pages = pages.filter(id__in=page_ids)
task_ids = []
for page in pages:
task = self._ensure_task(page, force_regenerate=force_regenerate)
task_ids.append(task.id)
page.status = 'generating'
page.save(update_fields=['status', 'updated_at'])
account = site_blueprint.account
result = self.content_service.generate_content(task_ids, account)
return {
'success': True,
'pages_queued': len(task_ids),
'task_ids': task_ids,
'celery_task_id': result.get('task_id'),
}
def create_tasks_for_pages(
self,
site_blueprint: SiteBlueprint,
page_ids: Optional[List[int]] = None,
force_regenerate: bool = False
) -> List[Tasks]:
"""
Create Writer Tasks for blueprint pages without generating content.
Useful for:
- Previewing what tasks will be created
- Manual task management
- Integration with existing Writer UI
"""
pages = site_blueprint.pages.all()
if page_ids:
pages = pages.filter(id__in=page_ids)
tasks = []
for page in pages:
task = self._ensure_task(page, force_regenerate=force_regenerate)
tasks.append(task)
return tasks
Bulk Generation API:
# modules/site_builder/views.py
class SiteBlueprintViewSet(SiteSectorModelViewSet):
@action(detail=True, methods=['post'])
def generate_all_pages(self, request, pk=None):
"""
Generate content for all pages in blueprint.
Request body:
{
"page_ids": [1, 2, 3], # Optional: specific pages, or all if omitted
"force": false # Optional: force regenerate existing content
}
"""
blueprint = self.get_object()
page_ids = request.data.get('page_ids')
force = request.data.get('force', False)
service = PageGenerationService()
result = service.bulk_generate_pages(
blueprint,
page_ids=page_ids,
force_regenerate=force
)
return success_response(result, request=request)
@action(detail=True, methods=['post'])
def create_tasks(self, request, pk=None):
"""Create Writer tasks for pages without generating content"""
blueprint = self.get_object()
page_ids = request.data.get('page_ids')
service = PageGenerationService()
tasks = service.create_tasks_for_pages(blueprint, page_ids=page_ids)
serializer = TasksSerializer(tasks, many=True)
return success_response({'tasks': serializer.data}, request=request)
Frontend API Client:
// site-builder/src/api/builder.api.ts
export const builderApi = {
async generateAllPages(
blueprintId: number,
options?: { pageIds?: number[]; force?: boolean }
): Promise<{ task_id: string; pages_queued: number }> {
const res = await client.post(
`/blueprints/${blueprintId}/generate_all_pages/`,
options || {}
);
return res.data;
},
async createTasksForPages(
blueprintId: number,
pageIds?: number[]
): Promise<{ tasks: Task[] }> {
const res = await client.post(
`/blueprints/${blueprintId}/create_tasks/`,
{ page_ids: pageIds }
);
return res.data;
},
};
5.8 Phase 5 Testing
Test Cases:
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works (images, documents, media)
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts work correctly
- ✅ Bulk page generation works
- ✅ Progress tracking works
- ✅ Task creation works correctly
PHASE 6: SITE INTEGRATION & MULTI-DESTINATION PUBLISHING
Timeline: 2.5-3 weeks
Dependencies: Phase 5
6.1 Overview
Objectives:
- Support multiple site integrations per site
- Multi-destination publishing (WordPress, Sites, Shopify)
- Two-way sync with external platforms
- Site management UI (Core CMS features)
- Publishing settings UI
- Enhanced blueprint-to-writer task integration
Key Principles:
- Multiple Integrations: One site can have multiple integrations
- Adapter Pattern: Platform-specific adapters for publishing
- Two-Way Sync: Sync content both ways
- User-Friendly: "Site Manager" or "Content Manager" in UI
6.2 Site Integration Models
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| SiteIntegration Model | business/integration/models.py |
Phase 1 | Store integration configs |
SiteIntegration Model:
# business/integration/models.py
class SiteIntegration(SiteSectorBaseModel):
site = models.ForeignKey(Site, on_delete=models.CASCADE)
platform = models.CharField(max_length=50) # 'wordpress', 'shopify', 'custom'
platform_type = models.CharField(max_length=50) # 'cms', 'ecommerce', 'custom_api'
config_json = models.JSONField(default=dict)
credentials = models.EncryptedField() # Encrypted API keys
is_active = models.BooleanField(default=True)
sync_enabled = models.BooleanField(default=False)
last_sync_at = models.DateTimeField(null=True, blank=True)
sync_status = models.CharField(max_length=20) # 'success', 'failed', 'pending'
class Meta:
db_table = 'igny8_site_integrations'
unique_together = [['site', 'platform']]
6.3 Integration Service
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| IntegrationService | business/integration/services/integration_service.py |
Phase 1 | Manage integrations |
| SyncService | business/integration/services/sync_service.py |
Phase 1 | Handle two-way sync |
| ContentSyncService | business/integration/services/content_sync_service.py |
Phase 1 | Sync content from external platforms |
IntegrationService:
- CRUD operations for SiteIntegration
- Integration validation
- Credential management (encrypted)
- Connection testing
SyncService:
- Two-way sync logic
- Sync status tracking
- Error handling
- Sync logging
ContentSyncService:
- Sync content from WordPress
- Sync content from Shopify
- Sync content from custom APIs
- Import content with source tracking
6.4 Publishing Adapters
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| BaseAdapter | business/publishing/services/adapters/base_adapter.py |
Phase 5 | Base adapter interface |
| WordPressAdapter | business/publishing/services/adapters/wordpress_adapter.py |
EXISTING (refactor) | WordPress publishing |
| SitesRendererAdapter | business/publishing/services/adapters/sites_renderer_adapter.py |
Phase 5 | IGNY8 Sites deployment |
| ShopifyAdapter | business/publishing/services/adapters/shopify_adapter.py |
Phase 5 (future) | Shopify publishing |
BaseAdapter Interface:
# business/publishing/services/adapters/base_adapter.py
class BaseAdapter(ABC):
@abstractmethod
def publish(self, content, destination_config):
"""Publish content to destination"""
pass
@abstractmethod
def test_connection(self, config):
"""Test connection to destination"""
pass
@abstractmethod
def get_status(self, published_id):
"""Get publishing status"""
pass
WordPressAdapter Refactor:
- Refactor existing WordPress publishing to use BaseAdapter
- Preserve all existing functionality
- Add adapter interface compliance
- Test backward compatibility
6.5 Multi-Destination Publishing
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Extend PublisherService | business/publishing/services/publisher_service.py |
Phase 5 | Support multiple destinations |
| Update PublishingRecord | business/publishing/models.py |
Phase 5 | Track multiple destinations |
Multi-Destination Publishing:
# business/publishing/services/publisher_service.py
class PublisherService:
def publish(self, content, destinations):
"""
Publish content to multiple destinations.
Args:
content: Content or SiteBlueprint to publish
destinations: List of destination configs
Returns:
List of publishing results
"""
results = []
for destination in destinations:
adapter = self.get_adapter(destination['platform'])
result = adapter.publish(content, destination)
results.append(result)
return results
def get_adapter(self, platform):
"""Get adapter for platform"""
adapters = {
'wordpress': WordPressAdapter(),
'sites': SitesRendererAdapter(),
'shopify': ShopifyAdapter(),
}
return adapters.get(platform)
PublishingRecord Updates:
- Support multiple destinations per content
- Track status per destination
- Store destination-specific metadata
6.6 Site Model Extensions
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Add site_type field | core/auth/models.py |
None | Track site type |
| Add hosting_type field | core/auth/models.py |
None | Track hosting type |
| Add integrations relationship | core/auth/models.py |
Phase 6.2 | Link to SiteIntegration |
Site Model Extensions:
# core/auth/models.py
class Site(SiteSectorBaseModel):
# Existing fields...
# NEW fields
site_type = models.CharField(
max_length=50,
choices=[
('marketing', 'Marketing Site'),
('ecommerce', 'Ecommerce Site'),
('blog', 'Blog'),
('portfolio', 'Portfolio'),
('corporate', 'Corporate'),
],
default='marketing'
)
hosting_type = models.CharField(
max_length=50,
choices=[
('igny8_sites', 'IGNY8 Sites'),
('wordpress', 'WordPress'),
('shopify', 'Shopify'),
('multi', 'Multi-Destination'),
],
default='igny8_sites'
)
6.7 Integration API
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Integration ViewSet | modules/integration/views.py |
IntegrationService | CRUD for integrations |
| Integration URLs | modules/integration/urls.py |
None | Register integration routes |
Integration API Endpoints:
GET /api/v1/integration/integrations/- List integrationsPOST /api/v1/integration/integrations/- Create integrationGET /api/v1/integration/integrations/{id}/- Get integrationPUT /api/v1/integration/integrations/{id}/- Update integrationDELETE /api/v1/integration/integrations/{id}/- Delete integrationPOST /api/v1/integration/integrations/{id}/test/- Test connectionPOST /api/v1/integration/integrations/{id}/sync/- Trigger sync
6.8 Integration UI (Update Existing)
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Update Integration Settings | frontend/src/pages/Settings/Integration.tsx |
EXISTING (update) | Add SiteIntegration support |
| Multi-Platform Support | frontend/src/components/integration/PlatformSelector.tsx |
NEW | Platform selector |
| Integration Status | frontend/src/components/integration/IntegrationStatus.tsx |
NEW | Show integration status |
Integration UI Features:
- Show multiple integrations per site
- Add WordPress, Shopify, Custom API options
- Two-way sync toggle
- Connection testing
- Sync status display
- Last sync timestamp
6.9 Publishing Settings UI
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Publishing Settings Page | frontend/src/pages/Settings/Publishing.tsx |
NEW | Publishing configuration |
| Destination Management | frontend/src/pages/Settings/Publishing.tsx |
Phase 6 | Manage publishing destinations |
| Publishing Rules | frontend/src/components/publishing/PublishingRules.tsx |
NEW | Publishing rules configuration |
| Auto-Publish Settings | frontend/src/components/publishing/AutoPublishSettings.tsx |
NEW | Auto-publish configuration |
Publishing Settings Features:
- Configure default publishing destinations
- Set up publishing rules (auto-publish, manual, scheduled)
- Manage destination priorities
- Configure auto-publish triggers
6.10 Site Management UI (Core CMS)
User-Friendly Name: "Site Manager" or "Content Manager"
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Site Management Dashboard | frontend/src/pages/Sites/Manage.tsx |
NEW | Site management overview |
| Site Content Editor | frontend/src/pages/Sites/Editor.tsx |
NEW | Edit site content |
| Post Editor | frontend/src/pages/Sites/PostEditor.tsx |
NEW | Edit posts |
| Page Manager | frontend/src/pages/Sites/PageManager.tsx |
NEW | Manage pages |
| Site Settings | frontend/src/pages/Sites/Settings.tsx |
NEW | Site settings |
Site Management Features (Core):
- View all pages/posts for a site
- Add new pages
- Remove pages
- Edit page content
- Manage page order
- Change page templates
- Update site settings
- Basic site preview
6.11 Enhanced Task Integration (From Phase 9)
Purpose: Better integration between Site Builder tasks and Writer UI.
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Show Site Builder Tasks | frontend/src/pages/Writer/Content.tsx |
Existing | Filter tasks with "[Site Builder]" prefix |
| Link to Blueprint | frontend/src/pages/Writer/Content.tsx |
API | Add link to source blueprint |
| Bulk Actions | frontend/src/pages/Writer/Content.tsx |
Existing | Include Site Builder tasks in bulk actions |
Task Identification:
- Tasks created from Site Builder have title prefix:
"[Site Builder] {page_title}" - Can filter Writer tasks by this prefix
- Can link back to source PageBlueprint via task description
Writer UI Enhancements:
- Filter by source (Site Builder, Ideas, Manual)
- Show source blueprint link
- Include in bulk operations
- Show page type and site name
6.12 Phase 6 Testing
Test Cases:
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works (when plugin connected)
- ✅ Two-way sync functions properly
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works
- ✅ Adapter pattern works correctly
PHASE 7: UI COMPONENTS & PROMPT MANAGEMENT
Timeline: 3.5-4.5 weeks
Dependencies: Phase 0, Phase 3, Phase 5
7.1 Overview
Objectives:
- Complete global component library
- Add prompt management UI for Site Builder
- Build advanced site management UI
- Create layout and template system
- Implement CMS styling system
Key Principles:
- No Duplication: All components shared across apps
- TypeScript: All components use TypeScript
- Accessibility: All components accessible (ARIA)
- Responsive: All components responsive
7.2 Global Component Library
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Component Library Structure | frontend/src/components/shared/ |
Phase 3 | Complete component library |
| Block Components | frontend/src/components/shared/blocks/ |
Phase 3 | All block components |
| Layout Components | frontend/src/components/shared/layouts/ |
Phase 3 | All layout components |
| Template Components | frontend/src/components/shared/templates/ |
Phase 3 | All template components |
| Component Documentation | frontend/src/components/shared/README.md |
None | Document all components |
| Component Storybook | frontend/.storybook/ |
Optional | Component documentation |
| Component Tests | frontend/src/components/shared/**/*.test.tsx |
None | Test all components |
Component Standards:
- All components use TypeScript
- All components have props interfaces
- All components are responsive
- All components support dark mode
- All components are accessible (ARIA)
- No duplicate components
Block Components to Complete:
- HeroBlock
- FeatureGridBlock
- StatsPanel
- ServicesBlock
- ProductsBlock
- TestimonialsBlock
- ContactFormBlock
- CTABlock
- ImageGalleryBlock
- VideoBlock
- TextBlock
- QuoteBlock
Layout Components to Complete (7 total):
- DefaultLayout
- MinimalLayout
- MagazineLayout
- EcommerceLayout
- PortfolioLayout
- BlogLayout
- CorporateLayout
Template Components to Complete:
- BlogTemplate
- BusinessTemplate
- PortfolioTemplate
- EcommerceTemplate
- LandingTemplate
- MarketingTemplate
7.3 Prompt Management UI (From Phase 9)
Purpose: Add Site Builder prompt to Thinker /prompts interface.
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Add prompt type to backend | modules/system/models.py |
Existing | Add 'site_structure_generation' to PROMPT_TYPE_CHOICES |
| Create migration | modules/system/migrations/XXXX_add_site_structure_prompt_type.py |
Existing | Add new choice to PROMPT_TYPE_CHOICES |
| Add prompt type to frontend | frontend/src/pages/Thinker/Prompts.tsx |
Existing | Add site_structure_generation to PROMPT_TYPES array |
| Add Site Builder section | frontend/src/pages/Thinker/Prompts.tsx |
Existing | Add "Site Builder" section to Prompts page |
| Add prompt editor | frontend/src/pages/Thinker/Prompts.tsx |
Existing | Add prompt editor for site structure generation |
Backend Model Update:
# modules/system/models.py
class AIPrompt(AccountBaseModel):
PROMPT_TYPE_CHOICES = [
('clustering', 'Clustering'),
('ideas', 'Ideas Generation'),
('content_generation', 'Content Generation'),
('image_prompt_extraction', 'Image Prompt Extraction'),
('image_prompt_template', 'Image Prompt Template'),
('negative_prompt', 'Negative Prompt'),
('site_structure_generation', 'Site Structure Generation'), # NEW
]
Frontend Prompt Type Config:
// frontend/src/pages/Thinker/Prompts.tsx
const PROMPT_TYPES = [
// ... existing prompts
{
key: 'site_structure_generation',
label: 'Site Structure Generation',
description: 'Generate site structure from business brief. Use [IGNY8_BUSINESS_BRIEF], [IGNY8_OBJECTIVES], [IGNY8_STYLE], and [IGNY8_SITE_INFO] to inject data.',
icon: '🏗️',
color: 'teal',
},
];
Prompt UI Section:
{/* Site Builder Prompts Section */}
<div className="mb-8">
<div className="mb-4">
<h2 className="text-xl font-semibold text-gray-800 dark:text-white">
Site Builder
</h2>
<p className="text-sm text-gray-600 dark:text-gray-400">
Configure prompts for AI-powered site structure generation
</p>
</div>
{/* Site Structure Generation Prompt */}
<PromptEditor
promptType="site_structure_generation"
label="Site Structure Generation Prompt"
description="Generate complete site structure (pages, blocks, navigation) from business brief"
variables={[
'[IGNY8_BUSINESS_BRIEF]',
'[IGNY8_OBJECTIVES]',
'[IGNY8_STYLE]',
'[IGNY8_SITE_INFO]'
]}
/>
</div>
7.4 Site Management UI (Advanced Features)
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Site List View | frontend/src/pages/Sites/List.tsx |
NEW | List all sites with filters |
| Site Dashboard | frontend/src/pages/Sites/Dashboard.tsx |
NEW | Site overview with stats |
| Site Content Manager | frontend/src/pages/Sites/Content.tsx |
NEW | Manage site content (posts/pages list) |
| Post Editor | frontend/src/pages/Sites/PostEditor.tsx |
NEW | Full-featured post editor |
| Page Manager | frontend/src/pages/Sites/Pages.tsx |
NEW | Advanced page management |
| Site Settings | frontend/src/pages/Sites/Settings.tsx |
NEW | Advanced site settings + SEO |
| Site Preview | frontend/src/pages/Sites/Preview.tsx |
NEW | Live site preview |
Site Management Features (Advanced):
- Site list with filters (type, status, integration)
- Site dashboard with statistics
- Content manager with search and filters
- Full-featured post/page editor
- Advanced page management (drag-drop reorder, bulk actions)
- SEO settings (meta tags, Open Graph, schema)
- Live site preview with iframe
- Site analytics integration
7.5 Layout & Template System
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Layout Selector | frontend/src/components/sites/LayoutSelector.tsx |
NEW | Select layout |
| Template Library | frontend/src/components/sites/TemplateLibrary.tsx |
NEW | Template library |
| Layout Preview | frontend/src/components/sites/LayoutPreview.tsx |
NEW | Preview layouts |
| Template Customizer | frontend/src/components/sites/TemplateCustomizer.tsx |
NEW | Customize templates |
| Style Editor | frontend/src/components/sites/StyleEditor.tsx |
NEW | Edit styles |
Layout Options (7 total):
- Default Layout
- Minimal Layout
- Magazine Layout
- Ecommerce Layout
- Portfolio Layout
- Blog Layout
- Corporate Layout
Template System:
- Pre-built templates
- Custom templates
- Template customization
- Style presets
- Color schemes
- Typography options
7.6 CMS Styling System
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| CMS Theme System | frontend/src/styles/cms/ |
NEW | Theme system |
| Style Presets | frontend/src/styles/cms/presets.ts |
NEW | Style presets |
| Color Schemes | frontend/src/styles/cms/colors.ts |
NEW | Color schemes |
| Typography System | frontend/src/styles/cms/typography.ts |
NEW | Typography system |
| Component Styles | frontend/src/styles/cms/components.ts |
NEW | Component styles |
CMS Features:
- Theme customization
- Color palette management
- Typography settings
- Component styling
- Responsive breakpoints
- Dark/light mode
7.7 Module Enhancements (Optional)
Note: Module Settings UI is already implemented in Phase 0. These are optional enhancements.
| Task | File | Dependencies | Implementation |
|---|---|---|---|
| Module Dependencies Check | frontend/src/components/settings/ModuleDependencies.tsx |
NEW | Show module dependencies |
| Module Usage Statistics | frontend/src/components/settings/ModuleStats.tsx |
NEW | Show module usage stats |
| Module Configuration UI | frontend/src/components/settings/ModuleConfig.tsx |
NEW | Per-module configuration |
Module Enhancement Features (Optional):
- Module dependencies check (warnings when disabling dependent modules)
- Module usage statistics (show usage per module)
- Module-specific configuration UI (per-module settings)
7.8 Phase 7 Testing
Test Cases:
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works
- ✅ No duplicate components
- ✅ All components are accessible
- ✅ All components are responsive
CROSS-PHASE INTEGRATION
Service Dependencies
Phase 5 Uses:
- Phase 3: Shared components, file management, SiteBlueprint/PageBlueprint models
- Phase 1: ContentGenerationService (for bulk generation)
- Phase 0: CreditService (for credit checks)
Phase 6 Uses:
- Phase 5: PublisherService, SitesRendererAdapter, DeploymentService
- Phase 3: SiteBlueprint models
- Phase 1: ContentGenerationService, ContentSyncService
- Phase 0: CreditService
Phase 7 Uses:
- Phase 3: Shared component library (completes it)
- Phase 5: Sites Renderer (for preview)
- Phase 6: Site Management (enhances it)
- Phase 0: Module Settings backend (adds UI enhancements)
Workflow Integration
Complete Site Workflow:
- User creates site blueprint via Site Builder (Phase 3)
- User generates all pages via bulk generation (Phase 5)
- Content generated via Writer (Phase 1)
- Site deployed to Sites Renderer (Phase 5)
- Site published to multiple destinations (Phase 6)
- Site managed via Site Management UI (Phase 6 & 7)
- Prompts managed via Thinker UI (Phase 7)
Content Publishing Workflow:
- Content generated in Writer (Phase 1)
- Content optimized via Optimizer (Phase 4)
- Content published to multiple destinations (Phase 6)
- Publishing tracked in PublishingRecord (Phase 5 & 6)
TESTING & VALIDATION
Phase 5 Testing
Sites Renderer Tests:
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works (images, documents, media)
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts work correctly
Bulk Generation Tests:
- ✅ Bulk page generation works
- ✅ Progress tracking works
- ✅ Task creation works correctly
- ✅ Selected pages can be generated
- ✅ Force regenerate works
Phase 6 Testing
Integration Tests:
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works (when plugin connected)
- ✅ Two-way sync functions properly
- ✅ Adapter pattern works correctly
Site Management Tests:
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works
- ✅ Content sync works
Phase 7 Testing
Component Library Tests:
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ No duplicate components
- ✅ All components are accessible
- ✅ All components are responsive
UI Tests:
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works
IMPLEMENTATION CHECKLIST
Phase 5: Sites Renderer & Bulk Generation
Backend Tasks
- Create PublisherService
- Create SitesRendererAdapter
- Create DeploymentService
- Create PublishingRecord model
- Create DeploymentRecord model
- Create Publisher ViewSet
- Add bulk_generate_pages() to PageGenerationService
- Add create_tasks_for_pages() to PageGenerationService
- Add generate_all_pages action to SiteBlueprintViewSet
- Add create_tasks action to SiteBlueprintViewSet
- Database migrations
Frontend Tasks
- Create Sites container in docker-compose
- Create sites renderer frontend
- Create site definition loader
- Create layout renderer
- Create template system
- Import shared components
- Integrate file access
- Add "Generate All Pages" button to Site Builder
- Add page selection UI
- Add progress tracking
- Add bulk generation API methods
Phase 6: Site Integration & Multi-Destination Publishing
Backend Tasks
- Create SiteIntegration model
- Create IntegrationService
- Create SyncService
- Create ContentSyncService
- Create BaseAdapter
- Refactor WordPressAdapter
- Create SitesRendererAdapter (if not done in Phase 5)
- Create ShopifyAdapter (skeleton)
- Extend PublisherService for multi-destination
- Extend Site model (site_type, hosting_type)
- Create Integration ViewSet
- Database migrations
Frontend Tasks
- Update Integration Settings page
- Create Publishing Settings page
- Create Site Management Dashboard (core)
- Create Site Content Editor (core)
- Create Page Manager (core)
- Create Site Settings (core)
- Create PlatformSelector component
- Create IntegrationStatus component
- Create PublishingRules component
- Update Writer UI for Site Builder tasks
Phase 7: UI Components & Prompt Management
Backend Tasks
- Add site_structure_generation to AIPrompt.PROMPT_TYPE_CHOICES
- Create migration for new prompt type
Frontend Tasks
- Complete component library (blocks, layouts, templates)
- Add site_structure_generation to PROMPT_TYPES
- Add "Site Builder" section to Prompts page
- Add prompt editor for site structure generation
- Create Site List View
- Create Site Dashboard (advanced)
- Create Site Content Manager (advanced)
- Create Post Editor (advanced)
- Create Page Manager (advanced)
- Create Site Settings (advanced + SEO)
- Create Site Preview
- Create Layout Selector
- Create Template Library
- Create Layout Preview
- Create Template Customizer
- Create Style Editor
- Create CMS Theme System
- Create Style Presets
- Create Color Schemes
- Create Typography System
- Create Component Styles
- Write component tests
- Write component documentation
SUCCESS CRITERIA
Phase 5 Success Criteria
- ✅ Sites renderer loads site definitions
- ✅ Blocks render correctly using shared components
- ✅ File access works
- ✅ Deployment works end-to-end
- ✅ Sites are accessible publicly
- ✅ Multiple layouts supported
- ✅ Bulk page generation works
- ✅ Progress tracking works
Phase 6 Success Criteria
- ✅ Site integrations work correctly
- ✅ Multi-destination publishing works
- ✅ WordPress sync works
- ✅ Two-way sync functions properly
- ✅ Site management UI works (core features)
- ✅ Publishing settings work
- ✅ Task integration works
Phase 7 Success Criteria
- ✅ All components render correctly
- ✅ Component library is complete
- ✅ Prompt management UI works
- ✅ Site management works end-to-end (advanced features)
- ✅ Layout system works
- ✅ Template system works
- ✅ CMS styling system works
- ✅ No duplicate components
- ✅ All components are accessible and responsive
TIMELINE SUMMARY
| Phase | Duration | Key Deliverables |
|---|---|---|
| Phase 5 | 2.5-3.5 weeks | Sites renderer, bulk generation |
| Phase 6 | 2.5-3 weeks | Multi-destination publishing, integrations |
| Phase 7 | 3.5-4.5 weeks | Component library, prompt UI, advanced site management |
| Total | 8.5-11 weeks | Complete Sites Renderer, Publishing, and UI system |
RISK ASSESSMENT
| Risk | Level | Mitigation |
|---|---|---|
| Component library incompatibility | MEDIUM | Early integration testing in Phase 5 |
| File management access issues | LOW | Use Phase 3's proven file service |
| WordPress adapter refactor breaking existing | MEDIUM | Comprehensive backward compatibility testing |
| Bulk generation overloads system | MEDIUM | Rate limiting, queue management |
| Multi-destination publishing complexity | MEDIUM | Adapter pattern, comprehensive testing |
| CMS styling system complexity | LOW | Incremental implementation, component-based |
RELATED PHASES
- Phase 0: Credit system, Module Settings (backend)
- Phase 1: Service layer (ContentGenerationService, etc.)
- Phase 3: Site Builder foundation, shared components, file management
- Phase 4: Linker & Optimizer (content optimization)
END OF PHASES 5-7 & 9 CONSOLIDATED DOCUMENT